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..832ca39b5
--- /dev/null
+++ b/dist/moveable.cjs.js
@@ -0,0 +1,2879 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.2.0
+*/
+'use strict';
+
+var EgComponent = require('@egjs/component');
+var frameworkUtils = require('framework-utils');
+var utils = require('@daybrush/utils');
+var drag = require('@daybrush/drag');
+
+/*! *****************************************************************************
+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);
+};
+
+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 != null) {
+    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 __());
+    };
+})();
+
+/*
+Copyright (c) 2019 Daybrush
+name: preact-compat2
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/preact-compat2.git
+version: 0.1.0
+*/
+
+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.3.3
+*/
+
+/*
+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.3.2
+*/
+
+/*! *****************************************************************************
+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) {
+      return subSelector.indexOf(":host") > -1 ? "" + subSelector.replace(/\:host/g, "." + className) : "." + 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.4.0
+*/
+
+/*
+Copyright (c) 2019 Daybrush
+name: react-moveable
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
+version: 0.5.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 __());
+}
+
+var PREFIX = "moveable-";
+var MOVEABLE_CSS = frameworkUtils.prefixCSS(PREFIX, "\n{\n    position: fixed;\n    width: 0;\n    height: 0;\n    left: 0;\n    top: 0;\n    z-index: 3000;\n}\n.line, .control {\n    left: 0;\n    top: 0;\n}\n.control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n}\n.line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n.line.rotation {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n.line.rotation .control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n.control.origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n}\n.control.e, .control.w {\n    cursor: ew-resize;\n}\n.control.s, .control.n {\n    cursor: ns-resize;\n}\n.control.nw, .control.se, :host.reverse .control.ne, :host.reverse .control.sw {\n    cursor: nwse-resize;\n}\n.control.ne, .control.sw, :host.reverse .control.nw, :host.reverse .control.se {\n    cursor: nesw-resize;\n}\n");
+
+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 caculate3x2(a, b) {
+  // 0 2 4
+  // 1 3 5
+  return [a[0] * b[0] + a[2] * b[1] + a[4] * b[2], a[1] * b[0] + a[3] * b[1] + a[5] * b[2]];
+}
+function multiple3x2(a, b) {
+  // 00 01 02
+  // 10 11 12
+  var a00 = a[0],
+      a10 = a[1],
+      a01 = a[2],
+      a11 = a[3],
+      a02 = a[4],
+      a12 = a[5];
+  var b00 = b[0],
+      b10 = b[1],
+      b01 = b[2],
+      b11 = b[3],
+      b02 = b[4],
+      b12 = b[5];
+  a[0] = a00 * b00 + a01 * b10;
+  a[1] = a10 * b00 + a11 * b10;
+  a[2] = a00 * b01 + a01 * b11;
+  a[3] = a10 * b01 + a11 * b11;
+  a[4] = a00 * b02 + a01 * b12 + a02 * 1;
+  a[5] = a10 * b02 + a11 * b12 + a12 * 1;
+  return a;
+}
+function invert3x2(a) {
+  // 00 01 02
+  // 10 11 12
+  // 20 21 22
+  var a00 = a[0],
+      a10 = a[1],
+      a01 = a[2],
+      a11 = a[3],
+      a02 = a[4],
+      a12 = a[5];
+  var a20 = 0;
+  var a21 = 0;
+  var a22 = 1;
+  var det = a00 * a11 * a22 + a01 * a12 * a20 + a02 * a10 * a21 - a02 * a11 * a20 - a01 * a10 * a22 - a00 * a12 * a21;
+  var b00 = a11 * a22 - a12 * a21;
+  var b01 = a02 * a21 - a01 * a22;
+  var b02 = a01 * a12 - a02 * a11;
+  var b10 = a12 * a20 - a10 * a22;
+  var b11 = a22 * a00 - a20 * a02;
+  var b12 = a02 * a10 - a00 * a12; // const b20 = a11 * a21 - a11 * a20;
+  // const b21 = a20 * a01 - a21 * a00;
+  // const b22 = a00 * a11 - a01 * a10;
+
+  a[0] = b00 / det;
+  a[1] = b10 / det;
+  a[2] = b01 / det;
+  a[3] = b11 / det;
+  a[4] = b02 / det;
+  a[5] = b12 / det;
+  return a;
+}
+function getTransform(target, isInit) {
+  var transform = window.getComputedStyle(target).transform;
+
+  if (transform === "none") {
+    if (isInit) {
+      return [1, 0, 0, 1, 0, 0];
+    }
+
+    return "none";
+  } else {
+    var value = utils.splitBracket(transform).value;
+    return value.split(/s*,\s*/g).map(function (v) {
+      return parseFloat(v);
+    });
+  }
+}
+function caculateMatrixStack(target) {
+  var el = target;
+  var matrixes = [];
+
+  while (el) {
+    matrixes.push(getTransform(el));
+    el = el.parentElement;
+  }
+
+  matrixes.reverse(); // 1 0 0
+  // 0 1 0
+
+  var mat = [1, 0, 0, 1, 0, 0];
+  var length = matrixes.length;
+  var beforeMatrix = [1, 0, 0, 1, 0, 0];
+  matrixes.forEach(function (matrix, i) {
+    if (length - 1 === i) {
+      beforeMatrix = mat.slice();
+    }
+
+    if (matrix !== "none") {
+      multiple3x2(mat, matrix);
+    }
+  });
+  beforeMatrix[4] = 0;
+  beforeMatrix[5] = 0;
+  mat[4] = 0;
+  mat[5] = 0;
+  return [beforeMatrix, mat];
+}
+function caculatePosition(matrix, origin, width, height) {
+  var _a = caculate3x2(matrix, [0, 0, 1]),
+      x1 = _a[0],
+      y1 = _a[1];
+
+  var _b = caculate3x2(matrix, [width, 0, 1]),
+      x2 = _b[0],
+      y2 = _b[1];
+
+  var _c = caculate3x2(matrix, [0, height, 1]),
+      x3 = _c[0],
+      y3 = _c[1];
+
+  var _d = caculate3x2(matrix, [width, height, 1]),
+      x4 = _d[0],
+      y4 = _d[1];
+
+  var _e = caculate3x2(matrix, [origin[0], origin[1], 1]),
+      originX = _e[0],
+      originY = _e[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;
+  return [[originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4]];
+}
+function caculateRotationMatrix(matrix, rad) {
+  var cos = Math.cos(rad);
+  var sin = Math.sin(rad);
+  var rotationMatrix = [cos, sin, -sin, cos, 0, 0];
+  return caculate3x2(rotationMatrix, matrix);
+}
+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 (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(origin, pos1, pos2) {
+  var pos1Rad = getRad(origin, pos1);
+  var pos2Rad = getRad(origin, pos2);
+  var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1;
+  var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+  var relativeRotationPos = caculateRotationMatrix([0, -40, 0], rotationRad);
+  var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]];
+  return [direction, rotationRad, rotationPos];
+}
+function getTargetInfo(target, container) {
+  var _a, _b, _c, _d;
+
+  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 = [1, 0, 0, 1, 0, 0];
+  var matrix = [1, 0, 0, 1, 0, 0];
+  var width = 0;
+  var height = 0;
+  var transformOrigin = [0, 0];
+  var direction = 1;
+  var rotationPos = [0, 0];
+  var rotationRad = 0;
+
+  if (target) {
+    var rect = target.getBoundingClientRect();
+    var style = window.getComputedStyle(target);
+    left = rect.left;
+    top = rect.top;
+    width = target.offsetWidth;
+    height = target.offsetHeight;
+
+    if (utils.isUndefined(width)) {
+      _a = getSize(target, style, true), width = _a[0], height = _a[1];
+    }
+
+    _b = caculateMatrixStack(target), beforeMatrix = _b[0], matrix = _b[1];
+    transformOrigin = style.transformOrigin.split(" ").map(function (pos) {
+      return parseFloat(pos);
+    });
+    _c = caculatePosition(matrix, transformOrigin, width, height), origin = _c[0], pos1 = _c[1], pos2 = _c[2], pos3 = _c[3], pos4 = _c[4];
+
+    if (container) {
+      var containerRect = container.getBoundingClientRect();
+      left -= containerRect.left;
+      top -= containerRect.top;
+    } // 1 : clockwise
+    // -1 : counterclockwise
+
+
+    _d = getRotationInfo(origin, pos1, pos2), direction = _d[0], rotationRad = _d[1], rotationPos = _d[2];
+  }
+
+  return {
+    direction: direction,
+    rotationRad: rotationRad,
+    rotationPos: rotationPos,
+    transform: "",
+    target: target,
+    left: left,
+    top: top,
+    pos1: pos1,
+    pos2: pos2,
+    pos3: pos3,
+    pos4: pos4,
+    width: width,
+    height: height,
+    beforeMatrix: beforeMatrix,
+    matrix: matrix,
+    origin: origin,
+    transformOrigin: transformOrigin
+  };
+}
+function getPosition(target) {
+  var position = target.getAttribute("data-position");
+
+  if (!position) {
+    return;
+  }
+
+  var pos = [0, 0];
+  position.indexOf("w") > -1 && (pos[0] = -1);
+  position.indexOf("e") > -1 && (pos[0] = 1);
+  position.indexOf("n") > -1 && (pos[1] = -1);
+  position.indexOf("s") > -1 && (pos[1] = 1);
+  return pos;
+}
+
+function getDraggableDragger(moveable, target) {
+  return drag.drag(target, {
+    container: window,
+    dragstart: function (_a) {
+      var datas = _a.datas;
+      var style = window.getComputedStyle(target);
+      var _b = moveable.state,
+          matrix = _b.matrix,
+          beforeMatrix = _b.beforeMatrix;
+      datas.matrix = invert3x2(matrix.slice());
+      datas.beforeMatrix = invert3x2(beforeMatrix.slice());
+      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 = style.transform;
+      datas.prevDist = [0, 0];
+      datas.prevBeforeDist = [0, 0];
+
+      if (datas.transform === "none") {
+        datas.transform = "";
+      }
+
+      return moveable.props.onDragStart({
+        target: target
+      });
+    },
+    drag: function (_a) {
+      var datas = _a.datas,
+          distX = _a.distX,
+          distY = _a.distY;
+      var beforeMatrix = datas.beforeMatrix,
+          matrix = datas.matrix,
+          prevDist = datas.prevDist,
+          prevBeforeDist = datas.prevBeforeDist;
+      var beforeDist = caculate3x2(beforeMatrix, [distX, distY, 1]);
+      var dist = caculate3x2(matrix, [distX, distY, 1]);
+      var delta = [dist[0] - prevDist[0], dist[1] - prevDist[1]];
+      var beforeDelta = [beforeDist[0] - prevBeforeDist[0], beforeDist[1] - prevBeforeDist[1]];
+      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 transform = datas.transform + " translate(" + dist[0] + "px, " + dist[1] + "px)";
+      moveable.props.onDrag({
+        target: target,
+        transform: transform,
+        dist: dist,
+        delta: delta,
+        beforeDist: beforeDist,
+        beforeDelta: beforeDelta,
+        left: left,
+        top: top,
+        right: right,
+        bottom: bottom
+      });
+      moveable.setState({
+        transform: "translate(" + distX + "px, " + distY + "px)"
+      });
+    },
+    dragend: function (_a) {
+      var isDrag = _a.isDrag;
+      moveable.props.onDragEnd({
+        target: target,
+        isDrag: isDrag
+      });
+
+      if (isDrag) {
+        moveable.updateRect();
+      }
+    }
+  });
+}
+
+function scaleStart(moveable, position, _a) {
+  var datas = _a.datas;
+  var target = moveable.props.target;
+
+  if (!position || !target) {
+    return false;
+  }
+
+  var style = window.getComputedStyle(target);
+  var _b = moveable.state,
+      matrix = _b.matrix,
+      beforeMatrix = _b.beforeMatrix,
+      width = _b.width,
+      height = _b.height,
+      left = _b.left,
+      top = _b.top,
+      transformOrigin = _b.transformOrigin,
+      origin = _b.origin;
+  datas.matrix = invert3x2(matrix.slice());
+  datas.beforeMatrix = beforeMatrix;
+  datas.transform = style.transform;
+  datas.prevDist = [1, 1];
+  datas.position = position;
+  datas.width = width;
+  datas.height = height;
+  datas.transformOrigin = transformOrigin;
+  datas.originalOrigin = origin;
+  datas.left = left;
+  datas.top = top;
+
+  if (datas.transform === "none") {
+    datas.transform = "";
+  }
+
+  moveable.props.onScaleStart({
+    target: target
+  });
+}
+function scale(moveable, _a) {
+  var datas = _a.datas,
+      distX = _a.distX,
+      distY = _a.distY;
+  var matrix = datas.matrix,
+      beforeMatrix = datas.beforeMatrix,
+      prevDist = datas.prevDist,
+      position = datas.position,
+      width = datas.width,
+      height = datas.height,
+      left = datas.left,
+      top = datas.top,
+      transformOrigin = datas.transformOrigin,
+      originalOrigin = datas.originalOrigin,
+      transform = datas.transform;
+  var dist = caculate3x2(matrix, [distX, distY, 1]);
+  var distWidth = position[0] * dist[0];
+  var distHeight = position[1] * dist[1]; // diagonal
+
+  if (position[0] && position[1]) {
+    var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+    var rad = getRad([0, 0], dist);
+    var standardRad = getRad([0, 0], position);
+    var distDiagonal = Math.cos(rad - standardRad) * size;
+    distWidth = distDiagonal;
+    distHeight = distDiagonal * height / width;
+  }
+
+  var nextWidth = width + distWidth;
+  var nextHeight = height + distHeight;
+  var scaleX = nextWidth / width;
+  var scaleY = nextHeight / height;
+  var target = moveable.props.target;
+  datas.prevDist = [scaleX, scaleY];
+  moveable.props.onScale({
+    target: target,
+    scale: [scaleX, scaleY],
+    dist: [scaleX / prevDist[0], scaleY / prevDist[1]],
+    delta: [scaleX - prevDist[0], scaleY - prevDist[1]],
+    transform: transform + " scale(" + scaleX + ", " + scaleY + ")"
+  });
+  moveable.updateTargetRect(target, {
+    beforeMatrix: beforeMatrix,
+    transformOrigin: transformOrigin,
+    origin: originalOrigin,
+    width: width,
+    height: height,
+    left: left,
+    top: top
+  });
+}
+function scaleEnd(moveable, _a) {
+  var isDrag = _a.isDrag;
+  moveable.props.onScaleEnd({
+    target: moveable.props.target,
+    isDrag: isDrag
+  });
+
+  if (isDrag) {
+    moveable.updateRect();
+  }
+}
+
+function getRotateInfo(datas, clientX, clientY) {
+  var startAbsoluteOrigin = datas.startAbsoluteOrigin,
+      startRad = datas.startRad,
+      prevRad = datas.prevRad,
+      prevLoop = datas.loop,
+      direction = datas.direction;
+  var rad = getRad(startAbsoluteOrigin, [clientX, clientY]);
+
+  if (prevRad > rad && prevRad > 270 && rad < 90) {
+    // 360 => 0
+    ++datas.loop;
+  } else if (prevRad < rad && prevRad < 90 && rad > 270) {
+    // 0 => 360
+    --datas.loop;
+  }
+
+  var absolutePrevRad = prevLoop * 360 + prevRad;
+  var absoluteRad = datas.loop * 360 + rad;
+  datas.prevRad = rad;
+  return {
+    delta: direction * (absoluteRad - absolutePrevRad) / Math.PI * 180,
+    dist: direction * (absolutePrevRad - startRad) / Math.PI * 180,
+    beforeDelta: (absoluteRad - absolutePrevRad) / Math.PI * 180,
+    beforeDist: (absolutePrevRad - startRad) / Math.PI * 180,
+    origin: origin
+  };
+}
+
+function rotateStart(moveable, _a) {
+  var datas = _a.datas,
+      clientX = _a.clientX,
+      clientY = _a.clientY;
+  var target = moveable.props.target;
+
+  if (!target) {
+    return false;
+  }
+
+  var _b = moveable.state,
+      matrix = _b.matrix,
+      left = _b.left,
+      top = _b.top,
+      origin = _b.origin,
+      rotationPos = _b.rotationPos,
+      direction = _b.direction;
+  datas.transform = window.getComputedStyle(target).transform;
+  datas.matrix = matrix;
+  datas.left = left;
+  datas.top = top;
+  datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]];
+  datas.prevRad = getRad(datas.startAbsoluteOrigin, [clientX, clientY]);
+  datas.startRad = datas.prevRad;
+  datas.loop = 0;
+  datas.direction = direction;
+
+  if (datas.transform === "none") {
+    datas.transform = "";
+  }
+
+  moveable.props.onRotateStart({
+    target: target
+  });
+}
+function rotate(moveable, _a) {
+  var datas = _a.datas,
+      clientX = _a.clientX,
+      clientY = _a.clientY;
+
+  var _b = getRotateInfo(datas, clientX, clientY),
+      delta = _b.delta,
+      dist = _b.dist,
+      beforeDist = _b.beforeDist,
+      beforeDelta = _b.beforeDelta;
+
+  moveable.props.onRotate({
+    target: moveable.props.target,
+    delta: delta,
+    dist: dist,
+    beforeDist: beforeDist,
+    beforeDelta: beforeDelta,
+    transform: datas.transform + " rotate(" + dist + "deg)"
+  });
+  moveable.updateTargetRect(moveable.props.target, moveable.state);
+}
+function rotateEnd(moveable, _a) {
+  var isDrag = _a.isDrag;
+  moveable.props.onRotateEnd({
+    target: moveable.props.target,
+    isDrag: isDrag
+  });
+
+  if (isDrag) {
+    moveable.updateRect();
+  }
+}
+
+function resizeStart(moveable, position, _a) {
+  var datas = _a.datas;
+  var target = moveable.props.target;
+
+  if (!target || !position) {
+    return false;
+  }
+
+  var matrix = moveable.state.matrix;
+
+  var _b = getSize(target),
+      width = _b[0],
+      height = _b[1];
+
+  datas.matrix = invert3x2(matrix.slice());
+  datas.position = position;
+  datas.width = width;
+  datas.height = height;
+  datas.prevWidth = 0;
+  datas.prevHeight = 0;
+  moveable.props.onResizeStart({
+    target: target
+  });
+}
+function resize(moveable, _a) {
+  var datas = _a.datas,
+      distX = _a.distX,
+      distY = _a.distY;
+  var matrix = datas.matrix,
+      position = datas.position,
+      width = datas.width,
+      height = datas.height,
+      prevWidth = datas.prevWidth,
+      prevHeight = datas.prevHeight;
+  var dist = caculate3x2(matrix, [distX, distY, 1]);
+  var distWidth = position[0] * dist[0];
+  var distHeight = position[1] * dist[1]; // diagonal
+
+  if (position[0] && position[1]) {
+    var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+    var rad = getRad([0, 0], dist);
+    var standardRad = getRad([0, 0], position);
+    var distDiagonal = Math.cos(rad - standardRad) * size;
+    distWidth = distDiagonal;
+    distHeight = distDiagonal * height / width;
+  }
+
+  var nextWidth = width + distWidth;
+  var nextHeight = height + distHeight;
+  datas.prevWidth = distWidth;
+  datas.prevHeight = distHeight;
+  moveable.props.onResize({
+    target: moveable.props.target,
+    width: nextWidth,
+    height: nextHeight,
+    dist: [distWidth, distHeight],
+    delta: [distWidth - prevWidth, distHeight - prevHeight]
+  });
+  moveable.updateRect();
+}
+function resizeEnd(moveable, _a) {
+  var isDrag = _a.isDrag;
+  moveable.props.onScaleEnd({
+    target: moveable.props.target,
+    isDrag: isDrag
+  });
+
+  if (isDrag) {
+    moveable.updateRect();
+  }
+}
+
+function getMoveableDragger(moveable, target) {
+  var type;
+  return drag.drag(target, {
+    container: window,
+    dragstart: function (_a) {
+      var datas = _a.datas,
+          inputEvent = _a.inputEvent,
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+      var inputTarget = inputEvent.target;
+      type = "";
+
+      if (!utils.hasClass(inputTarget, prefix("control"))) {
+        return false;
+      }
+
+      if (utils.hasClass(inputTarget, prefix("rotation"))) {
+        type = "rotate";
+        return rotateStart(moveable, {
+          datas: datas,
+          clientX: clientX,
+          clientY: clientY
+        });
+      } else if (moveable.props.scalable) {
+        var position = getPosition(inputTarget);
+        type = "scale";
+        return scaleStart(moveable, position, {
+          datas: datas
+        });
+      } else if (moveable.props.resizable) {
+        var position = getPosition(inputTarget);
+        type = "resize";
+        return resizeStart(moveable, position, {
+          datas: datas
+        });
+      } else {
+        return false;
+      }
+    },
+    drag: function (_a) {
+      var datas = _a.datas,
+          clientX = _a.clientX,
+          clientY = _a.clientY,
+          distX = _a.distX,
+          distY = _a.distY;
+
+      if (!type) {
+        return;
+      } else if (type === "rotate") {
+        return rotate(moveable, {
+          datas: datas,
+          clientX: clientX,
+          clientY: clientY
+        });
+      } else if (type === "scale") {
+        return scale(moveable, {
+          datas: datas,
+          distX: distX,
+          distY: distY
+        });
+      } else if (type === "resize") {
+        return resize(moveable, {
+          datas: datas,
+          distX: distX,
+          distY: distY
+        });
+      }
+    },
+    dragend: function (_a) {
+      var isDrag = _a.isDrag;
+
+      if (!type) {
+        return;
+      } else if (type === "rotate") {
+        return rotateEnd(moveable, {
+          isDrag: isDrag
+        });
+      } else if (type === "scale") {
+        return scaleEnd(moveable, {
+          isDrag: isDrag
+        });
+      } else if (type === "resize") {
+        return resizeEnd(moveable, {
+          isDrag: isDrag
+        });
+      }
+    }
+  });
+}
+
+var ControlBoxElement = styled("div", MOVEABLE_CSS);
+
+var Moveable =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(Moveable, _super);
+
+  function Moveable() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      target: null,
+      beforeMatrix: [1, 0, 0, 1, 0, 0],
+      matrix: [1, 0, 0, 1, 0, 0],
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+      transform: "",
+      transformOrigin: [0, 0],
+      direction: 1,
+      rotationRad: 0,
+      rotationPos: [0, 0],
+      origin: [0, 0],
+      pos1: [0, 0],
+      pos2: [0, 0],
+      pos3: [0, 0],
+      pos4: [0, 0]
+    };
+    return _this;
+  }
+
+  var __proto = Moveable.prototype;
+
+  __proto.isMoveableElement = function (target) {
+    return target && target.className.indexOf(PREFIX) > -1;
+  };
+
+  __proto.render = function () {
+    if (this.state.target !== this.props.target) {
+      this.updateRect(true);
+    }
+
+    var _a = this.state,
+        left = _a.left,
+        top = _a.top,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        pos3 = _a.pos3,
+        pos4 = _a.pos4,
+        target = _a.target,
+        transform = _a.transform,
+        direction = _a.direction;
+    return createElement(ControlBoxElement, {
+      ref: frameworkUtils.ref(this, "controlBox"),
+      className: prefix("control-box", direction === -1 ? "reverse" : ""),
+      style: {
+        position: this.props.container ? "absolute" : "fixed",
+        display: target ? "block" : "none",
+        transform: "translate(" + left + "px, " + top + "px) " + transform
+      }
+    }, createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos1, pos2)
+    }), createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos2, pos4)
+    }), createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos1, pos3)
+    }), createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos3, pos4)
+    }), this.renderRotation(direction), this.renderPosition(), this.renderOrigin());
+  };
+
+  __proto.renderRotation = function (direction) {
+    if (!this.props.rotatable) {
+      return null;
+    }
+
+    var _a = this.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2;
+    var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+    return createElement("div", {
+      className: prefix("line rotation"),
+      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"),
+      ref: frameworkUtils.ref(this, "rotationElement")
+    }));
+  };
+
+  __proto.renderOrigin = function () {
+    if (!this.props.origin) {
+      return null;
+    }
+
+    var origin = this.state.origin;
+    return createElement("div", {
+      className: prefix("control", "origin"),
+      style: getControlTransform(origin)
+    });
+  };
+
+  __proto.renderPosition = function () {
+    if (!this.props.resizable && !this.props.scalable) {
+      return null;
+    }
+
+    var _a = this.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        pos3 = _a.pos3,
+        pos4 = _a.pos4;
+    return [createElement("div", {
+      className: prefix("control", "nw"),
+      "data-position": "nw",
+      key: "nw",
+      style: getControlTransform(pos1)
+    }), createElement("div", {
+      className: prefix("control", "n"),
+      "data-position": "n",
+      key: "n",
+      style: getControlTransform(pos1, pos2)
+    }), createElement("div", {
+      className: prefix("control", "ne"),
+      "data-position": "ne",
+      key: "ne",
+      style: getControlTransform(pos2)
+    }), createElement("div", {
+      className: prefix("control", "w"),
+      "data-position": "w",
+      key: "w",
+      style: getControlTransform(pos1, pos3)
+    }), createElement("div", {
+      className: prefix("control", "e"),
+      "data-position": "e",
+      key: "e",
+      style: getControlTransform(pos2, pos4)
+    }), createElement("div", {
+      className: prefix("control", "sw"),
+      "data-position": "sw",
+      key: "sw",
+      style: getControlTransform(pos3)
+    }), createElement("div", {
+      className: prefix("control", "s"),
+      "data-position": "s",
+      key: "s",
+      style: getControlTransform(pos3, pos4)
+    }), createElement("div", {
+      className: prefix("control", "se"),
+      "data-position": "se",
+      key: "se",
+      style: getControlTransform(pos4)
+    })];
+  };
+
+  __proto.componentDidMount = function () {
+    /* rotatable */
+
+    /* resizable */
+
+    /* scalable */
+    this.moveableDragger = getMoveableDragger(this, this.controlBox.getElement());
+  };
+
+  __proto.componentWillUnmount = function () {
+    if (this.draggableDragger) {
+      this.draggableDragger.unset();
+      this.draggableDragger = null;
+    }
+
+    if (this.moveableDragger) {
+      this.moveableDragger.unset();
+      this.moveableDragger = null;
+    }
+  };
+
+  __proto.move = function (pos) {
+    if (!pos[0] && !pos[1]) {
+      return;
+    }
+
+    var _a = this.state,
+        left = _a.left,
+        top = _a.top;
+    this.setState({
+      left: left + pos[0],
+      top: top + pos[1]
+    });
+  };
+
+  __proto.updateRect = function (isNotSetState) {
+    var target = this.props.target;
+    var state = this.state;
+
+    if (state.target !== target) {
+      if (this.draggableDragger) {
+        this.draggableDragger.unset();
+        this.draggableDragger = null;
+      }
+
+      if (target && this.props.draggable) {
+        this.draggableDragger = getDraggableDragger(this, target);
+      }
+    }
+
+    var container = this.props.container;
+    this.updateState(getTargetInfo(target, container), isNotSetState);
+  };
+
+  __proto.updateTargetRect = function (target, nextState) {
+    var beforeMatrix = nextState.beforeMatrix,
+        transformOrigin = nextState.transformOrigin,
+        width = nextState.width,
+        height = nextState.height,
+        left = nextState.left,
+        top = nextState.top,
+        originalOrigin = nextState.origin;
+    var nextTransform = getTransform(target, true);
+
+    var _a = caculatePosition(multiple3x2(beforeMatrix.slice(), nextTransform), transformOrigin, width, height),
+        origin = _a[0],
+        pos1 = _a[1],
+        pos2 = _a[2],
+        pos3 = _a[3],
+        pos4 = _a[4];
+
+    var nextLeft = left + originalOrigin[0] - origin[0];
+    var nextTop = top + originalOrigin[1] - origin[1];
+
+    var _b = getRotationInfo(origin, pos1, pos2),
+        direction = _b[0],
+        rotationRad = _b[1],
+        rotationPos = _b[2];
+
+    this.setState({
+      direction: direction,
+      rotationRad: rotationRad,
+      rotationPos: rotationPos,
+      origin: origin,
+      pos1: pos1,
+      pos2: pos2,
+      pos3: pos3,
+      pos4: pos4,
+      left: nextLeft,
+      top: nextTop
+    });
+  };
+
+  __proto.updateState = function (nextState, isNotSetState) {
+    var state = this.state;
+
+    if (isNotSetState) {
+      for (var name in nextState) {
+        state[name] = nextState[name];
+      }
+    } else {
+      this.setState(nextState);
+    }
+  };
+
+  Moveable.defaultProps = {
+    container: null,
+    rotatable: false,
+    draggable: false,
+    scalable: false,
+    resizable: false,
+    origin: true,
+    onRotateStart: function () {},
+    onRotate: function () {},
+    onRotateEnd: function () {},
+    onDragStart: function () {},
+    onDrag: function () {},
+    onDragEnd: function () {},
+    onScaleStart: function () {},
+    onScale: function () {},
+    onScaleEnd: function () {},
+    onResizeStart: function () {},
+    onResize: function () {},
+    onResizeEnd: function () {}
+  };
+  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);
+
+/**
+ * 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;
+
+    _this.onDragStart = function (e) {
+      _this.trigger("dragStart", e);
+    };
+
+    _this.onDrag = function (e) {
+      _this.trigger("drag", e);
+    };
+
+    _this.onDragEnd = function (e) {
+      _this.trigger("dragEnd", e);
+    };
+
+    _this.onResizeStart = function (e) {
+      _this.trigger("resizeStart", e);
+    };
+
+    _this.onResize = function (e) {
+      _this.trigger("resize", e);
+    };
+
+    _this.onResizeEnd = function (e) {
+      _this.trigger("resizeEnd", e);
+    };
+
+    _this.onScaleStart = function (e) {
+      _this.trigger("scaleStart", e);
+    };
+
+    _this.onScale = function (e) {
+      _this.trigger("scale", e);
+    };
+
+    _this.onScaleEnd = function (e) {
+      _this.trigger("scaleEnd", e);
+    };
+
+    _this.onRotateStart = function (e) {
+      _this.trigger("rotateStart", e);
+    };
+
+    _this.onRotate = function (e) {
+      _this.trigger("rotate", e);
+    };
+
+    _this.onRotateEnd = function (e) {
+      _this.trigger("rotateEnd", e);
+    };
+
+    var element = document.createElement("div");
+    render(h(InnerMoveable, __assign({
+      ref: frameworkUtils.ref(_this, "innerMoveable")
+    }, options, {
+      onDragStart: _this.onDragStart,
+      onDrag: _this.onDrag,
+      onDragEnd: _this.onDragEnd,
+      onResizeStart: _this.onResizeStart,
+      onResize: _this.onResize,
+      onResizeEnd: _this.onResizeEnd,
+      onScaleStart: _this.onScaleStart,
+      onScale: _this.onScale,
+      onScaleEnd: _this.onScaleEnd,
+      onRotateStart: _this.onRotateStart,
+      onRotate: _this.onRotate,
+      onRotateEnd: _this.onRotateEnd
+    })), element);
+    parentElement.appendChild(element.children[0]);
+    return _this;
+  }
+
+  var __proto = Moveable.prototype;
+  Object.defineProperty(__proto, "origin", {
+    /**
+     * target is target
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.origin = true;
+     */
+    get: function () {
+      return this.getMoveableProps().origin;
+    },
+    set: function (origin) {
+      this.innerMoveable.setState({
+        origin: origin
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "target", {
+    /**
+     * target is target
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     * moveable.target = document.querySelector(".target");
+     */
+    get: function () {
+      return this.getMoveableProps().target;
+    },
+    set: function (target) {
+      if (target !== this.target) {
+        this.innerMoveable.setState({
+          target: target
+        });
+      } else {
+        this.updateRect();
+      }
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "draggable", {
+    /**
+     * Whether or not target can be dragged.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.draggable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().draggable || false;
+    },
+    set: function (draggable) {
+      this.innerMoveable.setState({
+        draggable: draggable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "resizable", {
+    /**
+     * Whether or not target can be resized.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.resizable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().resizable;
+    },
+    set: function (resizable) {
+      this.innerMoveable.setState({
+        resizable: resizable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "scalable", {
+    /**
+     * Whether or not target can scaled.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.scalable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().scalable;
+    },
+    set: function (scalable) {
+      this.innerMoveable.setState({
+        scalable: scalable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "rotatable", {
+    /**
+     * Whether or not target can be rotated.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.rotatable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().rotatable;
+    },
+    set: function (rotatable) {
+      this.innerMoveable.setState({
+        rotatable: rotatable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  /**
+   * Move the moveable as much as the `pos`.
+   * @param - the values of x and y to move moveable.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * moveable.move([0, -10]);
+   */
+
+  __proto.move = function (pos) {
+    this.getMoveable().move(pos);
+  };
+  /**
+   * 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;
+   *     }
+   * });
+   */
+
+
+  __proto.isMoveableElement = function (target) {
+    return this.getMoveable().isMoveableElement(target);
+  };
+  /**
+   * If the width, height, left, and top of the target 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();
+  };
+
+  __proto.getMoveable = function () {
+    return this.innerMoveable.preactMoveable;
+  };
+
+  __proto.getMoveableProps = function () {
+    return this.getMoveable().props;
+  };
+
+  return Moveable;
+}(EgComponent);
+
+exports.default = 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..b2c43a14f
--- /dev/null
+++ b/dist/moveable.cjs.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.cjs.js","sources":["../src/InnerMoveable.tsx","../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 EgComponent from \"@egjs/component\";\nimport { ref } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n} from \"react-moveable/declaration/types\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\nclass Moveable extends EgComponent {\n    private innerMoveable!: any;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...options}\n                onDragStart={this.onDragStart}\n                onDrag={this.onDrag}\n                onDragEnd={this.onDragEnd}\n                onResizeStart={this.onResizeStart}\n                onResize={this.onResize}\n                onResizeEnd={this.onResizeEnd}\n                onScaleStart={this.onScaleStart}\n                onScale={this.onScale}\n                onScaleEnd={this.onScaleEnd}\n                onRotateStart={this.onRotateStart}\n                onRotate={this.onRotate}\n                onRotateEnd={this.onRotateEnd}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.origin = true;\n     */\n    get origin() {\n        return this.getMoveableProps().origin;\n    }\n    set origin(origin: boolean) {\n        this.innerMoveable.setState({\n            origin,\n        });\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     * moveable.target = document.querySelector(\".target\");\n     */\n    get target(): HTMLElement | SVGElement {\n        return this.getMoveableProps().target;\n    }\n    set target(target: HTMLElement | SVGElement) {\n        if (target !== this.target) {\n            this.innerMoveable.setState({\n                target,\n            });\n        } else {\n            this.updateRect();\n        }\n    }\n    /**\n     * Whether or not target can be dragged.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.draggable = true;\n     */\n    get draggable(): boolean {\n        return this.getMoveableProps().draggable || false;\n    }\n    set draggable(draggable: boolean) {\n        this.innerMoveable.setState({\n            draggable,\n        });\n    }\n    /**\n     * Whether or not target can be resized.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.resizable = true;\n     */\n    get resizable(): boolean {\n        return this.getMoveableProps().resizable;\n    }\n    set resizable(resizable: boolean) {\n        this.innerMoveable.setState({\n            resizable,\n        });\n    }\n    /**\n     * Whether or not target can scaled.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.scalable = true;\n     */\n    get scalable(): boolean {\n        return this.getMoveableProps().scalable;\n    }\n    set scalable(scalable: boolean) {\n        this.innerMoveable.setState({\n            scalable,\n        });\n    }\n    /**\n     * Whether or not target can be rotated.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.rotatable = true;\n     */\n    get rotatable(): boolean {\n        return this.getMoveableProps().rotatable;\n    }\n    set rotatable(rotatable: boolean) {\n        this.innerMoveable.setState({\n            rotatable,\n        });\n    }\n    /**\n     * Move the moveable as much as the `pos`.\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.move([0, -10]);\n     */\n    public move(pos: number[]) {\n        this.getMoveable().move(pos);\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 the target 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    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n    private getMoveableProps() {\n        return this.getMoveable().props;\n    }\n    private onDragStart = (e: OnDragStart) => {\n        this.trigger(\"dragStart\", e);\n    }\n    private onDrag = (e: OnDrag) => {\n        this.trigger(\"drag\", e);\n    }\n    private onDragEnd = (e: OnDragEnd) => {\n        this.trigger(\"dragEnd\", e);\n    }\n    private onResizeStart = (e: OnResizeStart) => {\n        this.trigger(\"resizeStart\", e);\n    }\n    private onResize = (e: OnResize) => {\n        this.trigger(\"resize\", e);\n    }\n    private onResizeEnd = (e: OnResizeEnd) => {\n        this.trigger(\"resizeEnd\", e);\n    }\n    private onScaleStart = (e: OnScaleStart) => {\n        this.trigger(\"scaleStart\", e);\n    }\n    private onScale = (e: OnScale) => {\n        this.trigger(\"scale\", e);\n    }\n    private onScaleEnd = (e: OnScaleEnd) => {\n        this.trigger(\"scaleEnd\", e);\n    }\n    private onRotateStart = (e: OnRotateStart) => {\n        this.trigger(\"rotateStart\", e);\n    }\n    private onRotate = (e: OnRotate) => {\n        this.trigger(\"rotate\", e);\n    }\n    private onRotateEnd = (e: OnRotateEnd) => {\n        this.trigger(\"rotateEnd\", e);\n    }\n}\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 */\nexport default Moveable;\n"],"names":["tslib_1","props","_super","_this","state","h","Moveable","ref","Component","parentElement","options","e","trigger","element","document","createElement","render","InnerMoveable","onDragStart","onDrag","onDragEnd","onResizeStart","onResize","onResizeEnd","onScaleStart","onScale","onScaleEnd","onRotateStart","onRotate","onRotateEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","pos","getMoveable","move","isMoveableElement","preactMoveable","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;;ACOA;;;;;;AAKA;;;EAAuBR,SAAA,SAAA,QAAA;;;;;;mBAMnB,CAAYS,aAAZ,EAAqDC,OAArD;0BAAqD,EAAA;MAAAA,YAAA;;;gBACjDR,WAAA,KAAA,SADJ;;IAoLQC,iBAAA,GAAc,UAACQ,CAAD;MAClBR,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;KADI;;IAGAR,YAAA,GAAS,UAACQ,CAAD;MACbR,KAAI,CAACS,OAAL,CAAa,MAAb,EAAqBD,CAArB;KADI;;IAGAR,eAAA,GAAY,UAACQ,CAAD;MAChBR,KAAI,CAACS,OAAL,CAAa,SAAb,EAAwBD,CAAxB;KADI;;IAGAR,mBAAA,GAAgB,UAACQ,CAAD;MACpBR,KAAI,CAACS,OAAL,CAAa,aAAb,EAA4BD,CAA5B;KADI;;IAGAR,cAAA,GAAW,UAACQ,CAAD;MACfR,KAAI,CAACS,OAAL,CAAa,QAAb,EAAuBD,CAAvB;KADI;;IAGAR,iBAAA,GAAc,UAACQ,CAAD;MAClBR,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;KADI;;IAGAR,kBAAA,GAAe,UAACQ,CAAD;MACnBR,KAAI,CAACS,OAAL,CAAa,YAAb,EAA2BD,CAA3B;KADI;;IAGAR,aAAA,GAAU,UAACQ,CAAD;MACdR,KAAI,CAACS,OAAL,CAAa,OAAb,EAAsBD,CAAtB;KADI;;IAGAR,gBAAA,GAAa,UAACQ,CAAD;MACjBR,KAAI,CAACS,OAAL,CAAa,UAAb,EAAyBD,CAAzB;KADI;;IAGAR,mBAAA,GAAgB,UAACQ,CAAD;MACpBR,KAAI,CAACS,OAAL,CAAa,aAAb,EAA4BD,CAA5B;KADI;;IAGAR,cAAA,GAAW,UAACQ,CAAD;MACfR,KAAI,CAACS,OAAL,CAAa,QAAb,EAAuBD,CAAvB;KADI;;IAGAR,iBAAA,GAAc,UAACQ,CAAD;MAClBR,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;KADI;;QAnNEE,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;IAEAC,MAAM,CACFX,EAACY;MACGV,GAAG,EAAEA,kBAAG,CAACJ,KAAD,EAAO,eAAP;OACJO;MACJQ,WAAW,EAAEf,KAAI,CAACe;MAClBC,MAAM,EAAEhB,KAAI,CAACgB;MACbC,SAAS,EAAEjB,KAAI,CAACiB;MAChBC,aAAa,EAAElB,KAAI,CAACkB;MACpBC,QAAQ,EAAEnB,KAAI,CAACmB;MACfC,WAAW,EAAEpB,KAAI,CAACoB;MAClBC,YAAY,EAAErB,KAAI,CAACqB;MACnBC,OAAO,EAAEtB,KAAI,CAACsB;MACdC,UAAU,EAAEvB,KAAI,CAACuB;MACjBC,aAAa,EAAExB,KAAI,CAACwB;MACpBC,QAAQ,EAAEzB,KAAI,CAACyB;MACfC,WAAW,EAAE1B,KAAI,CAAC0B;OAfpB,EAiBFhB,OAjBE,CAAN;IAmBAJ,aAAa,CAACqB,WAAd,CAA0BjB,OAAO,CAACkB,QAAR,CAAiB,CAAjB,CAA1B;;;;;EAWJC,qBAAA,kBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBC,MAA/B;;SAEJ,UAAWA,MAAX;WACSC,aAAL,CAAmBC,QAAnB,CAA4B;QACxBF,MAAM;OADV;;;;GAJJ;EAgBAF,qBAAA,kBAAA;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBI,MAA/B;;SAEJ,UAAWA,MAAX;UACQA,MAAM,KAAK,KAAKA,MAApB,EAA4B;aACnBF,aAAL,CAAmBC,QAAnB,CAA4B;UACxBC,MAAM;SADV;OADJ,MAIO;aACEC,UAAL;;;;;GATR;EAqBAN,qBAAA,qBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBM,SAAxB,IAAqC,KAA5C;;SAEJ,UAAcA,SAAd;WACSJ,aAAL,CAAmBC,QAAnB,CAA4B;QACxBG,SAAS;OADb;;;;GAJJ;EAiBAP,qBAAA,qBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBO,SAA/B;;SAEJ,UAAcA,SAAd;WACSL,aAAL,CAAmBC,QAAnB,CAA4B;QACxBI,SAAS;OADb;;;;GAJJ;EAiBAR,qBAAA,oBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBQ,QAA/B;;SAEJ,UAAaA,QAAb;WACSN,aAAL,CAAmBC,QAAnB,CAA4B;QACxBK,QAAQ;OADZ;;;;GAJJ;EAiBAT,qBAAA,qBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBS,SAA/B;;SAEJ,UAAcA,SAAd;WACSP,aAAL,CAAmBC,QAAnB,CAA4B;QACxBM,SAAS;OADb;;;;GAJJ;;;;;;;;;;;;cAkBO,GAAP,UAAYC,GAAZ;SACSC,WAAL,GAAmBC,IAAnB,CAAwBF,GAAxB;GADG;;;;;;;;;;;;;;;;;2BAiBA,GAAP,UAAyBN,MAAzB;WACW,KAAKO,WAAL,GAAmBE,iBAAnB,CAAqCT,MAArC,CAAP;GADG;;;;;;;;;;;;;;oBAcA,GAAP;SACSO,WAAL,GAAmBN,UAAnB;GADG;;qBAGC,GAAR;WACW,KAAKH,aAAL,CAAmBY,cAA1B;GADI;;0BAGA,GAAR;WACW,KAAKH,WAAL,GAAmB3C,KAA1B;GADI;;iBAuCZ;EA9NuB+C,YAAvB;;;;"}
\ No newline at end of file
diff --git a/dist/moveable.esm.js b/dist/moveable.esm.js
new file mode 100644
index 000000000..73175615b
--- /dev/null
+++ b/dist/moveable.esm.js
@@ -0,0 +1,2877 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.2.0
+*/
+import EgComponent from '@egjs/component';
+import { prefixCSS, prefixNames, ref } from 'framework-utils';
+import { hasClass, splitBracket, isUndefined } from '@daybrush/utils';
+import { drag } from '@daybrush/drag';
+
+/*! *****************************************************************************
+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);
+};
+
+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 != null) {
+    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 __());
+    };
+})();
+
+/*
+Copyright (c) 2019 Daybrush
+name: preact-compat2
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/preact-compat2.git
+version: 0.1.0
+*/
+
+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.3.3
+*/
+
+/*
+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.3.2
+*/
+
+/*! *****************************************************************************
+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) {
+      return subSelector.indexOf(":host") > -1 ? "" + subSelector.replace(/\:host/g, "." + className) : "." + 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.4.0
+*/
+
+/*
+Copyright (c) 2019 Daybrush
+name: react-moveable
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
+version: 0.5.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 __());
+}
+
+var PREFIX = "moveable-";
+var MOVEABLE_CSS = prefixCSS(PREFIX, "\n{\n    position: fixed;\n    width: 0;\n    height: 0;\n    left: 0;\n    top: 0;\n    z-index: 3000;\n}\n.line, .control {\n    left: 0;\n    top: 0;\n}\n.control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n}\n.line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n.line.rotation {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n.line.rotation .control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n.control.origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n}\n.control.e, .control.w {\n    cursor: ew-resize;\n}\n.control.s, .control.n {\n    cursor: ns-resize;\n}\n.control.nw, .control.se, :host.reverse .control.ne, :host.reverse .control.sw {\n    cursor: nwse-resize;\n}\n.control.ne, .control.sw, :host.reverse .control.nw, :host.reverse .control.se {\n    cursor: nesw-resize;\n}\n");
+
+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 caculate3x2(a, b) {
+  // 0 2 4
+  // 1 3 5
+  return [a[0] * b[0] + a[2] * b[1] + a[4] * b[2], a[1] * b[0] + a[3] * b[1] + a[5] * b[2]];
+}
+function multiple3x2(a, b) {
+  // 00 01 02
+  // 10 11 12
+  var a00 = a[0],
+      a10 = a[1],
+      a01 = a[2],
+      a11 = a[3],
+      a02 = a[4],
+      a12 = a[5];
+  var b00 = b[0],
+      b10 = b[1],
+      b01 = b[2],
+      b11 = b[3],
+      b02 = b[4],
+      b12 = b[5];
+  a[0] = a00 * b00 + a01 * b10;
+  a[1] = a10 * b00 + a11 * b10;
+  a[2] = a00 * b01 + a01 * b11;
+  a[3] = a10 * b01 + a11 * b11;
+  a[4] = a00 * b02 + a01 * b12 + a02 * 1;
+  a[5] = a10 * b02 + a11 * b12 + a12 * 1;
+  return a;
+}
+function invert3x2(a) {
+  // 00 01 02
+  // 10 11 12
+  // 20 21 22
+  var a00 = a[0],
+      a10 = a[1],
+      a01 = a[2],
+      a11 = a[3],
+      a02 = a[4],
+      a12 = a[5];
+  var a20 = 0;
+  var a21 = 0;
+  var a22 = 1;
+  var det = a00 * a11 * a22 + a01 * a12 * a20 + a02 * a10 * a21 - a02 * a11 * a20 - a01 * a10 * a22 - a00 * a12 * a21;
+  var b00 = a11 * a22 - a12 * a21;
+  var b01 = a02 * a21 - a01 * a22;
+  var b02 = a01 * a12 - a02 * a11;
+  var b10 = a12 * a20 - a10 * a22;
+  var b11 = a22 * a00 - a20 * a02;
+  var b12 = a02 * a10 - a00 * a12; // const b20 = a11 * a21 - a11 * a20;
+  // const b21 = a20 * a01 - a21 * a00;
+  // const b22 = a00 * a11 - a01 * a10;
+
+  a[0] = b00 / det;
+  a[1] = b10 / det;
+  a[2] = b01 / det;
+  a[3] = b11 / det;
+  a[4] = b02 / det;
+  a[5] = b12 / det;
+  return a;
+}
+function getTransform(target, isInit) {
+  var transform = window.getComputedStyle(target).transform;
+
+  if (transform === "none") {
+    if (isInit) {
+      return [1, 0, 0, 1, 0, 0];
+    }
+
+    return "none";
+  } else {
+    var value = splitBracket(transform).value;
+    return value.split(/s*,\s*/g).map(function (v) {
+      return parseFloat(v);
+    });
+  }
+}
+function caculateMatrixStack(target) {
+  var el = target;
+  var matrixes = [];
+
+  while (el) {
+    matrixes.push(getTransform(el));
+    el = el.parentElement;
+  }
+
+  matrixes.reverse(); // 1 0 0
+  // 0 1 0
+
+  var mat = [1, 0, 0, 1, 0, 0];
+  var length = matrixes.length;
+  var beforeMatrix = [1, 0, 0, 1, 0, 0];
+  matrixes.forEach(function (matrix, i) {
+    if (length - 1 === i) {
+      beforeMatrix = mat.slice();
+    }
+
+    if (matrix !== "none") {
+      multiple3x2(mat, matrix);
+    }
+  });
+  beforeMatrix[4] = 0;
+  beforeMatrix[5] = 0;
+  mat[4] = 0;
+  mat[5] = 0;
+  return [beforeMatrix, mat];
+}
+function caculatePosition(matrix, origin, width, height) {
+  var _a = caculate3x2(matrix, [0, 0, 1]),
+      x1 = _a[0],
+      y1 = _a[1];
+
+  var _b = caculate3x2(matrix, [width, 0, 1]),
+      x2 = _b[0],
+      y2 = _b[1];
+
+  var _c = caculate3x2(matrix, [0, height, 1]),
+      x3 = _c[0],
+      y3 = _c[1];
+
+  var _d = caculate3x2(matrix, [width, height, 1]),
+      x4 = _d[0],
+      y4 = _d[1];
+
+  var _e = caculate3x2(matrix, [origin[0], origin[1], 1]),
+      originX = _e[0],
+      originY = _e[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;
+  return [[originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4]];
+}
+function caculateRotationMatrix(matrix, rad) {
+  var cos = Math.cos(rad);
+  var sin = Math.sin(rad);
+  var rotationMatrix = [cos, sin, -sin, cos, 0, 0];
+  return caculate3x2(rotationMatrix, matrix);
+}
+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 (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(origin, pos1, pos2) {
+  var pos1Rad = getRad(origin, pos1);
+  var pos2Rad = getRad(origin, pos2);
+  var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1;
+  var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+  var relativeRotationPos = caculateRotationMatrix([0, -40, 0], rotationRad);
+  var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]];
+  return [direction, rotationRad, rotationPos];
+}
+function getTargetInfo(target, container) {
+  var _a, _b, _c, _d;
+
+  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 = [1, 0, 0, 1, 0, 0];
+  var matrix = [1, 0, 0, 1, 0, 0];
+  var width = 0;
+  var height = 0;
+  var transformOrigin = [0, 0];
+  var direction = 1;
+  var rotationPos = [0, 0];
+  var rotationRad = 0;
+
+  if (target) {
+    var rect = target.getBoundingClientRect();
+    var style = window.getComputedStyle(target);
+    left = rect.left;
+    top = rect.top;
+    width = target.offsetWidth;
+    height = target.offsetHeight;
+
+    if (isUndefined(width)) {
+      _a = getSize(target, style, true), width = _a[0], height = _a[1];
+    }
+
+    _b = caculateMatrixStack(target), beforeMatrix = _b[0], matrix = _b[1];
+    transformOrigin = style.transformOrigin.split(" ").map(function (pos) {
+      return parseFloat(pos);
+    });
+    _c = caculatePosition(matrix, transformOrigin, width, height), origin = _c[0], pos1 = _c[1], pos2 = _c[2], pos3 = _c[3], pos4 = _c[4];
+
+    if (container) {
+      var containerRect = container.getBoundingClientRect();
+      left -= containerRect.left;
+      top -= containerRect.top;
+    } // 1 : clockwise
+    // -1 : counterclockwise
+
+
+    _d = getRotationInfo(origin, pos1, pos2), direction = _d[0], rotationRad = _d[1], rotationPos = _d[2];
+  }
+
+  return {
+    direction: direction,
+    rotationRad: rotationRad,
+    rotationPos: rotationPos,
+    transform: "",
+    target: target,
+    left: left,
+    top: top,
+    pos1: pos1,
+    pos2: pos2,
+    pos3: pos3,
+    pos4: pos4,
+    width: width,
+    height: height,
+    beforeMatrix: beforeMatrix,
+    matrix: matrix,
+    origin: origin,
+    transformOrigin: transformOrigin
+  };
+}
+function getPosition(target) {
+  var position = target.getAttribute("data-position");
+
+  if (!position) {
+    return;
+  }
+
+  var pos = [0, 0];
+  position.indexOf("w") > -1 && (pos[0] = -1);
+  position.indexOf("e") > -1 && (pos[0] = 1);
+  position.indexOf("n") > -1 && (pos[1] = -1);
+  position.indexOf("s") > -1 && (pos[1] = 1);
+  return pos;
+}
+
+function getDraggableDragger(moveable, target) {
+  return drag(target, {
+    container: window,
+    dragstart: function (_a) {
+      var datas = _a.datas;
+      var style = window.getComputedStyle(target);
+      var _b = moveable.state,
+          matrix = _b.matrix,
+          beforeMatrix = _b.beforeMatrix;
+      datas.matrix = invert3x2(matrix.slice());
+      datas.beforeMatrix = invert3x2(beforeMatrix.slice());
+      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 = style.transform;
+      datas.prevDist = [0, 0];
+      datas.prevBeforeDist = [0, 0];
+
+      if (datas.transform === "none") {
+        datas.transform = "";
+      }
+
+      return moveable.props.onDragStart({
+        target: target
+      });
+    },
+    drag: function (_a) {
+      var datas = _a.datas,
+          distX = _a.distX,
+          distY = _a.distY;
+      var beforeMatrix = datas.beforeMatrix,
+          matrix = datas.matrix,
+          prevDist = datas.prevDist,
+          prevBeforeDist = datas.prevBeforeDist;
+      var beforeDist = caculate3x2(beforeMatrix, [distX, distY, 1]);
+      var dist = caculate3x2(matrix, [distX, distY, 1]);
+      var delta = [dist[0] - prevDist[0], dist[1] - prevDist[1]];
+      var beforeDelta = [beforeDist[0] - prevBeforeDist[0], beforeDist[1] - prevBeforeDist[1]];
+      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 transform = datas.transform + " translate(" + dist[0] + "px, " + dist[1] + "px)";
+      moveable.props.onDrag({
+        target: target,
+        transform: transform,
+        dist: dist,
+        delta: delta,
+        beforeDist: beforeDist,
+        beforeDelta: beforeDelta,
+        left: left,
+        top: top,
+        right: right,
+        bottom: bottom
+      });
+      moveable.setState({
+        transform: "translate(" + distX + "px, " + distY + "px)"
+      });
+    },
+    dragend: function (_a) {
+      var isDrag = _a.isDrag;
+      moveable.props.onDragEnd({
+        target: target,
+        isDrag: isDrag
+      });
+
+      if (isDrag) {
+        moveable.updateRect();
+      }
+    }
+  });
+}
+
+function scaleStart(moveable, position, _a) {
+  var datas = _a.datas;
+  var target = moveable.props.target;
+
+  if (!position || !target) {
+    return false;
+  }
+
+  var style = window.getComputedStyle(target);
+  var _b = moveable.state,
+      matrix = _b.matrix,
+      beforeMatrix = _b.beforeMatrix,
+      width = _b.width,
+      height = _b.height,
+      left = _b.left,
+      top = _b.top,
+      transformOrigin = _b.transformOrigin,
+      origin = _b.origin;
+  datas.matrix = invert3x2(matrix.slice());
+  datas.beforeMatrix = beforeMatrix;
+  datas.transform = style.transform;
+  datas.prevDist = [1, 1];
+  datas.position = position;
+  datas.width = width;
+  datas.height = height;
+  datas.transformOrigin = transformOrigin;
+  datas.originalOrigin = origin;
+  datas.left = left;
+  datas.top = top;
+
+  if (datas.transform === "none") {
+    datas.transform = "";
+  }
+
+  moveable.props.onScaleStart({
+    target: target
+  });
+}
+function scale(moveable, _a) {
+  var datas = _a.datas,
+      distX = _a.distX,
+      distY = _a.distY;
+  var matrix = datas.matrix,
+      beforeMatrix = datas.beforeMatrix,
+      prevDist = datas.prevDist,
+      position = datas.position,
+      width = datas.width,
+      height = datas.height,
+      left = datas.left,
+      top = datas.top,
+      transformOrigin = datas.transformOrigin,
+      originalOrigin = datas.originalOrigin,
+      transform = datas.transform;
+  var dist = caculate3x2(matrix, [distX, distY, 1]);
+  var distWidth = position[0] * dist[0];
+  var distHeight = position[1] * dist[1]; // diagonal
+
+  if (position[0] && position[1]) {
+    var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+    var rad = getRad([0, 0], dist);
+    var standardRad = getRad([0, 0], position);
+    var distDiagonal = Math.cos(rad - standardRad) * size;
+    distWidth = distDiagonal;
+    distHeight = distDiagonal * height / width;
+  }
+
+  var nextWidth = width + distWidth;
+  var nextHeight = height + distHeight;
+  var scaleX = nextWidth / width;
+  var scaleY = nextHeight / height;
+  var target = moveable.props.target;
+  datas.prevDist = [scaleX, scaleY];
+  moveable.props.onScale({
+    target: target,
+    scale: [scaleX, scaleY],
+    dist: [scaleX / prevDist[0], scaleY / prevDist[1]],
+    delta: [scaleX - prevDist[0], scaleY - prevDist[1]],
+    transform: transform + " scale(" + scaleX + ", " + scaleY + ")"
+  });
+  moveable.updateTargetRect(target, {
+    beforeMatrix: beforeMatrix,
+    transformOrigin: transformOrigin,
+    origin: originalOrigin,
+    width: width,
+    height: height,
+    left: left,
+    top: top
+  });
+}
+function scaleEnd(moveable, _a) {
+  var isDrag = _a.isDrag;
+  moveable.props.onScaleEnd({
+    target: moveable.props.target,
+    isDrag: isDrag
+  });
+
+  if (isDrag) {
+    moveable.updateRect();
+  }
+}
+
+function getRotateInfo(datas, clientX, clientY) {
+  var startAbsoluteOrigin = datas.startAbsoluteOrigin,
+      startRad = datas.startRad,
+      prevRad = datas.prevRad,
+      prevLoop = datas.loop,
+      direction = datas.direction;
+  var rad = getRad(startAbsoluteOrigin, [clientX, clientY]);
+
+  if (prevRad > rad && prevRad > 270 && rad < 90) {
+    // 360 => 0
+    ++datas.loop;
+  } else if (prevRad < rad && prevRad < 90 && rad > 270) {
+    // 0 => 360
+    --datas.loop;
+  }
+
+  var absolutePrevRad = prevLoop * 360 + prevRad;
+  var absoluteRad = datas.loop * 360 + rad;
+  datas.prevRad = rad;
+  return {
+    delta: direction * (absoluteRad - absolutePrevRad) / Math.PI * 180,
+    dist: direction * (absolutePrevRad - startRad) / Math.PI * 180,
+    beforeDelta: (absoluteRad - absolutePrevRad) / Math.PI * 180,
+    beforeDist: (absolutePrevRad - startRad) / Math.PI * 180,
+    origin: origin
+  };
+}
+
+function rotateStart(moveable, _a) {
+  var datas = _a.datas,
+      clientX = _a.clientX,
+      clientY = _a.clientY;
+  var target = moveable.props.target;
+
+  if (!target) {
+    return false;
+  }
+
+  var _b = moveable.state,
+      matrix = _b.matrix,
+      left = _b.left,
+      top = _b.top,
+      origin = _b.origin,
+      rotationPos = _b.rotationPos,
+      direction = _b.direction;
+  datas.transform = window.getComputedStyle(target).transform;
+  datas.matrix = matrix;
+  datas.left = left;
+  datas.top = top;
+  datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]];
+  datas.prevRad = getRad(datas.startAbsoluteOrigin, [clientX, clientY]);
+  datas.startRad = datas.prevRad;
+  datas.loop = 0;
+  datas.direction = direction;
+
+  if (datas.transform === "none") {
+    datas.transform = "";
+  }
+
+  moveable.props.onRotateStart({
+    target: target
+  });
+}
+function rotate(moveable, _a) {
+  var datas = _a.datas,
+      clientX = _a.clientX,
+      clientY = _a.clientY;
+
+  var _b = getRotateInfo(datas, clientX, clientY),
+      delta = _b.delta,
+      dist = _b.dist,
+      beforeDist = _b.beforeDist,
+      beforeDelta = _b.beforeDelta;
+
+  moveable.props.onRotate({
+    target: moveable.props.target,
+    delta: delta,
+    dist: dist,
+    beforeDist: beforeDist,
+    beforeDelta: beforeDelta,
+    transform: datas.transform + " rotate(" + dist + "deg)"
+  });
+  moveable.updateTargetRect(moveable.props.target, moveable.state);
+}
+function rotateEnd(moveable, _a) {
+  var isDrag = _a.isDrag;
+  moveable.props.onRotateEnd({
+    target: moveable.props.target,
+    isDrag: isDrag
+  });
+
+  if (isDrag) {
+    moveable.updateRect();
+  }
+}
+
+function resizeStart(moveable, position, _a) {
+  var datas = _a.datas;
+  var target = moveable.props.target;
+
+  if (!target || !position) {
+    return false;
+  }
+
+  var matrix = moveable.state.matrix;
+
+  var _b = getSize(target),
+      width = _b[0],
+      height = _b[1];
+
+  datas.matrix = invert3x2(matrix.slice());
+  datas.position = position;
+  datas.width = width;
+  datas.height = height;
+  datas.prevWidth = 0;
+  datas.prevHeight = 0;
+  moveable.props.onResizeStart({
+    target: target
+  });
+}
+function resize(moveable, _a) {
+  var datas = _a.datas,
+      distX = _a.distX,
+      distY = _a.distY;
+  var matrix = datas.matrix,
+      position = datas.position,
+      width = datas.width,
+      height = datas.height,
+      prevWidth = datas.prevWidth,
+      prevHeight = datas.prevHeight;
+  var dist = caculate3x2(matrix, [distX, distY, 1]);
+  var distWidth = position[0] * dist[0];
+  var distHeight = position[1] * dist[1]; // diagonal
+
+  if (position[0] && position[1]) {
+    var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+    var rad = getRad([0, 0], dist);
+    var standardRad = getRad([0, 0], position);
+    var distDiagonal = Math.cos(rad - standardRad) * size;
+    distWidth = distDiagonal;
+    distHeight = distDiagonal * height / width;
+  }
+
+  var nextWidth = width + distWidth;
+  var nextHeight = height + distHeight;
+  datas.prevWidth = distWidth;
+  datas.prevHeight = distHeight;
+  moveable.props.onResize({
+    target: moveable.props.target,
+    width: nextWidth,
+    height: nextHeight,
+    dist: [distWidth, distHeight],
+    delta: [distWidth - prevWidth, distHeight - prevHeight]
+  });
+  moveable.updateRect();
+}
+function resizeEnd(moveable, _a) {
+  var isDrag = _a.isDrag;
+  moveable.props.onScaleEnd({
+    target: moveable.props.target,
+    isDrag: isDrag
+  });
+
+  if (isDrag) {
+    moveable.updateRect();
+  }
+}
+
+function getMoveableDragger(moveable, target) {
+  var type;
+  return drag(target, {
+    container: window,
+    dragstart: function (_a) {
+      var datas = _a.datas,
+          inputEvent = _a.inputEvent,
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+      var inputTarget = inputEvent.target;
+      type = "";
+
+      if (!hasClass(inputTarget, prefix("control"))) {
+        return false;
+      }
+
+      if (hasClass(inputTarget, prefix("rotation"))) {
+        type = "rotate";
+        return rotateStart(moveable, {
+          datas: datas,
+          clientX: clientX,
+          clientY: clientY
+        });
+      } else if (moveable.props.scalable) {
+        var position = getPosition(inputTarget);
+        type = "scale";
+        return scaleStart(moveable, position, {
+          datas: datas
+        });
+      } else if (moveable.props.resizable) {
+        var position = getPosition(inputTarget);
+        type = "resize";
+        return resizeStart(moveable, position, {
+          datas: datas
+        });
+      } else {
+        return false;
+      }
+    },
+    drag: function (_a) {
+      var datas = _a.datas,
+          clientX = _a.clientX,
+          clientY = _a.clientY,
+          distX = _a.distX,
+          distY = _a.distY;
+
+      if (!type) {
+        return;
+      } else if (type === "rotate") {
+        return rotate(moveable, {
+          datas: datas,
+          clientX: clientX,
+          clientY: clientY
+        });
+      } else if (type === "scale") {
+        return scale(moveable, {
+          datas: datas,
+          distX: distX,
+          distY: distY
+        });
+      } else if (type === "resize") {
+        return resize(moveable, {
+          datas: datas,
+          distX: distX,
+          distY: distY
+        });
+      }
+    },
+    dragend: function (_a) {
+      var isDrag = _a.isDrag;
+
+      if (!type) {
+        return;
+      } else if (type === "rotate") {
+        return rotateEnd(moveable, {
+          isDrag: isDrag
+        });
+      } else if (type === "scale") {
+        return scaleEnd(moveable, {
+          isDrag: isDrag
+        });
+      } else if (type === "resize") {
+        return resizeEnd(moveable, {
+          isDrag: isDrag
+        });
+      }
+    }
+  });
+}
+
+var ControlBoxElement = styled("div", MOVEABLE_CSS);
+
+var Moveable =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(Moveable, _super);
+
+  function Moveable() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      target: null,
+      beforeMatrix: [1, 0, 0, 1, 0, 0],
+      matrix: [1, 0, 0, 1, 0, 0],
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+      transform: "",
+      transformOrigin: [0, 0],
+      direction: 1,
+      rotationRad: 0,
+      rotationPos: [0, 0],
+      origin: [0, 0],
+      pos1: [0, 0],
+      pos2: [0, 0],
+      pos3: [0, 0],
+      pos4: [0, 0]
+    };
+    return _this;
+  }
+
+  var __proto = Moveable.prototype;
+
+  __proto.isMoveableElement = function (target) {
+    return target && target.className.indexOf(PREFIX) > -1;
+  };
+
+  __proto.render = function () {
+    if (this.state.target !== this.props.target) {
+      this.updateRect(true);
+    }
+
+    var _a = this.state,
+        left = _a.left,
+        top = _a.top,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        pos3 = _a.pos3,
+        pos4 = _a.pos4,
+        target = _a.target,
+        transform = _a.transform,
+        direction = _a.direction;
+    return createElement(ControlBoxElement, {
+      ref: ref(this, "controlBox"),
+      className: prefix("control-box", direction === -1 ? "reverse" : ""),
+      style: {
+        position: this.props.container ? "absolute" : "fixed",
+        display: target ? "block" : "none",
+        transform: "translate(" + left + "px, " + top + "px) " + transform
+      }
+    }, createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos1, pos2)
+    }), createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos2, pos4)
+    }), createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos1, pos3)
+    }), createElement("div", {
+      className: prefix("line"),
+      style: getLineStyle(pos3, pos4)
+    }), this.renderRotation(direction), this.renderPosition(), this.renderOrigin());
+  };
+
+  __proto.renderRotation = function (direction) {
+    if (!this.props.rotatable) {
+      return null;
+    }
+
+    var _a = this.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2;
+    var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+    return createElement("div", {
+      className: prefix("line rotation"),
+      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"),
+      ref: ref(this, "rotationElement")
+    }));
+  };
+
+  __proto.renderOrigin = function () {
+    if (!this.props.origin) {
+      return null;
+    }
+
+    var origin = this.state.origin;
+    return createElement("div", {
+      className: prefix("control", "origin"),
+      style: getControlTransform(origin)
+    });
+  };
+
+  __proto.renderPosition = function () {
+    if (!this.props.resizable && !this.props.scalable) {
+      return null;
+    }
+
+    var _a = this.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        pos3 = _a.pos3,
+        pos4 = _a.pos4;
+    return [createElement("div", {
+      className: prefix("control", "nw"),
+      "data-position": "nw",
+      key: "nw",
+      style: getControlTransform(pos1)
+    }), createElement("div", {
+      className: prefix("control", "n"),
+      "data-position": "n",
+      key: "n",
+      style: getControlTransform(pos1, pos2)
+    }), createElement("div", {
+      className: prefix("control", "ne"),
+      "data-position": "ne",
+      key: "ne",
+      style: getControlTransform(pos2)
+    }), createElement("div", {
+      className: prefix("control", "w"),
+      "data-position": "w",
+      key: "w",
+      style: getControlTransform(pos1, pos3)
+    }), createElement("div", {
+      className: prefix("control", "e"),
+      "data-position": "e",
+      key: "e",
+      style: getControlTransform(pos2, pos4)
+    }), createElement("div", {
+      className: prefix("control", "sw"),
+      "data-position": "sw",
+      key: "sw",
+      style: getControlTransform(pos3)
+    }), createElement("div", {
+      className: prefix("control", "s"),
+      "data-position": "s",
+      key: "s",
+      style: getControlTransform(pos3, pos4)
+    }), createElement("div", {
+      className: prefix("control", "se"),
+      "data-position": "se",
+      key: "se",
+      style: getControlTransform(pos4)
+    })];
+  };
+
+  __proto.componentDidMount = function () {
+    /* rotatable */
+
+    /* resizable */
+
+    /* scalable */
+    this.moveableDragger = getMoveableDragger(this, this.controlBox.getElement());
+  };
+
+  __proto.componentWillUnmount = function () {
+    if (this.draggableDragger) {
+      this.draggableDragger.unset();
+      this.draggableDragger = null;
+    }
+
+    if (this.moveableDragger) {
+      this.moveableDragger.unset();
+      this.moveableDragger = null;
+    }
+  };
+
+  __proto.move = function (pos) {
+    if (!pos[0] && !pos[1]) {
+      return;
+    }
+
+    var _a = this.state,
+        left = _a.left,
+        top = _a.top;
+    this.setState({
+      left: left + pos[0],
+      top: top + pos[1]
+    });
+  };
+
+  __proto.updateRect = function (isNotSetState) {
+    var target = this.props.target;
+    var state = this.state;
+
+    if (state.target !== target) {
+      if (this.draggableDragger) {
+        this.draggableDragger.unset();
+        this.draggableDragger = null;
+      }
+
+      if (target && this.props.draggable) {
+        this.draggableDragger = getDraggableDragger(this, target);
+      }
+    }
+
+    var container = this.props.container;
+    this.updateState(getTargetInfo(target, container), isNotSetState);
+  };
+
+  __proto.updateTargetRect = function (target, nextState) {
+    var beforeMatrix = nextState.beforeMatrix,
+        transformOrigin = nextState.transformOrigin,
+        width = nextState.width,
+        height = nextState.height,
+        left = nextState.left,
+        top = nextState.top,
+        originalOrigin = nextState.origin;
+    var nextTransform = getTransform(target, true);
+
+    var _a = caculatePosition(multiple3x2(beforeMatrix.slice(), nextTransform), transformOrigin, width, height),
+        origin = _a[0],
+        pos1 = _a[1],
+        pos2 = _a[2],
+        pos3 = _a[3],
+        pos4 = _a[4];
+
+    var nextLeft = left + originalOrigin[0] - origin[0];
+    var nextTop = top + originalOrigin[1] - origin[1];
+
+    var _b = getRotationInfo(origin, pos1, pos2),
+        direction = _b[0],
+        rotationRad = _b[1],
+        rotationPos = _b[2];
+
+    this.setState({
+      direction: direction,
+      rotationRad: rotationRad,
+      rotationPos: rotationPos,
+      origin: origin,
+      pos1: pos1,
+      pos2: pos2,
+      pos3: pos3,
+      pos4: pos4,
+      left: nextLeft,
+      top: nextTop
+    });
+  };
+
+  __proto.updateState = function (nextState, isNotSetState) {
+    var state = this.state;
+
+    if (isNotSetState) {
+      for (var name in nextState) {
+        state[name] = nextState[name];
+      }
+    } else {
+      this.setState(nextState);
+    }
+  };
+
+  Moveable.defaultProps = {
+    container: null,
+    rotatable: false,
+    draggable: false,
+    scalable: false,
+    resizable: false,
+    origin: true,
+    onRotateStart: function () {},
+    onRotate: function () {},
+    onRotateEnd: function () {},
+    onDragStart: function () {},
+    onDrag: function () {},
+    onDragEnd: function () {},
+    onScaleStart: function () {},
+    onScale: function () {},
+    onScaleEnd: function () {},
+    onResizeStart: function () {},
+    onResize: function () {},
+    onResizeEnd: function () {}
+  };
+  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);
+
+/**
+ * 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;
+
+    _this.onDragStart = function (e) {
+      _this.trigger("dragStart", e);
+    };
+
+    _this.onDrag = function (e) {
+      _this.trigger("drag", e);
+    };
+
+    _this.onDragEnd = function (e) {
+      _this.trigger("dragEnd", e);
+    };
+
+    _this.onResizeStart = function (e) {
+      _this.trigger("resizeStart", e);
+    };
+
+    _this.onResize = function (e) {
+      _this.trigger("resize", e);
+    };
+
+    _this.onResizeEnd = function (e) {
+      _this.trigger("resizeEnd", e);
+    };
+
+    _this.onScaleStart = function (e) {
+      _this.trigger("scaleStart", e);
+    };
+
+    _this.onScale = function (e) {
+      _this.trigger("scale", e);
+    };
+
+    _this.onScaleEnd = function (e) {
+      _this.trigger("scaleEnd", e);
+    };
+
+    _this.onRotateStart = function (e) {
+      _this.trigger("rotateStart", e);
+    };
+
+    _this.onRotate = function (e) {
+      _this.trigger("rotate", e);
+    };
+
+    _this.onRotateEnd = function (e) {
+      _this.trigger("rotateEnd", e);
+    };
+
+    var element = document.createElement("div");
+    render(h(InnerMoveable, __assign({
+      ref: ref(_this, "innerMoveable")
+    }, options, {
+      onDragStart: _this.onDragStart,
+      onDrag: _this.onDrag,
+      onDragEnd: _this.onDragEnd,
+      onResizeStart: _this.onResizeStart,
+      onResize: _this.onResize,
+      onResizeEnd: _this.onResizeEnd,
+      onScaleStart: _this.onScaleStart,
+      onScale: _this.onScale,
+      onScaleEnd: _this.onScaleEnd,
+      onRotateStart: _this.onRotateStart,
+      onRotate: _this.onRotate,
+      onRotateEnd: _this.onRotateEnd
+    })), element);
+    parentElement.appendChild(element.children[0]);
+    return _this;
+  }
+
+  var __proto = Moveable.prototype;
+  Object.defineProperty(__proto, "origin", {
+    /**
+     * target is target
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.origin = true;
+     */
+    get: function () {
+      return this.getMoveableProps().origin;
+    },
+    set: function (origin) {
+      this.innerMoveable.setState({
+        origin: origin
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "target", {
+    /**
+     * target is target
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     * moveable.target = document.querySelector(".target");
+     */
+    get: function () {
+      return this.getMoveableProps().target;
+    },
+    set: function (target) {
+      if (target !== this.target) {
+        this.innerMoveable.setState({
+          target: target
+        });
+      } else {
+        this.updateRect();
+      }
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "draggable", {
+    /**
+     * Whether or not target can be dragged.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.draggable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().draggable || false;
+    },
+    set: function (draggable) {
+      this.innerMoveable.setState({
+        draggable: draggable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "resizable", {
+    /**
+     * Whether or not target can be resized.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.resizable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().resizable;
+    },
+    set: function (resizable) {
+      this.innerMoveable.setState({
+        resizable: resizable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "scalable", {
+    /**
+     * Whether or not target can scaled.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.scalable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().scalable;
+    },
+    set: function (scalable) {
+      this.innerMoveable.setState({
+        scalable: scalable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "rotatable", {
+    /**
+     * Whether or not target can be rotated.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.rotatable = true;
+     */
+    get: function () {
+      return this.getMoveableProps().rotatable;
+    },
+    set: function (rotatable) {
+      this.innerMoveable.setState({
+        rotatable: rotatable
+      });
+    },
+    enumerable: true,
+    configurable: true
+  });
+  /**
+   * Move the moveable as much as the `pos`.
+   * @param - the values of x and y to move moveable.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * moveable.move([0, -10]);
+   */
+
+  __proto.move = function (pos) {
+    this.getMoveable().move(pos);
+  };
+  /**
+   * 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;
+   *     }
+   * });
+   */
+
+
+  __proto.isMoveableElement = function (target) {
+    return this.getMoveable().isMoveableElement(target);
+  };
+  /**
+   * If the width, height, left, and top of the target 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();
+  };
+
+  __proto.getMoveable = function () {
+    return this.innerMoveable.preactMoveable;
+  };
+
+  __proto.getMoveableProps = function () {
+    return this.getMoveable().props;
+  };
+
+  return Moveable;
+}(EgComponent);
+
+export default Moveable$1;
+//# 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..67d4130da
--- /dev/null
+++ b/dist/moveable.esm.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.esm.js","sources":["../src/InnerMoveable.tsx","../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 EgComponent from \"@egjs/component\";\nimport { ref } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n} from \"react-moveable/declaration/types\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\nclass Moveable extends EgComponent {\n    private innerMoveable!: any;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...options}\n                onDragStart={this.onDragStart}\n                onDrag={this.onDrag}\n                onDragEnd={this.onDragEnd}\n                onResizeStart={this.onResizeStart}\n                onResize={this.onResize}\n                onResizeEnd={this.onResizeEnd}\n                onScaleStart={this.onScaleStart}\n                onScale={this.onScale}\n                onScaleEnd={this.onScaleEnd}\n                onRotateStart={this.onRotateStart}\n                onRotate={this.onRotate}\n                onRotateEnd={this.onRotateEnd}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.origin = true;\n     */\n    get origin() {\n        return this.getMoveableProps().origin;\n    }\n    set origin(origin: boolean) {\n        this.innerMoveable.setState({\n            origin,\n        });\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     * moveable.target = document.querySelector(\".target\");\n     */\n    get target(): HTMLElement | SVGElement {\n        return this.getMoveableProps().target;\n    }\n    set target(target: HTMLElement | SVGElement) {\n        if (target !== this.target) {\n            this.innerMoveable.setState({\n                target,\n            });\n        } else {\n            this.updateRect();\n        }\n    }\n    /**\n     * Whether or not target can be dragged.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.draggable = true;\n     */\n    get draggable(): boolean {\n        return this.getMoveableProps().draggable || false;\n    }\n    set draggable(draggable: boolean) {\n        this.innerMoveable.setState({\n            draggable,\n        });\n    }\n    /**\n     * Whether or not target can be resized.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.resizable = true;\n     */\n    get resizable(): boolean {\n        return this.getMoveableProps().resizable;\n    }\n    set resizable(resizable: boolean) {\n        this.innerMoveable.setState({\n            resizable,\n        });\n    }\n    /**\n     * Whether or not target can scaled.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.scalable = true;\n     */\n    get scalable(): boolean {\n        return this.getMoveableProps().scalable;\n    }\n    set scalable(scalable: boolean) {\n        this.innerMoveable.setState({\n            scalable,\n        });\n    }\n    /**\n     * Whether or not target can be rotated.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.rotatable = true;\n     */\n    get rotatable(): boolean {\n        return this.getMoveableProps().rotatable;\n    }\n    set rotatable(rotatable: boolean) {\n        this.innerMoveable.setState({\n            rotatable,\n        });\n    }\n    /**\n     * Move the moveable as much as the `pos`.\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.move([0, -10]);\n     */\n    public move(pos: number[]) {\n        this.getMoveable().move(pos);\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 the target 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    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n    private getMoveableProps() {\n        return this.getMoveable().props;\n    }\n    private onDragStart = (e: OnDragStart) => {\n        this.trigger(\"dragStart\", e);\n    }\n    private onDrag = (e: OnDrag) => {\n        this.trigger(\"drag\", e);\n    }\n    private onDragEnd = (e: OnDragEnd) => {\n        this.trigger(\"dragEnd\", e);\n    }\n    private onResizeStart = (e: OnResizeStart) => {\n        this.trigger(\"resizeStart\", e);\n    }\n    private onResize = (e: OnResize) => {\n        this.trigger(\"resize\", e);\n    }\n    private onResizeEnd = (e: OnResizeEnd) => {\n        this.trigger(\"resizeEnd\", e);\n    }\n    private onScaleStart = (e: OnScaleStart) => {\n        this.trigger(\"scaleStart\", e);\n    }\n    private onScale = (e: OnScale) => {\n        this.trigger(\"scale\", e);\n    }\n    private onScaleEnd = (e: OnScaleEnd) => {\n        this.trigger(\"scaleEnd\", e);\n    }\n    private onRotateStart = (e: OnRotateStart) => {\n        this.trigger(\"rotateStart\", e);\n    }\n    private onRotate = (e: OnRotate) => {\n        this.trigger(\"rotate\", e);\n    }\n    private onRotateEnd = (e: OnRotateEnd) => {\n        this.trigger(\"rotateEnd\", e);\n    }\n}\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 */\nexport default Moveable;\n"],"names":["tslib_1","props","_super","_this","state","h","Moveable","ref","Component","parentElement","options","e","trigger","element","document","createElement","render","InnerMoveable","onDragStart","onDrag","onDragEnd","onResizeStart","onResize","onResizeEnd","onScaleStart","onScale","onScaleEnd","onRotateStart","onRotate","onRotateEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","pos","getMoveable","move","isMoveableElement","preactMoveable","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;;ACOA;;;;;;AAKA;;;EAAuBR,SAAA,SAAA,QAAA;;;;;;mBAMnB,CAAYS,aAAZ,EAAqDC,OAArD;0BAAqD,EAAA;MAAAA,YAAA;;;gBACjDR,WAAA,KAAA,SADJ;;IAoLQC,iBAAA,GAAc,UAACQ,CAAD;MAClBR,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;KADI;;IAGAR,YAAA,GAAS,UAACQ,CAAD;MACbR,KAAI,CAACS,OAAL,CAAa,MAAb,EAAqBD,CAArB;KADI;;IAGAR,eAAA,GAAY,UAACQ,CAAD;MAChBR,KAAI,CAACS,OAAL,CAAa,SAAb,EAAwBD,CAAxB;KADI;;IAGAR,mBAAA,GAAgB,UAACQ,CAAD;MACpBR,KAAI,CAACS,OAAL,CAAa,aAAb,EAA4BD,CAA5B;KADI;;IAGAR,cAAA,GAAW,UAACQ,CAAD;MACfR,KAAI,CAACS,OAAL,CAAa,QAAb,EAAuBD,CAAvB;KADI;;IAGAR,iBAAA,GAAc,UAACQ,CAAD;MAClBR,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;KADI;;IAGAR,kBAAA,GAAe,UAACQ,CAAD;MACnBR,KAAI,CAACS,OAAL,CAAa,YAAb,EAA2BD,CAA3B;KADI;;IAGAR,aAAA,GAAU,UAACQ,CAAD;MACdR,KAAI,CAACS,OAAL,CAAa,OAAb,EAAsBD,CAAtB;KADI;;IAGAR,gBAAA,GAAa,UAACQ,CAAD;MACjBR,KAAI,CAACS,OAAL,CAAa,UAAb,EAAyBD,CAAzB;KADI;;IAGAR,mBAAA,GAAgB,UAACQ,CAAD;MACpBR,KAAI,CAACS,OAAL,CAAa,aAAb,EAA4BD,CAA5B;KADI;;IAGAR,cAAA,GAAW,UAACQ,CAAD;MACfR,KAAI,CAACS,OAAL,CAAa,QAAb,EAAuBD,CAAvB;KADI;;IAGAR,iBAAA,GAAc,UAACQ,CAAD;MAClBR,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;KADI;;QAnNEE,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;IAEAC,MAAM,CACFX,EAACY;MACGV,GAAG,EAAEA,GAAG,CAACJ,KAAD,EAAO,eAAP;OACJO;MACJQ,WAAW,EAAEf,KAAI,CAACe;MAClBC,MAAM,EAAEhB,KAAI,CAACgB;MACbC,SAAS,EAAEjB,KAAI,CAACiB;MAChBC,aAAa,EAAElB,KAAI,CAACkB;MACpBC,QAAQ,EAAEnB,KAAI,CAACmB;MACfC,WAAW,EAAEpB,KAAI,CAACoB;MAClBC,YAAY,EAAErB,KAAI,CAACqB;MACnBC,OAAO,EAAEtB,KAAI,CAACsB;MACdC,UAAU,EAAEvB,KAAI,CAACuB;MACjBC,aAAa,EAAExB,KAAI,CAACwB;MACpBC,QAAQ,EAAEzB,KAAI,CAACyB;MACfC,WAAW,EAAE1B,KAAI,CAAC0B;OAfpB,EAiBFhB,OAjBE,CAAN;IAmBAJ,aAAa,CAACqB,WAAd,CAA0BjB,OAAO,CAACkB,QAAR,CAAiB,CAAjB,CAA1B;;;;;EAWJC,qBAAA,kBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBC,MAA/B;;SAEJ,UAAWA,MAAX;WACSC,aAAL,CAAmBC,QAAnB,CAA4B;QACxBF,MAAM;OADV;;;;GAJJ;EAgBAF,qBAAA,kBAAA;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBI,MAA/B;;SAEJ,UAAWA,MAAX;UACQA,MAAM,KAAK,KAAKA,MAApB,EAA4B;aACnBF,aAAL,CAAmBC,QAAnB,CAA4B;UACxBC,MAAM;SADV;OADJ,MAIO;aACEC,UAAL;;;;;GATR;EAqBAN,qBAAA,qBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBM,SAAxB,IAAqC,KAA5C;;SAEJ,UAAcA,SAAd;WACSJ,aAAL,CAAmBC,QAAnB,CAA4B;QACxBG,SAAS;OADb;;;;GAJJ;EAiBAP,qBAAA,qBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBO,SAA/B;;SAEJ,UAAcA,SAAd;WACSL,aAAL,CAAmBC,QAAnB,CAA4B;QACxBI,SAAS;OADb;;;;GAJJ;EAiBAR,qBAAA,oBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBQ,QAA/B;;SAEJ,UAAaA,QAAb;WACSN,aAAL,CAAmBC,QAAnB,CAA4B;QACxBK,QAAQ;OADZ;;;;GAJJ;EAiBAT,qBAAA,qBAAA;;;;;;;;;;SAAA;aACW,KAAKC,gBAAL,GAAwBS,SAA/B;;SAEJ,UAAcA,SAAd;WACSP,aAAL,CAAmBC,QAAnB,CAA4B;QACxBM,SAAS;OADb;;;;GAJJ;;;;;;;;;;;;cAkBO,GAAP,UAAYC,GAAZ;SACSC,WAAL,GAAmBC,IAAnB,CAAwBF,GAAxB;GADG;;;;;;;;;;;;;;;;;2BAiBA,GAAP,UAAyBN,MAAzB;WACW,KAAKO,WAAL,GAAmBE,iBAAnB,CAAqCT,MAArC,CAAP;GADG;;;;;;;;;;;;;;oBAcA,GAAP;SACSO,WAAL,GAAmBN,UAAnB;GADG;;qBAGC,GAAR;WACW,KAAKH,aAAL,CAAmBY,cAA1B;GADI;;0BAGA,GAAR;WACW,KAAKH,WAAL,GAAmB3C,KAA1B;GADI;;iBAuCZ;EA9NuB+C,YAAvB;;;;"}
\ No newline at end of file
diff --git a/dist/moveable.js b/dist/moveable.js
new file mode 100644
index 000000000..4b0776cd4
--- /dev/null
+++ b/dist/moveable.js
@@ -0,0 +1,3413 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.2.0
+*/
+(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);
+    };
+
+    /*
+    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.1.0
+    */
+    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 "" + prefix + name;
+        }).join(" ");
+      }).join(" ");
+    }
+    /* react */
+
+    function ref(target, name) {
+      return function (e) {
+        e && (target[name] = e);
+      };
+    }
+    function prefixCSS(prefix, css) {
+      return css.replace(/\.([^{,\s\d.]+)/g, "." + prefix + "$1");
+    }
+
+    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 != null) {
+        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 __());
+        };
+    })();
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: preact-compat2
+    license: MIT
+    author: Daybrush
+    repository: git+https://github.com/daybrush/preact-compat2.git
+    version: 0.1.0
+    */
+
+    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) 2018 Daybrush
+    @name: @daybrush/utils
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/utils
+    @version 0.10.0
+    */
+    /**
+    * get string "undefined"
+    * @memberof Consts
+    * @example
+    import {UNDEFINED} from "@daybrush/utils";
+
+    console.log(UNDEFINED); // "undefined"
+    */
+
+    var UNDEFINED = "undefined";
+    /**
+    * 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;
+    }
+    /**
+    * 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]
+        };
+      }
+    }
+    /**
+    * 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|$)"));
+    }
+
+    /*
+    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.3.3
+    */
+
+    /*
+    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.3.2
+    */
+
+    /*! *****************************************************************************
+    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) {
+          return subSelector.indexOf(":host") > -1 ? "" + subSelector.replace(/\:host/g, "." + className) : "." + 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) Daybrush
+    name: @daybrush/drag
+    license: MIT
+    author: Daybrush
+    repository: git+https://github.com/daybrush/drag.git
+    version: 0.5.0
+    */
+    function setDrag(el, options) {
+      var flag = false;
+      var startX = 0;
+      var startY = 0;
+      var prevX = 0;
+      var prevY = 0;
+      var datas = {};
+      var isDrag = false;
+      var _a = options.container,
+          container = _a === void 0 ? el : _a,
+          dragstart = options.dragstart,
+          drag = options.drag,
+          dragend = options.dragend,
+          _b = options.events,
+          events = _b === void 0 ? ["touch", "mouse"] : _b;
+      var isTouch = events.indexOf("touch") > -1;
+      var isMouse = events.indexOf("mouse") > -1;
+
+      function getPosition(e) {
+        return e.touches && e.touches.length ? e.touches[0] : e;
+      }
+
+      function onDragStart(e) {
+        flag = true;
+        isDrag = false;
+
+        var _a = getPosition(e),
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        startX = clientX;
+        startY = clientY;
+        prevX = clientX;
+        prevY = clientY;
+        datas = {};
+        (dragstart && dragstart({
+          datas: datas,
+          inputEvent: e,
+          clientX: clientX,
+          clientY: clientY
+        })) === false && (flag = false);
+        flag && e.preventDefault();
+      }
+
+      function onDrag(e) {
+        if (!flag) {
+          return;
+        }
+
+        var _a = getPosition(e),
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        var deltaX = clientX - prevX;
+        var deltaY = clientY - prevY;
+
+        if (!deltaX && !deltaY) {
+          return;
+        }
+
+        isDrag = true;
+        drag && drag({
+          datas: datas,
+          clientX: clientX,
+          clientY: clientY,
+          deltaX: deltaX,
+          deltaY: deltaY,
+          distX: clientX - startX,
+          distY: clientY - startY,
+          inputEvent: e
+        });
+        prevX = clientX;
+        prevY = clientY;
+      }
+
+      function onDragEnd(e) {
+        if (!flag) {
+          return;
+        }
+
+        flag = false;
+        dragend && dragend({
+          datas: datas,
+          isDrag: isDrag,
+          inputEvent: e,
+          clientX: prevX,
+          clientY: prevY,
+          distX: prevX - startX,
+          distY: prevY - startY
+        });
+      }
+
+      if (isMouse) {
+        el.addEventListener("mousedown", onDragStart);
+        container.addEventListener("mousemove", onDrag);
+        container.addEventListener("mouseup", onDragEnd);
+      }
+
+      if (isTouch) {
+        el.addEventListener("touchstart", onDragStart);
+        container.addEventListener("touchmove", onDrag);
+        container.addEventListener("touchend", onDragEnd);
+      }
+
+      return {
+        unset: function () {
+          if (isMouse) {
+            el.removeEventListener("mousedown", onDragStart);
+            container.removeEventListener("mousemove", onDrag);
+            container.removeEventListener("mouseup", onDragEnd);
+          }
+
+          if (isTouch) {
+            el.removeEventListener("touchstart", onDragStart);
+            container.removeEventListener("touchmove", onDrag);
+            container.removeEventListener("touchend", onDragEnd);
+          }
+        }
+      };
+    }
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: preact-moveable
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable
+    version: 0.4.0
+    */
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: react-moveable
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
+    version: 0.5.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 __());
+    }
+
+    var PREFIX = "moveable-";
+    var MOVEABLE_CSS = prefixCSS(PREFIX, "\n{\n    position: fixed;\n    width: 0;\n    height: 0;\n    left: 0;\n    top: 0;\n    z-index: 3000;\n}\n.line, .control {\n    left: 0;\n    top: 0;\n}\n.control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n}\n.line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n.line.rotation {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n.line.rotation .control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n.control.origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n}\n.control.e, .control.w {\n    cursor: ew-resize;\n}\n.control.s, .control.n {\n    cursor: ns-resize;\n}\n.control.nw, .control.se, :host.reverse .control.ne, :host.reverse .control.sw {\n    cursor: nwse-resize;\n}\n.control.ne, .control.sw, :host.reverse .control.nw, :host.reverse .control.se {\n    cursor: nesw-resize;\n}\n");
+
+    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 caculate3x2(a, b) {
+      // 0 2 4
+      // 1 3 5
+      return [a[0] * b[0] + a[2] * b[1] + a[4] * b[2], a[1] * b[0] + a[3] * b[1] + a[5] * b[2]];
+    }
+    function multiple3x2(a, b) {
+      // 00 01 02
+      // 10 11 12
+      var a00 = a[0],
+          a10 = a[1],
+          a01 = a[2],
+          a11 = a[3],
+          a02 = a[4],
+          a12 = a[5];
+      var b00 = b[0],
+          b10 = b[1],
+          b01 = b[2],
+          b11 = b[3],
+          b02 = b[4],
+          b12 = b[5];
+      a[0] = a00 * b00 + a01 * b10;
+      a[1] = a10 * b00 + a11 * b10;
+      a[2] = a00 * b01 + a01 * b11;
+      a[3] = a10 * b01 + a11 * b11;
+      a[4] = a00 * b02 + a01 * b12 + a02 * 1;
+      a[5] = a10 * b02 + a11 * b12 + a12 * 1;
+      return a;
+    }
+    function invert3x2(a) {
+      // 00 01 02
+      // 10 11 12
+      // 20 21 22
+      var a00 = a[0],
+          a10 = a[1],
+          a01 = a[2],
+          a11 = a[3],
+          a02 = a[4],
+          a12 = a[5];
+      var a20 = 0;
+      var a21 = 0;
+      var a22 = 1;
+      var det = a00 * a11 * a22 + a01 * a12 * a20 + a02 * a10 * a21 - a02 * a11 * a20 - a01 * a10 * a22 - a00 * a12 * a21;
+      var b00 = a11 * a22 - a12 * a21;
+      var b01 = a02 * a21 - a01 * a22;
+      var b02 = a01 * a12 - a02 * a11;
+      var b10 = a12 * a20 - a10 * a22;
+      var b11 = a22 * a00 - a20 * a02;
+      var b12 = a02 * a10 - a00 * a12; // const b20 = a11 * a21 - a11 * a20;
+      // const b21 = a20 * a01 - a21 * a00;
+      // const b22 = a00 * a11 - a01 * a10;
+
+      a[0] = b00 / det;
+      a[1] = b10 / det;
+      a[2] = b01 / det;
+      a[3] = b11 / det;
+      a[4] = b02 / det;
+      a[5] = b12 / det;
+      return a;
+    }
+    function getTransform(target, isInit) {
+      var transform = window.getComputedStyle(target).transform;
+
+      if (transform === "none") {
+        if (isInit) {
+          return [1, 0, 0, 1, 0, 0];
+        }
+
+        return "none";
+      } else {
+        var value = splitBracket(transform).value;
+        return value.split(/s*,\s*/g).map(function (v) {
+          return parseFloat(v);
+        });
+      }
+    }
+    function caculateMatrixStack(target) {
+      var el = target;
+      var matrixes = [];
+
+      while (el) {
+        matrixes.push(getTransform(el));
+        el = el.parentElement;
+      }
+
+      matrixes.reverse(); // 1 0 0
+      // 0 1 0
+
+      var mat = [1, 0, 0, 1, 0, 0];
+      var length = matrixes.length;
+      var beforeMatrix = [1, 0, 0, 1, 0, 0];
+      matrixes.forEach(function (matrix, i) {
+        if (length - 1 === i) {
+          beforeMatrix = mat.slice();
+        }
+
+        if (matrix !== "none") {
+          multiple3x2(mat, matrix);
+        }
+      });
+      beforeMatrix[4] = 0;
+      beforeMatrix[5] = 0;
+      mat[4] = 0;
+      mat[5] = 0;
+      return [beforeMatrix, mat];
+    }
+    function caculatePosition(matrix, origin, width, height) {
+      var _a = caculate3x2(matrix, [0, 0, 1]),
+          x1 = _a[0],
+          y1 = _a[1];
+
+      var _b = caculate3x2(matrix, [width, 0, 1]),
+          x2 = _b[0],
+          y2 = _b[1];
+
+      var _c = caculate3x2(matrix, [0, height, 1]),
+          x3 = _c[0],
+          y3 = _c[1];
+
+      var _d = caculate3x2(matrix, [width, height, 1]),
+          x4 = _d[0],
+          y4 = _d[1];
+
+      var _e = caculate3x2(matrix, [origin[0], origin[1], 1]),
+          originX = _e[0],
+          originY = _e[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;
+      return [[originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4]];
+    }
+    function caculateRotationMatrix(matrix, rad) {
+      var cos = Math.cos(rad);
+      var sin = Math.sin(rad);
+      var rotationMatrix = [cos, sin, -sin, cos, 0, 0];
+      return caculate3x2(rotationMatrix, matrix);
+    }
+    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 (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(origin, pos1, pos2) {
+      var pos1Rad = getRad(origin, pos1);
+      var pos2Rad = getRad(origin, pos2);
+      var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1;
+      var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+      var relativeRotationPos = caculateRotationMatrix([0, -40, 0], rotationRad);
+      var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]];
+      return [direction, rotationRad, rotationPos];
+    }
+    function getTargetInfo(target, container) {
+      var _a, _b, _c, _d;
+
+      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 = [1, 0, 0, 1, 0, 0];
+      var matrix = [1, 0, 0, 1, 0, 0];
+      var width = 0;
+      var height = 0;
+      var transformOrigin = [0, 0];
+      var direction = 1;
+      var rotationPos = [0, 0];
+      var rotationRad = 0;
+
+      if (target) {
+        var rect = target.getBoundingClientRect();
+        var style = window.getComputedStyle(target);
+        left = rect.left;
+        top = rect.top;
+        width = target.offsetWidth;
+        height = target.offsetHeight;
+
+        if (isUndefined$1(width)) {
+          _a = getSize(target, style, true), width = _a[0], height = _a[1];
+        }
+
+        _b = caculateMatrixStack(target), beforeMatrix = _b[0], matrix = _b[1];
+        transformOrigin = style.transformOrigin.split(" ").map(function (pos) {
+          return parseFloat(pos);
+        });
+        _c = caculatePosition(matrix, transformOrigin, width, height), origin = _c[0], pos1 = _c[1], pos2 = _c[2], pos3 = _c[3], pos4 = _c[4];
+
+        if (container) {
+          var containerRect = container.getBoundingClientRect();
+          left -= containerRect.left;
+          top -= containerRect.top;
+        } // 1 : clockwise
+        // -1 : counterclockwise
+
+
+        _d = getRotationInfo(origin, pos1, pos2), direction = _d[0], rotationRad = _d[1], rotationPos = _d[2];
+      }
+
+      return {
+        direction: direction,
+        rotationRad: rotationRad,
+        rotationPos: rotationPos,
+        transform: "",
+        target: target,
+        left: left,
+        top: top,
+        pos1: pos1,
+        pos2: pos2,
+        pos3: pos3,
+        pos4: pos4,
+        width: width,
+        height: height,
+        beforeMatrix: beforeMatrix,
+        matrix: matrix,
+        origin: origin,
+        transformOrigin: transformOrigin
+      };
+    }
+    function getPosition(target) {
+      var position = target.getAttribute("data-position");
+
+      if (!position) {
+        return;
+      }
+
+      var pos = [0, 0];
+      position.indexOf("w") > -1 && (pos[0] = -1);
+      position.indexOf("e") > -1 && (pos[0] = 1);
+      position.indexOf("n") > -1 && (pos[1] = -1);
+      position.indexOf("s") > -1 && (pos[1] = 1);
+      return pos;
+    }
+
+    function getDraggableDragger(moveable, target) {
+      return setDrag(target, {
+        container: window,
+        dragstart: function (_a) {
+          var datas = _a.datas;
+          var style = window.getComputedStyle(target);
+          var _b = moveable.state,
+              matrix = _b.matrix,
+              beforeMatrix = _b.beforeMatrix;
+          datas.matrix = invert3x2(matrix.slice());
+          datas.beforeMatrix = invert3x2(beforeMatrix.slice());
+          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 = style.transform;
+          datas.prevDist = [0, 0];
+          datas.prevBeforeDist = [0, 0];
+
+          if (datas.transform === "none") {
+            datas.transform = "";
+          }
+
+          return moveable.props.onDragStart({
+            target: target
+          });
+        },
+        drag: function (_a) {
+          var datas = _a.datas,
+              distX = _a.distX,
+              distY = _a.distY;
+          var beforeMatrix = datas.beforeMatrix,
+              matrix = datas.matrix,
+              prevDist = datas.prevDist,
+              prevBeforeDist = datas.prevBeforeDist;
+          var beforeDist = caculate3x2(beforeMatrix, [distX, distY, 1]);
+          var dist = caculate3x2(matrix, [distX, distY, 1]);
+          var delta = [dist[0] - prevDist[0], dist[1] - prevDist[1]];
+          var beforeDelta = [beforeDist[0] - prevBeforeDist[0], beforeDist[1] - prevBeforeDist[1]];
+          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 transform = datas.transform + " translate(" + dist[0] + "px, " + dist[1] + "px)";
+          moveable.props.onDrag({
+            target: target,
+            transform: transform,
+            dist: dist,
+            delta: delta,
+            beforeDist: beforeDist,
+            beforeDelta: beforeDelta,
+            left: left,
+            top: top,
+            right: right,
+            bottom: bottom
+          });
+          moveable.setState({
+            transform: "translate(" + distX + "px, " + distY + "px)"
+          });
+        },
+        dragend: function (_a) {
+          var isDrag = _a.isDrag;
+          moveable.props.onDragEnd({
+            target: target,
+            isDrag: isDrag
+          });
+
+          if (isDrag) {
+            moveable.updateRect();
+          }
+        }
+      });
+    }
+
+    function scaleStart(moveable, position, _a) {
+      var datas = _a.datas;
+      var target = moveable.props.target;
+
+      if (!position || !target) {
+        return false;
+      }
+
+      var style = window.getComputedStyle(target);
+      var _b = moveable.state,
+          matrix = _b.matrix,
+          beforeMatrix = _b.beforeMatrix,
+          width = _b.width,
+          height = _b.height,
+          left = _b.left,
+          top = _b.top,
+          transformOrigin = _b.transformOrigin,
+          origin = _b.origin;
+      datas.matrix = invert3x2(matrix.slice());
+      datas.beforeMatrix = beforeMatrix;
+      datas.transform = style.transform;
+      datas.prevDist = [1, 1];
+      datas.position = position;
+      datas.width = width;
+      datas.height = height;
+      datas.transformOrigin = transformOrigin;
+      datas.originalOrigin = origin;
+      datas.left = left;
+      datas.top = top;
+
+      if (datas.transform === "none") {
+        datas.transform = "";
+      }
+
+      moveable.props.onScaleStart({
+        target: target
+      });
+    }
+    function scale(moveable, _a) {
+      var datas = _a.datas,
+          distX = _a.distX,
+          distY = _a.distY;
+      var matrix = datas.matrix,
+          beforeMatrix = datas.beforeMatrix,
+          prevDist = datas.prevDist,
+          position = datas.position,
+          width = datas.width,
+          height = datas.height,
+          left = datas.left,
+          top = datas.top,
+          transformOrigin = datas.transformOrigin,
+          originalOrigin = datas.originalOrigin,
+          transform = datas.transform;
+      var dist = caculate3x2(matrix, [distX, distY, 1]);
+      var distWidth = position[0] * dist[0];
+      var distHeight = position[1] * dist[1]; // diagonal
+
+      if (position[0] && position[1]) {
+        var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+        var rad = getRad([0, 0], dist);
+        var standardRad = getRad([0, 0], position);
+        var distDiagonal = Math.cos(rad - standardRad) * size;
+        distWidth = distDiagonal;
+        distHeight = distDiagonal * height / width;
+      }
+
+      var nextWidth = width + distWidth;
+      var nextHeight = height + distHeight;
+      var scaleX = nextWidth / width;
+      var scaleY = nextHeight / height;
+      var target = moveable.props.target;
+      datas.prevDist = [scaleX, scaleY];
+      moveable.props.onScale({
+        target: target,
+        scale: [scaleX, scaleY],
+        dist: [scaleX / prevDist[0], scaleY / prevDist[1]],
+        delta: [scaleX - prevDist[0], scaleY - prevDist[1]],
+        transform: transform + " scale(" + scaleX + ", " + scaleY + ")"
+      });
+      moveable.updateTargetRect(target, {
+        beforeMatrix: beforeMatrix,
+        transformOrigin: transformOrigin,
+        origin: originalOrigin,
+        width: width,
+        height: height,
+        left: left,
+        top: top
+      });
+    }
+    function scaleEnd(moveable, _a) {
+      var isDrag = _a.isDrag;
+      moveable.props.onScaleEnd({
+        target: moveable.props.target,
+        isDrag: isDrag
+      });
+
+      if (isDrag) {
+        moveable.updateRect();
+      }
+    }
+
+    function getRotateInfo(datas, clientX, clientY) {
+      var startAbsoluteOrigin = datas.startAbsoluteOrigin,
+          startRad = datas.startRad,
+          prevRad = datas.prevRad,
+          prevLoop = datas.loop,
+          direction = datas.direction;
+      var rad = getRad(startAbsoluteOrigin, [clientX, clientY]);
+
+      if (prevRad > rad && prevRad > 270 && rad < 90) {
+        // 360 => 0
+        ++datas.loop;
+      } else if (prevRad < rad && prevRad < 90 && rad > 270) {
+        // 0 => 360
+        --datas.loop;
+      }
+
+      var absolutePrevRad = prevLoop * 360 + prevRad;
+      var absoluteRad = datas.loop * 360 + rad;
+      datas.prevRad = rad;
+      return {
+        delta: direction * (absoluteRad - absolutePrevRad) / Math.PI * 180,
+        dist: direction * (absolutePrevRad - startRad) / Math.PI * 180,
+        beforeDelta: (absoluteRad - absolutePrevRad) / Math.PI * 180,
+        beforeDist: (absolutePrevRad - startRad) / Math.PI * 180,
+        origin: origin
+      };
+    }
+
+    function rotateStart(moveable, _a) {
+      var datas = _a.datas,
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+      var target = moveable.props.target;
+
+      if (!target) {
+        return false;
+      }
+
+      var _b = moveable.state,
+          matrix = _b.matrix,
+          left = _b.left,
+          top = _b.top,
+          origin = _b.origin,
+          rotationPos = _b.rotationPos,
+          direction = _b.direction;
+      datas.transform = window.getComputedStyle(target).transform;
+      datas.matrix = matrix;
+      datas.left = left;
+      datas.top = top;
+      datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]];
+      datas.prevRad = getRad(datas.startAbsoluteOrigin, [clientX, clientY]);
+      datas.startRad = datas.prevRad;
+      datas.loop = 0;
+      datas.direction = direction;
+
+      if (datas.transform === "none") {
+        datas.transform = "";
+      }
+
+      moveable.props.onRotateStart({
+        target: target
+      });
+    }
+    function rotate(moveable, _a) {
+      var datas = _a.datas,
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+
+      var _b = getRotateInfo(datas, clientX, clientY),
+          delta = _b.delta,
+          dist = _b.dist,
+          beforeDist = _b.beforeDist,
+          beforeDelta = _b.beforeDelta;
+
+      moveable.props.onRotate({
+        target: moveable.props.target,
+        delta: delta,
+        dist: dist,
+        beforeDist: beforeDist,
+        beforeDelta: beforeDelta,
+        transform: datas.transform + " rotate(" + dist + "deg)"
+      });
+      moveable.updateTargetRect(moveable.props.target, moveable.state);
+    }
+    function rotateEnd(moveable, _a) {
+      var isDrag = _a.isDrag;
+      moveable.props.onRotateEnd({
+        target: moveable.props.target,
+        isDrag: isDrag
+      });
+
+      if (isDrag) {
+        moveable.updateRect();
+      }
+    }
+
+    function resizeStart(moveable, position, _a) {
+      var datas = _a.datas;
+      var target = moveable.props.target;
+
+      if (!target || !position) {
+        return false;
+      }
+
+      var matrix = moveable.state.matrix;
+
+      var _b = getSize(target),
+          width = _b[0],
+          height = _b[1];
+
+      datas.matrix = invert3x2(matrix.slice());
+      datas.position = position;
+      datas.width = width;
+      datas.height = height;
+      datas.prevWidth = 0;
+      datas.prevHeight = 0;
+      moveable.props.onResizeStart({
+        target: target
+      });
+    }
+    function resize(moveable, _a) {
+      var datas = _a.datas,
+          distX = _a.distX,
+          distY = _a.distY;
+      var matrix = datas.matrix,
+          position = datas.position,
+          width = datas.width,
+          height = datas.height,
+          prevWidth = datas.prevWidth,
+          prevHeight = datas.prevHeight;
+      var dist = caculate3x2(matrix, [distX, distY, 1]);
+      var distWidth = position[0] * dist[0];
+      var distHeight = position[1] * dist[1]; // diagonal
+
+      if (position[0] && position[1]) {
+        var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+        var rad = getRad([0, 0], dist);
+        var standardRad = getRad([0, 0], position);
+        var distDiagonal = Math.cos(rad - standardRad) * size;
+        distWidth = distDiagonal;
+        distHeight = distDiagonal * height / width;
+      }
+
+      var nextWidth = width + distWidth;
+      var nextHeight = height + distHeight;
+      datas.prevWidth = distWidth;
+      datas.prevHeight = distHeight;
+      moveable.props.onResize({
+        target: moveable.props.target,
+        width: nextWidth,
+        height: nextHeight,
+        dist: [distWidth, distHeight],
+        delta: [distWidth - prevWidth, distHeight - prevHeight]
+      });
+      moveable.updateRect();
+    }
+    function resizeEnd(moveable, _a) {
+      var isDrag = _a.isDrag;
+      moveable.props.onScaleEnd({
+        target: moveable.props.target,
+        isDrag: isDrag
+      });
+
+      if (isDrag) {
+        moveable.updateRect();
+      }
+    }
+
+    function getMoveableDragger(moveable, target) {
+      var type;
+      return setDrag(target, {
+        container: window,
+        dragstart: function (_a) {
+          var datas = _a.datas,
+              inputEvent = _a.inputEvent,
+              clientX = _a.clientX,
+              clientY = _a.clientY;
+          var inputTarget = inputEvent.target;
+          type = "";
+
+          if (!hasClass(inputTarget, prefix("control"))) {
+            return false;
+          }
+
+          if (hasClass(inputTarget, prefix("rotation"))) {
+            type = "rotate";
+            return rotateStart(moveable, {
+              datas: datas,
+              clientX: clientX,
+              clientY: clientY
+            });
+          } else if (moveable.props.scalable) {
+            var position = getPosition(inputTarget);
+            type = "scale";
+            return scaleStart(moveable, position, {
+              datas: datas
+            });
+          } else if (moveable.props.resizable) {
+            var position = getPosition(inputTarget);
+            type = "resize";
+            return resizeStart(moveable, position, {
+              datas: datas
+            });
+          } else {
+            return false;
+          }
+        },
+        drag: function (_a) {
+          var datas = _a.datas,
+              clientX = _a.clientX,
+              clientY = _a.clientY,
+              distX = _a.distX,
+              distY = _a.distY;
+
+          if (!type) {
+            return;
+          } else if (type === "rotate") {
+            return rotate(moveable, {
+              datas: datas,
+              clientX: clientX,
+              clientY: clientY
+            });
+          } else if (type === "scale") {
+            return scale(moveable, {
+              datas: datas,
+              distX: distX,
+              distY: distY
+            });
+          } else if (type === "resize") {
+            return resize(moveable, {
+              datas: datas,
+              distX: distX,
+              distY: distY
+            });
+          }
+        },
+        dragend: function (_a) {
+          var isDrag = _a.isDrag;
+
+          if (!type) {
+            return;
+          } else if (type === "rotate") {
+            return rotateEnd(moveable, {
+              isDrag: isDrag
+            });
+          } else if (type === "scale") {
+            return scaleEnd(moveable, {
+              isDrag: isDrag
+            });
+          } else if (type === "resize") {
+            return resizeEnd(moveable, {
+              isDrag: isDrag
+            });
+          }
+        }
+      });
+    }
+
+    var ControlBoxElement = styled("div", MOVEABLE_CSS);
+
+    var Moveable =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$3(Moveable, _super);
+
+      function Moveable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+
+        _this.state = {
+          target: null,
+          beforeMatrix: [1, 0, 0, 1, 0, 0],
+          matrix: [1, 0, 0, 1, 0, 0],
+          left: 0,
+          top: 0,
+          width: 0,
+          height: 0,
+          transform: "",
+          transformOrigin: [0, 0],
+          direction: 1,
+          rotationRad: 0,
+          rotationPos: [0, 0],
+          origin: [0, 0],
+          pos1: [0, 0],
+          pos2: [0, 0],
+          pos3: [0, 0],
+          pos4: [0, 0]
+        };
+        return _this;
+      }
+
+      var __proto = Moveable.prototype;
+
+      __proto.isMoveableElement = function (target) {
+        return target && target.className.indexOf(PREFIX) > -1;
+      };
+
+      __proto.render = function () {
+        if (this.state.target !== this.props.target) {
+          this.updateRect(true);
+        }
+
+        var _a = this.state,
+            left = _a.left,
+            top = _a.top,
+            pos1 = _a.pos1,
+            pos2 = _a.pos2,
+            pos3 = _a.pos3,
+            pos4 = _a.pos4,
+            target = _a.target,
+            transform = _a.transform,
+            direction = _a.direction;
+        return createElement(ControlBoxElement, {
+          ref: ref(this, "controlBox"),
+          className: prefix("control-box", direction === -1 ? "reverse" : ""),
+          style: {
+            position: this.props.container ? "absolute" : "fixed",
+            display: target ? "block" : "none",
+            transform: "translate(" + left + "px, " + top + "px) " + transform
+          }
+        }, createElement("div", {
+          className: prefix("line"),
+          style: getLineStyle(pos1, pos2)
+        }), createElement("div", {
+          className: prefix("line"),
+          style: getLineStyle(pos2, pos4)
+        }), createElement("div", {
+          className: prefix("line"),
+          style: getLineStyle(pos1, pos3)
+        }), createElement("div", {
+          className: prefix("line"),
+          style: getLineStyle(pos3, pos4)
+        }), this.renderRotation(direction), this.renderPosition(), this.renderOrigin());
+      };
+
+      __proto.renderRotation = function (direction) {
+        if (!this.props.rotatable) {
+          return null;
+        }
+
+        var _a = this.state,
+            pos1 = _a.pos1,
+            pos2 = _a.pos2;
+        var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+        return createElement("div", {
+          className: prefix("line rotation"),
+          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"),
+          ref: ref(this, "rotationElement")
+        }));
+      };
+
+      __proto.renderOrigin = function () {
+        if (!this.props.origin) {
+          return null;
+        }
+
+        var origin = this.state.origin;
+        return createElement("div", {
+          className: prefix("control", "origin"),
+          style: getControlTransform(origin)
+        });
+      };
+
+      __proto.renderPosition = function () {
+        if (!this.props.resizable && !this.props.scalable) {
+          return null;
+        }
+
+        var _a = this.state,
+            pos1 = _a.pos1,
+            pos2 = _a.pos2,
+            pos3 = _a.pos3,
+            pos4 = _a.pos4;
+        return [createElement("div", {
+          className: prefix("control", "nw"),
+          "data-position": "nw",
+          key: "nw",
+          style: getControlTransform(pos1)
+        }), createElement("div", {
+          className: prefix("control", "n"),
+          "data-position": "n",
+          key: "n",
+          style: getControlTransform(pos1, pos2)
+        }), createElement("div", {
+          className: prefix("control", "ne"),
+          "data-position": "ne",
+          key: "ne",
+          style: getControlTransform(pos2)
+        }), createElement("div", {
+          className: prefix("control", "w"),
+          "data-position": "w",
+          key: "w",
+          style: getControlTransform(pos1, pos3)
+        }), createElement("div", {
+          className: prefix("control", "e"),
+          "data-position": "e",
+          key: "e",
+          style: getControlTransform(pos2, pos4)
+        }), createElement("div", {
+          className: prefix("control", "sw"),
+          "data-position": "sw",
+          key: "sw",
+          style: getControlTransform(pos3)
+        }), createElement("div", {
+          className: prefix("control", "s"),
+          "data-position": "s",
+          key: "s",
+          style: getControlTransform(pos3, pos4)
+        }), createElement("div", {
+          className: prefix("control", "se"),
+          "data-position": "se",
+          key: "se",
+          style: getControlTransform(pos4)
+        })];
+      };
+
+      __proto.componentDidMount = function () {
+        /* rotatable */
+
+        /* resizable */
+
+        /* scalable */
+        this.moveableDragger = getMoveableDragger(this, this.controlBox.getElement());
+      };
+
+      __proto.componentWillUnmount = function () {
+        if (this.draggableDragger) {
+          this.draggableDragger.unset();
+          this.draggableDragger = null;
+        }
+
+        if (this.moveableDragger) {
+          this.moveableDragger.unset();
+          this.moveableDragger = null;
+        }
+      };
+
+      __proto.move = function (pos) {
+        if (!pos[0] && !pos[1]) {
+          return;
+        }
+
+        var _a = this.state,
+            left = _a.left,
+            top = _a.top;
+        this.setState({
+          left: left + pos[0],
+          top: top + pos[1]
+        });
+      };
+
+      __proto.updateRect = function (isNotSetState) {
+        var target = this.props.target;
+        var state = this.state;
+
+        if (state.target !== target) {
+          if (this.draggableDragger) {
+            this.draggableDragger.unset();
+            this.draggableDragger = null;
+          }
+
+          if (target && this.props.draggable) {
+            this.draggableDragger = getDraggableDragger(this, target);
+          }
+        }
+
+        var container = this.props.container;
+        this.updateState(getTargetInfo(target, container), isNotSetState);
+      };
+
+      __proto.updateTargetRect = function (target, nextState) {
+        var beforeMatrix = nextState.beforeMatrix,
+            transformOrigin = nextState.transformOrigin,
+            width = nextState.width,
+            height = nextState.height,
+            left = nextState.left,
+            top = nextState.top,
+            originalOrigin = nextState.origin;
+        var nextTransform = getTransform(target, true);
+
+        var _a = caculatePosition(multiple3x2(beforeMatrix.slice(), nextTransform), transformOrigin, width, height),
+            origin = _a[0],
+            pos1 = _a[1],
+            pos2 = _a[2],
+            pos3 = _a[3],
+            pos4 = _a[4];
+
+        var nextLeft = left + originalOrigin[0] - origin[0];
+        var nextTop = top + originalOrigin[1] - origin[1];
+
+        var _b = getRotationInfo(origin, pos1, pos2),
+            direction = _b[0],
+            rotationRad = _b[1],
+            rotationPos = _b[2];
+
+        this.setState({
+          direction: direction,
+          rotationRad: rotationRad,
+          rotationPos: rotationPos,
+          origin: origin,
+          pos1: pos1,
+          pos2: pos2,
+          pos3: pos3,
+          pos4: pos4,
+          left: nextLeft,
+          top: nextTop
+        });
+      };
+
+      __proto.updateState = function (nextState, isNotSetState) {
+        var state = this.state;
+
+        if (isNotSetState) {
+          for (var name in nextState) {
+            state[name] = nextState[name];
+          }
+        } else {
+          this.setState(nextState);
+        }
+      };
+
+      Moveable.defaultProps = {
+        container: null,
+        rotatable: false,
+        draggable: false,
+        scalable: false,
+        resizable: false,
+        origin: true,
+        onRotateStart: function () {},
+        onRotate: function () {},
+        onRotateEnd: function () {},
+        onDragStart: function () {},
+        onDrag: function () {},
+        onDragEnd: function () {},
+        onScaleStart: function () {},
+        onScale: function () {},
+        onScaleEnd: function () {},
+        onResizeStart: function () {},
+        onResize: function () {},
+        onResizeEnd: function () {}
+      };
+      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);
+
+    /**
+     * 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;
+
+        _this.onDragStart = function (e) {
+          _this.trigger("dragStart", e);
+        };
+
+        _this.onDrag = function (e) {
+          _this.trigger("drag", e);
+        };
+
+        _this.onDragEnd = function (e) {
+          _this.trigger("dragEnd", e);
+        };
+
+        _this.onResizeStart = function (e) {
+          _this.trigger("resizeStart", e);
+        };
+
+        _this.onResize = function (e) {
+          _this.trigger("resize", e);
+        };
+
+        _this.onResizeEnd = function (e) {
+          _this.trigger("resizeEnd", e);
+        };
+
+        _this.onScaleStart = function (e) {
+          _this.trigger("scaleStart", e);
+        };
+
+        _this.onScale = function (e) {
+          _this.trigger("scale", e);
+        };
+
+        _this.onScaleEnd = function (e) {
+          _this.trigger("scaleEnd", e);
+        };
+
+        _this.onRotateStart = function (e) {
+          _this.trigger("rotateStart", e);
+        };
+
+        _this.onRotate = function (e) {
+          _this.trigger("rotate", e);
+        };
+
+        _this.onRotateEnd = function (e) {
+          _this.trigger("rotateEnd", e);
+        };
+
+        var element = document.createElement("div");
+        render(h(InnerMoveable, __assign({
+          ref: ref(_this, "innerMoveable")
+        }, options, {
+          onDragStart: _this.onDragStart,
+          onDrag: _this.onDrag,
+          onDragEnd: _this.onDragEnd,
+          onResizeStart: _this.onResizeStart,
+          onResize: _this.onResize,
+          onResizeEnd: _this.onResizeEnd,
+          onScaleStart: _this.onScaleStart,
+          onScale: _this.onScale,
+          onScaleEnd: _this.onScaleEnd,
+          onRotateStart: _this.onRotateStart,
+          onRotate: _this.onRotate,
+          onRotateEnd: _this.onRotateEnd
+        })), element);
+        parentElement.appendChild(element.children[0]);
+        return _this;
+      }
+
+      var __proto = Moveable.prototype;
+      Object.defineProperty(__proto, "origin", {
+        /**
+         * target is target
+         * @example
+         * import Moveable from "moveable";
+         *
+         * const moveable = new Moveable(document.body);
+         *
+         * moveable.origin = true;
+         */
+        get: function () {
+          return this.getMoveableProps().origin;
+        },
+        set: function (origin) {
+          this.innerMoveable.setState({
+            origin: origin
+          });
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "target", {
+        /**
+         * target is target
+         * @example
+         * import Moveable from "moveable";
+         *
+         * const moveable = new Moveable(document.body);
+         * moveable.target = document.querySelector(".target");
+         */
+        get: function () {
+          return this.getMoveableProps().target;
+        },
+        set: function (target) {
+          if (target !== this.target) {
+            this.innerMoveable.setState({
+              target: target
+            });
+          } else {
+            this.updateRect();
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "draggable", {
+        /**
+         * Whether or not target can be dragged.
+         * @example
+         * import Moveable from "moveable";
+         *
+         * const moveable = new Moveable(document.body);
+         *
+         * moveable.draggable = true;
+         */
+        get: function () {
+          return this.getMoveableProps().draggable || false;
+        },
+        set: function (draggable) {
+          this.innerMoveable.setState({
+            draggable: draggable
+          });
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "resizable", {
+        /**
+         * Whether or not target can be resized.
+         * @example
+         * import Moveable from "moveable";
+         *
+         * const moveable = new Moveable(document.body);
+         *
+         * moveable.resizable = true;
+         */
+        get: function () {
+          return this.getMoveableProps().resizable;
+        },
+        set: function (resizable) {
+          this.innerMoveable.setState({
+            resizable: resizable
+          });
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "scalable", {
+        /**
+         * Whether or not target can scaled.
+         * @example
+         * import Moveable from "moveable";
+         *
+         * const moveable = new Moveable(document.body);
+         *
+         * moveable.scalable = true;
+         */
+        get: function () {
+          return this.getMoveableProps().scalable;
+        },
+        set: function (scalable) {
+          this.innerMoveable.setState({
+            scalable: scalable
+          });
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "rotatable", {
+        /**
+         * Whether or not target can be rotated.
+         * @example
+         * import Moveable from "moveable";
+         *
+         * const moveable = new Moveable(document.body);
+         *
+         * moveable.rotatable = true;
+         */
+        get: function () {
+          return this.getMoveableProps().rotatable;
+        },
+        set: function (rotatable) {
+          this.innerMoveable.setState({
+            rotatable: rotatable
+          });
+        },
+        enumerable: true,
+        configurable: true
+      });
+      /**
+       * Move the moveable as much as the `pos`.
+       * @param - the values of x and y to move moveable.
+       * @example
+       * import Moveable from "moveable";
+       *
+       * const moveable = new Moveable(document.body);
+       *
+       * moveable.move([0, -10]);
+       */
+
+      __proto.move = function (pos) {
+        this.getMoveable().move(pos);
+      };
+      /**
+       * 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;
+       *     }
+       * });
+       */
+
+
+      __proto.isMoveableElement = function (target) {
+        return this.getMoveable().isMoveableElement(target);
+      };
+      /**
+       * If the width, height, left, and top of the target 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();
+      };
+
+      __proto.getMoveable = function () {
+        return this.innerMoveable.preactMoveable;
+      };
+
+      __proto.getMoveableProps = function () {
+        return this.getMoveable().props;
+      };
+
+      return Moveable;
+    }(Component);
+
+    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..dd145295c
--- /dev/null
+++ b/dist/moveable.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.js","sources":["../src/InnerMoveable.tsx","../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 EgComponent from \"@egjs/component\";\nimport { ref } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n} from \"react-moveable/declaration/types\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\nclass Moveable extends EgComponent {\n    private innerMoveable!: any;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...options}\n                onDragStart={this.onDragStart}\n                onDrag={this.onDrag}\n                onDragEnd={this.onDragEnd}\n                onResizeStart={this.onResizeStart}\n                onResize={this.onResize}\n                onResizeEnd={this.onResizeEnd}\n                onScaleStart={this.onScaleStart}\n                onScale={this.onScale}\n                onScaleEnd={this.onScaleEnd}\n                onRotateStart={this.onRotateStart}\n                onRotate={this.onRotate}\n                onRotateEnd={this.onRotateEnd}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.origin = true;\n     */\n    get origin() {\n        return this.getMoveableProps().origin;\n    }\n    set origin(origin: boolean) {\n        this.innerMoveable.setState({\n            origin,\n        });\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     * moveable.target = document.querySelector(\".target\");\n     */\n    get target(): HTMLElement | SVGElement {\n        return this.getMoveableProps().target;\n    }\n    set target(target: HTMLElement | SVGElement) {\n        if (target !== this.target) {\n            this.innerMoveable.setState({\n                target,\n            });\n        } else {\n            this.updateRect();\n        }\n    }\n    /**\n     * Whether or not target can be dragged.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.draggable = true;\n     */\n    get draggable(): boolean {\n        return this.getMoveableProps().draggable || false;\n    }\n    set draggable(draggable: boolean) {\n        this.innerMoveable.setState({\n            draggable,\n        });\n    }\n    /**\n     * Whether or not target can be resized.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.resizable = true;\n     */\n    get resizable(): boolean {\n        return this.getMoveableProps().resizable;\n    }\n    set resizable(resizable: boolean) {\n        this.innerMoveable.setState({\n            resizable,\n        });\n    }\n    /**\n     * Whether or not target can scaled.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.scalable = true;\n     */\n    get scalable(): boolean {\n        return this.getMoveableProps().scalable;\n    }\n    set scalable(scalable: boolean) {\n        this.innerMoveable.setState({\n            scalable,\n        });\n    }\n    /**\n     * Whether or not target can be rotated.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.rotatable = true;\n     */\n    get rotatable(): boolean {\n        return this.getMoveableProps().rotatable;\n    }\n    set rotatable(rotatable: boolean) {\n        this.innerMoveable.setState({\n            rotatable,\n        });\n    }\n    /**\n     * Move the moveable as much as the `pos`.\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.move([0, -10]);\n     */\n    public move(pos: number[]) {\n        this.getMoveable().move(pos);\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 the target 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    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n    private getMoveableProps() {\n        return this.getMoveable().props;\n    }\n    private onDragStart = (e: OnDragStart) => {\n        this.trigger(\"dragStart\", e);\n    }\n    private onDrag = (e: OnDrag) => {\n        this.trigger(\"drag\", e);\n    }\n    private onDragEnd = (e: OnDragEnd) => {\n        this.trigger(\"dragEnd\", e);\n    }\n    private onResizeStart = (e: OnResizeStart) => {\n        this.trigger(\"resizeStart\", e);\n    }\n    private onResize = (e: OnResize) => {\n        this.trigger(\"resize\", e);\n    }\n    private onResizeEnd = (e: OnResizeEnd) => {\n        this.trigger(\"resizeEnd\", e);\n    }\n    private onScaleStart = (e: OnScaleStart) => {\n        this.trigger(\"scaleStart\", e);\n    }\n    private onScale = (e: OnScale) => {\n        this.trigger(\"scale\", e);\n    }\n    private onScaleEnd = (e: OnScaleEnd) => {\n        this.trigger(\"scaleEnd\", e);\n    }\n    private onRotateStart = (e: OnRotateStart) => {\n        this.trigger(\"rotateStart\", e);\n    }\n    private onRotate = (e: OnRotate) => {\n        this.trigger(\"rotate\", e);\n    }\n    private onRotateEnd = (e: OnRotateEnd) => {\n        this.trigger(\"rotateEnd\", e);\n    }\n}\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 */\nexport default Moveable;\n"],"names":["tslib_1","props","_super","_this","state","h","Moveable","ref","Component","parentElement","options","e","trigger","element","document","createElement","render","InnerMoveable","onDragStart","onDrag","onDragEnd","onResizeStart","onResize","onResizeEnd","onScaleStart","onScale","onScaleEnd","onRotateStart","onRotate","onRotateEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","pos","getMoveable","move","isMoveableElement","preactMoveable","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;;ICOA;;;;;;IAKA;;;IAAuBR,EAAAA,SAAA,SAAA,QAAA;IAGnB;;;;;IAGA,mBAAA,CAAYS,aAAZ,EAAqDC,OAArD;IAAqD,0BAAA,EAAA;IAAAA,MAAAA,YAAA;;;IAArD,gBACIR,WAAA,KAAA,SADJ;;IAoLQC,IAAAA,iBAAA,GAAc,UAACQ,CAAD;IAClBR,MAAAA,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;IACH,KAFO;;IAGAR,IAAAA,YAAA,GAAS,UAACQ,CAAD;IACbR,MAAAA,KAAI,CAACS,OAAL,CAAa,MAAb,EAAqBD,CAArB;IACH,KAFO;;IAGAR,IAAAA,eAAA,GAAY,UAACQ,CAAD;IAChBR,MAAAA,KAAI,CAACS,OAAL,CAAa,SAAb,EAAwBD,CAAxB;IACH,KAFO;;IAGAR,IAAAA,mBAAA,GAAgB,UAACQ,CAAD;IACpBR,MAAAA,KAAI,CAACS,OAAL,CAAa,aAAb,EAA4BD,CAA5B;IACH,KAFO;;IAGAR,IAAAA,cAAA,GAAW,UAACQ,CAAD;IACfR,MAAAA,KAAI,CAACS,OAAL,CAAa,QAAb,EAAuBD,CAAvB;IACH,KAFO;;IAGAR,IAAAA,iBAAA,GAAc,UAACQ,CAAD;IAClBR,MAAAA,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;IACH,KAFO;;IAGAR,IAAAA,kBAAA,GAAe,UAACQ,CAAD;IACnBR,MAAAA,KAAI,CAACS,OAAL,CAAa,YAAb,EAA2BD,CAA3B;IACH,KAFO;;IAGAR,IAAAA,aAAA,GAAU,UAACQ,CAAD;IACdR,MAAAA,KAAI,CAACS,OAAL,CAAa,OAAb,EAAsBD,CAAtB;IACH,KAFO;;IAGAR,IAAAA,gBAAA,GAAa,UAACQ,CAAD;IACjBR,MAAAA,KAAI,CAACS,OAAL,CAAa,UAAb,EAAyBD,CAAzB;IACH,KAFO;;IAGAR,IAAAA,mBAAA,GAAgB,UAACQ,CAAD;IACpBR,MAAAA,KAAI,CAACS,OAAL,CAAa,aAAb,EAA4BD,CAA5B;IACH,KAFO;;IAGAR,IAAAA,cAAA,GAAW,UAACQ,CAAD;IACfR,MAAAA,KAAI,CAACS,OAAL,CAAa,QAAb,EAAuBD,CAAvB;IACH,KAFO;;IAGAR,IAAAA,iBAAA,GAAc,UAACQ,CAAD;IAClBR,MAAAA,KAAI,CAACS,OAAL,CAAa,WAAb,EAA0BD,CAA1B;IACH,KAFO;;IAnNJ,QAAME,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;IAEAC,IAAAA,MAAM,CACFX,EAACY;IACGV,MAAAA,GAAG,EAAEA,GAAG,CAACJ,KAAD,EAAO,eAAP;WACJO;IACJQ,MAAAA,WAAW,EAAEf,KAAI,CAACe;IAClBC,MAAAA,MAAM,EAAEhB,KAAI,CAACgB;IACbC,MAAAA,SAAS,EAAEjB,KAAI,CAACiB;IAChBC,MAAAA,aAAa,EAAElB,KAAI,CAACkB;IACpBC,MAAAA,QAAQ,EAAEnB,KAAI,CAACmB;IACfC,MAAAA,WAAW,EAAEpB,KAAI,CAACoB;IAClBC,MAAAA,YAAY,EAAErB,KAAI,CAACqB;IACnBC,MAAAA,OAAO,EAAEtB,KAAI,CAACsB;IACdC,MAAAA,UAAU,EAAEvB,KAAI,CAACuB;IACjBC,MAAAA,aAAa,EAAExB,KAAI,CAACwB;IACpBC,MAAAA,QAAQ,EAAEzB,KAAI,CAACyB;IACfC,MAAAA,WAAW,EAAE1B,KAAI,CAAC0B;WAfpB,EAiBFhB,OAjBE,CAAN;IAmBAJ,IAAAA,aAAa,CAACqB,WAAd,CAA0BjB,OAAO,CAACkB,QAAR,CAAiB,CAAjB,CAA1B;;IACH;;;IAUDC,EAAAA,qBAAA,kBAAA;IATA;;;;;;;;;aASA;IACI,aAAO,KAAKC,gBAAL,GAAwBC,MAA/B;IACH;aACD,UAAWA,MAAX;IACI,WAAKC,aAAL,CAAmBC,QAAnB,CAA4B;IACxBF,QAAAA,MAAM;IADkB,OAA5B;IAGH;;;OAPD;IAgBAF,EAAAA,qBAAA,kBAAA;IARA;;;;;;;;aAQA;IACI,aAAO,KAAKC,gBAAL,GAAwBI,MAA/B;IACH;aACD,UAAWA,MAAX;IACI,UAAIA,MAAM,KAAK,KAAKA,MAApB,EAA4B;IACxB,aAAKF,aAAL,CAAmBC,QAAnB,CAA4B;IACxBC,UAAAA,MAAM;IADkB,SAA5B;IAGH,OAJD,MAIO;IACH,aAAKC,UAAL;IACH;IACJ;;;OAXD;IAqBAN,EAAAA,qBAAA,qBAAA;IATA;;;;;;;;;aASA;IACI,aAAO,KAAKC,gBAAL,GAAwBM,SAAxB,IAAqC,KAA5C;IACH;aACD,UAAcA,SAAd;IACI,WAAKJ,aAAL,CAAmBC,QAAnB,CAA4B;IACxBG,QAAAA,SAAS;IADe,OAA5B;IAGH;;;OAPD;IAiBAP,EAAAA,qBAAA,qBAAA;IATA;;;;;;;;;aASA;IACI,aAAO,KAAKC,gBAAL,GAAwBO,SAA/B;IACH;aACD,UAAcA,SAAd;IACI,WAAKL,aAAL,CAAmBC,QAAnB,CAA4B;IACxBI,QAAAA,SAAS;IADe,OAA5B;IAGH;;;OAPD;IAiBAR,EAAAA,qBAAA,oBAAA;IATA;;;;;;;;;aASA;IACI,aAAO,KAAKC,gBAAL,GAAwBQ,QAA/B;IACH;aACD,UAAaA,QAAb;IACI,WAAKN,aAAL,CAAmBC,QAAnB,CAA4B;IACxBK,QAAAA,QAAQ;IADgB,OAA5B;IAGH;;;OAPD;IAiBAT,EAAAA,qBAAA,qBAAA;IATA;;;;;;;;;aASA;IACI,aAAO,KAAKC,gBAAL,GAAwBS,SAA/B;IACH;aACD,UAAcA,SAAd;IACI,WAAKP,aAAL,CAAmBC,QAAnB,CAA4B;IACxBM,QAAAA,SAAS;IADe,OAA5B;IAGH;;;OAPD;IAQA;;;;;;;;;;;IAUO,cAAA,GAAP,UAAYC,GAAZ;IACI,SAAKC,WAAL,GAAmBC,IAAnB,CAAwBF,GAAxB;IACH,GAFM;IAGP;;;;;;;;;;;;;;;;IAcO,2BAAA,GAAP,UAAyBN,MAAzB;IACI,WAAO,KAAKO,WAAL,GAAmBE,iBAAnB,CAAqCT,MAArC,CAAP;IACH,GAFM;IAGP;;;;;;;;;;;;;IAWO,oBAAA,GAAP;IACI,SAAKO,WAAL,GAAmBN,UAAnB;IACH,GAFM;;IAGC,qBAAA,GAAR;IACI,WAAO,KAAKH,aAAL,CAAmBY,cAA1B;IACH,GAFO;;IAGA,0BAAA,GAAR;IACI,WAAO,KAAKH,WAAL,GAAmB3C,KAA1B;IACH,GAFO;;IAuCZ,iBAAA;IA9NA,EAAuB+C,UAAvB;;;;;;;;"}
\ No newline at end of file
diff --git a/dist/moveable.min.js b/dist/moveable.min.js
new file mode 100644
index 000000000..89fd57748
--- /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.2.0
+*/
+!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 r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function i(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var a=function(){return(a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);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 n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var r=!1,o=[e],i=0;e.stop=function(){r=!0},e.currentTarget=this;for(var a=arguments.length,s=new Array(2<a?a-2:0),l=2;l<a;l++)s[l-2]=arguments[l];for(1<=s.length&&(o=o.concat(s)),i=0;n[i];i++)n[i].apply(this,o);return!r},e.once=function(o,i){if("object"==typeof o&&s(i)){var t,e=o;for(t in e)this.once(t,e[t]);return this}if("string"==typeof o&&"function"==typeof i){var a=this;this.on(o,function t(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];i.apply(a,n),a.off(o,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&s(e)){var n,r=t;for(n in r)this.on(n,r[n]);return this}if("string"==typeof t&&"function"==typeof e){var o=this._eventHandler[t];s(o)&&(this._eventHandler[t]=[],o=this._eventHandler[t]),o.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 n,r=t;for(n in r)this.off(n,r[n]);return this}var o,i,a=this._eventHandler[t];if(a)for(o=0;void 0!==(i=a[o]);o++)if(i===e){a=a.splice(o,1);break}return this},t}();return t.VERSION="2.1.2",t}();function c(e,n){return function(t){t&&(e[n]=t)}}var l=function(){},p={},u=[],f=[];function d(t,e){var n,r,o,i,a=f;for(i=arguments.length;2<i--;)u.push(arguments[i]);for(e&&null!=e.children&&(u.length||u.push(e.children),delete e.children);u.length;)if((r=u.pop())&&void 0!==r.pop)for(i=r.length;i--;)u.push(r[i]);else"boolean"==typeof r&&(r=null),(o="function"!=typeof t)&&(null==r?r="":"number"==typeof r?r=String(r):"string"!=typeof r&&(o=!1)),o&&n?a[a.length-1]+=r:a===f?a=[r]:a.push(r),n=o;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 O(t,e){for(var n in e)t[n]=e[n];return t}function h(t,e){null!=t&&("function"==typeof t?t(e):t.current=e)}var e="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout,v=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,n=[];function g(t){!t._dirty&&(t._dirty=!0)&&1==n.push(t)&&e(o)}function o(){for(var t;t=n.pop();)t._dirty&&T(t)}function N(t,e){return t.normalizedNodeName===e||t.nodeName.toLowerCase()===e.toLowerCase()}function D(t){var e=O({},t.attributes);e.children=t.children;var n=t.nodeName.defaultProps;if(void 0!==n)for(var r in n)void 0===e[r]&&(e[r]=n[r]);return e}function C(t){var e=t.parentNode;e&&e.removeChild(t)}function m(t,e,n,r,o){if("className"===e&&(e="class"),"key"===e);else if("ref"===e)h(n,null),h(r,t);else if("class"!==e||o)if("style"===e){if(r&&"string"!=typeof r&&"string"!=typeof n||(t.style.cssText=r||""),r&&"object"==typeof r){if("string"!=typeof n)for(var i in n)i in r||(t.style[i]="");for(var i in r)t.style[i]="number"==typeof r[i]&&!1===v.test(i)?r[i]+"px":r[i]}}else if("dangerouslySetInnerHTML"===e)r&&(t.innerHTML=r.__html||"");else if("o"==e[0]&&"n"==e[1]){var a=e!==(e=e.replace(/Capture$/,""));e=e.toLowerCase().substring(2),r?n||t.addEventListener(e,b,a):t.removeEventListener(e,b,a),(t._listeners||(t._listeners={}))[e]=r}else if("list"!==e&&"type"!==e&&!o&&e in t){try{t[e]=null==r?"":r}catch(t){}null!=r&&!1!==r||"spellcheck"==e||t.removeAttribute(e)}else{var s=o&&e!==(e=e.replace(/^xlink:?/,""));null==r||!1===r?s?t.removeAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase()):t.removeAttribute(e):"function"!=typeof r&&(s?t.setAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase(),r):t.setAttribute(e,r))}else t.className=r||""}function b(t){return this._listeners[t.type](p.event&&p.event(t)||t)}var M=[],R=0,y=!1,_=!1;function E(){for(var t;t=M.shift();)t.componentDidMount&&t.componentDidMount()}function k(t,e,n,r,o,i){R++||(y=null!=o&&void 0!==o.ownerSVGElement,_=null!=t&&!("__preactattr_"in t));var a=z(t,e,n,r,i);return o&&a.parentNode!==o&&o.appendChild(a),--R||(_=!1,i||E()),a}function z(t,e,n,r,o){var i=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||o)?t.nodeValue!=e&&(t.nodeValue=e):(i=document.createTextNode(e),t&&(t.parentNode&&t.parentNode.replaceChild(i,t),j(t,!0))),i.__preactattr_=!0,i;var s=e.nodeName;if("function"==typeof s)return function(t,e,n,r){var o=t&&t._component,i=o,a=t,s=o&&t._componentConstructor===e.nodeName,l=s,p=D(e);for(;o&&!l&&(o=o._parentComponent);)l=o.constructor===e.nodeName;o&&l&&(!r||o._component)?(W(o,p,3,n,r),t=o.base):(i&&!s&&(A(i),t=a=null),o=L(e.nodeName,p,n),t&&!o.nextBase&&(o.nextBase=t,a=null),W(o,p,1,n,r),t=o.base,a&&t!==a&&(a._component=null,j(a,!1)));return t}(t,e,n,r);if(y="svg"===s||"foreignObject"!==s&&y,s=String(s),(!t||!N(t,s))&&(i=function(t,e){var n=e?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t);return n.normalizedNodeName=t,n}(s,y),t)){for(;t.firstChild;)i.appendChild(t.firstChild);t.parentNode&&t.parentNode.replaceChild(i,t),j(t,!0)}var l=i.firstChild,p=i.__preactattr_,c=e.children;if(null==p){p=i.__preactattr_={};for(var u=i.attributes,f=u.length;f--;)p[u[f].name]=u[f].value}return!_&&c&&1===c.length&&"string"==typeof c[0]&&null!=l&&void 0!==l.splitText&&null==l.nextSibling?l.nodeValue!=c[0]&&(l.nodeValue=c[0]):(c&&c.length||null!=l)&&function(t,e,n,r,o){var i,a,s,l,p,c=t.childNodes,u=[],f={},d=0,h=0,v=c.length,g=0,m=e?e.length:0;if(0!==v)for(var b=0;b<v;b++){var y=c[b],_=y.__preactattr_;null!=(x=m&&_?y._component?y._component.__key:_.key:null)?(d++,f[x]=y):(_||(void 0!==y.splitText?!o||y.nodeValue.trim():o))&&(u[g++]=y)}if(0!==m)for(b=0;b<m;b++){var x;if(l=e[b],(p=null)!=(x=l.key))d&&void 0!==f[x]&&(p=f[x],f[x]=void 0,d--);else if(h<g)for(i=h;i<g;i++)if(void 0!==u[i]&&(w=a=u[i],P=o,"string"==typeof(S=l)||"number"==typeof S?void 0!==w.splitText:"string"==typeof S.nodeName?!w._componentConstructor&&N(w,S.nodeName):P||w._componentConstructor===S.nodeName)){p=a,u[i]=void 0,i===g-1&&g--,i===h&&h++;break}p=z(p,l,n,r),s=c[b],p&&p!==t&&p!==s&&(null==s?t.appendChild(p):p===s.nextSibling?C(s):t.insertBefore(p,s))}var w,S,P;if(d)for(var b in f)void 0!==f[b]&&j(f[b],!1);for(;h<=g;)void 0!==(p=u[g--])&&j(p,!1)}(i,c,n,r,_||null!=p.dangerouslySetInnerHTML),function(t,e,n){var r;for(r in n)e&&null!=e[r]||null==n[r]||m(t,r,n[r],n[r]=void 0,y);for(r in e)"children"===r||"innerHTML"===r||r in n&&e[r]===("value"===r||"checked"===r?t[r]:n[r])||m(t,r,n[r],n[r]=e[r],y)}(i,e.attributes,p),y=a,i}function j(t,e){var n=t._component;n?A(n):(null!=t.__preactattr_&&h(t.__preactattr_.ref,null),!1!==e&&null!=t.__preactattr_||C(t),x(t))}function x(t){for(t=t.lastChild;t;){var e=t.previousSibling;j(t,!0),t=e}}var w=[];function L(t,e,n){var r,o=w.length;for(t.prototype&&t.prototype.render?(r=new t(e,n),P.call(r,e,n)):((r=new P(e,n)).constructor=t,r.render=S);o--;)if(w[o].constructor===t)return r.nextBase=w[o].nextBase,w.splice(o,1),r;return r}function S(t,e,n){return this.constructor(t,n)}function W(t,e,n,r,o){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||o?t.componentWillMount&&t.componentWillMount():t.componentWillReceiveProps&&t.componentWillReceiveProps(e,r)),r&&r!==t.context&&(t.prevContext||(t.prevContext=t.context),t.context=r),t.prevProps||(t.prevProps=t.props),t.props=e,t._disable=!1,0!==n&&(1!==n&&!1===p.syncComponentUpdates&&t.base?g(t):T(t,1,o)),h(t.__ref,t))}function T(t,e,n,r){if(!t._disable){var o,i,a,s=t.props,l=t.state,p=t.context,c=t.prevProps||s,u=t.prevState||l,f=t.prevContext||p,d=t.base,h=t.nextBase,v=d||h,g=t._component,m=!1,b=f;if(t.constructor.getDerivedStateFromProps&&(l=O(O({},l),t.constructor.getDerivedStateFromProps(s,l)),t.state=l),d&&(t.props=c,t.state=u,t.context=f,2!==e&&t.shouldComponentUpdate&&!1===t.shouldComponentUpdate(s,l,p)?m=!0:t.componentWillUpdate&&t.componentWillUpdate(s,l,p),t.props=s,t.state=l,t.context=p),t.prevProps=t.prevState=t.prevContext=t.nextBase=null,t._dirty=!1,!m){o=t.render(s,l,p),t.getChildContext&&(p=O(O({},p),t.getChildContext())),d&&t.getSnapshotBeforeUpdate&&(b=t.getSnapshotBeforeUpdate(c,u));var y,_,x=o&&o.nodeName;if("function"==typeof x){var w=D(o);(i=g)&&i.constructor===x&&w.key==i.__key?W(i,w,1,p,!1):(y=i,t._component=i=L(x,w,p),i.nextBase=i.nextBase||h,i._parentComponent=t,W(i,w,0,p,!1),T(i,1,n,!0)),_=i.base}else a=v,(y=g)&&(a=t._component=null),!v&&1!==e||(a&&(a._component=null),_=k(a,o,p,n||!d,v&&v.parentNode,!0));if(v&&_!==v&&i!==g){var S=v.parentNode;S&&_!==S&&(S.replaceChild(_,v),y||(v._component=null,j(v,!1)))}if(y&&A(y),(t.base=_)&&!r){for(var P=t,N=t;N=N._parentComponent;)(P=N).base=_;_._component=P,_._componentConstructor=P.constructor}}for(!d||n?M.push(t):m||t.componentDidUpdate&&t.componentDidUpdate(c,u,b);t._renderCallbacks.length;)t._renderCallbacks.pop().call(t);R||r||E()}}function A(t){var e=t.base;t._disable=!0,t.componentWillUnmount&&t.componentWillUnmount(),t.base=null;var n=t._component;n?A(n):e&&(null!=e.__preactattr_&&h(e.__preactattr_.ref,null),C(t.nextBase=e),w.push(t),x(e)),h(t.__ref,null)}function P(t,e){this._dirty=!0,this.context=e,this.props=t,this.state=this.state||{},this._renderCallbacks=[]}O(P.prototype,{setState:function(t,e){this.prevState||(this.prevState=this.state),this.state=O(O({},this.state),"function"==typeof t?t(this.state,this.props):t),e&&this._renderCallbacks.push(e),g(this)},forceUpdate:function(t){t&&this._renderCallbacks.push(t),T(this,2)},render:function(){}});U=function(t,e){return(U=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var U,B="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(" "),Y="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,H="undefined"!=typeof Symbol&&Symbol.for?Symbol.for("__preactCompatWrapper"):"__preactCompatWrapper",X={constructor:1,render:1,shouldComponentUpdate:1,componentWillReceiveProps:1,componentWillUpdate:1,componentDidUpdate:1,componentWillMount:1,componentDidMount:1,componentWillUnmount:1,componentDidUnmount:1},F=/^(?: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]/,I={},V=!1;try{V="production"!==process.env.NODE_ENV}catch(t){}var $=d("a",null).constructor;$.prototype.$$typeof=Y,$.prototype.preactCompatUpgraded=!1,$.prototype.preactCompatNormalized=!1,Object.defineProperty($.prototype,"type",{get:function(){return this.nodeName},set:function(t){this.nodeName=t},configurable:!0}),Object.defineProperty($.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 G=p.vnode;p.vnode=function(t){if(!t.preactCompatUpgraded){t.preactCompatUpgraded=!0;var e=t.nodeName,n=t.attributes=null==t.attributes?{}:it({},t.attributes);"function"==typeof e?(!0===e[H]||e.prototype&&"isReactComponent"in e.prototype)&&(t.children&&""===String(t.children)&&(t.children=void 0),t.children&&(n.children=t.children),t.preactCompatNormalized||rt(t),function(t){var e=t.nodeName,n=t.attributes;t.attributes={},e.defaultProps&&it(t.attributes,e.defaultProps);n&&it(t.attributes,n)}(t)):(t.children&&""===String(t.children)&&(t.children=void 0),t.children&&(n.children=t.children),n.defaultValue&&(n.value||0===n.value||(n.value=n.defaultValue),delete n.defaultValue),function(t,e){var n,r,o;if(e){for(o in e)if(n=F.test(o))break;if(n)for(o in r=t.attributes={},e)e.hasOwnProperty(o)&&(r[F.test(o)?o.replace(/([A-Z0-9])/,"-$1").toLowerCase():o]=e[o])}}(t,n))}G&&G(t)};var Z,J=[];for(var K,Q={},tt=B.length;tt--;)Q[B[tt]]=(K=B[tt],nt.bind(null,K));function et(t){return function(t){function e(t,e){!function(t){for(var e in t){var n=t[e];"function"!=typeof n||n.__bound||X.hasOwnProperty(e)||((t[e]=n.bind(t)).__bound=!0)}}(this),ht.call(this,t,e,I),ct.call(this,t,e)}(t=it({constructor:e},t)).mixins&&function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=pt(e[n].concat(t[n]||J),"getDefaultProps"===n||"getInitialState"===n||"getChildContext"===n))}(t,function(t){for(var e={},n=0;n<t.length;n++){var r=t[n];for(var o in r)r.hasOwnProperty(o)&&"function"==typeof r[o]&&(e[o]||(e[o]=[])).push(r[o])}return e}(t.mixins));t.statics&&it(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=it(new st,t),e.displayName=t.displayName||"Component",e}({displayName:t.displayName||t.name,render:function(){return t(this.props,this.context)}})}function nt(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return function t(e,n){for(var r=n||0;r<e.length;r++){var o=e[r];Array.isArray(o)?t(o):!o||"object"!=typeof o||(i=o)&&(i instanceof $||i.$$typeof===Y)||!(o.props&&o.type||o.attributes&&o.nodeName||o.children)||(e[r]=nt(o.type||o.nodeName,o.props||o.attributes,o.children))}var i}(t,2),rt(d.apply(void 0,t))}function rt(t){t.preactCompatNormalized=!0,function(t){var e=t.attributes||(t.attributes={});ot.enumerable="className"in e,e.className&&(e.class=e.className);Object.defineProperty(e,"className",ot)}(t),function(t){return"function"==typeof t&&!(t.prototype&&t.prototype.render)}(t.nodeName)&&(t.nodeName=function(t){var e=t[H];return e?!0===e?t:e:(e=et(t),Object.defineProperty(e,H,{configurable:!0,value:!0}),e.displayName=t.displayName,e.propTypes=t.propTypes,e.defaultProps=t.defaultProps,Object.defineProperty(t,H,{configurable:!0,value:e}),e)}(t.nodeName));var e=t.attributes.ref,n=e&&typeof e;return!Z||"string"!==n&&"number"!==n||(t.attributes.ref=function(e,n){return n._refProxies[e]||(n._refProxies[e]=function(t){n&&n.refs&&null===(n.refs[e]=t)&&(delete n._refProxies[e],n=null)})}(e,Z)),function(t){var e=t.nodeName,n=t.attributes;if(!n||"string"!=typeof e)return;var r={};for(var o in n)r[o.toLowerCase()]=o;r.ondoubleclick&&(n.ondblclick=n[r.ondoubleclick],delete n[r.ondoubleclick]);if(r.onchange&&("textarea"===e||"input"===e.toLowerCase()&&!/^fil|che|rad/i.test(n.type))){var i=r.oninput||"oninput";n[i]||(n[i]=pt([n[i],n[r.onchange]]),delete n[r.onchange])}}(t),t}var ot={configurable:!0,get:function(){return this.class},set:function(t){this.class=t}};function it(t){for(var e=arguments,n=1,r=void 0;n<arguments.length;n++)if(r=e[n])for(var o in r)r.hasOwnProperty(o)&&(t[o]=r[o]);return t}function at(t,e){for(var n in t)if(!(n in e))return!0;for(var r in e)if(t[r]!==e[r])return!0;return!1}function st(){}function lt(t,e,n){if("string"==typeof e&&(e=t.constructor.prototype[e]),"function"==typeof e)return e.apply(t,n)}function pt(i,a){return function(){for(var t,e=arguments,n=0;n<i.length;n++){var r=lt(this,i[n],e);if(a&&null!=r)for(var o in t=t||{},r)r.hasOwnProperty(o)&&(t[o]=r[o]);else void 0!==r&&(t=r)}return t}}function ct(t,e){ut.call(this,t,e),this.componentWillReceiveProps=pt([ut,this.componentWillReceiveProps||"componentWillReceiveProps"]),this.render=pt([ut,ft,this.render||"render",dt])}function ut(t,e){if(t){var n=t.children;if(n&&Array.isArray(n)&&1===n.length&&("string"==typeof n[0]||"function"==typeof n[0]||n[0]instanceof $)&&(t.children=n[0],t.children&&"object"==typeof t.children&&(t.children.length=1,t.children[0]=t.children)),V){var r="function"==typeof this?this:this.constructor;this.propTypes||r.propTypes,this.displayName||r.name}}}function ft(t){Z=this}function dt(){Z===this&&(Z=null)}function ht(t,e,n){P.call(this,t,e),this.state=this.getInitialState?this.getInitialState():{},this.refs={},this._refProxies={},n!==I&&ct.call(this,t,e)}function vt(t,e){ht.call(this,t,e)}it(ht.prototype=new P,{constructor:ht,isReactComponent:{},replaceState:function(t,e){for(var n in this.setState(t,e),this.state)n in t||delete this.state[n]},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 gt="undefined";function mt(t){return typeof t===gt}function bt(t,e){return t.classList?t.classList.contains(e):!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))}var yt=function(t,e){return(yt=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var _t=function(){return(_t=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var xt=function(t){for(var e=5381,n=t.length;n;)e=33*e^t.charCodeAt(--n);return e>>>0};function wt(t,e){var a=!1,s=0,l=0,p=0,c=0,u={},f=!1,n=e.container,r=void 0===n?t:n,o=e.dragstart,d=e.drag,i=e.dragend,h=e.events,v=void 0===h?["touch","mouse"]:h,g=-1<v.indexOf("touch"),m=-1<v.indexOf("mouse");function b(t){return t.touches&&t.touches.length?t.touches[0]:t}function y(t){f=!(a=!0);var e=b(t),n=e.clientX,r=e.clientY;p=s=n,c=l=r,!(u={})===(o&&o({datas:u,inputEvent:t,clientX:n,clientY:r}))&&(a=!1),a&&t.preventDefault()}function _(t){if(a){var e=b(t),n=e.clientX,r=e.clientY,o=n-p,i=r-c;(o||i)&&(f=!0,d&&d({datas:u,clientX:n,clientY:r,deltaX:o,deltaY:i,distX:n-s,distY:r-l,inputEvent:t}),p=n,c=r)}}function x(t){a&&(a=!1,i&&i({datas:u,isDrag:f,inputEvent:t,clientX:p,clientY:c,distX:p-s,distY:c-l}))}return m&&(t.addEventListener("mousedown",y),r.addEventListener("mousemove",_),r.addEventListener("mouseup",x)),g&&(t.addEventListener("touchstart",y),r.addEventListener("touchmove",_),r.addEventListener("touchend",x)),{unset:function(){m&&(t.removeEventListener("mousedown",y),r.removeEventListener("mousemove",_),r.removeEventListener("mouseup",x)),g&&(t.removeEventListener("touchstart",y),r.removeEventListener("touchmove",_),r.removeEventListener("touchend",x))}}}var St=function(t,e){return(St=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var Pt="moveable-",Nt="\n{\n    position: fixed;\n    width: 0;\n    height: 0;\n    left: 0;\n    top: 0;\n    z-index: 3000;\n}\n.line, .control {\n    left: 0;\n    top: 0;\n}\n.control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n}\n.line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n.line.rotation {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n.line.rotation .control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n.control.origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n}\n.control.e, .control.w {\n    cursor: ew-resize;\n}\n.control.s, .control.n {\n    cursor: ns-resize;\n}\n.control.nw, .control.se, :host.reverse .control.ne, :host.reverse .control.sw {\n    cursor: nwse-resize;\n}\n.control.ne, .control.sw, :host.reverse .control.nw, :host.reverse .control.se {\n    cursor: nesw-resize;\n}\n".replace(/\.([^{,\s\d.]+)/g,"."+Pt+"$1");function Ot(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.map(function(t){return t.split(" ").map(function(t){return""+e+t}).join(" ")}).join(" ")}.apply(void 0,[Pt].concat(t))}function Dt(t,e){return[t[0]*e[0]+t[2]*e[1]+t[4]*e[2],t[1]*e[0]+t[3]*e[1]+t[5]*e[2]]}function Ct(t,e){var n=t[0],r=t[1],o=t[2],i=t[3],a=t[4],s=t[5],l=e[0],p=e[1],c=e[2],u=e[3],f=e[4],d=e[5];return t[0]=n*l+o*p,t[1]=r*l+i*p,t[2]=n*c+o*u,t[3]=r*c+i*u,t[4]=n*f+o*d+1*a,t[5]=r*f+i*d+1*s,t}function Mt(t){var e=t[0],n=t[1],r=t[2],o=t[3],i=t[4],a=t[5],s=e*o*1+r*a*0+i*n*0-i*o*0-r*n*1-e*a*0,l=1*o-0*a,p=0*i-1*r,c=r*a-i*o,u=0*a-1*n,f=1*e-0*i,d=i*n-e*a;return t[0]=l/s,t[1]=u/s,t[2]=p/s,t[3]=f/s,t[4]=c/s,t[5]=d/s,t}function Rt(t,e){var n=window.getComputedStyle(t).transform;return"none"===n?e?[1,0,0,1,0,0]:"none":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]}}(n).value.split(/s*,\s*/g).map(function(t){return parseFloat(t)})}function Et(t,e,n,r){var o=Dt(t,[0,0,1]),i=o[0],a=o[1],s=Dt(t,[n,0,1]),l=s[0],p=s[1],c=Dt(t,[0,r,1]),u=c[0],f=c[1],d=Dt(t,[n,r,1]),h=d[0],v=d[1],g=Dt(t,[e[0],e[1],1]),m=g[0],b=g[1],y=Math.min(i,l,u,h),_=Math.min(a,p,f,v);return[[m=m-y||0,b=b-_||0],[i=i-y||0,a=a-_||0],[l=l-y||0,p=p-_||0],[u=u-y||0,f=f-_||0],[h=h-y||0,v=v-_||0]]}function kt(t,e){var n=e[0]-t[0],r=e[1]-t[1],o=Math.atan2(r,n);return 0<o?o:o+2*Math.PI}function zt(t,e){var n=e[0]-t[0],r=e[1]-t[1],o=Math.sqrt(n*n+r*r),i=kt(t,e);return{transform:"translate("+t[0]+"px, "+t[1]+"px) rotate("+i+"rad)",width:o+"px"}}function jt(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t.length;return{transform:"translate("+t.reduce(function(t,e){return t+e[0]},0)/n+"px, "+t.reduce(function(t,e){return t+e[1]},0)/n+"px)"}}function Lt(t,e,n,r){void 0===e&&(e=window.getComputedStyle(t)),void 0===r&&(r=n||"border-box"===e.boxSizing);var o=t.offsetWidth,i=t.offsetHeight,a=!mt(o);return(n||r)&&a?[o,i]:(o=t.clientWidth,i=t.clientHeight,n||r?[o+(parseFloat(e.borderLeftWidth)||0)+(parseFloat(e.borderRightWidth)||0),i+(parseFloat(e.borderTopWidth)||0)+(parseFloat(e.borderBottomWidth)||0)]:[o-(parseFloat(e.paddingLeft)||0)-(parseFloat(e.paddingRight)||0),i-(parseFloat(e.paddingTop)||0)-(parseFloat(e.paddingBottom)||0)])}function Wt(t,e,n){var r=kt(t,e),o=kt(t,n),i=r<o&&o-r<Math.PI||o<r&&o-r<-Math.PI?1:-1,a=kt(0<i?e:n,0<i?n:e),s=function(t,e){var n=Math.cos(e),r=Math.sin(e);return Dt([n,r,-r,n,0,0],t)}([0,-40,0],a);return[i,a,[(e[0]+n[0])/2+s[0],(e[1]+n[1])/2+s[1]]]}function Tt(t,e){var n,r,o,i,a=0,s=0,l=[0,0],p=[0,0],c=[0,0],u=[0,0],f=[0,0],d=[1,0,0,1,0,0],h=[1,0,0,1,0,0],v=0,g=0,m=[0,0],b=1,y=[0,0],_=0;if(t){var x=t.getBoundingClientRect(),w=window.getComputedStyle(t);if(a=x.left,s=x.top,v=t.offsetWidth,g=t.offsetHeight,mt(v)&&(v=(n=Lt(t,w,!0))[0],g=n[1]),d=(r=function(t){for(var e=t,n=[];e;)n.push(Rt(e)),e=e.parentElement;n.reverse();var r=[1,0,0,1,0,0],o=n.length,i=[1,0,0,1,0,0];return n.forEach(function(t,e){o-1===e&&(i=r.slice()),"none"!==t&&Ct(r,t)}),i[4]=0,i[5]=0,r[4]=0,r[5]=0,[i,r]}(t))[0],l=(o=Et(h=r[1],m=w.transformOrigin.split(" ").map(function(t){return parseFloat(t)}),v,g))[0],p=o[1],c=o[2],u=o[3],f=o[4],e){var S=e.getBoundingClientRect();a-=S.left,s-=S.top}b=(i=Wt(l,p,c))[0],_=i[1],y=i[2]}return{direction:b,rotationRad:_,rotationPos:y,transform:"",target:t,left:a,top:s,pos1:p,pos2:c,pos3:u,pos4:f,width:v,height:g,beforeMatrix:d,matrix:h,origin:l,transformOrigin:m}}function At(t){var e=t.getAttribute("data-position");if(e){var n=[0,0];return-1<e.indexOf("w")&&(n[0]=-1),-1<e.indexOf("e")&&(n[0]=1),-1<e.indexOf("n")&&(n[1]=-1),-1<e.indexOf("s")&&(n[1]=1),n}}function Ut(t,e){var n=e.datas,r=function(t,e,n){var r=t.startAbsoluteOrigin,o=t.startRad,i=t.prevRad,a=t.loop,s=t.direction,l=kt(r,[e,n]);l<i&&270<i&&l<90?++t.loop:i<l&&i<90&&270<l&&--t.loop;var p=360*a+i,c=360*t.loop+l;return t.prevRad=l,{delta:s*(c-p)/Math.PI*180,dist:s*(p-o)/Math.PI*180,beforeDelta:(c-p)/Math.PI*180,beforeDist:(p-o)/Math.PI*180,origin:origin}}(n,e.clientX,e.clientY),o=r.delta,i=r.dist,a=r.beforeDist,s=r.beforeDelta;t.props.onRotate({target:t.props.target,delta:o,dist:i,beforeDist:a,beforeDelta:s,transform:n.transform+" rotate("+i+"deg)"}),t.updateTargetRect(t.props.target,t.state)}function Bt(s,t){var l;return wt(t,{container:window,dragstart:function(t){var e=t.datas,n=t.inputEvent,r=t.clientX,o=t.clientY,i=n.target;if(l="",!bt(i,Ot("control")))return!1;if(bt(i,Ot("rotation")))return l="rotate",function(t,e){var n=e.datas,r=e.clientX,o=e.clientY,i=t.props.target;if(!i)return!1;var a=t.state,s=a.matrix,l=a.left,p=a.top,c=a.origin,u=a.rotationPos,f=a.direction;n.transform=window.getComputedStyle(i).transform,n.matrix=s,n.left=l,n.top=p,n.startAbsoluteOrigin=[r-u[0]+c[0],o-u[1]+c[1]],n.prevRad=kt(n.startAbsoluteOrigin,[r,o]),n.startRad=n.prevRad,n.loop=0,n.direction=f,"none"===n.transform&&(n.transform=""),t.props.onRotateStart({target:i})}(s,{datas:e,clientX:r,clientY:o});if(s.props.scalable){var a=At(i);return l="scale",function(t,e,n){var r=n.datas,o=t.props.target;if(!e||!o)return!1;var i=window.getComputedStyle(o),a=t.state,s=a.matrix,l=a.beforeMatrix,p=a.width,c=a.height,u=a.left,f=a.top,d=a.transformOrigin,h=a.origin;r.matrix=Mt(s.slice()),r.beforeMatrix=l,r.transform=i.transform,r.prevDist=[1,1],r.position=e,r.width=p,r.height=c,r.transformOrigin=d,r.originalOrigin=h,r.left=u,r.top=f,"none"===r.transform&&(r.transform=""),t.props.onScaleStart({target:o})}(s,a,{datas:e})}if(s.props.resizable){a=At(i);return l="resize",function(t,e,n){var r=n.datas,o=t.props.target;if(!o||!e)return!1;var i=t.state.matrix,a=Lt(o),s=a[0],l=a[1];r.matrix=Mt(i.slice()),r.position=e,r.width=s,r.height=l,r.prevWidth=0,r.prevHeight=0,t.props.onResizeStart({target:o})}(s,a,{datas:e})}return!1},drag:function(t){var e=t.datas,n=t.clientX,r=t.clientY,o=t.distX,i=t.distY;if(l)return"rotate"===l?Ut(s,{datas:e,clientX:n,clientY:r}):"scale"===l?function(t,e){var n=e.datas,r=e.distX,o=e.distY,i=n.matrix,a=n.beforeMatrix,s=n.prevDist,l=n.position,p=n.width,c=n.height,u=n.left,f=n.top,d=n.transformOrigin,h=n.originalOrigin,v=n.transform,g=Dt(i,[r,o,1]),m=l[0]*g[0],b=l[1]*g[1];if(l[0]&&l[1]){var y=Math.sqrt(m*m+b*b),_=kt([0,0],g),x=kt([0,0],l),w=Math.cos(_-x)*y;b=(m=w)*c/p}var S=(p+m)/p,P=(c+b)/c,N=t.props.target;n.prevDist=[S,P],t.props.onScale({target:N,scale:[S,P],dist:[S/s[0],P/s[1]],delta:[S-s[0],P-s[1]],transform:v+" scale("+S+", "+P+")"}),t.updateTargetRect(N,{beforeMatrix:a,transformOrigin:d,origin:h,width:p,height:c,left:u,top:f})}(s,{datas:e,distX:o,distY:i}):"resize"===l?function(t,e){var n=e.datas,r=e.distX,o=e.distY,i=n.matrix,a=n.position,s=n.width,l=n.height,p=n.prevWidth,c=n.prevHeight,u=Dt(i,[r,o,1]),f=a[0]*u[0],d=a[1]*u[1];if(a[0]&&a[1]){var h=Math.sqrt(f*f+d*d),v=kt([0,0],u),g=kt([0,0],a),m=Math.cos(v-g)*h;d=(f=m)*l/s}var b=s+f,y=l+d;n.prevWidth=f,n.prevHeight=d,t.props.onResize({target:t.props.target,width:b,height:y,dist:[f,d],delta:[f-p,d-c]}),t.updateRect()}(s,{datas:e,distX:o,distY:i}):void 0},dragend:function(t){var e=t.isDrag;if(l)return"rotate"===l?function(t,e){var n=e.isDrag;t.props.onRotateEnd({target:t.props.target,isDrag:n}),n&&t.updateRect()}(s,{isDrag:e}):"scale"===l?function(t,e){var n=e.isDrag;t.props.onScaleEnd({target:t.props.target,isDrag:n}),n&&t.updateRect()}(s,{isDrag:e}):"resize"===l?function(t,e){var n=e.isDrag;t.props.onScaleEnd({target:t.props.target,isDrag:n}),n&&t.updateRect()}(s,{isDrag:e}):void 0}})}var Yt,Ht,Xt,Ft,It,Vt=(Yt="div",Ft="rCS"+function(t){return xt(t).toString(36)}(Ht=Nt),It=0,function(e){function t(t){return e.call(this,t)||this}return function(t,e){function n(){this.constructor=t}yt(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,e),t.prototype.render=function(){var t=this.props,e=t.className,n=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n}(t,["className"]);return nt(Yt,_t({className:e+" "+Ft},n))},t.prototype.componentDidMount=function(){0===It&&(Xt=function(n,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(":host")?""+t.replace(/\:host/g,"."+n):"."+n+" "+t}).join(", ")+"{"}),(document.head||document.body).appendChild(e),e}(Ft,Ht)),++It},t.prototype.componentWillUnmount=function(){0==--It&&Xt&&Xt.parentNode.removeChild(Xt)},t.prototype.getElement=function(){return this.element||(this.element=function(t){return t&&(t.base||1===t.nodeType&&t)||null}(this))},t}(ht)),$t=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={target:null,beforeMatrix:[1,0,0,1,0,0],matrix:[1,0,0,1,0,0],left:0,top:0,width:0,height:0,transform:"",transformOrigin:[0,0],direction:1,rotationRad:0,rotationPos:[0,0],origin:[0,0],pos1:[0,0],pos2:[0,0],pos3:[0,0],pos4:[0,0]},t}!function(t,e){function n(){this.constructor=t}St(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,e);var n=t.prototype;return n.isMoveableElement=function(t){return t&&-1<t.className.indexOf(Pt)},n.render=function(){this.state.target!==this.props.target&&this.updateRect(!0);var t=this.state,e=t.left,n=t.top,r=t.pos1,o=t.pos2,i=t.pos3,a=t.pos4,s=t.target,l=t.transform,p=t.direction;return nt(Vt,{ref:c(this,"controlBox"),className:Ot("control-box",-1===p?"reverse":""),style:{position:this.props.container?"absolute":"fixed",display:s?"block":"none",transform:"translate("+e+"px, "+n+"px) "+l}},nt("div",{className:Ot("line"),style:zt(r,o)}),nt("div",{className:Ot("line"),style:zt(o,a)}),nt("div",{className:Ot("line"),style:zt(r,i)}),nt("div",{className:Ot("line"),style:zt(i,a)}),this.renderRotation(p),this.renderPosition(),this.renderOrigin())},n.renderRotation=function(t){if(!this.props.rotatable)return null;var e=this.state,n=e.pos1,r=e.pos2,o=kt(0<t?n:r,0<t?r:n);return nt("div",{className:Ot("line rotation"),style:{transform:"translate("+(n[0]+r[0])/2+"px, "+(n[1]+r[1])/2+"px) translateY(-40px) rotate("+o+"rad)"}},nt("div",{className:Ot("control","rotation"),ref:c(this,"rotationElement")}))},n.renderOrigin=function(){if(!this.props.origin)return null;var t=this.state.origin;return nt("div",{className:Ot("control","origin"),style:jt(t)})},n.renderPosition=function(){if(!this.props.resizable&&!this.props.scalable)return null;var t=this.state,e=t.pos1,n=t.pos2,r=t.pos3,o=t.pos4;return[nt("div",{className:Ot("control","nw"),"data-position":"nw",key:"nw",style:jt(e)}),nt("div",{className:Ot("control","n"),"data-position":"n",key:"n",style:jt(e,n)}),nt("div",{className:Ot("control","ne"),"data-position":"ne",key:"ne",style:jt(n)}),nt("div",{className:Ot("control","w"),"data-position":"w",key:"w",style:jt(e,r)}),nt("div",{className:Ot("control","e"),"data-position":"e",key:"e",style:jt(n,o)}),nt("div",{className:Ot("control","sw"),"data-position":"sw",key:"sw",style:jt(r)}),nt("div",{className:Ot("control","s"),"data-position":"s",key:"s",style:jt(r,o)}),nt("div",{className:Ot("control","se"),"data-position":"se",key:"se",style:jt(o)})]},n.componentDidMount=function(){this.moveableDragger=Bt(this,this.controlBox.getElement())},n.componentWillUnmount=function(){this.draggableDragger&&(this.draggableDragger.unset(),this.draggableDragger=null),this.moveableDragger&&(this.moveableDragger.unset(),this.moveableDragger=null)},n.move=function(t){if(t[0]||t[1]){var e=this.state,n=e.left,r=e.top;this.setState({left:n+t[0],top:r+t[1]})}},n.updateRect=function(t){var e=this.props.target;this.state.target!==e&&(this.draggableDragger&&(this.draggableDragger.unset(),this.draggableDragger=null),e&&this.props.draggable&&(this.draggableDragger=function(m,b){return wt(b,{container:window,dragstart:function(t){var e=t.datas,n=window.getComputedStyle(b),r=m.state,o=r.matrix,i=r.beforeMatrix;return e.matrix=Mt(o.slice()),e.beforeMatrix=Mt(i.slice()),e.left=parseFloat(n.left||"")||0,e.top=parseFloat(n.top||"")||0,e.bottom=parseFloat(n.bottom||"")||0,e.right=parseFloat(n.right||"")||0,e.transform=n.transform,e.prevDist=[0,0],e.prevBeforeDist=[0,0],"none"===e.transform&&(e.transform=""),m.props.onDragStart({target:b})},drag:function(t){var e=t.datas,n=t.distX,r=t.distY,o=e.beforeMatrix,i=e.matrix,a=e.prevDist,s=e.prevBeforeDist,l=Dt(o,[n,r,1]),p=Dt(i,[n,r,1]),c=[p[0]-a[0],p[1]-a[1]],u=[l[0]-s[0],l[1]-s[1]];e.prevDist=p,e.prevBeforeDist=l;var f=e.left+l[0],d=e.top+l[1],h=e.right-l[0],v=e.bottom-l[1],g=e.transform+" translate("+p[0]+"px, "+p[1]+"px)";m.props.onDrag({target:b,transform:g,dist:p,delta:c,beforeDist:l,beforeDelta:u,left:f,top:d,right:h,bottom:v}),m.setState({transform:"translate("+n+"px, "+r+"px)"})},dragend:function(t){var e=t.isDrag;m.props.onDragEnd({target:b,isDrag:e}),e&&m.updateRect()}})}(this,e)));var n=this.props.container;this.updateState(Tt(e,n),t)},n.updateTargetRect=function(t,e){var n=e.beforeMatrix,r=e.transformOrigin,o=e.width,i=e.height,a=e.left,s=e.top,l=e.origin,p=Rt(t,!0),c=Et(Ct(n.slice(),p),r,o,i),u=c[0],f=c[1],d=c[2],h=c[3],v=c[4],g=a+l[0]-u[0],m=s+l[1]-u[1],b=Wt(u,f,d),y=b[0],_=b[1],x=b[2];this.setState({direction:y,rotationRad:_,rotationPos:x,origin:u,pos1:f,pos2:d,pos3:h,pos4:v,left:g,top:m})},n.updateState=function(t,e){var n=this.state;if(e)for(var r in t)n[r]=t[r];else this.setState(t)},t.defaultProps={container:null,rotatable:!1,draggable:!1,scalable:!1,resizable:!1,origin:!0,onRotateStart:function(){},onRotate:function(){},onRotateEnd:function(){},onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},onScaleStart:function(){},onScale:function(){},onScaleEnd:function(){},onResizeStart:function(){},onResize:function(){},onResizeEnd:function(){}},t}(vt),qt=function(n){function t(t){var e=n.call(this,t)||this;return e.state={},e.state=e.props,e}return i(t,n),t.prototype.render=function(){return d($t,a({ref:c(this,"preactMoveable")},this.state))},t}(P);return function(o){function t(t,e){void 0===e&&(e={});var n=o.call(this)||this;n.onDragStart=function(t){n.trigger("dragStart",t)},n.onDrag=function(t){n.trigger("drag",t)},n.onDragEnd=function(t){n.trigger("dragEnd",t)},n.onResizeStart=function(t){n.trigger("resizeStart",t)},n.onResize=function(t){n.trigger("resize",t)},n.onResizeEnd=function(t){n.trigger("resizeEnd",t)},n.onScaleStart=function(t){n.trigger("scaleStart",t)},n.onScale=function(t){n.trigger("scale",t)},n.onScaleEnd=function(t){n.trigger("scaleEnd",t)},n.onRotateStart=function(t){n.trigger("rotateStart",t)},n.onRotate=function(t){n.trigger("rotate",t)},n.onRotateEnd=function(t){n.trigger("rotateEnd",t)};var r=document.createElement("div");return function(t,e,n){k(n,t,{},!1,e,!1)}(d(qt,a({ref:c(n,"innerMoveable")},e,{onDragStart:n.onDragStart,onDrag:n.onDrag,onDragEnd:n.onDragEnd,onResizeStart:n.onResizeStart,onResize:n.onResize,onResizeEnd:n.onResizeEnd,onScaleStart:n.onScaleStart,onScale:n.onScale,onScaleEnd:n.onScaleEnd,onRotateStart:n.onRotateStart,onRotate:n.onRotate,onRotateEnd:n.onRotateEnd})),r),t.appendChild(r.children[0]),n}i(t,o);var e=t.prototype;return Object.defineProperty(e,"origin",{get:function(){return this.getMoveableProps().origin},set:function(t){this.innerMoveable.setState({origin:t})},enumerable:!0,configurable:!0}),Object.defineProperty(e,"target",{get:function(){return this.getMoveableProps().target},set:function(t){t!==this.target?this.innerMoveable.setState({target:t}):this.updateRect()},enumerable:!0,configurable:!0}),Object.defineProperty(e,"draggable",{get:function(){return this.getMoveableProps().draggable||!1},set:function(t){this.innerMoveable.setState({draggable:t})},enumerable:!0,configurable:!0}),Object.defineProperty(e,"resizable",{get:function(){return this.getMoveableProps().resizable},set:function(t){this.innerMoveable.setState({resizable:t})},enumerable:!0,configurable:!0}),Object.defineProperty(e,"scalable",{get:function(){return this.getMoveableProps().scalable},set:function(t){this.innerMoveable.setState({scalable:t})},enumerable:!0,configurable:!0}),Object.defineProperty(e,"rotatable",{get:function(){return this.getMoveableProps().rotatable},set:function(t){this.innerMoveable.setState({rotatable:t})},enumerable:!0,configurable:!0}),e.move=function(t){this.getMoveable().move(t)},e.isMoveableElement=function(t){return this.getMoveable().isMoveableElement(t)},e.updateRect=function(){this.getMoveable().updateRect()},e.getMoveable=function(){return this.innerMoveable.preactMoveable},e.getMoveableProps=function(){return this.getMoveable().props},t}(t)});
+//# 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..c74d608e9
--- /dev/null
+++ b/dist/moveable.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.min.js","sources":["../src/InnerMoveable.tsx","../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 EgComponent from \"@egjs/component\";\nimport { ref } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n} from \"react-moveable/declaration/types\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\nclass Moveable extends EgComponent {\n    private innerMoveable!: any;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...options}\n                onDragStart={this.onDragStart}\n                onDrag={this.onDrag}\n                onDragEnd={this.onDragEnd}\n                onResizeStart={this.onResizeStart}\n                onResize={this.onResize}\n                onResizeEnd={this.onResizeEnd}\n                onScaleStart={this.onScaleStart}\n                onScale={this.onScale}\n                onScaleEnd={this.onScaleEnd}\n                onRotateStart={this.onRotateStart}\n                onRotate={this.onRotate}\n                onRotateEnd={this.onRotateEnd}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.origin = true;\n     */\n    get origin() {\n        return this.getMoveableProps().origin;\n    }\n    set origin(origin: boolean) {\n        this.innerMoveable.setState({\n            origin,\n        });\n    }\n    /**\n     * target is target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     * moveable.target = document.querySelector(\".target\");\n     */\n    get target(): HTMLElement | SVGElement {\n        return this.getMoveableProps().target;\n    }\n    set target(target: HTMLElement | SVGElement) {\n        if (target !== this.target) {\n            this.innerMoveable.setState({\n                target,\n            });\n        } else {\n            this.updateRect();\n        }\n    }\n    /**\n     * Whether or not target can be dragged.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.draggable = true;\n     */\n    get draggable(): boolean {\n        return this.getMoveableProps().draggable || false;\n    }\n    set draggable(draggable: boolean) {\n        this.innerMoveable.setState({\n            draggable,\n        });\n    }\n    /**\n     * Whether or not target can be resized.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.resizable = true;\n     */\n    get resizable(): boolean {\n        return this.getMoveableProps().resizable;\n    }\n    set resizable(resizable: boolean) {\n        this.innerMoveable.setState({\n            resizable,\n        });\n    }\n    /**\n     * Whether or not target can scaled.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.scalable = true;\n     */\n    get scalable(): boolean {\n        return this.getMoveableProps().scalable;\n    }\n    set scalable(scalable: boolean) {\n        this.innerMoveable.setState({\n            scalable,\n        });\n    }\n    /**\n     * Whether or not target can be rotated.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.rotatable = true;\n     */\n    get rotatable(): boolean {\n        return this.getMoveableProps().rotatable;\n    }\n    set rotatable(rotatable: boolean) {\n        this.innerMoveable.setState({\n            rotatable,\n        });\n    }\n    /**\n     * Move the moveable as much as the `pos`.\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.move([0, -10]);\n     */\n    public move(pos: number[]) {\n        this.getMoveable().move(pos);\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 the target 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    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n    private getMoveableProps() {\n        return this.getMoveable().props;\n    }\n    private onDragStart = (e: OnDragStart) => {\n        this.trigger(\"dragStart\", e);\n    }\n    private onDrag = (e: OnDrag) => {\n        this.trigger(\"drag\", e);\n    }\n    private onDragEnd = (e: OnDragEnd) => {\n        this.trigger(\"dragEnd\", e);\n    }\n    private onResizeStart = (e: OnResizeStart) => {\n        this.trigger(\"resizeStart\", e);\n    }\n    private onResize = (e: OnResize) => {\n        this.trigger(\"resize\", e);\n    }\n    private onResizeEnd = (e: OnResizeEnd) => {\n        this.trigger(\"resizeEnd\", e);\n    }\n    private onScaleStart = (e: OnScaleStart) => {\n        this.trigger(\"scaleStart\", e);\n    }\n    private onScale = (e: OnScale) => {\n        this.trigger(\"scale\", e);\n    }\n    private onScaleEnd = (e: OnScaleEnd) => {\n        this.trigger(\"scaleEnd\", e);\n    }\n    private onRotateStart = (e: OnRotateStart) => {\n        this.trigger(\"rotateStart\", e);\n    }\n    private onRotate = (e: OnRotate) => {\n        this.trigger(\"rotate\", e);\n    }\n    private onRotateEnd = (e: OnRotateEnd) => {\n        this.trigger(\"rotateEnd\", e);\n    }\n}\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 */\nexport default Moveable;\n"],"names":["props","_super","_this","state","tslib_1","h","Moveable","ref","this","Component","parentElement","options","e","trigger","element","document","createElement","render","InnerMoveable","onDragStart","onDrag","onDragEnd","onResizeStart","onResize","onResizeEnd","onScaleStart","onScale","onScaleEnd","onRotateStart","onRotate","onRotateEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","pos","getMoveable","move","isMoveableElement","preactMoveable","EgComponent"],"mappings":";;;;;;;;y5kCAOgBA,SACRC,YAAMD,gBAHHE,QAAuB,GAI1BA,EAAKC,MAAQD,EAAKF,eALiBI,0BAOvC,kBACWC,EAACC,MAASC,IAAKA,EAAIC,KAAM,mBAAuBA,KAAKL,YARzBM,iCCkB3BC,EAAyCC,gBAAAA,YACjDV,mBAmLIC,cAAc,SAACU,GACnBV,EAAKW,QAAQ,YAAaD,IAEtBV,SAAS,SAACU,GACdV,EAAKW,QAAQ,OAAQD,IAEjBV,YAAY,SAACU,GACjBV,EAAKW,QAAQ,UAAWD,IAEpBV,gBAAgB,SAACU,GACrBV,EAAKW,QAAQ,cAAeD,IAExBV,WAAW,SAACU,GAChBV,EAAKW,QAAQ,SAAUD,IAEnBV,cAAc,SAACU,GACnBV,EAAKW,QAAQ,YAAaD,IAEtBV,eAAe,SAACU,GACpBV,EAAKW,QAAQ,aAAcD,IAEvBV,UAAU,SAACU,GACfV,EAAKW,QAAQ,QAASD,IAElBV,aAAa,SAACU,GAClBV,EAAKW,QAAQ,WAAYD,IAErBV,gBAAgB,SAACU,GACrBV,EAAKW,QAAQ,cAAeD,IAExBV,WAAW,SAACU,GAChBV,EAAKW,QAAQ,SAAUD,IAEnBV,cAAc,SAACU,GACnBV,EAAKW,QAAQ,YAAaD,QApNpBE,EAAUC,SAASC,cAAc,gDAEvCC,CACIZ,EAACa,MACGX,IAAKA,EAAIL,EAAM,kBACXS,GACJQ,YAAajB,EAAKiB,YAClBC,OAAQlB,EAAKkB,OACbC,UAAWnB,EAAKmB,UAChBC,cAAepB,EAAKoB,cACpBC,SAAUrB,EAAKqB,SACfC,YAAatB,EAAKsB,YAClBC,aAAcvB,EAAKuB,aACnBC,QAASxB,EAAKwB,QACdC,WAAYzB,EAAKyB,WACjBC,cAAe1B,EAAK0B,cACpBC,SAAU3B,EAAK2B,SACfC,YAAa5B,EAAK4B,eAEtBhB,GAEJJ,EAAcqB,YAAYjB,EAAQkB,SAAS,MA7B5B5B,gCAwCnB6B,sCAAA,kBACWzB,KAAK0B,mBAAmBC,YAEnC,SAAWA,QACFC,cAAcC,SAAS,CACxBF,4CAWRF,sCAAA,kBACWzB,KAAK0B,mBAAmBI,YAEnC,SAAWA,GACHA,IAAW9B,KAAK8B,YACXF,cAAcC,SAAS,CACxBC,gBAGCC,8CAYbN,yCAAA,kBACWzB,KAAK0B,mBAAmBM,YAAa,OAEhD,SAAcA,QACLJ,cAAcC,SAAS,CACxBG,+CAYRP,yCAAA,kBACWzB,KAAK0B,mBAAmBO,eAEnC,SAAcA,QACLL,cAAcC,SAAS,CACxBI,+CAYRR,wCAAA,kBACWzB,KAAK0B,mBAAmBQ,cAEnC,SAAaA,QACJN,cAAcC,SAAS,CACxBK,8CAYRT,yCAAA,kBACWzB,KAAK0B,mBAAmBS,eAEnC,SAAcA,QACLP,cAAcC,SAAS,CACxBM,sDAaR,SAAYC,QACHC,cAAcC,KAAKF,wBAgB5B,SAAyBN,UACd9B,KAAKqC,cAAcE,kBAAkBT,iBAahD,gBACSO,cAAcN,4BAEvB,kBACW/B,KAAK4B,cAAcY,mCAE9B,kBACWxC,KAAKqC,cAAc7C,UAxLXiD"}
\ No newline at end of file