From 52ebbca2ec65b9ebaf393cbc9db10e69c0636151 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Mon, 29 Jul 2019 02:47:22 +0900 Subject: [PATCH] chore: Release 0.4.1 --- .gitignore | 2 +- CHANGELOG.md | 4 + dist/moveable.cjs.js | 3702 ++++++++++++++++++++++++++++++++ dist/moveable.cjs.js.map | 1 + dist/moveable.esm.js | 3700 ++++++++++++++++++++++++++++++++ dist/moveable.esm.js.map | 1 + dist/moveable.js | 4353 ++++++++++++++++++++++++++++++++++++++ dist/moveable.js.map | 1 + dist/moveable.min.js | 10 + dist/moveable.min.js.map | 1 + 10 files changed, 11774 insertions(+), 1 deletion(-) create mode 100644 dist/moveable.cjs.js create mode 100644 dist/moveable.cjs.js.map create mode 100644 dist/moveable.esm.js create mode 100644 dist/moveable.esm.js.map create mode 100644 dist/moveable.js create mode 100644 dist/moveable.js.map create mode 100644 dist/moveable.min.js create mode 100644 dist/moveable.min.js.map diff --git a/.gitignore b/.gitignore index 9c0f0c661..cffadfe7b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ node_modules/ *.DS_Store .DS_Store doc/ -dist/ + demo/dist/ packages/*/dist/ release/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ca808953..e30d7760d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). +## [0.4.1] - 2019-7-29 +### Fixed +- Fix that the `warpEnd` event didn't call + ## [0.4.0] - 2019-07-29 ### Added - Add Warpable and option, events diff --git a/dist/moveable.cjs.js b/dist/moveable.cjs.js new file mode 100644 index 000000000..944889947 --- /dev/null +++ b/dist/moveable.cjs.js @@ -0,0 +1,3702 @@ +/* +Copyright (c) 2019 Daybrush +name: moveable +license: MIT +author: Daybrush +repository: git+https://github.com/daybrush/moveable.git +version: 0.4.1 +*/ +'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.6.3 +*/ + +/* +Copyright (c) 2019 Daybrush +name: react-moveable +license: MIT +author: Daybrush +repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable +version: 0.7.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$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 pointer-events: none;\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"); +var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]]; +var MIN_SCALE = 0.000000001; + +function add(matrix, inverseMatrix, startIndex, endIndex, fromStart, k) { + for (var i = startIndex; i < endIndex; ++i) { + matrix[i] += matrix[fromStart + i - startIndex] * k; + inverseMatrix[i] += inverseMatrix[fromStart + i - startIndex] * k; + } +} + +function swap(matrix, inverseMatrix, startIndex, endIndex, fromStart) { + for (var i = startIndex; i < endIndex; ++i) { + var v = matrix[i]; + var iv = inverseMatrix[i]; + matrix[i] = matrix[fromStart + i - startIndex]; + matrix[fromStart + i - startIndex] = v; + inverseMatrix[i] = inverseMatrix[fromStart + i - startIndex]; + inverseMatrix[fromStart + i - startIndex] = iv; + } +} + +function divide(matrix, inverseMatrix, startIndex, endIndex, k) { + for (var i = startIndex; i < endIndex; ++i) { + matrix[i] /= k; + inverseMatrix[i] /= k; + } +} + +function createIdentityMatrix(n) { + var length = n * n; + var matrix = []; + + for (var i = 0; i < length; ++i) { + matrix[i] = i % (n + 1) ? 0 : 1; + } + + return matrix; +} +function createOriginMatrix(origin, n) { + var m = createIdentityMatrix(n); + var length = Math.min(origin.length, n - 1); + + for (var i = 0; i < length; ++i) { + m[n * (i + 1) - 1] = origin[i]; + } + + return m; +} +function ignoreDimension(matrix, m, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = matrix.slice(); + + for (var i = 0; i < n; ++i) { + newMatrix[i * n + m - 1] = 0; + newMatrix[(m - 1) * n + i] = 0; + } + + newMatrix[(m - 1) * (n + 1)] = 1; + return newMatrix; +} +function invert(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = matrix.slice(); + var inverseMatrix = createIdentityMatrix(n); + + for (var i = 0; i < n; ++i) { + var startIndex = n * i; + var endIndex = n * (i + 1); + var identityIndex = startIndex + i; + + if (newMatrix[identityIndex] === 0) { + for (var j = i + 1; j < n; ++j) { + if (newMatrix[n * j + i]) { + swap(newMatrix, inverseMatrix, startIndex, endIndex, n * j); + break; + } + } + } + + if (newMatrix[identityIndex]) { + divide(newMatrix, inverseMatrix, startIndex, endIndex, newMatrix[identityIndex]); + } else { + // no inverse matrix + return []; + } + + for (var j = 0; j < n; ++j) { + var targetStartIndex = n * j; + var targetEndIndex = targetStartIndex + n; + var targetIndex = targetStartIndex + i; + var target = newMatrix[targetIndex]; + + if (target === 0 || i === j) { + continue; + } + + add(newMatrix, inverseMatrix, targetStartIndex, targetEndIndex, startIndex, -target); + } + } + + return inverseMatrix; +} +function transpose(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < n; ++j) { + newMatrix[j * n + i] = matrix[n * i + j]; + } + } + + return newMatrix; +} +function convertPositionMatrix(matrix, n) { + var newMatrix = matrix.slice(); + + for (var i = matrix.length; i < n - 1; ++i) { + newMatrix[i] = 0; + } + + newMatrix[n - 1] = 1; + return newMatrix; +} +function convertDimension(matrix, n, m) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } // n < m + + + if (n === m) { + return matrix; + } + + var newMatrix = createIdentityMatrix(m); + var length = Math.min(n, m); + + for (var i = 0; i < length - 1; ++i) { + for (var j = 0; j < length - 1; ++j) { + newMatrix[i * m + j] = matrix[i * n + j]; + } + + newMatrix[(i + 1) * m - 1] = matrix[(i + 1) * n - 1]; + newMatrix[(m - 1) * m + i] = matrix[(n - 1) * n + i]; + } + + newMatrix[m * m - 1] = matrix[n * n - 1]; + return newMatrix; +} +function multiplies(n) { + var matrixes = []; + + for (var _i = 1; _i < arguments.length; _i++) { + matrixes[_i - 1] = arguments[_i]; + } + + var m = createIdentityMatrix(n); + matrixes.forEach(function (matrix) { + m = multiply(m, matrix, n); + }); + return m; +} +function multiply(matrix, matrix2, n) { + var newMatrix = []; // n * m X m * k + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i * k + j] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j]; + } + } + } // n * k + + + return newMatrix; +} +function multiplyCSS(matrix, matrix2, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; // n(y) * m(x) X m(y) * k(x) + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i + j * k] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k]; + } + } + } // n * k + + + return newMatrix; +} +function sum(pos1, pos2) { + var length = Math.min(pos1.length, pos2.length); + var nextPos = pos1.slice(); + + for (var i = 0; i < length; ++i) { + nextPos[i] = nextPos[i] + pos2[i]; + } + + return nextPos; +} +function minus(pos1, pos2) { + var length = Math.min(pos1.length, pos2.length); + var nextPos = pos1.slice(); + + for (var i = 0; i < length; ++i) { + nextPos[i] = nextPos[i] - pos2[i]; + } + + return nextPos; +} +function caculate(matrix, matrix2, n) { + if (n === void 0) { + n = matrix2.length; + } + + var result = multiply(matrix, matrix2, n); + var k = result[n - 1]; + return result.map(function (v) { + return v / k; + }); +} +function convertCSStoMatrix(a) { + if (a.length === 6) { + return [a[0], a[2], a[4], a[1], a[3], a[5], 0, 0, 1]; + } + + return transpose(a); +} +function convertMatrixtoCSS(a) { + if (a.length === 9) { + return [a[0], a[3], a[1], a[4], a[2], a[5]]; + } + + return transpose(a); +} + +function 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 getTransformMatrix(transform) { + if (transform === "none") { + return [1, 0, 0, 1, 0, 0]; + } + + if (utils.isObject(transform)) { + return transform; + } + + var value = utils.splitBracket(transform).value; + return value.split(/s*,\s*/g).map(function (v) { + return parseFloat(v); + }); +} +function getAbsoluteMatrix(matrix, n, origin) { + return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) { + return -a; + }), n)); +} +function caculateMatrixStack(target, container, isContainer, prevMatrix, prevN) { + if (isContainer === void 0) { + isContainer = target === container; + } + + var el = target; + var matrixes = []; + var is3d = false; + var n = 3; + var transformOrigin; + var targetMatrix; + + while (el && (isContainer || el !== container)) { + var style = window.getComputedStyle(el); + var matrix = convertCSStoMatrix(getTransformMatrix(style.transform)); + + if (!is3d && matrix.length === 16) { + is3d = true; + n = 4; + var matrixesLength = matrixes.length; + + for (var i = 0; i < matrixesLength; ++i) { + matrixes[i] = convertDimension(matrixes[i], 3, 4); + } + } + + if (is3d && matrix.length === 9) { + matrix = convertDimension(matrix, 3, 4); + } + + var origin = style.transformOrigin.split(" ").map(function (pos) { + return parseFloat(pos); + }); + + if (!targetMatrix) { + targetMatrix = matrix; + } + + if (!transformOrigin) { + transformOrigin = origin; + } + + matrixes.push(getAbsoluteMatrix(matrix, n, origin)); + var offsetLeft = el.offsetLeft; + var hasNotOffset = utils.isUndefined(offsetLeft); + matrixes.push(createOriginMatrix([hasNotOffset ? el : offsetLeft, hasNotOffset ? origin : el.offsetTop], n)); + + if (isContainer) { + break; + } + + el = el.parentElement; + } + + var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n); + var beforeMatrix = createIdentityMatrix(n); + var length = matrixes.length; + matrixes.reverse(); + matrixes.forEach(function (matrix, i) { + var _a; + + if (length - 2 === i) { + beforeMatrix = mat.slice(); + } + + if (utils.isObject(matrix[n - 1])) { + _a = getSVGOffset(matrix[n - 1], container, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1]; // matrix[n - 1] = 0; + // matrix[2 * n - 1] = 0; + } + + mat = multiply(mat, matrix, n); + }); + var transform = (is3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(targetMatrix) + ")"; + return [beforeMatrix, mat, targetMatrix, transform, transformOrigin]; +} +function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) { + var _a; + + var _b = getSize(el), + width = _b[0], + height = _b[1]; + + var containerRect = (container || document.documentElement).getBoundingClientRect(); + var rect = el.getBoundingClientRect(); + var rectLeft = rect.left - containerRect.left; + var rectTop = rect.top - containerRect.top; + var rectWidth = rect.width; + var rectHeight = rect.height; + var mat = multiplies(n, beforeMatrix, absoluteMatrix); + var pos1 = caculate(mat, convertPositionMatrix([0, 0], n), n); + var pos2 = caculate(mat, convertPositionMatrix([width, 0], n), n); + var pos3 = caculate(mat, convertPositionMatrix([0, height], n), n); + var pos4 = caculate(mat, convertPositionMatrix([width, height], n), n); + var posOrigin = caculate(mat, convertPositionMatrix(origin, n), n); + var prevLeft = Math.min(pos1[0], pos2[0], pos3[0], pos4[0]); + var prevTop = Math.min(pos1[1], pos2[1], pos3[1], pos4[1]); + var prevOrigin = minus(posOrigin, [prevLeft, prevTop]); + var prevWidth = Math.max(pos1[0], pos2[0], pos3[0], pos4[0]) - prevLeft; + var prevHeight = Math.max(pos1[1], pos2[1], pos3[1], pos4[1]) - prevTop; + var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight]; + var offset = [0, 0]; + var count = 0; + + while (++count < 10) { + _a = minus(caculate(invert(beforeMatrix, n), convertPositionMatrix(rectOrigin, n), n), caculate(invert(beforeMatrix, n), convertPositionMatrix(posOrigin, n), n)), offset[0] = _a[0], offset[1] = _a[1]; + var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix); + var nextPos1 = caculate(mat2, convertPositionMatrix([0, 0], n), n); + var nextPos2 = caculate(mat2, convertPositionMatrix([width, 0], n), n); + var nextPos3 = caculate(mat2, convertPositionMatrix([0, height], n), n); + var nextPos4 = caculate(mat2, convertPositionMatrix([width, height], n), n); + var nextLeft = Math.min(nextPos1[0], nextPos2[0], nextPos3[0], nextPos4[0]); + var nextTop = Math.min(nextPos1[1], nextPos2[1], nextPos3[1], nextPos4[1]); + var distLeft = nextLeft - rectLeft; + var distTop = nextTop - rectTop; + + if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) { + break; + } + + rectOrigin[0] -= distLeft; + rectOrigin[1] -= distTop; + } + + return offset.map(function (p) { + return Math.round(p); + }); +} +function caculatePosition(matrix, origin, width, height) { + var is3d = matrix.length === 16; + var n = is3d ? 4 : 3; + + var _a = caculate(matrix, convertPositionMatrix([0, 0], n), n), + x1 = _a[0], + y1 = _a[1]; + + var _b = caculate(matrix, convertPositionMatrix([width, 0], n), n), + x2 = _b[0], + y2 = _b[1]; + + var _c = caculate(matrix, convertPositionMatrix([0, height], n), n), + x3 = _c[0], + y3 = _c[1]; + + var _d = caculate(matrix, convertPositionMatrix([width, height], n), n), + x4 = _d[0], + y4 = _d[1]; + + var _e = caculate(matrix, convertPositionMatrix(origin, n), n), + 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 [[minX, minY], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4]]; +} +function rotateMatrix(matrix, rad) { + var cos = Math.cos(rad); + var sin = Math.sin(rad); + return multiply([cos, -sin, 0, sin, cos, 0, 0, 0, 1], matrix, 3); +} +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(pos1, pos2, pos3, pos4) { + var center = [(pos1[0] + pos2[0] + pos3[0] + pos4[0]) / 4, (pos1[1] + pos2[1] + pos3[1] + pos4[1]) / 4]; + var pos1Rad = getRad(center, pos1); + var pos2Rad = getRad(center, 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 = rotateMatrix([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, _e; + + 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 = createIdentityMatrix(3); + var matrix = createIdentityMatrix(3); + var targetMatrix = createIdentityMatrix(3); + var width = 0; + var height = 0; + var transformOrigin = [0, 0]; + var direction = 1; + var rotationPos = [0, 0]; + var rotationRad = 0; + var is3d = false; + var targetTransform = ""; + + if (target) { + var style = window.getComputedStyle(target); + width = target.offsetWidth; + height = target.offsetHeight; + + if (utils.isUndefined(width)) { + _a = getSize(target, style, true), width = _a[0], height = _a[1]; + } + + _b = caculateMatrixStack(target, container), beforeMatrix = _b[0], matrix = _b[1], targetMatrix = _b[2], targetTransform = _b[3], transformOrigin = _b[4]; + is3d = matrix.length === 16; + _c = caculatePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5]; // 1 : clockwise + // -1 : counterclockwise + + _e = getRotationInfo(pos1, pos2, pos3, pos4), direction = _e[0], rotationRad = _e[1], rotationPos = _e[2]; + } + + return { + direction: direction, + rotationRad: rotationRad, + rotationPos: rotationPos, + target: target, + left: left, + top: top, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + width: width, + height: height, + beforeMatrix: beforeMatrix, + matrix: matrix, + targetTransform: targetTransform, + targetMatrix: targetMatrix, + is3d: is3d, + 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 throttle(num, unit) { + if (!unit) { + return num; + } + + return Math.round(num / unit) * unit; +} +function throttleArray(nums, unit) { + nums.forEach(function (_, i) { + nums[i] = throttle(nums[i], unit); + }); +} +function warp(pos0, pos1, pos2, pos3, nextPos0, nextPos1, nextPos2, nextPos3) { + var x0 = pos0[0], + y0 = pos0[1]; + var x1 = pos1[0], + y1 = pos1[1]; + var x2 = pos2[0], + y2 = pos2[1]; + var x3 = pos3[0], + y3 = pos3[1]; + var u0 = nextPos0[0], + v0 = nextPos0[1]; + var u1 = nextPos1[0], + v1 = nextPos1[1]; + var u2 = nextPos2[0], + v2 = nextPos2[1]; + var u3 = nextPos3[0], + v3 = nextPos3[1]; + var matrix = [x0, y0, 1, 0, 0, 0, -u0 * x0, -u0 * y0, 0, 0, 0, x0, y0, 1, -v0 * x0, -v0 * y0, x1, y1, 1, 0, 0, 0, -u1 * x1, -u1 * y1, 0, 0, 0, x1, y1, 1, -v1 * x1, -v1 * y1, x2, y2, 1, 0, 0, 0, -u2 * x2, -u2 * y2, 0, 0, 0, x2, y2, 1, -v2 * x2, -v2 * y2, x3, y3, 1, 0, 0, 0, -u3 * x3, -u3 * y3, 0, 0, 0, x3, y3, 1, -v3 * x3, -v3 * y3]; + var inverseMatrix = invert(matrix, 8); + + if (!inverseMatrix.length) { + return []; + } + + var h = multiply(inverseMatrix, [u0, v0, u1, v1, u2, v2, u3, v3], 8); + h[8] = 1; + return convertDimension(h, 3, 4); +} + +function dragStart(moveable, _a) { + var datas = _a.datas; + var _b = moveable.state, + matrix = _b.matrix, + beforeMatrix = _b.beforeMatrix, + is3d = _b.is3d, + left = _b.left, + top = _b.top, + origin = _b.origin; + var n = is3d ? 4 : 3; + datas.is3d = is3d; + datas.matrix = matrix; + datas.inverseMatrix = invert(matrix, n); + datas.beforeMatrix = beforeMatrix; + datas.inverseBeforeMatrix = invert(beforeMatrix, n); + datas.absoluteOrigin = convertPositionMatrix(sum([left, top], origin), n); + datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, is3d ? 4 : 3); + datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, is3d ? 4 : 3); +} +function getDragDist(_a, isBefore) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY; + var inverseBeforeMatrix = datas.inverseBeforeMatrix, + inverseMatrix = datas.inverseMatrix, + is3d = datas.is3d, + startDragBeforeDist = datas.startDragBeforeDist, + startDragDist = datas.startDragDist, + absoluteOrigin = datas.absoluteOrigin; + var n = is3d ? 4 : 3; + return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, sum(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist); +} + +function getDraggableDragger(moveable, target) { + return drag.drag(target, { + container: window, + dragstart: function (_a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var style = window.getComputedStyle(target); + var targetTransform = moveable.state.targetTransform; + datas.left = parseFloat(style.left || "") || 0; + datas.top = parseFloat(style.top || "") || 0; + datas.bottom = parseFloat(style.bottom || "") || 0; + datas.right = parseFloat(style.right || "") || 0; + datas.transform = targetTransform; + dragStart(moveable, { + datas: datas + }); + datas.prevDist = [0, 0]; + datas.prevBeforeDist = [0, 0]; + return moveable.props.onDragStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + }, + drag: function (_a) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY, + clientX = _a.clientX, + clientY = _a.clientY; + var throttleDrag = moveable.props.throttleDrag; + var prevDist = datas.prevDist, + prevBeforeDist = datas.prevBeforeDist, + transform = datas.transform; + var beforeDist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, false); + throttleArray(dist, throttleDrag); + throttleArray(beforeDist, throttleDrag); + var delta = minus(dist, prevDist); + var beforeDelta = minus(beforeDist, prevBeforeDist); + datas.prevDist = dist; + datas.prevBeforeDist = beforeDist; + var left = datas.left + beforeDist[0]; + var top = datas.top + beforeDist[1]; + var right = datas.right - beforeDist[0]; + var bottom = datas.bottom - beforeDist[1]; + var nextTransform = transform + " translate(" + dist[0] + "px, " + dist[1] + "px)"; + + if (delta.every(function (num) { + return !num; + }) && beforeDelta.some(function (num) { + return !num; + })) { + return; + } + + moveable.props.onDrag({ + target: target, + transform: nextTransform, + dist: dist, + delta: delta, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + left: left, + top: top, + right: right, + bottom: bottom, + clientX: clientX, + clientY: clientY + }); + moveable.updateTarget(); + }, + dragend: function (_a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onDragEnd({ + target: target, + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + + if (isDrag) { + moveable.updateRect(); + } + } + }); +} + +function scaleStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!position || !target) { + return false; + } + + var _b = moveable.state, + width = _b.width, + height = _b.height, + targetTransform = _b.targetTransform; + dragStart(moveable, { + datas: datas + }); + datas.transform = targetTransform; + datas.prevDist = [1, 1]; + datas.position = position; + datas.width = width; + datas.height = height; + moveable.props.onScaleStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function scale(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var prevDist = datas.prevDist, + position = datas.position, + width = datas.width, + height = datas.height, + transform = datas.transform; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = position[0] * dist[0]; + var distHeight = position[1] * dist[1]; // diagonal + + if (moveable.props.keepRatio && position[0] && position[1] && width && height) { + 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; + var throttleScale = moveable.props.throttleScale; + scaleX = throttle(scaleX, throttleScale); + scaleY = throttle(scaleY, throttleScale); + + if (scaleX === 0) { + scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE; + } + + if (scaleY === 0) { + scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE; + } + + datas.prevDist = [scaleX, scaleY]; + + if (scaleX === prevDist[0] && scaleY === prevDist[1]) { + return; + } + + 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 + ")", + clientX: clientX, + clientY: clientY + }); + moveable.updateTarget(); +} +function scaleEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onScaleEnd({ + target: moveable.props.target, + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + + if (isDrag) { + moveable.updateRect(); + } +} + +function getRotateInfo(datas, clientX, clientY, throttleRotate) { + var startAbsoluteOrigin = datas.startAbsoluteOrigin, + startDeg = datas.startDeg, + prevDeg = datas.prevDeg, + prevLoop = datas.loop, + direction = datas.direction; + var deg = throttle(getRad(startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, throttleRotate); + + if (prevDeg > deg && prevDeg > 270 && deg < 90) { + // 360 => 0 + ++datas.loop; + } else if (prevDeg < deg && prevDeg < 90 && deg > 270) { + // 0 => 360 + --datas.loop; + } + + var absolutePrevDeg = prevLoop * 360 + prevDeg; + var absoluteDeg = datas.loop * 360 + deg; + datas.prevDeg = deg; + return { + delta: direction * (absoluteDeg - absolutePrevDeg), + dist: direction * (absoluteDeg - startDeg), + beforeDelta: absoluteDeg - absolutePrevDeg, + beforeDist: absoluteDeg - startDeg, + 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, + left = _b.left, + top = _b.top, + origin = _b.origin, + rotationPos = _b.rotationPos, + direction = _b.direction, + targetTransform = _b.targetTransform; + datas.transform = targetTransform; + datas.left = left; + datas.top = top; + datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]]; + datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180; + datas.startDeg = datas.prevDeg; + datas.loop = 0; + datas.direction = direction; + + if (datas.transform === "none") { + datas.transform = ""; + } + + moveable.props.onRotateStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function rotate(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + + var _b = getRotateInfo(datas, clientX, clientY, moveable.props.throttleRotate), + delta = _b.delta, + dist = _b.dist, + beforeDist = _b.beforeDist, + beforeDelta = _b.beforeDelta; + + if (!delta) { + return; + } + + moveable.props.onRotate({ + target: moveable.props.target, + delta: delta, + dist: dist, + clientX: clientX, + clientY: clientY, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + transform: datas.transform + " rotate(" + dist + "deg)" + }); + moveable.updateTarget(); +} +function rotateEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onRotateEnd({ + clientX: clientX, + clientY: clientY, + target: moveable.props.target, + isDrag: isDrag + }); + + if (isDrag) { + moveable.updateRect(); + } +} + +function resizeStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!target || !position) { + return false; + } + + var _b = getSize(target), + width = _b[0], + height = _b[1]; + + dragStart(moveable, { + datas: datas + }); + datas.position = position; + datas.width = width; + datas.height = height; + datas.prevWidth = 0; + datas.prevHeight = 0; + moveable.props.onResizeStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function resize(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var position = datas.position, + width = datas.width, + height = datas.height, + prevWidth = datas.prevWidth, + prevHeight = datas.prevHeight; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = position[0] * dist[0]; + var distHeight = position[1] * dist[1]; // diagonal + + if (moveable.props.keepRatio && position[0] && position[1] && width && height) { + 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 throttleResize = moveable.props.throttleResize; + distWidth = throttle(distWidth, throttleResize); + distHeight = throttle(distHeight, throttleResize); + var nextWidth = width + distWidth; + var nextHeight = height + distHeight; + var delta = [distWidth - prevWidth, distHeight - prevHeight]; + datas.prevWidth = distWidth; + datas.prevHeight = distHeight; + + if (delta.every(function (num) { + return !num; + })) { + return; + } + + moveable.props.onResize({ + target: moveable.props.target, + width: nextWidth, + height: nextHeight, + dist: [distWidth, distHeight], + delta: delta, + clientX: clientX, + clientY: clientY + }); + moveable.updateRect(); +} +function resizeEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onScaleEnd({ + target: moveable.props.target, + clientX: clientX, + clientY: clientY, + isDrag: isDrag + }); + + if (isDrag) { + moveable.updateRect(); + } +} + +function getTriangleRad(pos1, pos2, pos3) { + // pos1 Rad + var rad1 = getRad(pos1, pos2); + var rad2 = getRad(pos1, pos3); + var rad = rad2 - rad1; + return rad >= 0 ? rad : rad + 2 * Math.PI; +} + +function isValidPos(poses1, poses2) { + var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]); + var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]); + var pi = Math.PI; + + if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) { + return false; + } + + return true; +} + +function warpStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!position || !target) { + return false; + } + + var _b = moveable.state, + transformOrigin = _b.transformOrigin, + is3d = _b.is3d, + targetTransform = _b.targetTransform, + targetMatrix = _b.targetMatrix, + width = _b.width, + height = _b.height; + datas.targetTransform = targetTransform; + datas.targetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4); + datas.targetInverseMatrix = ignoreDimension(invert(datas.targetMatrix, 4), 3, 4); + datas.position = position; + dragStart(moveable, { + datas: datas + }); + datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) { + return minus(p, transformOrigin); + }); + datas.nextPoses = datas.poses.map(function (_a) { + var x = _a[0], + y = _a[1]; + return caculate(datas.targetMatrix, [x, y, 0, 1], 4); + }); + datas.posNum = (position[0] === -1 ? 0 : 1) + (position[1] === -1 ? 0 : 2); + datas.prevMatrix = createIdentityMatrix(4); + moveable.props.onWarpStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function warp$1(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var posNum = datas.posNum, + poses = datas.poses, + targetInverseMatrix = datas.targetInverseMatrix, + prevMatrix = datas.prevMatrix; + var target = moveable.props.target; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var nextPoses = datas.nextPoses.slice(); + nextPoses[posNum] = [nextPoses[posNum][0] + dist[0], nextPoses[posNum][1] + dist[1]]; + + if (!NEARBY_POS.every(function (nearByPoses) { + return isValidPos(nearByPoses.map(function (i) { + return poses[i]; + }), nearByPoses.map(function (i) { + return nextPoses[i]; + })); + })) { + return; + } + + var h = warp(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]); + + if (!h.length) { + return; + } + + var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4)); + var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")"; + var delta = multiply(invert(prevMatrix, 4), matrix, 4); + datas.prevMatrix = matrix; + moveable.props.onWarp({ + target: target, + clientX: clientX, + clientY: clientY, + delta: delta, + multiply: multiplyCSS, + dist: matrix, + transform: transform + }); + moveable.updateRect(); +} +function warpEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onWarpEnd({ + target: moveable.props.target, + clientX: clientX, + clientY: clientY, + 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, + clientX: clientX, + clientY: clientY + }); + } else if (moveable.props.resizable) { + var position = getPosition(inputTarget); + type = "resize"; + return resizeStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else if (moveable.props.warpable) { + var position = getPosition(inputTarget); + type = "warp"; + return warpStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else { + return false; + } + }, + drag: function (e) { + if (!type) { + return; + } else if (type === "rotate") { + return rotate(moveable, e); + } else if (type === "scale") { + return scale(moveable, e); + } else if (type === "resize") { + return resize(moveable, e); + } else if (type === "warp") { + return warp$1(moveable, e); + } + }, + dragend: function (_a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + + if (!type) { + return; + } else if (type === "rotate") { + return rotateEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "scale") { + return scaleEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "resize") { + return resizeEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "warp") { + return warpEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } + } + }); +} + +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: createIdentityMatrix(3), + matrix: createIdentityMatrix(3), + targetTransform: "", + targetMatrix: createIdentityMatrix(3), + is3d: false, + left: 0, + top: 0, + width: 0, + height: 0, + 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.getAttribute("class") || "").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, + 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) translateZ(50px)" + } + }, 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(), this.renderPosition(), this.renderMiddleLine(), this.renderDiagonalPosition(), this.renderOrigin()); + }; + + __proto.renderRotation = function () { + if (!this.props.rotatable) { + return null; + } + + var _a = this.state, + pos1 = _a.pos1, + pos2 = _a.pos2, + rotationRad = _a.rotationRad; + 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.renderDiagonalPosition = function () { + var _a = this.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (!resizable && !scalable && !warpable) { + return null; + } + + var _b = this.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + return [createElement("div", { + className: prefix("control", "nw"), + "data-position": "nw", + key: "nw", + style: getControlTransform(pos1) + }), createElement("div", { + className: prefix("control", "ne"), + "data-position": "ne", + key: "ne", + style: getControlTransform(pos2) + }), createElement("div", { + className: prefix("control", "sw"), + "data-position": "sw", + key: "sw", + style: getControlTransform(pos3) + }), createElement("div", { + className: prefix("control", "se"), + "data-position": "se", + key: "se", + style: getControlTransform(pos4) + })]; + }; + + __proto.renderMiddleLine = function () { + var _a = this.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (resizable || scalable || !warpable) { + return; + } + + var _b = this.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + var linePosFrom1 = pos1.map(function (pos, i) { + return utils.dot(pos, pos2[i], 1, 2); + }); + var linePosFrom2 = pos1.map(function (pos, i) { + return utils.dot(pos, pos2[i], 2, 1); + }); + var linePosFrom3 = pos1.map(function (pos, i) { + return utils.dot(pos, pos3[i], 1, 2); + }); + var linePosFrom4 = pos1.map(function (pos, i) { + return utils.dot(pos, pos3[i], 2, 1); + }); + var linePosTo1 = pos3.map(function (pos, i) { + return utils.dot(pos, pos4[i], 1, 2); + }); + var linePosTo2 = pos3.map(function (pos, i) { + return utils.dot(pos, pos4[i], 2, 1); + }); + var linePosTo3 = pos2.map(function (pos, i) { + return utils.dot(pos, pos4[i], 1, 2); + }); + var linePosTo4 = pos2.map(function (pos, i) { + return utils.dot(pos, pos4[i], 2, 1); + }); + return [createElement("div", { + className: prefix("line"), + key: "middeLine1", + style: getLineStyle(linePosFrom1, linePosTo1) + }), createElement("div", { + className: prefix("line"), + key: "middeLine2", + style: getLineStyle(linePosFrom2, linePosTo2) + }), createElement("div", { + className: prefix("line"), + style: getLineStyle(linePosFrom3, linePosTo3) + }), createElement("div", { + className: prefix("line"), + style: getLineStyle(linePosFrom4, linePosTo4) + })]; + }; + + __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", "n"), + "data-position": "n", + key: "n", + style: getControlTransform(pos1, 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", "s"), + "data-position": "s", + key: "s", + style: getControlTransform(pos3, pos4) + })]; + }; + + __proto.componentDidMount = function () { + /* rotatable */ + + /* resizable */ + + /* scalable */ + + /* warpable */ + 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.updateTarget = function () { + var _a = this.state, + width = _a.width, + height = _a.height, + beforeMatrix = _a.beforeMatrix; + var target = this.props.target; + var container = this.props.container; + var is3d = beforeMatrix.length === 16; + var n = is3d ? 4 : 3; + + var _b = caculateMatrixStack(target, container, true, beforeMatrix, n), + matrix = _b[1], + targetMatrix = _b[2], + targetTransform = _b[3], + transformOrigin = _b[4]; + + var _c = caculatePosition(matrix, transformOrigin, width, height), + _d = _c[0], + left = _d[0], + top = _d[1], + nextOrigin = _c[1], + pos1 = _c[2], + pos2 = _c[3], + pos3 = _c[4], + pos4 = _c[5]; + + var _e = getRotationInfo(pos1, pos2, pos3, pos4), + direction = _e[0], + rotationRad = _e[1], + rotationPos = _e[2]; + + this.setState({ + direction: direction, + rotationRad: rotationRad, + rotationPos: rotationPos, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + origin: nextOrigin, + beforeMatrix: beforeMatrix, + targetMatrix: targetMatrix, + matrix: matrix, + transformOrigin: transformOrigin, + targetTransform: targetTransform, + left: left, + top: top + }); + }; + + __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 = { + target: null, + container: null, + rotatable: false, + draggable: false, + scalable: false, + resizable: false, + warpable: false, + keepRatio: true, + origin: true, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 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 () {}, + onWarpStart: function () {}, + onWarp: function () {}, + onWarpEnd: 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); + }; + + _this.onWarpStart = function (e) { + _this.trigger("warpStart", e); + }; + + _this.onWarp = function (e) { + _this.trigger("warp", e); + }; + + _this.onWarpEnd = function (e) { + _this.trigger("warpEnd", 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, + onWarpStart: _this.onWarpStart, + onWarp: _this.onWarp, + onWarpEnd: _this.onWarpEnd + })), element); + parentElement.appendChild(element.children[0]); + return _this; + } + + var __proto = Moveable.prototype; + Object.defineProperty(__proto, "origin", { + /** + * Whether or not the origin controlbox will be visible or not + * @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", { + /** + * The target to indicate Moveable Control Box. + * @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 + }); + Object.defineProperty(__proto, "warpable", { + /** + * Whether or not target can be warped. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.warpable = true; + */ + get: function () { + return this.getMoveableProps().warpable; + }, + set: function (warpable) { + this.innerMoveable.setState({ + warpable: warpable + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "keepRatio", { + /** + * When resize or scale, keeps a ratio of the width, height. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.keepRatio = true; + */ + get: function () { + return this.getMoveable().keepRatio; + }, + set: function (keepRatio) { + this.innerMoveable.setState({ + keepRatio: keepRatio + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleDrag", { + /** + * throttle of x, y when drag. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleDrag = 1; + */ + get: function () { + return this.getMoveable().throttleDrag; + }, + set: function (throttleDrag) { + this.innerMoveable.setState({ + throttleDrag: throttleDrag + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleResize", { + /** + * throttle of width, height when resize. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleResize = 1; + */ + get: function () { + return this.getMoveable().throttleResize; + }, + set: function (throttleResize) { + this.innerMoveable.setState({ + throttleResize: throttleResize + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleScale", { + /** + * throttle of scaleX, scaleY when scale. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleScale = 0.1; + */ + get: function () { + return this.getMoveable().throttleScale; + }, + set: function (throttleScale) { + this.innerMoveable.setState({ + throttleScale: throttleScale + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleRotate", { + /** + * hrottle of angle(degree) when rotate. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleRotate = 1; + */ + get: function () { + return this.getMoveable().throttleRotate; + }, + set: function (throttleRotate) { + this.innerMoveable.setState({ + throttleRotate: throttleRotate + }); + }, + 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 all elements change, update the shape of the moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("resize", e => { + * moveable.updateRect(); + * }); + */ + + + __proto.updateRect = function () { + this.getMoveable().updateRect(); + }; + /** + * If the width, height, left, and top of the only target change, update the shape of the moveable. + * @param - the values of x and y to move moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.updateTarget(); + */ + + + __proto.updateTarget = function () { + this.getMoveable().updateTarget(); + }; + + __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..d54c4eadb --- /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 {\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 ;\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, OnWarpStart, OnWarpEnd, OnWarp,\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 ,\n element,\n );\n parentElement.appendChild(element.children[0]);\n }\n /**\n * Whether or not the origin controlbox will be visible or not\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 * The target to indicate Moveable Control Box.\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 * Whether or not target can be warped.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n get warpable(): boolean {\n return this.getMoveableProps().warpable;\n }\n set warpable(warpable: boolean) {\n this.innerMoveable.setState({\n warpable,\n });\n }\n /**\n * When resize or scale, keeps a ratio of the width, height.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n get keepRatio(): boolean {\n return this.getMoveable().keepRatio;\n }\n set keepRatio(keepRatio: boolean) {\n this.innerMoveable.setState({\n keepRatio,\n });\n }\n /**\n * throttle of x, y when drag.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n get throttleDrag(): number {\n return this.getMoveable().throttleDrag;\n }\n set throttleDrag(throttleDrag: number) {\n this.innerMoveable.setState({\n throttleDrag,\n });\n }\n /**\n * throttle of width, height when resize.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n get throttleResize(): number {\n return this.getMoveable().throttleResize;\n }\n set throttleResize(throttleResize: number) {\n this.innerMoveable.setState({\n throttleResize,\n });\n }\n /**\n * throttle of scaleX, scaleY when scale.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n get throttleScale(): number {\n return this.getMoveable().throttleScale;\n }\n set throttleScale(throttleScale: number) {\n this.innerMoveable.setState({\n throttleScale,\n });\n }\n /**\n * hrottle of angle(degree) when rotate.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n get throttleRotate(): number {\n return this.getMoveable().throttleRotate;\n }\n set throttleRotate(throttleRotate: number) {\n this.innerMoveable.setState({\n throttleRotate,\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 all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n 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 private onWarpStart = (e: OnWarpStart) => {\n this.trigger(\"warpStart\", e);\n }\n private onWarp = (e: OnWarp) => {\n this.trigger(\"warp\", e);\n }\n private onWarpEnd = (e: OnWarpEnd) => {\n this.trigger(\"warpEnd\", 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\ndeclare interface Moveable {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\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","onWarpStart","onWarp","onWarpEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","warpable","getMoveable","keepRatio","throttleDrag","throttleResize","throttleScale","throttleRotate","pos","move","isMoveableElement","updateTarget","preactMoveable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"} \ No newline at end of file diff --git a/dist/moveable.esm.js b/dist/moveable.esm.js new file mode 100644 index 000000000..2fafa0e8e --- /dev/null +++ b/dist/moveable.esm.js @@ -0,0 +1,3700 @@ +/* +Copyright (c) 2019 Daybrush +name: moveable +license: MIT +author: Daybrush +repository: git+https://github.com/daybrush/moveable.git +version: 0.4.1 +*/ +import EgComponent from '@egjs/component'; +import { prefixCSS, prefixNames, ref } from 'framework-utils'; +import { dot, hasClass, isUndefined, isObject, splitBracket } 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.6.3 +*/ + +/* +Copyright (c) 2019 Daybrush +name: react-moveable +license: MIT +author: Daybrush +repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable +version: 0.7.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$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 pointer-events: none;\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"); +var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]]; +var MIN_SCALE = 0.000000001; + +function add(matrix, inverseMatrix, startIndex, endIndex, fromStart, k) { + for (var i = startIndex; i < endIndex; ++i) { + matrix[i] += matrix[fromStart + i - startIndex] * k; + inverseMatrix[i] += inverseMatrix[fromStart + i - startIndex] * k; + } +} + +function swap(matrix, inverseMatrix, startIndex, endIndex, fromStart) { + for (var i = startIndex; i < endIndex; ++i) { + var v = matrix[i]; + var iv = inverseMatrix[i]; + matrix[i] = matrix[fromStart + i - startIndex]; + matrix[fromStart + i - startIndex] = v; + inverseMatrix[i] = inverseMatrix[fromStart + i - startIndex]; + inverseMatrix[fromStart + i - startIndex] = iv; + } +} + +function divide(matrix, inverseMatrix, startIndex, endIndex, k) { + for (var i = startIndex; i < endIndex; ++i) { + matrix[i] /= k; + inverseMatrix[i] /= k; + } +} + +function createIdentityMatrix(n) { + var length = n * n; + var matrix = []; + + for (var i = 0; i < length; ++i) { + matrix[i] = i % (n + 1) ? 0 : 1; + } + + return matrix; +} +function createOriginMatrix(origin, n) { + var m = createIdentityMatrix(n); + var length = Math.min(origin.length, n - 1); + + for (var i = 0; i < length; ++i) { + m[n * (i + 1) - 1] = origin[i]; + } + + return m; +} +function ignoreDimension(matrix, m, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = matrix.slice(); + + for (var i = 0; i < n; ++i) { + newMatrix[i * n + m - 1] = 0; + newMatrix[(m - 1) * n + i] = 0; + } + + newMatrix[(m - 1) * (n + 1)] = 1; + return newMatrix; +} +function invert(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = matrix.slice(); + var inverseMatrix = createIdentityMatrix(n); + + for (var i = 0; i < n; ++i) { + var startIndex = n * i; + var endIndex = n * (i + 1); + var identityIndex = startIndex + i; + + if (newMatrix[identityIndex] === 0) { + for (var j = i + 1; j < n; ++j) { + if (newMatrix[n * j + i]) { + swap(newMatrix, inverseMatrix, startIndex, endIndex, n * j); + break; + } + } + } + + if (newMatrix[identityIndex]) { + divide(newMatrix, inverseMatrix, startIndex, endIndex, newMatrix[identityIndex]); + } else { + // no inverse matrix + return []; + } + + for (var j = 0; j < n; ++j) { + var targetStartIndex = n * j; + var targetEndIndex = targetStartIndex + n; + var targetIndex = targetStartIndex + i; + var target = newMatrix[targetIndex]; + + if (target === 0 || i === j) { + continue; + } + + add(newMatrix, inverseMatrix, targetStartIndex, targetEndIndex, startIndex, -target); + } + } + + return inverseMatrix; +} +function transpose(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < n; ++j) { + newMatrix[j * n + i] = matrix[n * i + j]; + } + } + + return newMatrix; +} +function convertPositionMatrix(matrix, n) { + var newMatrix = matrix.slice(); + + for (var i = matrix.length; i < n - 1; ++i) { + newMatrix[i] = 0; + } + + newMatrix[n - 1] = 1; + return newMatrix; +} +function convertDimension(matrix, n, m) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } // n < m + + + if (n === m) { + return matrix; + } + + var newMatrix = createIdentityMatrix(m); + var length = Math.min(n, m); + + for (var i = 0; i < length - 1; ++i) { + for (var j = 0; j < length - 1; ++j) { + newMatrix[i * m + j] = matrix[i * n + j]; + } + + newMatrix[(i + 1) * m - 1] = matrix[(i + 1) * n - 1]; + newMatrix[(m - 1) * m + i] = matrix[(n - 1) * n + i]; + } + + newMatrix[m * m - 1] = matrix[n * n - 1]; + return newMatrix; +} +function multiplies(n) { + var matrixes = []; + + for (var _i = 1; _i < arguments.length; _i++) { + matrixes[_i - 1] = arguments[_i]; + } + + var m = createIdentityMatrix(n); + matrixes.forEach(function (matrix) { + m = multiply(m, matrix, n); + }); + return m; +} +function multiply(matrix, matrix2, n) { + var newMatrix = []; // n * m X m * k + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i * k + j] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j]; + } + } + } // n * k + + + return newMatrix; +} +function multiplyCSS(matrix, matrix2, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; // n(y) * m(x) X m(y) * k(x) + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i + j * k] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k]; + } + } + } // n * k + + + return newMatrix; +} +function sum(pos1, pos2) { + var length = Math.min(pos1.length, pos2.length); + var nextPos = pos1.slice(); + + for (var i = 0; i < length; ++i) { + nextPos[i] = nextPos[i] + pos2[i]; + } + + return nextPos; +} +function minus(pos1, pos2) { + var length = Math.min(pos1.length, pos2.length); + var nextPos = pos1.slice(); + + for (var i = 0; i < length; ++i) { + nextPos[i] = nextPos[i] - pos2[i]; + } + + return nextPos; +} +function caculate(matrix, matrix2, n) { + if (n === void 0) { + n = matrix2.length; + } + + var result = multiply(matrix, matrix2, n); + var k = result[n - 1]; + return result.map(function (v) { + return v / k; + }); +} +function convertCSStoMatrix(a) { + if (a.length === 6) { + return [a[0], a[2], a[4], a[1], a[3], a[5], 0, 0, 1]; + } + + return transpose(a); +} +function convertMatrixtoCSS(a) { + if (a.length === 9) { + return [a[0], a[3], a[1], a[4], a[2], a[5]]; + } + + return transpose(a); +} + +function prefix() { + var classNames = []; + + for (var _i = 0; _i < arguments.length; _i++) { + classNames[_i] = arguments[_i]; + } + + return prefixNames.apply(void 0, [PREFIX].concat(classNames)); +} +function getTransformMatrix(transform) { + if (transform === "none") { + return [1, 0, 0, 1, 0, 0]; + } + + if (isObject(transform)) { + return transform; + } + + var value = splitBracket(transform).value; + return value.split(/s*,\s*/g).map(function (v) { + return parseFloat(v); + }); +} +function getAbsoluteMatrix(matrix, n, origin) { + return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) { + return -a; + }), n)); +} +function caculateMatrixStack(target, container, isContainer, prevMatrix, prevN) { + if (isContainer === void 0) { + isContainer = target === container; + } + + var el = target; + var matrixes = []; + var is3d = false; + var n = 3; + var transformOrigin; + var targetMatrix; + + while (el && (isContainer || el !== container)) { + var style = window.getComputedStyle(el); + var matrix = convertCSStoMatrix(getTransformMatrix(style.transform)); + + if (!is3d && matrix.length === 16) { + is3d = true; + n = 4; + var matrixesLength = matrixes.length; + + for (var i = 0; i < matrixesLength; ++i) { + matrixes[i] = convertDimension(matrixes[i], 3, 4); + } + } + + if (is3d && matrix.length === 9) { + matrix = convertDimension(matrix, 3, 4); + } + + var origin = style.transformOrigin.split(" ").map(function (pos) { + return parseFloat(pos); + }); + + if (!targetMatrix) { + targetMatrix = matrix; + } + + if (!transformOrigin) { + transformOrigin = origin; + } + + matrixes.push(getAbsoluteMatrix(matrix, n, origin)); + var offsetLeft = el.offsetLeft; + var hasNotOffset = isUndefined(offsetLeft); + matrixes.push(createOriginMatrix([hasNotOffset ? el : offsetLeft, hasNotOffset ? origin : el.offsetTop], n)); + + if (isContainer) { + break; + } + + el = el.parentElement; + } + + var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n); + var beforeMatrix = createIdentityMatrix(n); + var length = matrixes.length; + matrixes.reverse(); + matrixes.forEach(function (matrix, i) { + var _a; + + if (length - 2 === i) { + beforeMatrix = mat.slice(); + } + + if (isObject(matrix[n - 1])) { + _a = getSVGOffset(matrix[n - 1], container, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1]; // matrix[n - 1] = 0; + // matrix[2 * n - 1] = 0; + } + + mat = multiply(mat, matrix, n); + }); + var transform = (is3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(targetMatrix) + ")"; + return [beforeMatrix, mat, targetMatrix, transform, transformOrigin]; +} +function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) { + var _a; + + var _b = getSize(el), + width = _b[0], + height = _b[1]; + + var containerRect = (container || document.documentElement).getBoundingClientRect(); + var rect = el.getBoundingClientRect(); + var rectLeft = rect.left - containerRect.left; + var rectTop = rect.top - containerRect.top; + var rectWidth = rect.width; + var rectHeight = rect.height; + var mat = multiplies(n, beforeMatrix, absoluteMatrix); + var pos1 = caculate(mat, convertPositionMatrix([0, 0], n), n); + var pos2 = caculate(mat, convertPositionMatrix([width, 0], n), n); + var pos3 = caculate(mat, convertPositionMatrix([0, height], n), n); + var pos4 = caculate(mat, convertPositionMatrix([width, height], n), n); + var posOrigin = caculate(mat, convertPositionMatrix(origin, n), n); + var prevLeft = Math.min(pos1[0], pos2[0], pos3[0], pos4[0]); + var prevTop = Math.min(pos1[1], pos2[1], pos3[1], pos4[1]); + var prevOrigin = minus(posOrigin, [prevLeft, prevTop]); + var prevWidth = Math.max(pos1[0], pos2[0], pos3[0], pos4[0]) - prevLeft; + var prevHeight = Math.max(pos1[1], pos2[1], pos3[1], pos4[1]) - prevTop; + var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight]; + var offset = [0, 0]; + var count = 0; + + while (++count < 10) { + _a = minus(caculate(invert(beforeMatrix, n), convertPositionMatrix(rectOrigin, n), n), caculate(invert(beforeMatrix, n), convertPositionMatrix(posOrigin, n), n)), offset[0] = _a[0], offset[1] = _a[1]; + var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix); + var nextPos1 = caculate(mat2, convertPositionMatrix([0, 0], n), n); + var nextPos2 = caculate(mat2, convertPositionMatrix([width, 0], n), n); + var nextPos3 = caculate(mat2, convertPositionMatrix([0, height], n), n); + var nextPos4 = caculate(mat2, convertPositionMatrix([width, height], n), n); + var nextLeft = Math.min(nextPos1[0], nextPos2[0], nextPos3[0], nextPos4[0]); + var nextTop = Math.min(nextPos1[1], nextPos2[1], nextPos3[1], nextPos4[1]); + var distLeft = nextLeft - rectLeft; + var distTop = nextTop - rectTop; + + if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) { + break; + } + + rectOrigin[0] -= distLeft; + rectOrigin[1] -= distTop; + } + + return offset.map(function (p) { + return Math.round(p); + }); +} +function caculatePosition(matrix, origin, width, height) { + var is3d = matrix.length === 16; + var n = is3d ? 4 : 3; + + var _a = caculate(matrix, convertPositionMatrix([0, 0], n), n), + x1 = _a[0], + y1 = _a[1]; + + var _b = caculate(matrix, convertPositionMatrix([width, 0], n), n), + x2 = _b[0], + y2 = _b[1]; + + var _c = caculate(matrix, convertPositionMatrix([0, height], n), n), + x3 = _c[0], + y3 = _c[1]; + + var _d = caculate(matrix, convertPositionMatrix([width, height], n), n), + x4 = _d[0], + y4 = _d[1]; + + var _e = caculate(matrix, convertPositionMatrix(origin, n), n), + 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 [[minX, minY], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4]]; +} +function rotateMatrix(matrix, rad) { + var cos = Math.cos(rad); + var sin = Math.sin(rad); + return multiply([cos, -sin, 0, sin, cos, 0, 0, 0, 1], matrix, 3); +} +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(pos1, pos2, pos3, pos4) { + var center = [(pos1[0] + pos2[0] + pos3[0] + pos4[0]) / 4, (pos1[1] + pos2[1] + pos3[1] + pos4[1]) / 4]; + var pos1Rad = getRad(center, pos1); + var pos2Rad = getRad(center, 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 = rotateMatrix([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, _e; + + 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 = createIdentityMatrix(3); + var matrix = createIdentityMatrix(3); + var targetMatrix = createIdentityMatrix(3); + var width = 0; + var height = 0; + var transformOrigin = [0, 0]; + var direction = 1; + var rotationPos = [0, 0]; + var rotationRad = 0; + var is3d = false; + var targetTransform = ""; + + if (target) { + var style = window.getComputedStyle(target); + width = target.offsetWidth; + height = target.offsetHeight; + + if (isUndefined(width)) { + _a = getSize(target, style, true), width = _a[0], height = _a[1]; + } + + _b = caculateMatrixStack(target, container), beforeMatrix = _b[0], matrix = _b[1], targetMatrix = _b[2], targetTransform = _b[3], transformOrigin = _b[4]; + is3d = matrix.length === 16; + _c = caculatePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5]; // 1 : clockwise + // -1 : counterclockwise + + _e = getRotationInfo(pos1, pos2, pos3, pos4), direction = _e[0], rotationRad = _e[1], rotationPos = _e[2]; + } + + return { + direction: direction, + rotationRad: rotationRad, + rotationPos: rotationPos, + target: target, + left: left, + top: top, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + width: width, + height: height, + beforeMatrix: beforeMatrix, + matrix: matrix, + targetTransform: targetTransform, + targetMatrix: targetMatrix, + is3d: is3d, + 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 throttle(num, unit) { + if (!unit) { + return num; + } + + return Math.round(num / unit) * unit; +} +function throttleArray(nums, unit) { + nums.forEach(function (_, i) { + nums[i] = throttle(nums[i], unit); + }); +} +function warp(pos0, pos1, pos2, pos3, nextPos0, nextPos1, nextPos2, nextPos3) { + var x0 = pos0[0], + y0 = pos0[1]; + var x1 = pos1[0], + y1 = pos1[1]; + var x2 = pos2[0], + y2 = pos2[1]; + var x3 = pos3[0], + y3 = pos3[1]; + var u0 = nextPos0[0], + v0 = nextPos0[1]; + var u1 = nextPos1[0], + v1 = nextPos1[1]; + var u2 = nextPos2[0], + v2 = nextPos2[1]; + var u3 = nextPos3[0], + v3 = nextPos3[1]; + var matrix = [x0, y0, 1, 0, 0, 0, -u0 * x0, -u0 * y0, 0, 0, 0, x0, y0, 1, -v0 * x0, -v0 * y0, x1, y1, 1, 0, 0, 0, -u1 * x1, -u1 * y1, 0, 0, 0, x1, y1, 1, -v1 * x1, -v1 * y1, x2, y2, 1, 0, 0, 0, -u2 * x2, -u2 * y2, 0, 0, 0, x2, y2, 1, -v2 * x2, -v2 * y2, x3, y3, 1, 0, 0, 0, -u3 * x3, -u3 * y3, 0, 0, 0, x3, y3, 1, -v3 * x3, -v3 * y3]; + var inverseMatrix = invert(matrix, 8); + + if (!inverseMatrix.length) { + return []; + } + + var h = multiply(inverseMatrix, [u0, v0, u1, v1, u2, v2, u3, v3], 8); + h[8] = 1; + return convertDimension(h, 3, 4); +} + +function dragStart(moveable, _a) { + var datas = _a.datas; + var _b = moveable.state, + matrix = _b.matrix, + beforeMatrix = _b.beforeMatrix, + is3d = _b.is3d, + left = _b.left, + top = _b.top, + origin = _b.origin; + var n = is3d ? 4 : 3; + datas.is3d = is3d; + datas.matrix = matrix; + datas.inverseMatrix = invert(matrix, n); + datas.beforeMatrix = beforeMatrix; + datas.inverseBeforeMatrix = invert(beforeMatrix, n); + datas.absoluteOrigin = convertPositionMatrix(sum([left, top], origin), n); + datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, is3d ? 4 : 3); + datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, is3d ? 4 : 3); +} +function getDragDist(_a, isBefore) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY; + var inverseBeforeMatrix = datas.inverseBeforeMatrix, + inverseMatrix = datas.inverseMatrix, + is3d = datas.is3d, + startDragBeforeDist = datas.startDragBeforeDist, + startDragDist = datas.startDragDist, + absoluteOrigin = datas.absoluteOrigin; + var n = is3d ? 4 : 3; + return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, sum(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist); +} + +function getDraggableDragger(moveable, target) { + return drag(target, { + container: window, + dragstart: function (_a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var style = window.getComputedStyle(target); + var targetTransform = moveable.state.targetTransform; + datas.left = parseFloat(style.left || "") || 0; + datas.top = parseFloat(style.top || "") || 0; + datas.bottom = parseFloat(style.bottom || "") || 0; + datas.right = parseFloat(style.right || "") || 0; + datas.transform = targetTransform; + dragStart(moveable, { + datas: datas + }); + datas.prevDist = [0, 0]; + datas.prevBeforeDist = [0, 0]; + return moveable.props.onDragStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + }, + drag: function (_a) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY, + clientX = _a.clientX, + clientY = _a.clientY; + var throttleDrag = moveable.props.throttleDrag; + var prevDist = datas.prevDist, + prevBeforeDist = datas.prevBeforeDist, + transform = datas.transform; + var beforeDist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, false); + throttleArray(dist, throttleDrag); + throttleArray(beforeDist, throttleDrag); + var delta = minus(dist, prevDist); + var beforeDelta = minus(beforeDist, prevBeforeDist); + datas.prevDist = dist; + datas.prevBeforeDist = beforeDist; + var left = datas.left + beforeDist[0]; + var top = datas.top + beforeDist[1]; + var right = datas.right - beforeDist[0]; + var bottom = datas.bottom - beforeDist[1]; + var nextTransform = transform + " translate(" + dist[0] + "px, " + dist[1] + "px)"; + + if (delta.every(function (num) { + return !num; + }) && beforeDelta.some(function (num) { + return !num; + })) { + return; + } + + moveable.props.onDrag({ + target: target, + transform: nextTransform, + dist: dist, + delta: delta, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + left: left, + top: top, + right: right, + bottom: bottom, + clientX: clientX, + clientY: clientY + }); + moveable.updateTarget(); + }, + dragend: function (_a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onDragEnd({ + target: target, + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + + if (isDrag) { + moveable.updateRect(); + } + } + }); +} + +function scaleStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!position || !target) { + return false; + } + + var _b = moveable.state, + width = _b.width, + height = _b.height, + targetTransform = _b.targetTransform; + dragStart(moveable, { + datas: datas + }); + datas.transform = targetTransform; + datas.prevDist = [1, 1]; + datas.position = position; + datas.width = width; + datas.height = height; + moveable.props.onScaleStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function scale(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var prevDist = datas.prevDist, + position = datas.position, + width = datas.width, + height = datas.height, + transform = datas.transform; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = position[0] * dist[0]; + var distHeight = position[1] * dist[1]; // diagonal + + if (moveable.props.keepRatio && position[0] && position[1] && width && height) { + 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; + var throttleScale = moveable.props.throttleScale; + scaleX = throttle(scaleX, throttleScale); + scaleY = throttle(scaleY, throttleScale); + + if (scaleX === 0) { + scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE; + } + + if (scaleY === 0) { + scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE; + } + + datas.prevDist = [scaleX, scaleY]; + + if (scaleX === prevDist[0] && scaleY === prevDist[1]) { + return; + } + + 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 + ")", + clientX: clientX, + clientY: clientY + }); + moveable.updateTarget(); +} +function scaleEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onScaleEnd({ + target: moveable.props.target, + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + + if (isDrag) { + moveable.updateRect(); + } +} + +function getRotateInfo(datas, clientX, clientY, throttleRotate) { + var startAbsoluteOrigin = datas.startAbsoluteOrigin, + startDeg = datas.startDeg, + prevDeg = datas.prevDeg, + prevLoop = datas.loop, + direction = datas.direction; + var deg = throttle(getRad(startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, throttleRotate); + + if (prevDeg > deg && prevDeg > 270 && deg < 90) { + // 360 => 0 + ++datas.loop; + } else if (prevDeg < deg && prevDeg < 90 && deg > 270) { + // 0 => 360 + --datas.loop; + } + + var absolutePrevDeg = prevLoop * 360 + prevDeg; + var absoluteDeg = datas.loop * 360 + deg; + datas.prevDeg = deg; + return { + delta: direction * (absoluteDeg - absolutePrevDeg), + dist: direction * (absoluteDeg - startDeg), + beforeDelta: absoluteDeg - absolutePrevDeg, + beforeDist: absoluteDeg - startDeg, + 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, + left = _b.left, + top = _b.top, + origin = _b.origin, + rotationPos = _b.rotationPos, + direction = _b.direction, + targetTransform = _b.targetTransform; + datas.transform = targetTransform; + datas.left = left; + datas.top = top; + datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]]; + datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180; + datas.startDeg = datas.prevDeg; + datas.loop = 0; + datas.direction = direction; + + if (datas.transform === "none") { + datas.transform = ""; + } + + moveable.props.onRotateStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function rotate(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + + var _b = getRotateInfo(datas, clientX, clientY, moveable.props.throttleRotate), + delta = _b.delta, + dist = _b.dist, + beforeDist = _b.beforeDist, + beforeDelta = _b.beforeDelta; + + if (!delta) { + return; + } + + moveable.props.onRotate({ + target: moveable.props.target, + delta: delta, + dist: dist, + clientX: clientX, + clientY: clientY, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + transform: datas.transform + " rotate(" + dist + "deg)" + }); + moveable.updateTarget(); +} +function rotateEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onRotateEnd({ + clientX: clientX, + clientY: clientY, + target: moveable.props.target, + isDrag: isDrag + }); + + if (isDrag) { + moveable.updateRect(); + } +} + +function resizeStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!target || !position) { + return false; + } + + var _b = getSize(target), + width = _b[0], + height = _b[1]; + + dragStart(moveable, { + datas: datas + }); + datas.position = position; + datas.width = width; + datas.height = height; + datas.prevWidth = 0; + datas.prevHeight = 0; + moveable.props.onResizeStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function resize(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var position = datas.position, + width = datas.width, + height = datas.height, + prevWidth = datas.prevWidth, + prevHeight = datas.prevHeight; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = position[0] * dist[0]; + var distHeight = position[1] * dist[1]; // diagonal + + if (moveable.props.keepRatio && position[0] && position[1] && width && height) { + 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 throttleResize = moveable.props.throttleResize; + distWidth = throttle(distWidth, throttleResize); + distHeight = throttle(distHeight, throttleResize); + var nextWidth = width + distWidth; + var nextHeight = height + distHeight; + var delta = [distWidth - prevWidth, distHeight - prevHeight]; + datas.prevWidth = distWidth; + datas.prevHeight = distHeight; + + if (delta.every(function (num) { + return !num; + })) { + return; + } + + moveable.props.onResize({ + target: moveable.props.target, + width: nextWidth, + height: nextHeight, + dist: [distWidth, distHeight], + delta: delta, + clientX: clientX, + clientY: clientY + }); + moveable.updateRect(); +} +function resizeEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onScaleEnd({ + target: moveable.props.target, + clientX: clientX, + clientY: clientY, + isDrag: isDrag + }); + + if (isDrag) { + moveable.updateRect(); + } +} + +function getTriangleRad(pos1, pos2, pos3) { + // pos1 Rad + var rad1 = getRad(pos1, pos2); + var rad2 = getRad(pos1, pos3); + var rad = rad2 - rad1; + return rad >= 0 ? rad : rad + 2 * Math.PI; +} + +function isValidPos(poses1, poses2) { + var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]); + var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]); + var pi = Math.PI; + + if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) { + return false; + } + + return true; +} + +function warpStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!position || !target) { + return false; + } + + var _b = moveable.state, + transformOrigin = _b.transformOrigin, + is3d = _b.is3d, + targetTransform = _b.targetTransform, + targetMatrix = _b.targetMatrix, + width = _b.width, + height = _b.height; + datas.targetTransform = targetTransform; + datas.targetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4); + datas.targetInverseMatrix = ignoreDimension(invert(datas.targetMatrix, 4), 3, 4); + datas.position = position; + dragStart(moveable, { + datas: datas + }); + datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) { + return minus(p, transformOrigin); + }); + datas.nextPoses = datas.poses.map(function (_a) { + var x = _a[0], + y = _a[1]; + return caculate(datas.targetMatrix, [x, y, 0, 1], 4); + }); + datas.posNum = (position[0] === -1 ? 0 : 1) + (position[1] === -1 ? 0 : 2); + datas.prevMatrix = createIdentityMatrix(4); + moveable.props.onWarpStart({ + target: target, + clientX: clientX, + clientY: clientY + }); +} +function warp$1(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var posNum = datas.posNum, + poses = datas.poses, + targetInverseMatrix = datas.targetInverseMatrix, + prevMatrix = datas.prevMatrix; + var target = moveable.props.target; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var nextPoses = datas.nextPoses.slice(); + nextPoses[posNum] = [nextPoses[posNum][0] + dist[0], nextPoses[posNum][1] + dist[1]]; + + if (!NEARBY_POS.every(function (nearByPoses) { + return isValidPos(nearByPoses.map(function (i) { + return poses[i]; + }), nearByPoses.map(function (i) { + return nextPoses[i]; + })); + })) { + return; + } + + var h = warp(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]); + + if (!h.length) { + return; + } + + var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4)); + var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")"; + var delta = multiply(invert(prevMatrix, 4), matrix, 4); + datas.prevMatrix = matrix; + moveable.props.onWarp({ + target: target, + clientX: clientX, + clientY: clientY, + delta: delta, + multiply: multiplyCSS, + dist: matrix, + transform: transform + }); + moveable.updateRect(); +} +function warpEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onWarpEnd({ + target: moveable.props.target, + clientX: clientX, + clientY: clientY, + 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, + clientX: clientX, + clientY: clientY + }); + } else if (moveable.props.resizable) { + var position = getPosition(inputTarget); + type = "resize"; + return resizeStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else if (moveable.props.warpable) { + var position = getPosition(inputTarget); + type = "warp"; + return warpStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else { + return false; + } + }, + drag: function (e) { + if (!type) { + return; + } else if (type === "rotate") { + return rotate(moveable, e); + } else if (type === "scale") { + return scale(moveable, e); + } else if (type === "resize") { + return resize(moveable, e); + } else if (type === "warp") { + return warp$1(moveable, e); + } + }, + dragend: function (_a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + + if (!type) { + return; + } else if (type === "rotate") { + return rotateEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "scale") { + return scaleEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "resize") { + return resizeEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "warp") { + return warpEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } + } + }); +} + +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: createIdentityMatrix(3), + matrix: createIdentityMatrix(3), + targetTransform: "", + targetMatrix: createIdentityMatrix(3), + is3d: false, + left: 0, + top: 0, + width: 0, + height: 0, + 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.getAttribute("class") || "").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, + 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) translateZ(50px)" + } + }, 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(), this.renderPosition(), this.renderMiddleLine(), this.renderDiagonalPosition(), this.renderOrigin()); + }; + + __proto.renderRotation = function () { + if (!this.props.rotatable) { + return null; + } + + var _a = this.state, + pos1 = _a.pos1, + pos2 = _a.pos2, + rotationRad = _a.rotationRad; + 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.renderDiagonalPosition = function () { + var _a = this.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (!resizable && !scalable && !warpable) { + return null; + } + + var _b = this.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + return [createElement("div", { + className: prefix("control", "nw"), + "data-position": "nw", + key: "nw", + style: getControlTransform(pos1) + }), createElement("div", { + className: prefix("control", "ne"), + "data-position": "ne", + key: "ne", + style: getControlTransform(pos2) + }), createElement("div", { + className: prefix("control", "sw"), + "data-position": "sw", + key: "sw", + style: getControlTransform(pos3) + }), createElement("div", { + className: prefix("control", "se"), + "data-position": "se", + key: "se", + style: getControlTransform(pos4) + })]; + }; + + __proto.renderMiddleLine = function () { + var _a = this.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (resizable || scalable || !warpable) { + return; + } + + var _b = this.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + var linePosFrom1 = pos1.map(function (pos, i) { + return dot(pos, pos2[i], 1, 2); + }); + var linePosFrom2 = pos1.map(function (pos, i) { + return dot(pos, pos2[i], 2, 1); + }); + var linePosFrom3 = pos1.map(function (pos, i) { + return dot(pos, pos3[i], 1, 2); + }); + var linePosFrom4 = pos1.map(function (pos, i) { + return dot(pos, pos3[i], 2, 1); + }); + var linePosTo1 = pos3.map(function (pos, i) { + return dot(pos, pos4[i], 1, 2); + }); + var linePosTo2 = pos3.map(function (pos, i) { + return dot(pos, pos4[i], 2, 1); + }); + var linePosTo3 = pos2.map(function (pos, i) { + return dot(pos, pos4[i], 1, 2); + }); + var linePosTo4 = pos2.map(function (pos, i) { + return dot(pos, pos4[i], 2, 1); + }); + return [createElement("div", { + className: prefix("line"), + key: "middeLine1", + style: getLineStyle(linePosFrom1, linePosTo1) + }), createElement("div", { + className: prefix("line"), + key: "middeLine2", + style: getLineStyle(linePosFrom2, linePosTo2) + }), createElement("div", { + className: prefix("line"), + style: getLineStyle(linePosFrom3, linePosTo3) + }), createElement("div", { + className: prefix("line"), + style: getLineStyle(linePosFrom4, linePosTo4) + })]; + }; + + __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", "n"), + "data-position": "n", + key: "n", + style: getControlTransform(pos1, 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", "s"), + "data-position": "s", + key: "s", + style: getControlTransform(pos3, pos4) + })]; + }; + + __proto.componentDidMount = function () { + /* rotatable */ + + /* resizable */ + + /* scalable */ + + /* warpable */ + 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.updateTarget = function () { + var _a = this.state, + width = _a.width, + height = _a.height, + beforeMatrix = _a.beforeMatrix; + var target = this.props.target; + var container = this.props.container; + var is3d = beforeMatrix.length === 16; + var n = is3d ? 4 : 3; + + var _b = caculateMatrixStack(target, container, true, beforeMatrix, n), + matrix = _b[1], + targetMatrix = _b[2], + targetTransform = _b[3], + transformOrigin = _b[4]; + + var _c = caculatePosition(matrix, transformOrigin, width, height), + _d = _c[0], + left = _d[0], + top = _d[1], + nextOrigin = _c[1], + pos1 = _c[2], + pos2 = _c[3], + pos3 = _c[4], + pos4 = _c[5]; + + var _e = getRotationInfo(pos1, pos2, pos3, pos4), + direction = _e[0], + rotationRad = _e[1], + rotationPos = _e[2]; + + this.setState({ + direction: direction, + rotationRad: rotationRad, + rotationPos: rotationPos, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + origin: nextOrigin, + beforeMatrix: beforeMatrix, + targetMatrix: targetMatrix, + matrix: matrix, + transformOrigin: transformOrigin, + targetTransform: targetTransform, + left: left, + top: top + }); + }; + + __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 = { + target: null, + container: null, + rotatable: false, + draggable: false, + scalable: false, + resizable: false, + warpable: false, + keepRatio: true, + origin: true, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 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 () {}, + onWarpStart: function () {}, + onWarp: function () {}, + onWarpEnd: 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); + }; + + _this.onWarpStart = function (e) { + _this.trigger("warpStart", e); + }; + + _this.onWarp = function (e) { + _this.trigger("warp", e); + }; + + _this.onWarpEnd = function (e) { + _this.trigger("warpEnd", 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, + onWarpStart: _this.onWarpStart, + onWarp: _this.onWarp, + onWarpEnd: _this.onWarpEnd + })), element); + parentElement.appendChild(element.children[0]); + return _this; + } + + var __proto = Moveable.prototype; + Object.defineProperty(__proto, "origin", { + /** + * Whether or not the origin controlbox will be visible or not + * @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", { + /** + * The target to indicate Moveable Control Box. + * @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 + }); + Object.defineProperty(__proto, "warpable", { + /** + * Whether or not target can be warped. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.warpable = true; + */ + get: function () { + return this.getMoveableProps().warpable; + }, + set: function (warpable) { + this.innerMoveable.setState({ + warpable: warpable + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "keepRatio", { + /** + * When resize or scale, keeps a ratio of the width, height. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.keepRatio = true; + */ + get: function () { + return this.getMoveable().keepRatio; + }, + set: function (keepRatio) { + this.innerMoveable.setState({ + keepRatio: keepRatio + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleDrag", { + /** + * throttle of x, y when drag. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleDrag = 1; + */ + get: function () { + return this.getMoveable().throttleDrag; + }, + set: function (throttleDrag) { + this.innerMoveable.setState({ + throttleDrag: throttleDrag + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleResize", { + /** + * throttle of width, height when resize. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleResize = 1; + */ + get: function () { + return this.getMoveable().throttleResize; + }, + set: function (throttleResize) { + this.innerMoveable.setState({ + throttleResize: throttleResize + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleScale", { + /** + * throttle of scaleX, scaleY when scale. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleScale = 0.1; + */ + get: function () { + return this.getMoveable().throttleScale; + }, + set: function (throttleScale) { + this.innerMoveable.setState({ + throttleScale: throttleScale + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleRotate", { + /** + * hrottle of angle(degree) when rotate. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleRotate = 1; + */ + get: function () { + return this.getMoveable().throttleRotate; + }, + set: function (throttleRotate) { + this.innerMoveable.setState({ + throttleRotate: throttleRotate + }); + }, + 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 all elements change, update the shape of the moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("resize", e => { + * moveable.updateRect(); + * }); + */ + + + __proto.updateRect = function () { + this.getMoveable().updateRect(); + }; + /** + * If the width, height, left, and top of the only target change, update the shape of the moveable. + * @param - the values of x and y to move moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.updateTarget(); + */ + + + __proto.updateTarget = function () { + this.getMoveable().updateTarget(); + }; + + __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..bffa3c337 --- /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 {\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 ;\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, OnWarpStart, OnWarpEnd, OnWarp,\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 ,\n element,\n );\n parentElement.appendChild(element.children[0]);\n }\n /**\n * Whether or not the origin controlbox will be visible or not\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 * The target to indicate Moveable Control Box.\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 * Whether or not target can be warped.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n get warpable(): boolean {\n return this.getMoveableProps().warpable;\n }\n set warpable(warpable: boolean) {\n this.innerMoveable.setState({\n warpable,\n });\n }\n /**\n * When resize or scale, keeps a ratio of the width, height.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n get keepRatio(): boolean {\n return this.getMoveable().keepRatio;\n }\n set keepRatio(keepRatio: boolean) {\n this.innerMoveable.setState({\n keepRatio,\n });\n }\n /**\n * throttle of x, y when drag.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n get throttleDrag(): number {\n return this.getMoveable().throttleDrag;\n }\n set throttleDrag(throttleDrag: number) {\n this.innerMoveable.setState({\n throttleDrag,\n });\n }\n /**\n * throttle of width, height when resize.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n get throttleResize(): number {\n return this.getMoveable().throttleResize;\n }\n set throttleResize(throttleResize: number) {\n this.innerMoveable.setState({\n throttleResize,\n });\n }\n /**\n * throttle of scaleX, scaleY when scale.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n get throttleScale(): number {\n return this.getMoveable().throttleScale;\n }\n set throttleScale(throttleScale: number) {\n this.innerMoveable.setState({\n throttleScale,\n });\n }\n /**\n * hrottle of angle(degree) when rotate.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n get throttleRotate(): number {\n return this.getMoveable().throttleRotate;\n }\n set throttleRotate(throttleRotate: number) {\n this.innerMoveable.setState({\n throttleRotate,\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 all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n 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 private onWarpStart = (e: OnWarpStart) => {\n this.trigger(\"warpStart\", e);\n }\n private onWarp = (e: OnWarp) => {\n this.trigger(\"warp\", e);\n }\n private onWarpEnd = (e: OnWarpEnd) => {\n this.trigger(\"warpEnd\", 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\ndeclare interface Moveable {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\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","onWarpStart","onWarp","onWarpEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","warpable","getMoveable","keepRatio","throttleDrag","throttleResize","throttleScale","throttleRotate","pos","move","isMoveableElement","updateTarget","preactMoveable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"} \ No newline at end of file diff --git a/dist/moveable.js b/dist/moveable.js new file mode 100644 index 000000000..e677e87e1 --- /dev/null +++ b/dist/moveable.js @@ -0,0 +1,4353 @@ +/* +Copyright (c) 2019 Daybrush +name: moveable +license: MIT +author: Daybrush +repository: git+https://github.com/daybrush/moveable.git +version: 0.4.1 +*/ +(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 발생할 커스텀 이벤트의 이름 + * @param {Object} customEvent Event data to be sent when triggering a custom event 커스텀 이벤트가 발생할 때 전달할 데이터 + * @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. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고 + * @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 등록할 이벤트의 이름 + * @param {Function} handlerToAttach The handler function of the event to be attached 등록할 이벤트의 핸들러 함수 + * @return {eg.Component} An instance of a component itself컴포넌트 자신의 인스턴스 + * @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 등록 여부를 확인할 이벤트의 이름 + * @return {Boolean} Indicates whether the event is attached. 이벤트 등록 여부 + * @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 등록할 이벤트의 이름 + * @param {Function} handlerToAttach The handler function of the event to be attached 등록할 이벤트의 핸들러 함수 + * @return {eg.Component} An instance of a component itself컴포넌트 자신의 인스턴스 + * @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 해제할 이벤트의 이름 + * @param {Function} handlerToDetach The handler function of the event to be detached 해제할 이벤트의 핸들러 함수 + * @return {eg.Component} An instance of a component itself 컴포넌트 자신의 인스턴스 + * @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 "object" + * @memberof Consts + * @example + import {OBJECT} from "@daybrush/utils"; + + console.log(OBJECT); // "object" + */ + + var OBJECT = "object"; + /** + * get string "undefined" + * @memberof Consts + * @example + import {UNDEFINED} from "@daybrush/utils"; + + console.log(UNDEFINED); // "undefined" + */ + + var UNDEFINED = "undefined"; + + /** + * @namespace + * @name Utils + */ + + /** + * Returns the inner product of two numbers(`a1`, `a2`) by two criteria(`b1`, `b2`). + * @memberof Utils + * @param - The first number + * @param - The second number + * @param - The first number to base on the inner product + * @param - The second number to base on the inner product + * @return - Returns the inner product + import { dot } from "@daybrush/utils"; + + console.log(dot(0, 15, 2, 3)); // 6 + console.log(dot(5, 15, 2, 3)); // 9 + console.log(dot(5, 15, 1, 1)); // 10 + */ + + function dot(a1, a2, b1, b2) { + return (a1 * b2 + a2 * b1) / (b1 + b2); + } + /** + * Check the type that the value is undefined. + * @memberof Utils + * @param {string} value - Value to check the type + * @return {boolean} true if the type is correct, false otherwise + * @example + import {isUndefined} from "@daybrush/utils"; + + console.log(isUndefined(undefined)); // true + console.log(isUndefined("")); // false + console.log(isUndefined(1)); // false + console.log(isUndefined(null)); // false + */ + + function isUndefined$1(value) { + return typeof value === UNDEFINED; + } + /** + * Check the type that the value is object. + * @memberof Utils + * @param {string} value - Value to check the type + * @return {} true if the type is correct, false otherwise + * @example + import {isObject} from "@daybrush/utils"; + + console.log(isObject({})); // true + console.log(isObject(undefined)); // false + console.log(isObject("")); // false + console.log(isObject(null)); // false + */ + + function isObject(value) { + return value && typeof value === OBJECT; + } + /** + * 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.6.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. + ***************************************************************************** */ + var __assign$2 = function () { + __assign$2 = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + + return t; + }; + + return __assign$2.apply(this, arguments); + }; + + function getPosition(e) { + return e.touches && e.touches.length ? e.touches[0] : e; + } + + var Dragger = + /*#__PURE__*/ + function () { + function Dragger(el, options) { + var _this = this; + + if (options === void 0) { + options = {}; + } + + this.el = el; + this.flag = false; + this.startX = 0; + this.startY = 0; + this.prevX = 0; + this.prevY = 0; + this.datas = {}; + this.options = {}; + this.isDrag = false; + this.isMouse = false; + this.isTouch = false; + + this.onDragStart = function (e) { + _this.flag = true; + _this.isDrag = false; + + var _a = getPosition(e), + clientX = _a.clientX, + clientY = _a.clientY; + + _this.startX = clientX; + _this.startY = clientY; + _this.prevX = clientX; + _this.prevY = clientY; + _this.datas = {}; + var _b = _this.options, + dragstart = _b.dragstart, + preventRightClick = _b.preventRightClick; + + if (preventRightClick && e.which === 3 || (dragstart && dragstart({ + datas: _this.datas, + inputEvent: e, + clientX: clientX, + clientY: clientY + })) === false) { + _this.flag = false; + } + + _this.flag && e.preventDefault(); + }; + + this.onDrag = function (e) { + if (!_this.flag) { + return; + } + + var _a = getPosition(e), + clientX = _a.clientX, + clientY = _a.clientY; + + var deltaX = clientX - _this.prevX; + var deltaY = clientY - _this.prevY; + + if (!deltaX && !deltaY) { + return; + } + + _this.isDrag = true; + var drag = _this.options.drag; + drag && drag({ + datas: _this.datas, + clientX: clientX, + clientY: clientY, + deltaX: deltaX, + deltaY: deltaY, + distX: clientX - _this.startX, + distY: clientY - _this.startY, + inputEvent: e + }); + _this.prevX = clientX; + _this.prevY = clientY; + }; + + this.onDragEnd = function (e) { + if (!_this.flag) { + return; + } + + _this.flag = false; + var dragend = _this.options.dragend; + dragend && dragend({ + datas: _this.datas, + isDrag: _this.isDrag, + inputEvent: e, + clientX: _this.prevX, + clientY: _this.prevY, + distX: _this.prevX - _this.startX, + distY: _this.prevY - _this.startY + }); + }; + + this.options = __assign$2({ + container: el, + preventRightClick: true, + events: ["touch", "mouse"] + }, options); + var _a = this.options, + container = _a.container, + events = _a.events; + this.isTouch = events.indexOf("touch") > -1; + this.isMouse = events.indexOf("mouse") > -1; + + if (this.isMouse) { + el.addEventListener("mousedown", this.onDragStart); + container.addEventListener("mousemove", this.onDrag); + container.addEventListener("mouseup", this.onDragEnd); + } + + if (this.isTouch) { + el.addEventListener("touchstart", this.onDragStart); + container.addEventListener("touchmove", this.onDrag); + container.addEventListener("touchend", this.onDragEnd); + } + } + + var __proto = Dragger.prototype; + + __proto.isDragging = function () { + return this.isDrag; + }; + + __proto.unset = function () { + var el = this.el; + var container = this.options.container; + + if (this.isMouse) { + el.removeEventListener("mousedown", this.onDragStart); + container.removeEventListener("mousemove", this.onDrag); + container.removeEventListener("mouseup", this.onDragEnd); + } + + if (this.isTouch) { + el.removeEventListener("touchstart", this.onDragStart); + container.removeEventListener("touchmove", this.onDrag); + container.removeEventListener("touchend", this.onDragEnd); + } + }; + + return Dragger; + }(); + + function setDrag(el, options) { + return new Dragger(el, options); + } + + /* + Copyright (c) 2019 Daybrush + name: preact-moveable + license: MIT + author: Daybrush + repository: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable + version: 0.6.3 + */ + + /* + Copyright (c) 2019 Daybrush + name: react-moveable + license: MIT + author: Daybrush + repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable + version: 0.7.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$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 pointer-events: none;\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"); + var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]]; + var MIN_SCALE = 0.000000001; + + function add(matrix, inverseMatrix, startIndex, endIndex, fromStart, k) { + for (var i = startIndex; i < endIndex; ++i) { + matrix[i] += matrix[fromStart + i - startIndex] * k; + inverseMatrix[i] += inverseMatrix[fromStart + i - startIndex] * k; + } + } + + function swap(matrix, inverseMatrix, startIndex, endIndex, fromStart) { + for (var i = startIndex; i < endIndex; ++i) { + var v = matrix[i]; + var iv = inverseMatrix[i]; + matrix[i] = matrix[fromStart + i - startIndex]; + matrix[fromStart + i - startIndex] = v; + inverseMatrix[i] = inverseMatrix[fromStart + i - startIndex]; + inverseMatrix[fromStart + i - startIndex] = iv; + } + } + + function divide(matrix, inverseMatrix, startIndex, endIndex, k) { + for (var i = startIndex; i < endIndex; ++i) { + matrix[i] /= k; + inverseMatrix[i] /= k; + } + } + + function createIdentityMatrix(n) { + var length = n * n; + var matrix = []; + + for (var i = 0; i < length; ++i) { + matrix[i] = i % (n + 1) ? 0 : 1; + } + + return matrix; + } + function createOriginMatrix(origin, n) { + var m = createIdentityMatrix(n); + var length = Math.min(origin.length, n - 1); + + for (var i = 0; i < length; ++i) { + m[n * (i + 1) - 1] = origin[i]; + } + + return m; + } + function ignoreDimension(matrix, m, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = matrix.slice(); + + for (var i = 0; i < n; ++i) { + newMatrix[i * n + m - 1] = 0; + newMatrix[(m - 1) * n + i] = 0; + } + + newMatrix[(m - 1) * (n + 1)] = 1; + return newMatrix; + } + function invert(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = matrix.slice(); + var inverseMatrix = createIdentityMatrix(n); + + for (var i = 0; i < n; ++i) { + var startIndex = n * i; + var endIndex = n * (i + 1); + var identityIndex = startIndex + i; + + if (newMatrix[identityIndex] === 0) { + for (var j = i + 1; j < n; ++j) { + if (newMatrix[n * j + i]) { + swap(newMatrix, inverseMatrix, startIndex, endIndex, n * j); + break; + } + } + } + + if (newMatrix[identityIndex]) { + divide(newMatrix, inverseMatrix, startIndex, endIndex, newMatrix[identityIndex]); + } else { + // no inverse matrix + return []; + } + + for (var j = 0; j < n; ++j) { + var targetStartIndex = n * j; + var targetEndIndex = targetStartIndex + n; + var targetIndex = targetStartIndex + i; + var target = newMatrix[targetIndex]; + + if (target === 0 || i === j) { + continue; + } + + add(newMatrix, inverseMatrix, targetStartIndex, targetEndIndex, startIndex, -target); + } + } + + return inverseMatrix; + } + function transpose(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < n; ++j) { + newMatrix[j * n + i] = matrix[n * i + j]; + } + } + + return newMatrix; + } + function convertPositionMatrix(matrix, n) { + var newMatrix = matrix.slice(); + + for (var i = matrix.length; i < n - 1; ++i) { + newMatrix[i] = 0; + } + + newMatrix[n - 1] = 1; + return newMatrix; + } + function convertDimension(matrix, n, m) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } // n < m + + + if (n === m) { + return matrix; + } + + var newMatrix = createIdentityMatrix(m); + var length = Math.min(n, m); + + for (var i = 0; i < length - 1; ++i) { + for (var j = 0; j < length - 1; ++j) { + newMatrix[i * m + j] = matrix[i * n + j]; + } + + newMatrix[(i + 1) * m - 1] = matrix[(i + 1) * n - 1]; + newMatrix[(m - 1) * m + i] = matrix[(n - 1) * n + i]; + } + + newMatrix[m * m - 1] = matrix[n * n - 1]; + return newMatrix; + } + function multiplies(n) { + var matrixes = []; + + for (var _i = 1; _i < arguments.length; _i++) { + matrixes[_i - 1] = arguments[_i]; + } + + var m = createIdentityMatrix(n); + matrixes.forEach(function (matrix) { + m = multiply(m, matrix, n); + }); + return m; + } + function multiply(matrix, matrix2, n) { + var newMatrix = []; // n * m X m * k + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i * k + j] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j]; + } + } + } // n * k + + + return newMatrix; + } + function multiplyCSS(matrix, matrix2, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; // n(y) * m(x) X m(y) * k(x) + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i + j * k] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k]; + } + } + } // n * k + + + return newMatrix; + } + function sum(pos1, pos2) { + var length = Math.min(pos1.length, pos2.length); + var nextPos = pos1.slice(); + + for (var i = 0; i < length; ++i) { + nextPos[i] = nextPos[i] + pos2[i]; + } + + return nextPos; + } + function minus(pos1, pos2) { + var length = Math.min(pos1.length, pos2.length); + var nextPos = pos1.slice(); + + for (var i = 0; i < length; ++i) { + nextPos[i] = nextPos[i] - pos2[i]; + } + + return nextPos; + } + function caculate(matrix, matrix2, n) { + if (n === void 0) { + n = matrix2.length; + } + + var result = multiply(matrix, matrix2, n); + var k = result[n - 1]; + return result.map(function (v) { + return v / k; + }); + } + function convertCSStoMatrix(a) { + if (a.length === 6) { + return [a[0], a[2], a[4], a[1], a[3], a[5], 0, 0, 1]; + } + + return transpose(a); + } + function convertMatrixtoCSS(a) { + if (a.length === 9) { + return [a[0], a[3], a[1], a[4], a[2], a[5]]; + } + + return transpose(a); + } + + function prefix() { + var classNames = []; + + for (var _i = 0; _i < arguments.length; _i++) { + classNames[_i] = arguments[_i]; + } + + return prefixNames.apply(void 0, [PREFIX].concat(classNames)); + } + function getTransformMatrix(transform) { + if (transform === "none") { + return [1, 0, 0, 1, 0, 0]; + } + + if (isObject(transform)) { + return transform; + } + + var value = splitBracket(transform).value; + return value.split(/s*,\s*/g).map(function (v) { + return parseFloat(v); + }); + } + function getAbsoluteMatrix(matrix, n, origin) { + return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) { + return -a; + }), n)); + } + function caculateMatrixStack(target, container, isContainer, prevMatrix, prevN) { + if (isContainer === void 0) { + isContainer = target === container; + } + + var el = target; + var matrixes = []; + var is3d = false; + var n = 3; + var transformOrigin; + var targetMatrix; + + while (el && (isContainer || el !== container)) { + var style = window.getComputedStyle(el); + var matrix = convertCSStoMatrix(getTransformMatrix(style.transform)); + + if (!is3d && matrix.length === 16) { + is3d = true; + n = 4; + var matrixesLength = matrixes.length; + + for (var i = 0; i < matrixesLength; ++i) { + matrixes[i] = convertDimension(matrixes[i], 3, 4); + } + } + + if (is3d && matrix.length === 9) { + matrix = convertDimension(matrix, 3, 4); + } + + var origin = style.transformOrigin.split(" ").map(function (pos) { + return parseFloat(pos); + }); + + if (!targetMatrix) { + targetMatrix = matrix; + } + + if (!transformOrigin) { + transformOrigin = origin; + } + + matrixes.push(getAbsoluteMatrix(matrix, n, origin)); + var offsetLeft = el.offsetLeft; + var hasNotOffset = isUndefined$1(offsetLeft); + matrixes.push(createOriginMatrix([hasNotOffset ? el : offsetLeft, hasNotOffset ? origin : el.offsetTop], n)); + + if (isContainer) { + break; + } + + el = el.parentElement; + } + + var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n); + var beforeMatrix = createIdentityMatrix(n); + var length = matrixes.length; + matrixes.reverse(); + matrixes.forEach(function (matrix, i) { + var _a; + + if (length - 2 === i) { + beforeMatrix = mat.slice(); + } + + if (isObject(matrix[n - 1])) { + _a = getSVGOffset(matrix[n - 1], container, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1]; // matrix[n - 1] = 0; + // matrix[2 * n - 1] = 0; + } + + mat = multiply(mat, matrix, n); + }); + var transform = (is3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(targetMatrix) + ")"; + return [beforeMatrix, mat, targetMatrix, transform, transformOrigin]; + } + function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) { + var _a; + + var _b = getSize(el), + width = _b[0], + height = _b[1]; + + var containerRect = (container || document.documentElement).getBoundingClientRect(); + var rect = el.getBoundingClientRect(); + var rectLeft = rect.left - containerRect.left; + var rectTop = rect.top - containerRect.top; + var rectWidth = rect.width; + var rectHeight = rect.height; + var mat = multiplies(n, beforeMatrix, absoluteMatrix); + var pos1 = caculate(mat, convertPositionMatrix([0, 0], n), n); + var pos2 = caculate(mat, convertPositionMatrix([width, 0], n), n); + var pos3 = caculate(mat, convertPositionMatrix([0, height], n), n); + var pos4 = caculate(mat, convertPositionMatrix([width, height], n), n); + var posOrigin = caculate(mat, convertPositionMatrix(origin, n), n); + var prevLeft = Math.min(pos1[0], pos2[0], pos3[0], pos4[0]); + var prevTop = Math.min(pos1[1], pos2[1], pos3[1], pos4[1]); + var prevOrigin = minus(posOrigin, [prevLeft, prevTop]); + var prevWidth = Math.max(pos1[0], pos2[0], pos3[0], pos4[0]) - prevLeft; + var prevHeight = Math.max(pos1[1], pos2[1], pos3[1], pos4[1]) - prevTop; + var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight]; + var offset = [0, 0]; + var count = 0; + + while (++count < 10) { + _a = minus(caculate(invert(beforeMatrix, n), convertPositionMatrix(rectOrigin, n), n), caculate(invert(beforeMatrix, n), convertPositionMatrix(posOrigin, n), n)), offset[0] = _a[0], offset[1] = _a[1]; + var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix); + var nextPos1 = caculate(mat2, convertPositionMatrix([0, 0], n), n); + var nextPos2 = caculate(mat2, convertPositionMatrix([width, 0], n), n); + var nextPos3 = caculate(mat2, convertPositionMatrix([0, height], n), n); + var nextPos4 = caculate(mat2, convertPositionMatrix([width, height], n), n); + var nextLeft = Math.min(nextPos1[0], nextPos2[0], nextPos3[0], nextPos4[0]); + var nextTop = Math.min(nextPos1[1], nextPos2[1], nextPos3[1], nextPos4[1]); + var distLeft = nextLeft - rectLeft; + var distTop = nextTop - rectTop; + + if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) { + break; + } + + rectOrigin[0] -= distLeft; + rectOrigin[1] -= distTop; + } + + return offset.map(function (p) { + return Math.round(p); + }); + } + function caculatePosition(matrix, origin, width, height) { + var is3d = matrix.length === 16; + var n = is3d ? 4 : 3; + + var _a = caculate(matrix, convertPositionMatrix([0, 0], n), n), + x1 = _a[0], + y1 = _a[1]; + + var _b = caculate(matrix, convertPositionMatrix([width, 0], n), n), + x2 = _b[0], + y2 = _b[1]; + + var _c = caculate(matrix, convertPositionMatrix([0, height], n), n), + x3 = _c[0], + y3 = _c[1]; + + var _d = caculate(matrix, convertPositionMatrix([width, height], n), n), + x4 = _d[0], + y4 = _d[1]; + + var _e = caculate(matrix, convertPositionMatrix(origin, n), n), + 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 [[minX, minY], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4]]; + } + function rotateMatrix(matrix, rad) { + var cos = Math.cos(rad); + var sin = Math.sin(rad); + return multiply([cos, -sin, 0, sin, cos, 0, 0, 0, 1], matrix, 3); + } + 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(pos1, pos2, pos3, pos4) { + var center = [(pos1[0] + pos2[0] + pos3[0] + pos4[0]) / 4, (pos1[1] + pos2[1] + pos3[1] + pos4[1]) / 4]; + var pos1Rad = getRad(center, pos1); + var pos2Rad = getRad(center, 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 = rotateMatrix([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, _e; + + 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 = createIdentityMatrix(3); + var matrix = createIdentityMatrix(3); + var targetMatrix = createIdentityMatrix(3); + var width = 0; + var height = 0; + var transformOrigin = [0, 0]; + var direction = 1; + var rotationPos = [0, 0]; + var rotationRad = 0; + var is3d = false; + var targetTransform = ""; + + if (target) { + var style = window.getComputedStyle(target); + width = target.offsetWidth; + height = target.offsetHeight; + + if (isUndefined$1(width)) { + _a = getSize(target, style, true), width = _a[0], height = _a[1]; + } + + _b = caculateMatrixStack(target, container), beforeMatrix = _b[0], matrix = _b[1], targetMatrix = _b[2], targetTransform = _b[3], transformOrigin = _b[4]; + is3d = matrix.length === 16; + _c = caculatePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5]; // 1 : clockwise + // -1 : counterclockwise + + _e = getRotationInfo(pos1, pos2, pos3, pos4), direction = _e[0], rotationRad = _e[1], rotationPos = _e[2]; + } + + return { + direction: direction, + rotationRad: rotationRad, + rotationPos: rotationPos, + target: target, + left: left, + top: top, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + width: width, + height: height, + beforeMatrix: beforeMatrix, + matrix: matrix, + targetTransform: targetTransform, + targetMatrix: targetMatrix, + is3d: is3d, + origin: origin, + transformOrigin: transformOrigin + }; + } + function getPosition$1(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 throttle(num, unit) { + if (!unit) { + return num; + } + + return Math.round(num / unit) * unit; + } + function throttleArray(nums, unit) { + nums.forEach(function (_, i) { + nums[i] = throttle(nums[i], unit); + }); + } + function warp(pos0, pos1, pos2, pos3, nextPos0, nextPos1, nextPos2, nextPos3) { + var x0 = pos0[0], + y0 = pos0[1]; + var x1 = pos1[0], + y1 = pos1[1]; + var x2 = pos2[0], + y2 = pos2[1]; + var x3 = pos3[0], + y3 = pos3[1]; + var u0 = nextPos0[0], + v0 = nextPos0[1]; + var u1 = nextPos1[0], + v1 = nextPos1[1]; + var u2 = nextPos2[0], + v2 = nextPos2[1]; + var u3 = nextPos3[0], + v3 = nextPos3[1]; + var matrix = [x0, y0, 1, 0, 0, 0, -u0 * x0, -u0 * y0, 0, 0, 0, x0, y0, 1, -v0 * x0, -v0 * y0, x1, y1, 1, 0, 0, 0, -u1 * x1, -u1 * y1, 0, 0, 0, x1, y1, 1, -v1 * x1, -v1 * y1, x2, y2, 1, 0, 0, 0, -u2 * x2, -u2 * y2, 0, 0, 0, x2, y2, 1, -v2 * x2, -v2 * y2, x3, y3, 1, 0, 0, 0, -u3 * x3, -u3 * y3, 0, 0, 0, x3, y3, 1, -v3 * x3, -v3 * y3]; + var inverseMatrix = invert(matrix, 8); + + if (!inverseMatrix.length) { + return []; + } + + var h = multiply(inverseMatrix, [u0, v0, u1, v1, u2, v2, u3, v3], 8); + h[8] = 1; + return convertDimension(h, 3, 4); + } + + function dragStart(moveable, _a) { + var datas = _a.datas; + var _b = moveable.state, + matrix = _b.matrix, + beforeMatrix = _b.beforeMatrix, + is3d = _b.is3d, + left = _b.left, + top = _b.top, + origin = _b.origin; + var n = is3d ? 4 : 3; + datas.is3d = is3d; + datas.matrix = matrix; + datas.inverseMatrix = invert(matrix, n); + datas.beforeMatrix = beforeMatrix; + datas.inverseBeforeMatrix = invert(beforeMatrix, n); + datas.absoluteOrigin = convertPositionMatrix(sum([left, top], origin), n); + datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, is3d ? 4 : 3); + datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, is3d ? 4 : 3); + } + function getDragDist(_a, isBefore) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY; + var inverseBeforeMatrix = datas.inverseBeforeMatrix, + inverseMatrix = datas.inverseMatrix, + is3d = datas.is3d, + startDragBeforeDist = datas.startDragBeforeDist, + startDragDist = datas.startDragDist, + absoluteOrigin = datas.absoluteOrigin; + var n = is3d ? 4 : 3; + return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, sum(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist); + } + + function getDraggableDragger(moveable, target) { + return setDrag(target, { + container: window, + dragstart: function (_a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var style = window.getComputedStyle(target); + var targetTransform = moveable.state.targetTransform; + datas.left = parseFloat(style.left || "") || 0; + datas.top = parseFloat(style.top || "") || 0; + datas.bottom = parseFloat(style.bottom || "") || 0; + datas.right = parseFloat(style.right || "") || 0; + datas.transform = targetTransform; + dragStart(moveable, { + datas: datas + }); + datas.prevDist = [0, 0]; + datas.prevBeforeDist = [0, 0]; + return moveable.props.onDragStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + }, + drag: function (_a) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY, + clientX = _a.clientX, + clientY = _a.clientY; + var throttleDrag = moveable.props.throttleDrag; + var prevDist = datas.prevDist, + prevBeforeDist = datas.prevBeforeDist, + transform = datas.transform; + var beforeDist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, false); + throttleArray(dist, throttleDrag); + throttleArray(beforeDist, throttleDrag); + var delta = minus(dist, prevDist); + var beforeDelta = minus(beforeDist, prevBeforeDist); + datas.prevDist = dist; + datas.prevBeforeDist = beforeDist; + var left = datas.left + beforeDist[0]; + var top = datas.top + beforeDist[1]; + var right = datas.right - beforeDist[0]; + var bottom = datas.bottom - beforeDist[1]; + var nextTransform = transform + " translate(" + dist[0] + "px, " + dist[1] + "px)"; + + if (delta.every(function (num) { + return !num; + }) && beforeDelta.some(function (num) { + return !num; + })) { + return; + } + + moveable.props.onDrag({ + target: target, + transform: nextTransform, + dist: dist, + delta: delta, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + left: left, + top: top, + right: right, + bottom: bottom, + clientX: clientX, + clientY: clientY + }); + moveable.updateTarget(); + }, + dragend: function (_a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onDragEnd({ + target: target, + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + + if (isDrag) { + moveable.updateRect(); + } + } + }); + } + + function scaleStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!position || !target) { + return false; + } + + var _b = moveable.state, + width = _b.width, + height = _b.height, + targetTransform = _b.targetTransform; + dragStart(moveable, { + datas: datas + }); + datas.transform = targetTransform; + datas.prevDist = [1, 1]; + datas.position = position; + datas.width = width; + datas.height = height; + moveable.props.onScaleStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + } + function scale(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var prevDist = datas.prevDist, + position = datas.position, + width = datas.width, + height = datas.height, + transform = datas.transform; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = position[0] * dist[0]; + var distHeight = position[1] * dist[1]; // diagonal + + if (moveable.props.keepRatio && position[0] && position[1] && width && height) { + 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; + var throttleScale = moveable.props.throttleScale; + scaleX = throttle(scaleX, throttleScale); + scaleY = throttle(scaleY, throttleScale); + + if (scaleX === 0) { + scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE; + } + + if (scaleY === 0) { + scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE; + } + + datas.prevDist = [scaleX, scaleY]; + + if (scaleX === prevDist[0] && scaleY === prevDist[1]) { + return; + } + + 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 + ")", + clientX: clientX, + clientY: clientY + }); + moveable.updateTarget(); + } + function scaleEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onScaleEnd({ + target: moveable.props.target, + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + + if (isDrag) { + moveable.updateRect(); + } + } + + function getRotateInfo(datas, clientX, clientY, throttleRotate) { + var startAbsoluteOrigin = datas.startAbsoluteOrigin, + startDeg = datas.startDeg, + prevDeg = datas.prevDeg, + prevLoop = datas.loop, + direction = datas.direction; + var deg = throttle(getRad(startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, throttleRotate); + + if (prevDeg > deg && prevDeg > 270 && deg < 90) { + // 360 => 0 + ++datas.loop; + } else if (prevDeg < deg && prevDeg < 90 && deg > 270) { + // 0 => 360 + --datas.loop; + } + + var absolutePrevDeg = prevLoop * 360 + prevDeg; + var absoluteDeg = datas.loop * 360 + deg; + datas.prevDeg = deg; + return { + delta: direction * (absoluteDeg - absolutePrevDeg), + dist: direction * (absoluteDeg - startDeg), + beforeDelta: absoluteDeg - absolutePrevDeg, + beforeDist: absoluteDeg - startDeg, + 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, + left = _b.left, + top = _b.top, + origin = _b.origin, + rotationPos = _b.rotationPos, + direction = _b.direction, + targetTransform = _b.targetTransform; + datas.transform = targetTransform; + datas.left = left; + datas.top = top; + datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]]; + datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180; + datas.startDeg = datas.prevDeg; + datas.loop = 0; + datas.direction = direction; + + if (datas.transform === "none") { + datas.transform = ""; + } + + moveable.props.onRotateStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + } + function rotate(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + + var _b = getRotateInfo(datas, clientX, clientY, moveable.props.throttleRotate), + delta = _b.delta, + dist = _b.dist, + beforeDist = _b.beforeDist, + beforeDelta = _b.beforeDelta; + + if (!delta) { + return; + } + + moveable.props.onRotate({ + target: moveable.props.target, + delta: delta, + dist: dist, + clientX: clientX, + clientY: clientY, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + transform: datas.transform + " rotate(" + dist + "deg)" + }); + moveable.updateTarget(); + } + function rotateEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onRotateEnd({ + clientX: clientX, + clientY: clientY, + target: moveable.props.target, + isDrag: isDrag + }); + + if (isDrag) { + moveable.updateRect(); + } + } + + function resizeStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!target || !position) { + return false; + } + + var _b = getSize(target), + width = _b[0], + height = _b[1]; + + dragStart(moveable, { + datas: datas + }); + datas.position = position; + datas.width = width; + datas.height = height; + datas.prevWidth = 0; + datas.prevHeight = 0; + moveable.props.onResizeStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + } + function resize(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var position = datas.position, + width = datas.width, + height = datas.height, + prevWidth = datas.prevWidth, + prevHeight = datas.prevHeight; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = position[0] * dist[0]; + var distHeight = position[1] * dist[1]; // diagonal + + if (moveable.props.keepRatio && position[0] && position[1] && width && height) { + 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 throttleResize = moveable.props.throttleResize; + distWidth = throttle(distWidth, throttleResize); + distHeight = throttle(distHeight, throttleResize); + var nextWidth = width + distWidth; + var nextHeight = height + distHeight; + var delta = [distWidth - prevWidth, distHeight - prevHeight]; + datas.prevWidth = distWidth; + datas.prevHeight = distHeight; + + if (delta.every(function (num) { + return !num; + })) { + return; + } + + moveable.props.onResize({ + target: moveable.props.target, + width: nextWidth, + height: nextHeight, + dist: [distWidth, distHeight], + delta: delta, + clientX: clientX, + clientY: clientY + }); + moveable.updateRect(); + } + function resizeEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onScaleEnd({ + target: moveable.props.target, + clientX: clientX, + clientY: clientY, + isDrag: isDrag + }); + + if (isDrag) { + moveable.updateRect(); + } + } + + function getTriangleRad(pos1, pos2, pos3) { + // pos1 Rad + var rad1 = getRad(pos1, pos2); + var rad2 = getRad(pos1, pos3); + var rad = rad2 - rad1; + return rad >= 0 ? rad : rad + 2 * Math.PI; + } + + function isValidPos(poses1, poses2) { + var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]); + var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]); + var pi = Math.PI; + + if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) { + return false; + } + + return true; + } + + function warpStart(moveable, position, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY; + var target = moveable.props.target; + + if (!position || !target) { + return false; + } + + var _b = moveable.state, + transformOrigin = _b.transformOrigin, + is3d = _b.is3d, + targetTransform = _b.targetTransform, + targetMatrix = _b.targetMatrix, + width = _b.width, + height = _b.height; + datas.targetTransform = targetTransform; + datas.targetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4); + datas.targetInverseMatrix = ignoreDimension(invert(datas.targetMatrix, 4), 3, 4); + datas.position = position; + dragStart(moveable, { + datas: datas + }); + datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) { + return minus(p, transformOrigin); + }); + datas.nextPoses = datas.poses.map(function (_a) { + var x = _a[0], + y = _a[1]; + return caculate(datas.targetMatrix, [x, y, 0, 1], 4); + }); + datas.posNum = (position[0] === -1 ? 0 : 1) + (position[1] === -1 ? 0 : 2); + datas.prevMatrix = createIdentityMatrix(4); + moveable.props.onWarpStart({ + target: target, + clientX: clientX, + clientY: clientY + }); + } + function warp$1(moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + distX = _a.distX, + distY = _a.distY; + var posNum = datas.posNum, + poses = datas.poses, + targetInverseMatrix = datas.targetInverseMatrix, + prevMatrix = datas.prevMatrix; + var target = moveable.props.target; + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var nextPoses = datas.nextPoses.slice(); + nextPoses[posNum] = [nextPoses[posNum][0] + dist[0], nextPoses[posNum][1] + dist[1]]; + + if (!NEARBY_POS.every(function (nearByPoses) { + return isValidPos(nearByPoses.map(function (i) { + return poses[i]; + }), nearByPoses.map(function (i) { + return nextPoses[i]; + })); + })) { + return; + } + + var h = warp(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]); + + if (!h.length) { + return; + } + + var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4)); + var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")"; + var delta = multiply(invert(prevMatrix, 4), matrix, 4); + datas.prevMatrix = matrix; + moveable.props.onWarp({ + target: target, + clientX: clientX, + clientY: clientY, + delta: delta, + multiply: multiplyCSS, + dist: matrix, + transform: transform + }); + moveable.updateRect(); + } + function warpEnd(moveable, _a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + moveable.props.onWarpEnd({ + target: moveable.props.target, + clientX: clientX, + clientY: clientY, + 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$1(inputTarget); + type = "scale"; + return scaleStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else if (moveable.props.resizable) { + var position = getPosition$1(inputTarget); + type = "resize"; + return resizeStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else if (moveable.props.warpable) { + var position = getPosition$1(inputTarget); + type = "warp"; + return warpStart(moveable, position, { + datas: datas, + clientX: clientX, + clientY: clientY + }); + } else { + return false; + } + }, + drag: function (e) { + if (!type) { + return; + } else if (type === "rotate") { + return rotate(moveable, e); + } else if (type === "scale") { + return scale(moveable, e); + } else if (type === "resize") { + return resize(moveable, e); + } else if (type === "warp") { + return warp$1(moveable, e); + } + }, + dragend: function (_a) { + var isDrag = _a.isDrag, + clientX = _a.clientX, + clientY = _a.clientY; + + if (!type) { + return; + } else if (type === "rotate") { + return rotateEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "scale") { + return scaleEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "resize") { + return resizeEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } else if (type === "warp") { + return warpEnd(moveable, { + isDrag: isDrag, + clientX: clientX, + clientY: clientY + }); + } + } + }); + } + + 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: createIdentityMatrix(3), + matrix: createIdentityMatrix(3), + targetTransform: "", + targetMatrix: createIdentityMatrix(3), + is3d: false, + left: 0, + top: 0, + width: 0, + height: 0, + 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.getAttribute("class") || "").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, + 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) translateZ(50px)" + } + }, 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(), this.renderPosition(), this.renderMiddleLine(), this.renderDiagonalPosition(), this.renderOrigin()); + }; + + __proto.renderRotation = function () { + if (!this.props.rotatable) { + return null; + } + + var _a = this.state, + pos1 = _a.pos1, + pos2 = _a.pos2, + rotationRad = _a.rotationRad; + 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.renderDiagonalPosition = function () { + var _a = this.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (!resizable && !scalable && !warpable) { + return null; + } + + var _b = this.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + return [createElement("div", { + className: prefix("control", "nw"), + "data-position": "nw", + key: "nw", + style: getControlTransform(pos1) + }), createElement("div", { + className: prefix("control", "ne"), + "data-position": "ne", + key: "ne", + style: getControlTransform(pos2) + }), createElement("div", { + className: prefix("control", "sw"), + "data-position": "sw", + key: "sw", + style: getControlTransform(pos3) + }), createElement("div", { + className: prefix("control", "se"), + "data-position": "se", + key: "se", + style: getControlTransform(pos4) + })]; + }; + + __proto.renderMiddleLine = function () { + var _a = this.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (resizable || scalable || !warpable) { + return; + } + + var _b = this.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + var linePosFrom1 = pos1.map(function (pos, i) { + return dot(pos, pos2[i], 1, 2); + }); + var linePosFrom2 = pos1.map(function (pos, i) { + return dot(pos, pos2[i], 2, 1); + }); + var linePosFrom3 = pos1.map(function (pos, i) { + return dot(pos, pos3[i], 1, 2); + }); + var linePosFrom4 = pos1.map(function (pos, i) { + return dot(pos, pos3[i], 2, 1); + }); + var linePosTo1 = pos3.map(function (pos, i) { + return dot(pos, pos4[i], 1, 2); + }); + var linePosTo2 = pos3.map(function (pos, i) { + return dot(pos, pos4[i], 2, 1); + }); + var linePosTo3 = pos2.map(function (pos, i) { + return dot(pos, pos4[i], 1, 2); + }); + var linePosTo4 = pos2.map(function (pos, i) { + return dot(pos, pos4[i], 2, 1); + }); + return [createElement("div", { + className: prefix("line"), + key: "middeLine1", + style: getLineStyle(linePosFrom1, linePosTo1) + }), createElement("div", { + className: prefix("line"), + key: "middeLine2", + style: getLineStyle(linePosFrom2, linePosTo2) + }), createElement("div", { + className: prefix("line"), + style: getLineStyle(linePosFrom3, linePosTo3) + }), createElement("div", { + className: prefix("line"), + style: getLineStyle(linePosFrom4, linePosTo4) + })]; + }; + + __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", "n"), + "data-position": "n", + key: "n", + style: getControlTransform(pos1, 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", "s"), + "data-position": "s", + key: "s", + style: getControlTransform(pos3, pos4) + })]; + }; + + __proto.componentDidMount = function () { + /* rotatable */ + + /* resizable */ + + /* scalable */ + + /* warpable */ + 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.updateTarget = function () { + var _a = this.state, + width = _a.width, + height = _a.height, + beforeMatrix = _a.beforeMatrix; + var target = this.props.target; + var container = this.props.container; + var is3d = beforeMatrix.length === 16; + var n = is3d ? 4 : 3; + + var _b = caculateMatrixStack(target, container, true, beforeMatrix, n), + matrix = _b[1], + targetMatrix = _b[2], + targetTransform = _b[3], + transformOrigin = _b[4]; + + var _c = caculatePosition(matrix, transformOrigin, width, height), + _d = _c[0], + left = _d[0], + top = _d[1], + nextOrigin = _c[1], + pos1 = _c[2], + pos2 = _c[3], + pos3 = _c[4], + pos4 = _c[5]; + + var _e = getRotationInfo(pos1, pos2, pos3, pos4), + direction = _e[0], + rotationRad = _e[1], + rotationPos = _e[2]; + + this.setState({ + direction: direction, + rotationRad: rotationRad, + rotationPos: rotationPos, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + origin: nextOrigin, + beforeMatrix: beforeMatrix, + targetMatrix: targetMatrix, + matrix: matrix, + transformOrigin: transformOrigin, + targetTransform: targetTransform, + left: left, + top: top + }); + }; + + __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 = { + target: null, + container: null, + rotatable: false, + draggable: false, + scalable: false, + resizable: false, + warpable: false, + keepRatio: true, + origin: true, + throttleDrag: 0, + throttleResize: 0, + throttleScale: 0, + throttleRotate: 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 () {}, + onWarpStart: function () {}, + onWarp: function () {}, + onWarpEnd: 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); + }; + + _this.onWarpStart = function (e) { + _this.trigger("warpStart", e); + }; + + _this.onWarp = function (e) { + _this.trigger("warp", e); + }; + + _this.onWarpEnd = function (e) { + _this.trigger("warpEnd", 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, + onWarpStart: _this.onWarpStart, + onWarp: _this.onWarp, + onWarpEnd: _this.onWarpEnd + })), element); + parentElement.appendChild(element.children[0]); + return _this; + } + + var __proto = Moveable.prototype; + Object.defineProperty(__proto, "origin", { + /** + * Whether or not the origin controlbox will be visible or not + * @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", { + /** + * The target to indicate Moveable Control Box. + * @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 + }); + Object.defineProperty(__proto, "warpable", { + /** + * Whether or not target can be warped. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.warpable = true; + */ + get: function () { + return this.getMoveableProps().warpable; + }, + set: function (warpable) { + this.innerMoveable.setState({ + warpable: warpable + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "keepRatio", { + /** + * When resize or scale, keeps a ratio of the width, height. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.keepRatio = true; + */ + get: function () { + return this.getMoveable().keepRatio; + }, + set: function (keepRatio) { + this.innerMoveable.setState({ + keepRatio: keepRatio + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleDrag", { + /** + * throttle of x, y when drag. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleDrag = 1; + */ + get: function () { + return this.getMoveable().throttleDrag; + }, + set: function (throttleDrag) { + this.innerMoveable.setState({ + throttleDrag: throttleDrag + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleResize", { + /** + * throttle of width, height when resize. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleResize = 1; + */ + get: function () { + return this.getMoveable().throttleResize; + }, + set: function (throttleResize) { + this.innerMoveable.setState({ + throttleResize: throttleResize + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleScale", { + /** + * throttle of scaleX, scaleY when scale. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleScale = 0.1; + */ + get: function () { + return this.getMoveable().throttleScale; + }, + set: function (throttleScale) { + this.innerMoveable.setState({ + throttleScale: throttleScale + }); + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "throttleRotate", { + /** + * hrottle of angle(degree) when rotate. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.throttleRotate = 1; + */ + get: function () { + return this.getMoveable().throttleRotate; + }, + set: function (throttleRotate) { + this.innerMoveable.setState({ + throttleRotate: throttleRotate + }); + }, + 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 all elements change, update the shape of the moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("resize", e => { + * moveable.updateRect(); + * }); + */ + + + __proto.updateRect = function () { + this.getMoveable().updateRect(); + }; + /** + * If the width, height, left, and top of the only target change, update the shape of the moveable. + * @param - the values of x and y to move moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.updateTarget(); + */ + + + __proto.updateTarget = function () { + this.getMoveable().updateTarget(); + }; + + __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..39e234f49 --- /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 {\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 ;\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, OnWarpStart, OnWarpEnd, OnWarp,\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 ,\n element,\n );\n parentElement.appendChild(element.children[0]);\n }\n /**\n * Whether or not the origin controlbox will be visible or not\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 * The target to indicate Moveable Control Box.\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 * Whether or not target can be warped.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n get warpable(): boolean {\n return this.getMoveableProps().warpable;\n }\n set warpable(warpable: boolean) {\n this.innerMoveable.setState({\n warpable,\n });\n }\n /**\n * When resize or scale, keeps a ratio of the width, height.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n get keepRatio(): boolean {\n return this.getMoveable().keepRatio;\n }\n set keepRatio(keepRatio: boolean) {\n this.innerMoveable.setState({\n keepRatio,\n });\n }\n /**\n * throttle of x, y when drag.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n get throttleDrag(): number {\n return this.getMoveable().throttleDrag;\n }\n set throttleDrag(throttleDrag: number) {\n this.innerMoveable.setState({\n throttleDrag,\n });\n }\n /**\n * throttle of width, height when resize.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n get throttleResize(): number {\n return this.getMoveable().throttleResize;\n }\n set throttleResize(throttleResize: number) {\n this.innerMoveable.setState({\n throttleResize,\n });\n }\n /**\n * throttle of scaleX, scaleY when scale.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n get throttleScale(): number {\n return this.getMoveable().throttleScale;\n }\n set throttleScale(throttleScale: number) {\n this.innerMoveable.setState({\n throttleScale,\n });\n }\n /**\n * hrottle of angle(degree) when rotate.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n get throttleRotate(): number {\n return this.getMoveable().throttleRotate;\n }\n set throttleRotate(throttleRotate: number) {\n this.innerMoveable.setState({\n throttleRotate,\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 all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n 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 private onWarpStart = (e: OnWarpStart) => {\n this.trigger(\"warpStart\", e);\n }\n private onWarp = (e: OnWarp) => {\n this.trigger(\"warp\", e);\n }\n private onWarpEnd = (e: OnWarpEnd) => {\n this.trigger(\"warpEnd\", 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\ndeclare interface Moveable {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\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","onWarpStart","onWarp","onWarpEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","warpable","getMoveable","keepRatio","throttleDrag","throttleResize","throttleScale","throttleRotate","pos","move","isMoveableElement","updateTarget","preactMoveable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"} \ No newline at end of file diff --git a/dist/moveable.min.js b/dist/moveable.min.js new file mode 100644 index 000000000..16fcf51fd --- /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.4.1 +*/ +!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>>0};var wt=function(){return(wt=Object.assign||function(t){for(var e,n=1,r=arguments.length;n {\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 ;\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, OnWarpStart, OnWarpEnd, OnWarp,\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 ,\n element,\n );\n parentElement.appendChild(element.children[0]);\n }\n /**\n * Whether or not the origin controlbox will be visible or not\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 * The target to indicate Moveable Control Box.\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 * Whether or not target can be warped.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n get warpable(): boolean {\n return this.getMoveableProps().warpable;\n }\n set warpable(warpable: boolean) {\n this.innerMoveable.setState({\n warpable,\n });\n }\n /**\n * When resize or scale, keeps a ratio of the width, height.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n get keepRatio(): boolean {\n return this.getMoveable().keepRatio;\n }\n set keepRatio(keepRatio: boolean) {\n this.innerMoveable.setState({\n keepRatio,\n });\n }\n /**\n * throttle of x, y when drag.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n get throttleDrag(): number {\n return this.getMoveable().throttleDrag;\n }\n set throttleDrag(throttleDrag: number) {\n this.innerMoveable.setState({\n throttleDrag,\n });\n }\n /**\n * throttle of width, height when resize.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n get throttleResize(): number {\n return this.getMoveable().throttleResize;\n }\n set throttleResize(throttleResize: number) {\n this.innerMoveable.setState({\n throttleResize,\n });\n }\n /**\n * throttle of scaleX, scaleY when scale.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n get throttleScale(): number {\n return this.getMoveable().throttleScale;\n }\n set throttleScale(throttleScale: number) {\n this.innerMoveable.setState({\n throttleScale,\n });\n }\n /**\n * hrottle of angle(degree) when rotate.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n get throttleRotate(): number {\n return this.getMoveable().throttleRotate;\n }\n set throttleRotate(throttleRotate: number) {\n this.innerMoveable.setState({\n throttleRotate,\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 all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n 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 private onWarpStart = (e: OnWarpStart) => {\n this.trigger(\"warpStart\", e);\n }\n private onWarp = (e: OnWarp) => {\n this.trigger(\"warp\", e);\n }\n private onWarpEnd = (e: OnWarpEnd) => {\n this.trigger(\"warpEnd\", 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\ndeclare interface Moveable {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\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","onWarpStart","onWarp","onWarpEnd","appendChild","children","Object","getMoveableProps","origin","innerMoveable","setState","target","updateRect","draggable","resizable","scalable","rotatable","warpable","getMoveable","keepRatio","throttleDrag","throttleResize","throttleScale","throttleRotate","pos","move","isMoveableElement","updateTarget","preactMoveable","EgComponent"],"mappings":";;;;;;;;y11CAOgBA,SACRC,YAAMD,gBAHHE,QAAuB,GAI1BA,EAAKC,MAAQD,EAAKF,eALiBI,0BAOvC,kBACWC,EAACC,MAASC,IAAKA,EAAIC,KAAM,mBAAuBA,KAAKL,YARzBM,iCCkB3BC,EAAyCC,gBAAAA,YACjDV,mBAySIC,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,IAEtBV,cAAc,SAACU,GACnBV,EAAKW,QAAQ,YAAaD,IAEtBV,SAAS,SAACU,GACdV,EAAKW,QAAQ,OAAQD,IAEjBV,YAAY,SAACU,GACjBV,EAAKW,QAAQ,UAAWD,QAnVlBE,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,YAClBC,YAAa7B,EAAK6B,YAClBC,OAAQ9B,EAAK8B,OACbC,UAAW/B,EAAK+B,aAEpBnB,GAEJJ,EAAcwB,YAAYpB,EAAQqB,SAAS,MAhC5B/B,gCA2CnBgC,sCAAA,kBACW5B,KAAK6B,mBAAmBC,YAEnC,SAAWA,QACFC,cAAcC,SAAS,CACxBF,4CAWRF,sCAAA,kBACW5B,KAAK6B,mBAAmBI,YAEnC,SAAWA,GACHA,IAAWjC,KAAKiC,YACXF,cAAcC,SAAS,CACxBC,gBAGCC,8CAYbN,yCAAA,kBACW5B,KAAK6B,mBAAmBM,YAAa,OAEhD,SAAcA,QACLJ,cAAcC,SAAS,CACxBG,+CAYRP,yCAAA,kBACW5B,KAAK6B,mBAAmBO,eAEnC,SAAcA,QACLL,cAAcC,SAAS,CACxBI,+CAYRR,wCAAA,kBACW5B,KAAK6B,mBAAmBQ,cAEnC,SAAaA,QACJN,cAAcC,SAAS,CACxBK,8CAYRT,yCAAA,kBACW5B,KAAK6B,mBAAmBS,eAEnC,SAAcA,QACLP,cAAcC,SAAS,CACxBM,+CAYRV,wCAAA,kBACW5B,KAAK6B,mBAAmBU,cAEnC,SAAaA,QACJR,cAAcC,SAAS,CACxBO,8CAYRX,yCAAA,kBACW5B,KAAKwC,cAAcC,eAE9B,SAAcA,QACLV,cAAcC,SAAS,CACxBS,+CAYRb,4CAAA,kBACW5B,KAAKwC,cAAcE,kBAE9B,SAAiBA,QACRX,cAAcC,SAAS,CACxBU,kDAYRd,8CAAA,kBACW5B,KAAKwC,cAAcG,oBAE9B,SAAmBA,QACVZ,cAAcC,SAAS,CACxBW,oDAYRf,6CAAA,kBACW5B,KAAKwC,cAAcI,mBAE9B,SAAkBA,QACTb,cAAcC,SAAS,CACxBY,mDAYRhB,8CAAA,kBACW5B,KAAKwC,cAAcK,oBAE9B,SAAmBA,QACVd,cAAcC,SAAS,CACxBa,2DAaR,SAAYC,QACHN,cAAcO,KAAKD,wBAgB5B,SAAyBb,UACdjC,KAAKwC,cAAcQ,kBAAkBf,iBAahD,gBACSO,cAAcN,6BAYvB,gBACSM,cAAcS,8BAEvB,kBACWjD,KAAK+B,cAAcmB,mCAE9B,kBACWlD,KAAKwC,cAAchD,UA9SX2D"} \ No newline at end of file