From fa21003e36734c74949a6c427c1ec1fa28f65de5 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Thu, 28 Nov 2019 23:57:08 +0900 Subject: [PATCH] chore: Release 0.12.0 --- .gitignore | 2 +- CHANGELOG.md | 9 + dist/moveable.cjs.js | 308 + dist/moveable.cjs.js.map | 1 + dist/moveable.esm.js | 304 + dist/moveable.esm.js.map | 1 + dist/moveable.js | 7495 +++++++++++++++++ dist/moveable.js.map | 1 + dist/moveable.min.js | 10 + dist/moveable.min.js.map | 1 + package-lock.json | 16 +- package.json | 4 +- .../projects/ngx-moveable/package-lock.json | 24 +- .../projects/ngx-moveable/package.json | 4 +- .../src/ngx-moveable.component.ts | 1 + packages/preact-moveable/package-lock.json | 277 +- packages/preact-moveable/package.json | 6 +- packages/preact-moveable/rollup.config.js | 1 + .../src/react-moveable/ables/Resizable.ts | 1 - packages/svelte-moveable/package-lock.json | 24 +- packages/svelte-moveable/package.json | 4 +- 21 files changed, 8285 insertions(+), 209 deletions(-) create mode 100644 dist/moveable.cjs.js create mode 100644 dist/moveable.cjs.js.map create mode 100644 dist/moveable.esm.js create mode 100644 dist/moveable.esm.js.map create mode 100644 dist/moveable.js create mode 100644 dist/moveable.js.map create mode 100644 dist/moveable.min.js create mode 100644 dist/moveable.min.js.map diff --git a/.gitignore b/.gitignore index 52cc1ae90..9e2aae9c9 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 4750d0b68..894ed1092 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,15 @@ 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.12.0] - 2019-11-28 +### Added +* Add `defaultGroupRotate` props. #102 + +### Fixed +* Fix that `clickGroup` does not trigger after rotating #103 +* Fix that at certain angles, moveable-control handle gets cut #104 +* Fix that Element "sliding" when resizing #104 + ## [0.11.1] - 2019-11-23 ### Fixed * Fix Resizable's base direction caculation diff --git a/dist/moveable.cjs.js b/dist/moveable.cjs.js new file mode 100644 index 000000000..16be125fd --- /dev/null +++ b/dist/moveable.cjs.js @@ -0,0 +1,308 @@ +/* +Copyright (c) 2019 Daybrush +name: moveable +license: MIT +author: Daybrush +repository: git+https://github.com/daybrush/moveable.git +version: 0.12.0 +*/ +'use strict'; + +var EgComponent = require('@egjs/component'); +var frameworkUtils = require('framework-utils'); +var preact = require('preact'); +var compat = require('preact/compat'); +var Moveable$1 = require('preact-moveable'); +var utils = require('@daybrush/utils'); + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +var 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 compat.createPortal(preact.h(Moveable$1, __assign({ + ref: frameworkUtils.ref(this, "preactMoveable") + }, this.state)), this.state.parentElement); + }; + + return InnerMoveable; +}(preact.Component); + +var PROPERTIES = ["draggable", "resizable", "scalable", "rotatable", "warpable", "pinchable", "snappable", "origin", "target", "edge", "throttleDrag", "throttleResize", "throttleScale", "throttleRotate", "keepRatio", "dragArea", "pinchThreshold", "snapCenter", "snapThreshold", "horizontalGuidelines", "verticalGuidelines", "elementGuidelines", "bounds", "className", "renderDirections", "scrollable", "getScrollPosition", "scrollContainer", "scrollThreshold", "baseDirection"]; +var EVENTS = ["dragStart", "drag", "dragEnd", "resizeStart", "resize", "resizeEnd", "scaleStart", "scale", "scaleEnd", "rotateStart", "rotate", "rotateEnd", "warpStart", "warp", "warpEnd", "pinchStart", "pinch", "pinchEnd", "dragGroupStart", "dragGroup", "dragGroupEnd", "resizeGroupStart", "resizeGroup", "resizeGroupEnd", "scaleGroupStart", "scaleGroup", "scaleGroupEnd", "rotateGroupStart", "rotateGroup", "rotateGroupEnd", "pinchGroupStart", "pinchGroup", "pinchGroupEnd", "clickGroup", "scroll", "scrollGroup", "renderStart", "render", "renderEnd", "renderGroupStart", "renderGroup", "renderGroupEnd"]; + +/** + * Moveable is Draggable! Resizable! Scalable! Rotatable! + * @sort 1 + * @extends eg.Component + */ + +var Moveable = +/*#__PURE__*/ +function (_super) { + __extends(Moveable, _super); + /** + * + */ + + + function Moveable(parentElement, options) { + if (options === void 0) { + options = {}; + } + + var _this = _super.call(this) || this; + + _this.tempElement = document.createElement("div"); + + var nextOptions = __assign({ + container: parentElement + }, options); + + var events = {}; + EVENTS.forEach(function (name) { + events[utils.camelize("on " + name)] = function (e) { + return _this.trigger(name, e); + }; + }); + preact.render(preact.h(InnerMoveable, __assign({ + ref: frameworkUtils.ref(_this, "innerMoveable"), + parentElement: parentElement + }, nextOptions, events)), _this.tempElement); + var target = nextOptions.target; + + if (utils.isArray(target) && target.length > 1) { + _this.updateRect(); + } + + return _this; + } + /** + * Check if the target is an element included in the moveable. + * @param - the target + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("click", e => { + * if (!moveable.isMoveableElement(e.target)) { + * moveable.target = e.target; + * } + * }); + */ + + + var __proto = Moveable.prototype; + + __proto.isMoveableElement = function (target) { + return this.getMoveable().isMoveableElement(target); + }; + /** + * If the width, height, left, and top of all elements change, update the shape of the moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("resize", e => { + * moveable.updateRect(); + * }); + */ + + + __proto.updateRect = function () { + this.getMoveable().updateRect(); + }; + /** + * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart) + * @param - external `MouseEvent`or `TouchEvent` + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * document.body.addEventListener("mousedown", e => { + * if (!moveable.isMoveableElement(e.target)) { + * moveable.dragStart(e); + * } + * }); + */ + + + __proto.dragStart = function (e) { + this.getMoveable().dragStart(e); + }; + /** + * Whether the coordinates are inside Moveable + * @param - x coordinate + * @param - y coordinate + * @return - True if the coordinate is in moveable or false + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * document.body.addEventListener("mousedown", e => { + * if (moveable.isInside(e.clientX, e.clientY)) { + * console.log("inside"); + * } + * }); + */ + + + __proto.isInside = function (clientX, clientY) { + return this.getMoveable().isInside(clientX, clientY); + }; + /** + * You can get the vertex information, position and offset size information of the target based on the container. + * @return - The Rect Info + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * const rectInfo = moveable.getRect(); + */ + + + __proto.getRect = function () { + return this.getMoveable().getRect(); + }; + /** + * You can change options or properties dynamically. + * @param - options or properties + * @param - After the change, the callback function is executed when the update is completed. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.setState({ + * target: document.querySelector(".target"), + * }, () => { + * moveable.dragStart(e); + * }) + */ + + + __proto.setState = function (state, callback) { + this.innerMoveable.setState(state, callback); + }; + /** + * If the width, height, left, and top of the only target change, update the shape of the moveable. + * @param - the values of x and y to move moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.updateTarget(); + */ + + + __proto.updateTarget = function () { + this.getMoveable().updateTarget(); + }; + /** + * Remove the Moveable object and the events. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.destroy(); + */ + + + __proto.destroy = function () { + preact.render("", this.tempElement); + this.off(); + this.tempElement = null; + this.innerMoveable = null; + }; + + __proto.getMoveable = function () { + return this.innerMoveable.preactMoveable; + }; + + Moveable = __decorate([frameworkUtils.Properties(PROPERTIES, function (prototype, property) { + Object.defineProperty(prototype, property, { + get: function () { + return this.getMoveable().props[property]; + }, + set: function (value) { + var _a; + + this.setState((_a = {}, _a[property] = value, _a)); + }, + enumerable: true, + configurable: true + }); + })], Moveable); + return Moveable; +}(EgComponent); + +Moveable.PROPERTIES = PROPERTIES; +Moveable.EVENTS = EVENTS; + +module.exports = Moveable; +//# 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..d2e083b0b --- /dev/null +++ b/dist/moveable.cjs.js.map @@ -0,0 +1 @@ +{"version":3,"file":"moveable.cjs.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx","../src/index.umd.ts"],"sourcesContent":["import { Component, h } from \"preact\";\nimport { createPortal } from \"preact/compat\";\nimport Moveable, { MoveableProps, PreactMoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component {\n public state: MoveableProps = {};\n public preactMoveable: PreactMoveableInterface;\n constructor(props: MoveableProps) {\n super(props);\n this.state = this.props;\n }\n public render() {\n return createPortal(, this.state.parentElement);\n }\n}\n","import { MoveableEvents, MoveableOptions } from \"./types\";\n\nexport const PROPERTIES: Array = [\n \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n \"warpable\", \"pinchable\", \"snappable\", \"origin\", \"target\", \"edge\",\n \"throttleDrag\", \"throttleResize\",\n \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n \"dragArea\",\n \"pinchThreshold\",\n \"snapCenter\", \"snapThreshold\",\n \"horizontalGuidelines\", \"verticalGuidelines\", \"elementGuidelines\",\n \"bounds\",\n\n \"className\",\n \"renderDirections\",\n \"scrollable\",\n \"getScrollPosition\",\n \"scrollContainer\",\n \"scrollThreshold\",\n \"baseDirection\",\n];\nexport const EVENTS: Array = [\n \"dragStart\",\n \"drag\",\n \"dragEnd\",\n \"resizeStart\",\n \"resize\",\n \"resizeEnd\",\n \"scaleStart\",\n \"scale\",\n \"scaleEnd\",\n \"rotateStart\",\n \"rotate\",\n \"rotateEnd\",\n \"warpStart\",\n \"warp\",\n \"warpEnd\",\n \"pinchStart\",\n \"pinch\",\n \"pinchEnd\",\n \"dragGroupStart\",\n \"dragGroup\",\n \"dragGroupEnd\",\n \"resizeGroupStart\",\n \"resizeGroup\",\n \"resizeGroupEnd\",\n \"scaleGroupStart\",\n \"scaleGroup\",\n \"scaleGroupEnd\",\n \"rotateGroupStart\",\n \"rotateGroup\",\n \"rotateGroupEnd\",\n \"pinchGroupStart\",\n \"pinchGroup\",\n \"pinchGroupEnd\",\n \"clickGroup\",\n\n \"scroll\",\n \"scrollGroup\",\n\n \"renderStart\",\n \"render\",\n \"renderEnd\",\n \"renderGroupStart\",\n \"renderGroup\",\n \"renderGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n OnDragStart, OnDrag, OnResize, OnResizeStart,\n OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart, OnClickGroup,\n MoveableInterface,\n RectInfo,\n OnClick,\n OnScroll,\n OnScrollGroup,\n OnRenderStart,\n OnRender,\n OnRenderEnd,\n OnRenderGroupStart,\n OnRenderGroup,\n OnRenderGroupEnd,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n Object.defineProperty(prototype, property, {\n get() {\n return this.getMoveable().props[property];\n },\n set(value) {\n this.setState({\n [property]: value,\n });\n },\n enumerable: true,\n configurable: true,\n });\n})\nclass Moveable extends EgComponent implements MoveableInterface {\n private innerMoveable!: InnerMoveable;\n private tempElement = document.createElement(\"div\");\n\n /**\n *\n */\n constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n super();\n const nextOptions = { container: parentElement, ...options };\n\n const events: any = {};\n\n EVENTS.forEach(name => {\n events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n });\n\n render(\n ,\n this.tempElement,\n );\n const target = nextOptions.target!;\n if (isArray(target) && target.length > 1) {\n this.updateRect();\n }\n }\n /**\n * Check if the target is an element included in the moveable.\n * @param - the target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"click\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.target = e.target;\n * }\n * });\n */\n public isMoveableElement(target: HTMLElement | SVGElement) {\n return this.getMoveable().isMoveableElement(target);\n }\n /**\n * If the width, height, left, and top of all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)\n * @param - external `MouseEvent`or `TouchEvent`\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.dragStart(e);\n * }\n * });\n */\n public dragStart(e: MouseEvent | TouchEvent): void {\n this.getMoveable().dragStart(e);\n }\n\n /**\n * Whether the coordinates are inside Moveable\n * @param - x coordinate\n * @param - y coordinate\n * @return - True if the coordinate is in moveable or false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (moveable.isInside(e.clientX, e.clientY)) {\n * console.log(\"inside\");\n * }\n * });\n */\n public isInside(clientX: number, clientY: number): boolean {\n return this.getMoveable().isInside(clientX, clientY);\n }\n /**\n * You can get the vertex information, position and offset size information of the target based on the container.\n * @return - The Rect Info\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * const rectInfo = moveable.getRect();\n */\n public getRect(): RectInfo {\n return this.getMoveable().getRect();\n }\n /**\n * You can change options or properties dynamically.\n * @param - options or properties\n * @param - After the change, the callback function is executed when the update is completed.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.setState({\n * target: document.querySelector(\".target\"),\n * }, () => {\n * moveable.dragStart(e);\n * })\n */\n public setState(state: Partial, callback?: () => any) {\n this.innerMoveable.setState(state, callback);\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n /**\n * Remove the Moveable object and the events.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.destroy();\n */\n public destroy() {\n render(\"\", this.tempElement);\n this.off();\n this.tempElement = null;\n this.innerMoveable = null;\n }\n private getMoveable() {\n return this.innerMoveable.preactMoveable;\n }\n}\n/**\n * Whether or not the origin controlbox will be visible or not (default: true)\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged. (default: false)\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized. (default: false)\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled. (default: false)\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated. (default: false)\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped. (default: false)\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height. (default: false)\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * throttle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n\n /**\n * Whether or not target can be snapped to the guideline. (default: false)\n * @name Moveable#snappable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snappable = true;\n */\n/**\n * When you drag, make the snap in the center of the target. (default: false)\n * @name Moveable#snapCenter\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapCenter = true;\n */\n\n/**\n * Distance value that can snap to guidelines. (default: 5)\n * @name Moveable#snapThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapThreshold = 5;\n */\n\n/**\n * Add guidelines in the horizontal direction. (default: [])\n * @name Moveable#horizontalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.horizontalGuidlines = [100, 200, 500];\n */\n\n/**\n * Add guidelines in the vertical direction. (default: [])\n * @name Moveable#\n * moveable.verticalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.verticalGuidlines = [100, 200, 500];\n */\n/**\n * Add guidelines for the element. (default: [])\n * @name Moveable#elementGuidelines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.elementGuidelines = [\n * document.querySelector(\".element\"),\n * ];\n */\n/**\n * You can set up boundaries. (default: [])\n * @name Moveable#bounds\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};\n */\n/**\n * Add an event to the moveable area instead of the target for stopPropagation. (default: false)\n * @name Moveable#dragArea\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * dragArea: false,\n * });\n */\n/**\n * You can specify the position of the rotation. (default: \"top\")\n * @name Moveable#rotationPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotationPosition: \"top\",\n * });\n *\n * moveable.rotationPosition = \"bottom\"\n */\n/**\n * You can specify the className of the moveable controlbox. (default: \"\")\n * @name Moveable#className\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * className: \"\",\n * });\n *\n * moveable.className = \"moveable1\";\n */\n/**\n * Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n * @name Moveable#renderDirections\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n * });\n *\n * moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n */\n\n /**\n * Set target's base direciton using top, left, right, bottom\n * (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])\n * @name Moveable#baseDirection\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * baseDirection: [-1, -1]\n * });\n *\n * moveable.baseDirection = [-1, -1];\n */\n\n /**\n * Sets the initial rotation of the group. (default 0)\n * @name Moveable#defaultGroupRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * defaultGroupRotate: 0,\n * });\n *\n * moveable.defaultGroupRotate = 40;\n */\n\n/**\n * Whether or not target can be scrolled to the scroll container (default: false)\n * @name Moveable#scrollable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n *\n * moveable.scrollable = true;\n */\n\n/**\n * The container to which scroll is applied (default: container)\n * @name Moveable#scrollContainer\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n/**\n * Expand the range of the scroll check area. (default: 0)\n * @name Moveable#scrollThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n\n/**\n * Sets a function to get the scroll position. (default: Function)\n * @name Moveable#getScrollPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\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 /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n * console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n * console.log(\"onDragGroup\", targets);\n * events.forEach(ev => {\n * // drag event\n * console.log(\"onDrag left, top\", ev.left, ev.top);\n * // ev.target!.style.left = `${ev.left}px`;\n * // ev.target!.style.top = `${ev.top}px`;\n * console.log(\"onDrag translate\", ev.dist);\n * ev.target!.style.transform = ev.transform;)\n * });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n * target.style.width = `${e.width}px`;\n * target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n* console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n * 1, 0, 0, 0,\n * 0, 1, 0, 0,\n * 0, 0, 1, 0,\n * 0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n * // target.style.transform = transform;\n * matrix = multiply(matrix, delta);\n * target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n * console.log(target);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n * console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n * console.log(\"onResizeGroup\", targets);\n * events.forEach(ev => {\n * const offset = [\n * direction[0] < 0 ? -ev.delta[0] : 0,\n * direction[1] < 0 ? -ev.delta[1] : 0,\n * ];\n * // ev.drag is a drag event that occurs when the group resize.\n * const left = offset[0] + ev.drag.beforeDist[0];\n * const top = offset[1] + ev.drag.beforeDist[1];\n * const width = ev.width;\n * const top = ev.top;\n * });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n * console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n * console.log(\"onScaleGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group scale.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const scaleX = ev.scale[0];\n * const scaleY = ev.scale[1];\n * });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n * console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n * console.log(\"onRotateGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group rotate.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const deg = ev.beforeDist;\n * });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n * console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n/**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n * console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When you click on the element, the `click` event is called.\n * @memberof Moveable\n * @event click\n * @param {Moveable.OnClick} - Parameters for the `click` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"click\", ({ hasTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", target, hasTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * When you click on the element inside the group, the `clickGroup` event is called.\n * @memberof Moveable\n * @event clickGroup\n * @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"clickGroup\", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", inputTarget, isTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * `renderStart` event occurs at the first start of all events.\n * @memberof Moveable\n * @event renderStart\n * @param {Moveable.OnRenderStart} - Parameters for the `renderStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderStart\", ({ target }) => {\n * console.log(\"onRenderStart\", target);\n * });\n */\n\n/**\n * `render` event occurs before the target is drawn on the screen.\n * @memberof Moveable\n * @event render\n * @param {Moveable.OnRender} - Parameters for the `render` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"render\", ({ target }) => {\n * console.log(\"onRender\", target);\n * });\n */\n\n/**\n * `renderEnd` event occurs at the end of all events.\n * @memberof Moveable\n * @event renderEnd\n * @param {Moveable.OnRenderEnd} - Parameters for the `renderEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderEnd\", ({ target }) => {\n * console.log(\"onRenderEnd\", target);\n * });\n */\n\n/**\n * `renderGroupStart` event occurs at the first start of all events in group.\n * @memberof Moveable\n * @event renderGroupStart\n * @param {Moveable.OnRenderGroupStart} - Parameters for the `renderGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupStart\", ({ targets }) => {\n * console.log(\"onRenderGroupStart\", targets);\n * });\n */\n\n/**\n * `renderGroup` event occurs before the target is drawn on the screen in group.\n * @memberof Moveable\n * @event renderGroup\n * @param {Moveable.OnRenderGroup} - Parameters for the `renderGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroup\", ({ targets }) => {\n * console.log(\"onRenderGroup\", targets);\n * });\n */\n\n/**\n * `renderGroupEnd` event occurs at the end of all events in group.\n * @memberof Moveable\n * @event renderGroupEnd\n * @param {Moveable.OnRenderGroupEnd} - Parameters for the `renderGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupEnd\", ({ targets }) => {\n * console.log(\"onRenderGroupEnd\", targets);\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.\n * @memberof Moveable\n * @event scroll\n * @param {Moveable.OnScroll} - Parameters for the `scroll` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.\n * @memberof Moveable\n * @event scrollGroup\n * @param {Moveable.OnScrollGroup} - Parameters for the `scrollGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\ninterface Moveable extends MoveableGetterSetter {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n on(eventName: \"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: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n on(eventName: \"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: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n on(eventName: \"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: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n on(eventName: \"click\", handlerToAttach: (event: OnClick) => any): this;\n on(eventName: \"clickGroup\", handlerToAttach: (event: OnClickGroup) => any): this;\n\n on(eventName: \"scroll\", handlerToAttach: (event: OnScroll) => any): this;\n on(eventName: \"scrollGroup\", handlerToAttach: (event: OnScrollGroup) => any): this;\n\n on(eventName: \"renderStart\", handlerToAttach: (event: OnRenderStart) => any): this;\n on(eventName: \"render\", handlerToAttach: (event: OnRender) => any): this;\n on(eventName: \"renderEnd\", handlerToAttach: (event: OnRenderEnd) => any): this;\n on(eventName: \"renderGroupStart\", handlerToAttach: (event: OnRenderGroupStart) => any): this;\n on(eventName: \"renderGroup\", handlerToAttach: (event: OnRenderGroup) => any): this;\n on(eventName: \"renderGroupEnd\", handlerToAttach: (event: OnRenderGroupEnd) => any): this;\n\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n","import Moveable from \"./Moveable\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\n\n(Moveable as any).PROPERTIES = PROPERTIES;\n(Moveable as any).EVENTS = EVENTS;\n\nexport default Moveable;\n"],"names":["__extends","props","_super","_this","state","createPortal","h","Moveable","ref","parentElement","Component","PROPERTIES","EVENTS","options","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","tempElement","target","isArray","length","updateRect","getMoveable","isMoveableElement","dragStart","clientX","clientY","isInside","getRect","callback","innerMoveable","setState","updateTarget","off","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","_a","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;EAA2CA,gCAAA;;wBAGvC,CAAYC,KAAZ;gBACIC,WAAA,KAAA,EAAMD,KAAN,SADJ;;IAFOE,WAAA,GAAuB,EAAvB;IAIHA,KAAI,CAACC,KAAL,GAAaD,KAAI,CAACF,KAAlB;;;;;;gBAEG,GAAP;WACWI,mBAAY,CAACC,SAACC;MAASC,GAAG,EAAEA,kBAAG,CAAC,IAAD,EAAO,gBAAP;OAA8B,KAAKJ,OAAtD,EAAiE,KAAKA,KAAL,CAAWK,aAA5E,CAAnB;GADG;;sBAGX;EAV2CC,iBAA3C;;ACHO,IAAMC,UAAU,GAAiC,CACpD,WADoD,EACvC,WADuC,EAC1B,UAD0B,EACd,WADc,EAEpD,UAFoD,EAExC,WAFwC,EAE3B,WAF2B,EAEd,QAFc,EAEJ,QAFI,EAEM,MAFN,EAGpD,cAHoD,EAGpC,gBAHoC,EAIpD,eAJoD,EAInC,gBAJmC,EAIjB,WAJiB,EAKpD,UALoD,EAMpD,gBANoD,EAOpD,YAPoD,EAOtC,eAPsC,EAQpD,sBARoD,EAQ5B,oBAR4B,EAQN,mBARM,EASpD,QAToD,EAWpD,WAXoD,EAYpD,kBAZoD,EAapD,YAboD,EAcpD,mBAdoD,EAepD,iBAfoD,EAgBpD,iBAhBoD,EAiBpD,eAjBoD,CAAjD;AAmBP,AAAO,IAAMC,MAAM,GAAgC,CAC/C,WAD+C,EAE/C,MAF+C,EAG/C,SAH+C,EAI/C,aAJ+C,EAK/C,QAL+C,EAM/C,WAN+C,EAO/C,YAP+C,EAQ/C,OAR+C,EAS/C,UAT+C,EAU/C,aAV+C,EAW/C,QAX+C,EAY/C,WAZ+C,EAa/C,WAb+C,EAc/C,MAd+C,EAe/C,SAf+C,EAgB/C,YAhB+C,EAiB/C,OAjB+C,EAkB/C,UAlB+C,EAmB/C,gBAnB+C,EAoB/C,WApB+C,EAqB/C,cArB+C,EAsB/C,kBAtB+C,EAuB/C,aAvB+C,EAwB/C,gBAxB+C,EAyB/C,iBAzB+C,EA0B/C,YA1B+C,EA2B/C,eA3B+C,EA4B/C,kBA5B+C,EA6B/C,aA7B+C,EA8B/C,gBA9B+C,EA+B/C,iBA/B+C,EAgC/C,YAhC+C,EAiC/C,eAjC+C,EAkC/C,YAlC+C,EAoC/C,QApC+C,EAqC/C,aArC+C,EAuC/C,aAvC+C,EAwC/C,QAxC+C,EAyC/C,WAzC+C,EA0C/C,kBA1C+C,EA2C/C,aA3C+C,EA4C/C,gBA5C+C,CAA5C;;ACSP;;;;;;AAmBA;;;EAAuBZ,2BAAA;;;;;;mBAOnB,CAAYS,aAAZ,EAAqDI,OAArD;0BAAqD,EAAA;MAAAA,YAAA;;;gBACjDX,WAAA,KAAA,SADJ;;IALQC,iBAAA,GAAcW,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAd;;QAOEC,WAAW;MAAKC,SAAS,EAAER;OAAkBI,QAAnD;;QAEMK,MAAM,GAAQ,EAApB;IAEAN,MAAM,CAACO,OAAP,CAAe,UAAAC,IAAA;MACXF,MAAM,CAACG,cAAQ,CAAC,QAAMD,IAAP,CAAT,CAAN,GAAiC,UAACE,CAAD;eAAYnB,KAAI,CAACoB,OAAL,CAAaH,IAAb,EAAmBE,CAAnB,CAAA;OAA7C;KADJ;IAIAE,aAAM,CACFlB,SAACmB;MACGjB,GAAG,EAAEA,kBAAG,CAACL,KAAD,EAAO,eAAP;MACRM,aAAa,EAAEA;OACXO,aACAE,QALN,EAOFf,KAAI,CAACuB,WAPH,CAAN;QASMC,MAAM,GAAGX,WAAW,CAACW,MAA3B;;QACIC,aAAO,CAACD,MAAD,CAAP,IAAmBA,MAAM,CAACE,MAAP,GAAgB,CAAvC,EAA0C;MACtC1B,KAAI,CAAC2B,UAAL;;;;;;;;;;;;;;;;;;;;;;;2BAiBD,GAAP,UAAyBH,MAAzB;WACW,KAAKI,WAAL,GAAmBC,iBAAnB,CAAqCL,MAArC,CAAP;GADG;;;;;;;;;;;;;;oBAcA,GAAP;SACSI,WAAL,GAAmBD,UAAnB;GADG;;;;;;;;;;;;;;;;;mBAiBA,GAAP,UAAiBR,CAAjB;SACSS,WAAL,GAAmBE,SAAnB,CAA6BX,CAA7B;GADG;;;;;;;;;;;;;;;;;;;kBAoBA,GAAP,UAAgBY,OAAhB,EAAiCC,OAAjC;WACW,KAAKJ,WAAL,GAAmBK,QAAnB,CAA4BF,OAA5B,EAAqCC,OAArC,CAAP;GADG;;;;;;;;;;;;;iBAaA,GAAP;WACW,KAAKJ,WAAL,GAAmBM,OAAnB,EAAP;GADG;;;;;;;;;;;;;;;;;;kBAkBA,GAAP,UAAgBjC,KAAhB,EAAiDkC,QAAjD;SACSC,aAAL,CAAmBC,QAAnB,CAA4BpC,KAA5B,EAAmCkC,QAAnC;GADG;;;;;;;;;;;;;sBAaA,GAAP;SACSP,WAAL,GAAmBU,YAAnB;GADG;;;;;;;;;;;;iBAYA,GAAP;IACIjB,aAAM,CAAC,EAAD,EAAK,KAAKE,WAAV,CAAN;SACKgB,GAAL;SACKhB,WAAL,GAAmB,IAAnB;SACKa,aAAL,GAAqB,IAArB;GAJG;;qBAMC,GAAR;WACW,KAAKA,aAAL,CAAmBI,cAA1B;GADI;;EA9JNpC,QAAQ,eAdbqC,yBAAU,CAACjC,UAAD,EAAa,UAACkC,SAAD,EAAYC,QAAZ;IACpBC,MAAM,CAACC,cAAP,CAAsBH,SAAtB,EAAiCC,QAAjC,EAA2C;MACvCG,GAAG;eACQ,KAAKlB,WAAL,GAAmB9B,KAAnB,CAAyB6C,QAAzB,CAAP;OAFmC;MAIvCI,GAAG,YAACC;;;aACKX,QAAL,WACIY,GAACN,SAAD,GAAYK,SADhB;OALmC;MASvCE,UAAU,EAAE,IAT2B;MAUvCC,YAAY,EAAE;KAVlB;GADO,IAcL/C,SAAA;iBAiKN;EAjKuBgD,YAAvB;;AC9CChD,QAAgB,CAACI,UAAjB,GAA8BA,UAA9B;AACAJ,QAAgB,CAACK,MAAjB,GAA0BA,MAA1B;;;;"} \ No newline at end of file diff --git a/dist/moveable.esm.js b/dist/moveable.esm.js new file mode 100644 index 000000000..303056009 --- /dev/null +++ b/dist/moveable.esm.js @@ -0,0 +1,304 @@ +/* +Copyright (c) 2019 Daybrush +name: moveable +license: MIT +author: Daybrush +repository: git+https://github.com/daybrush/moveable.git +version: 0.12.0 +*/ +import EgComponent from '@egjs/component'; +import { ref, Properties } from 'framework-utils'; +import { h, Component, render } from 'preact'; +import { createPortal } from 'preact/compat'; +import Moveable$1 from 'preact-moveable'; +import { camelize, isArray } from '@daybrush/utils'; + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +var 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 createPortal(h(Moveable$1, __assign({ + ref: ref(this, "preactMoveable") + }, this.state)), this.state.parentElement); + }; + + return InnerMoveable; +}(Component); + +var PROPERTIES = ["draggable", "resizable", "scalable", "rotatable", "warpable", "pinchable", "snappable", "origin", "target", "edge", "throttleDrag", "throttleResize", "throttleScale", "throttleRotate", "keepRatio", "dragArea", "pinchThreshold", "snapCenter", "snapThreshold", "horizontalGuidelines", "verticalGuidelines", "elementGuidelines", "bounds", "className", "renderDirections", "scrollable", "getScrollPosition", "scrollContainer", "scrollThreshold", "baseDirection"]; +var EVENTS = ["dragStart", "drag", "dragEnd", "resizeStart", "resize", "resizeEnd", "scaleStart", "scale", "scaleEnd", "rotateStart", "rotate", "rotateEnd", "warpStart", "warp", "warpEnd", "pinchStart", "pinch", "pinchEnd", "dragGroupStart", "dragGroup", "dragGroupEnd", "resizeGroupStart", "resizeGroup", "resizeGroupEnd", "scaleGroupStart", "scaleGroup", "scaleGroupEnd", "rotateGroupStart", "rotateGroup", "rotateGroupEnd", "pinchGroupStart", "pinchGroup", "pinchGroupEnd", "clickGroup", "scroll", "scrollGroup", "renderStart", "render", "renderEnd", "renderGroupStart", "renderGroup", "renderGroupEnd"]; + +/** + * Moveable is Draggable! Resizable! Scalable! Rotatable! + * @sort 1 + * @extends eg.Component + */ + +var Moveable = +/*#__PURE__*/ +function (_super) { + __extends(Moveable, _super); + /** + * + */ + + + function Moveable(parentElement, options) { + if (options === void 0) { + options = {}; + } + + var _this = _super.call(this) || this; + + _this.tempElement = document.createElement("div"); + + var nextOptions = __assign({ + container: parentElement + }, options); + + var events = {}; + EVENTS.forEach(function (name) { + events[camelize("on " + name)] = function (e) { + return _this.trigger(name, e); + }; + }); + render(h(InnerMoveable, __assign({ + ref: ref(_this, "innerMoveable"), + parentElement: parentElement + }, nextOptions, events)), _this.tempElement); + var target = nextOptions.target; + + if (isArray(target) && target.length > 1) { + _this.updateRect(); + } + + return _this; + } + /** + * Check if the target is an element included in the moveable. + * @param - the target + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("click", e => { + * if (!moveable.isMoveableElement(e.target)) { + * moveable.target = e.target; + * } + * }); + */ + + + var __proto = Moveable.prototype; + + __proto.isMoveableElement = function (target) { + return this.getMoveable().isMoveableElement(target); + }; + /** + * If the width, height, left, and top of all elements change, update the shape of the moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("resize", e => { + * moveable.updateRect(); + * }); + */ + + + __proto.updateRect = function () { + this.getMoveable().updateRect(); + }; + /** + * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart) + * @param - external `MouseEvent`or `TouchEvent` + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * document.body.addEventListener("mousedown", e => { + * if (!moveable.isMoveableElement(e.target)) { + * moveable.dragStart(e); + * } + * }); + */ + + + __proto.dragStart = function (e) { + this.getMoveable().dragStart(e); + }; + /** + * Whether the coordinates are inside Moveable + * @param - x coordinate + * @param - y coordinate + * @return - True if the coordinate is in moveable or false + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * document.body.addEventListener("mousedown", e => { + * if (moveable.isInside(e.clientX, e.clientY)) { + * console.log("inside"); + * } + * }); + */ + + + __proto.isInside = function (clientX, clientY) { + return this.getMoveable().isInside(clientX, clientY); + }; + /** + * You can get the vertex information, position and offset size information of the target based on the container. + * @return - The Rect Info + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * const rectInfo = moveable.getRect(); + */ + + + __proto.getRect = function () { + return this.getMoveable().getRect(); + }; + /** + * You can change options or properties dynamically. + * @param - options or properties + * @param - After the change, the callback function is executed when the update is completed. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.setState({ + * target: document.querySelector(".target"), + * }, () => { + * moveable.dragStart(e); + * }) + */ + + + __proto.setState = function (state, callback) { + this.innerMoveable.setState(state, callback); + }; + /** + * If the width, height, left, and top of the only target change, update the shape of the moveable. + * @param - the values of x and y to move moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.updateTarget(); + */ + + + __proto.updateTarget = function () { + this.getMoveable().updateTarget(); + }; + /** + * Remove the Moveable object and the events. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.destroy(); + */ + + + __proto.destroy = function () { + render("", this.tempElement); + this.off(); + this.tempElement = null; + this.innerMoveable = null; + }; + + __proto.getMoveable = function () { + return this.innerMoveable.preactMoveable; + }; + + Moveable = __decorate([Properties(PROPERTIES, function (prototype, property) { + Object.defineProperty(prototype, property, { + get: function () { + return this.getMoveable().props[property]; + }, + set: function (value) { + var _a; + + this.setState((_a = {}, _a[property] = value, _a)); + }, + enumerable: true, + configurable: true + }); + })], Moveable); + return Moveable; +}(EgComponent); + +export default Moveable; +export { EVENTS, PROPERTIES }; +//# sourceMappingURL=moveable.esm.js.map diff --git a/dist/moveable.esm.js.map b/dist/moveable.esm.js.map new file mode 100644 index 000000000..9d1202bdb --- /dev/null +++ b/dist/moveable.esm.js.map @@ -0,0 +1 @@ +{"version":3,"file":"moveable.esm.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx"],"sourcesContent":["import { Component, h } from \"preact\";\nimport { createPortal } from \"preact/compat\";\nimport Moveable, { MoveableProps, PreactMoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component {\n public state: MoveableProps = {};\n public preactMoveable: PreactMoveableInterface;\n constructor(props: MoveableProps) {\n super(props);\n this.state = this.props;\n }\n public render() {\n return createPortal(, this.state.parentElement);\n }\n}\n","import { MoveableEvents, MoveableOptions } from \"./types\";\n\nexport const PROPERTIES: Array = [\n \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n \"warpable\", \"pinchable\", \"snappable\", \"origin\", \"target\", \"edge\",\n \"throttleDrag\", \"throttleResize\",\n \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n \"dragArea\",\n \"pinchThreshold\",\n \"snapCenter\", \"snapThreshold\",\n \"horizontalGuidelines\", \"verticalGuidelines\", \"elementGuidelines\",\n \"bounds\",\n\n \"className\",\n \"renderDirections\",\n \"scrollable\",\n \"getScrollPosition\",\n \"scrollContainer\",\n \"scrollThreshold\",\n \"baseDirection\",\n];\nexport const EVENTS: Array = [\n \"dragStart\",\n \"drag\",\n \"dragEnd\",\n \"resizeStart\",\n \"resize\",\n \"resizeEnd\",\n \"scaleStart\",\n \"scale\",\n \"scaleEnd\",\n \"rotateStart\",\n \"rotate\",\n \"rotateEnd\",\n \"warpStart\",\n \"warp\",\n \"warpEnd\",\n \"pinchStart\",\n \"pinch\",\n \"pinchEnd\",\n \"dragGroupStart\",\n \"dragGroup\",\n \"dragGroupEnd\",\n \"resizeGroupStart\",\n \"resizeGroup\",\n \"resizeGroupEnd\",\n \"scaleGroupStart\",\n \"scaleGroup\",\n \"scaleGroupEnd\",\n \"rotateGroupStart\",\n \"rotateGroup\",\n \"rotateGroupEnd\",\n \"pinchGroupStart\",\n \"pinchGroup\",\n \"pinchGroupEnd\",\n \"clickGroup\",\n\n \"scroll\",\n \"scrollGroup\",\n\n \"renderStart\",\n \"render\",\n \"renderEnd\",\n \"renderGroupStart\",\n \"renderGroup\",\n \"renderGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n OnDragStart, OnDrag, OnResize, OnResizeStart,\n OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart, OnClickGroup,\n MoveableInterface,\n RectInfo,\n OnClick,\n OnScroll,\n OnScrollGroup,\n OnRenderStart,\n OnRender,\n OnRenderEnd,\n OnRenderGroupStart,\n OnRenderGroup,\n OnRenderGroupEnd,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n Object.defineProperty(prototype, property, {\n get() {\n return this.getMoveable().props[property];\n },\n set(value) {\n this.setState({\n [property]: value,\n });\n },\n enumerable: true,\n configurable: true,\n });\n})\nclass Moveable extends EgComponent implements MoveableInterface {\n private innerMoveable!: InnerMoveable;\n private tempElement = document.createElement(\"div\");\n\n /**\n *\n */\n constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n super();\n const nextOptions = { container: parentElement, ...options };\n\n const events: any = {};\n\n EVENTS.forEach(name => {\n events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n });\n\n render(\n ,\n this.tempElement,\n );\n const target = nextOptions.target!;\n if (isArray(target) && target.length > 1) {\n this.updateRect();\n }\n }\n /**\n * Check if the target is an element included in the moveable.\n * @param - the target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"click\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.target = e.target;\n * }\n * });\n */\n public isMoveableElement(target: HTMLElement | SVGElement) {\n return this.getMoveable().isMoveableElement(target);\n }\n /**\n * If the width, height, left, and top of all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)\n * @param - external `MouseEvent`or `TouchEvent`\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.dragStart(e);\n * }\n * });\n */\n public dragStart(e: MouseEvent | TouchEvent): void {\n this.getMoveable().dragStart(e);\n }\n\n /**\n * Whether the coordinates are inside Moveable\n * @param - x coordinate\n * @param - y coordinate\n * @return - True if the coordinate is in moveable or false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (moveable.isInside(e.clientX, e.clientY)) {\n * console.log(\"inside\");\n * }\n * });\n */\n public isInside(clientX: number, clientY: number): boolean {\n return this.getMoveable().isInside(clientX, clientY);\n }\n /**\n * You can get the vertex information, position and offset size information of the target based on the container.\n * @return - The Rect Info\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * const rectInfo = moveable.getRect();\n */\n public getRect(): RectInfo {\n return this.getMoveable().getRect();\n }\n /**\n * You can change options or properties dynamically.\n * @param - options or properties\n * @param - After the change, the callback function is executed when the update is completed.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.setState({\n * target: document.querySelector(\".target\"),\n * }, () => {\n * moveable.dragStart(e);\n * })\n */\n public setState(state: Partial, callback?: () => any) {\n this.innerMoveable.setState(state, callback);\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n /**\n * Remove the Moveable object and the events.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.destroy();\n */\n public destroy() {\n render(\"\", this.tempElement);\n this.off();\n this.tempElement = null;\n this.innerMoveable = null;\n }\n private getMoveable() {\n return this.innerMoveable.preactMoveable;\n }\n}\n/**\n * Whether or not the origin controlbox will be visible or not (default: true)\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged. (default: false)\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized. (default: false)\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled. (default: false)\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated. (default: false)\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped. (default: false)\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height. (default: false)\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * throttle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n\n /**\n * Whether or not target can be snapped to the guideline. (default: false)\n * @name Moveable#snappable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snappable = true;\n */\n/**\n * When you drag, make the snap in the center of the target. (default: false)\n * @name Moveable#snapCenter\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapCenter = true;\n */\n\n/**\n * Distance value that can snap to guidelines. (default: 5)\n * @name Moveable#snapThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapThreshold = 5;\n */\n\n/**\n * Add guidelines in the horizontal direction. (default: [])\n * @name Moveable#horizontalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.horizontalGuidlines = [100, 200, 500];\n */\n\n/**\n * Add guidelines in the vertical direction. (default: [])\n * @name Moveable#\n * moveable.verticalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.verticalGuidlines = [100, 200, 500];\n */\n/**\n * Add guidelines for the element. (default: [])\n * @name Moveable#elementGuidelines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.elementGuidelines = [\n * document.querySelector(\".element\"),\n * ];\n */\n/**\n * You can set up boundaries. (default: [])\n * @name Moveable#bounds\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};\n */\n/**\n * Add an event to the moveable area instead of the target for stopPropagation. (default: false)\n * @name Moveable#dragArea\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * dragArea: false,\n * });\n */\n/**\n * You can specify the position of the rotation. (default: \"top\")\n * @name Moveable#rotationPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotationPosition: \"top\",\n * });\n *\n * moveable.rotationPosition = \"bottom\"\n */\n/**\n * You can specify the className of the moveable controlbox. (default: \"\")\n * @name Moveable#className\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * className: \"\",\n * });\n *\n * moveable.className = \"moveable1\";\n */\n/**\n * Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n * @name Moveable#renderDirections\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n * });\n *\n * moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n */\n\n /**\n * Set target's base direciton using top, left, right, bottom\n * (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])\n * @name Moveable#baseDirection\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * baseDirection: [-1, -1]\n * });\n *\n * moveable.baseDirection = [-1, -1];\n */\n\n /**\n * Sets the initial rotation of the group. (default 0)\n * @name Moveable#defaultGroupRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * defaultGroupRotate: 0,\n * });\n *\n * moveable.defaultGroupRotate = 40;\n */\n\n/**\n * Whether or not target can be scrolled to the scroll container (default: false)\n * @name Moveable#scrollable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n *\n * moveable.scrollable = true;\n */\n\n/**\n * The container to which scroll is applied (default: container)\n * @name Moveable#scrollContainer\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n/**\n * Expand the range of the scroll check area. (default: 0)\n * @name Moveable#scrollThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n\n/**\n * Sets a function to get the scroll position. (default: Function)\n * @name Moveable#getScrollPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\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 /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n * console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n * console.log(\"onDragGroup\", targets);\n * events.forEach(ev => {\n * // drag event\n * console.log(\"onDrag left, top\", ev.left, ev.top);\n * // ev.target!.style.left = `${ev.left}px`;\n * // ev.target!.style.top = `${ev.top}px`;\n * console.log(\"onDrag translate\", ev.dist);\n * ev.target!.style.transform = ev.transform;)\n * });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n * target.style.width = `${e.width}px`;\n * target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n* console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n * 1, 0, 0, 0,\n * 0, 1, 0, 0,\n * 0, 0, 1, 0,\n * 0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n * // target.style.transform = transform;\n * matrix = multiply(matrix, delta);\n * target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n * console.log(target);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n * console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n * console.log(\"onResizeGroup\", targets);\n * events.forEach(ev => {\n * const offset = [\n * direction[0] < 0 ? -ev.delta[0] : 0,\n * direction[1] < 0 ? -ev.delta[1] : 0,\n * ];\n * // ev.drag is a drag event that occurs when the group resize.\n * const left = offset[0] + ev.drag.beforeDist[0];\n * const top = offset[1] + ev.drag.beforeDist[1];\n * const width = ev.width;\n * const top = ev.top;\n * });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n * console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n * console.log(\"onScaleGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group scale.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const scaleX = ev.scale[0];\n * const scaleY = ev.scale[1];\n * });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n * console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n * console.log(\"onRotateGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group rotate.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const deg = ev.beforeDist;\n * });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n * console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n/**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n * console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When you click on the element, the `click` event is called.\n * @memberof Moveable\n * @event click\n * @param {Moveable.OnClick} - Parameters for the `click` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"click\", ({ hasTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", target, hasTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * When you click on the element inside the group, the `clickGroup` event is called.\n * @memberof Moveable\n * @event clickGroup\n * @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"clickGroup\", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", inputTarget, isTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * `renderStart` event occurs at the first start of all events.\n * @memberof Moveable\n * @event renderStart\n * @param {Moveable.OnRenderStart} - Parameters for the `renderStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderStart\", ({ target }) => {\n * console.log(\"onRenderStart\", target);\n * });\n */\n\n/**\n * `render` event occurs before the target is drawn on the screen.\n * @memberof Moveable\n * @event render\n * @param {Moveable.OnRender} - Parameters for the `render` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"render\", ({ target }) => {\n * console.log(\"onRender\", target);\n * });\n */\n\n/**\n * `renderEnd` event occurs at the end of all events.\n * @memberof Moveable\n * @event renderEnd\n * @param {Moveable.OnRenderEnd} - Parameters for the `renderEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderEnd\", ({ target }) => {\n * console.log(\"onRenderEnd\", target);\n * });\n */\n\n/**\n * `renderGroupStart` event occurs at the first start of all events in group.\n * @memberof Moveable\n * @event renderGroupStart\n * @param {Moveable.OnRenderGroupStart} - Parameters for the `renderGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupStart\", ({ targets }) => {\n * console.log(\"onRenderGroupStart\", targets);\n * });\n */\n\n/**\n * `renderGroup` event occurs before the target is drawn on the screen in group.\n * @memberof Moveable\n * @event renderGroup\n * @param {Moveable.OnRenderGroup} - Parameters for the `renderGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroup\", ({ targets }) => {\n * console.log(\"onRenderGroup\", targets);\n * });\n */\n\n/**\n * `renderGroupEnd` event occurs at the end of all events in group.\n * @memberof Moveable\n * @event renderGroupEnd\n * @param {Moveable.OnRenderGroupEnd} - Parameters for the `renderGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupEnd\", ({ targets }) => {\n * console.log(\"onRenderGroupEnd\", targets);\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.\n * @memberof Moveable\n * @event scroll\n * @param {Moveable.OnScroll} - Parameters for the `scroll` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.\n * @memberof Moveable\n * @event scrollGroup\n * @param {Moveable.OnScrollGroup} - Parameters for the `scrollGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\ninterface Moveable extends MoveableGetterSetter {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n on(eventName: \"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: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n on(eventName: \"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: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n on(eventName: \"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: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n on(eventName: \"click\", handlerToAttach: (event: OnClick) => any): this;\n on(eventName: \"clickGroup\", handlerToAttach: (event: OnClickGroup) => any): this;\n\n on(eventName: \"scroll\", handlerToAttach: (event: OnScroll) => any): this;\n on(eventName: \"scrollGroup\", handlerToAttach: (event: OnScrollGroup) => any): this;\n\n on(eventName: \"renderStart\", handlerToAttach: (event: OnRenderStart) => any): this;\n on(eventName: \"render\", handlerToAttach: (event: OnRender) => any): this;\n on(eventName: \"renderEnd\", handlerToAttach: (event: OnRenderEnd) => any): this;\n on(eventName: \"renderGroupStart\", handlerToAttach: (event: OnRenderGroupStart) => any): this;\n on(eventName: \"renderGroup\", handlerToAttach: (event: OnRenderGroup) => any): this;\n on(eventName: \"renderGroupEnd\", handlerToAttach: (event: OnRenderGroupEnd) => any): this;\n\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n"],"names":["__extends","props","_super","_this","state","createPortal","h","Moveable","ref","parentElement","Component","PROPERTIES","EVENTS","options","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","tempElement","target","isArray","length","updateRect","getMoveable","isMoveableElement","dragStart","clientX","clientY","isInside","getRect","callback","innerMoveable","setState","updateTarget","off","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","_a","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;EAA2CA,gCAAA;;wBAGvC,CAAYC,KAAZ;gBACIC,WAAA,KAAA,EAAMD,KAAN,SADJ;;IAFOE,WAAA,GAAuB,EAAvB;IAIHA,KAAI,CAACC,KAAL,GAAaD,KAAI,CAACF,KAAlB;;;;;;gBAEG,GAAP;WACWI,YAAY,CAACC,EAACC;MAASC,GAAG,EAAEA,GAAG,CAAC,IAAD,EAAO,gBAAP;OAA8B,KAAKJ,OAAtD,EAAiE,KAAKA,KAAL,CAAWK,aAA5E,CAAnB;GADG;;sBAGX;EAV2CC,UAA3C;;ICHaC,UAAU,GAAiC,CACpD,WADoD,EACvC,WADuC,EAC1B,UAD0B,EACd,WADc,EAEpD,UAFoD,EAExC,WAFwC,EAE3B,WAF2B,EAEd,QAFc,EAEJ,QAFI,EAEM,MAFN,EAGpD,cAHoD,EAGpC,gBAHoC,EAIpD,eAJoD,EAInC,gBAJmC,EAIjB,WAJiB,EAKpD,UALoD,EAMpD,gBANoD,EAOpD,YAPoD,EAOtC,eAPsC,EAQpD,sBARoD,EAQ5B,oBAR4B,EAQN,mBARM,EASpD,QAToD,EAWpD,WAXoD,EAYpD,kBAZoD,EAapD,YAboD,EAcpD,mBAdoD,EAepD,iBAfoD,EAgBpD,iBAhBoD,EAiBpD,eAjBoD,CAAjD;AAmBP,IAAaC,MAAM,GAAgC,CAC/C,WAD+C,EAE/C,MAF+C,EAG/C,SAH+C,EAI/C,aAJ+C,EAK/C,QAL+C,EAM/C,WAN+C,EAO/C,YAP+C,EAQ/C,OAR+C,EAS/C,UAT+C,EAU/C,aAV+C,EAW/C,QAX+C,EAY/C,WAZ+C,EAa/C,WAb+C,EAc/C,MAd+C,EAe/C,SAf+C,EAgB/C,YAhB+C,EAiB/C,OAjB+C,EAkB/C,UAlB+C,EAmB/C,gBAnB+C,EAoB/C,WApB+C,EAqB/C,cArB+C,EAsB/C,kBAtB+C,EAuB/C,aAvB+C,EAwB/C,gBAxB+C,EAyB/C,iBAzB+C,EA0B/C,YA1B+C,EA2B/C,eA3B+C,EA4B/C,kBA5B+C,EA6B/C,aA7B+C,EA8B/C,gBA9B+C,EA+B/C,iBA/B+C,EAgC/C,YAhC+C,EAiC/C,eAjC+C,EAkC/C,YAlC+C,EAoC/C,QApC+C,EAqC/C,aArC+C,EAuC/C,aAvC+C,EAwC/C,QAxC+C,EAyC/C,WAzC+C,EA0C/C,kBA1C+C,EA2C/C,aA3C+C,EA4C/C,gBA5C+C,CAA5C;;ACSP;;;;;;AAmBA;;;EAAuBZ,2BAAA;;;;;;mBAOnB,CAAYS,aAAZ,EAAqDI,OAArD;0BAAqD,EAAA;MAAAA,YAAA;;;gBACjDX,WAAA,KAAA,SADJ;;IALQC,iBAAA,GAAcW,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAd;;QAOEC,WAAW;MAAKC,SAAS,EAAER;OAAkBI,QAAnD;;QAEMK,MAAM,GAAQ,EAApB;IAEAN,MAAM,CAACO,OAAP,CAAe,UAAAC,IAAA;MACXF,MAAM,CAACG,QAAQ,CAAC,QAAMD,IAAP,CAAT,CAAN,GAAiC,UAACE,CAAD;eAAYnB,KAAI,CAACoB,OAAL,CAAaH,IAAb,EAAmBE,CAAnB,CAAA;OAA7C;KADJ;IAIAE,MAAM,CACFlB,EAACmB;MACGjB,GAAG,EAAEA,GAAG,CAACL,KAAD,EAAO,eAAP;MACRM,aAAa,EAAEA;OACXO,aACAE,QALN,EAOFf,KAAI,CAACuB,WAPH,CAAN;QASMC,MAAM,GAAGX,WAAW,CAACW,MAA3B;;QACIC,OAAO,CAACD,MAAD,CAAP,IAAmBA,MAAM,CAACE,MAAP,GAAgB,CAAvC,EAA0C;MACtC1B,KAAI,CAAC2B,UAAL;;;;;;;;;;;;;;;;;;;;;;;2BAiBD,GAAP,UAAyBH,MAAzB;WACW,KAAKI,WAAL,GAAmBC,iBAAnB,CAAqCL,MAArC,CAAP;GADG;;;;;;;;;;;;;;oBAcA,GAAP;SACSI,WAAL,GAAmBD,UAAnB;GADG;;;;;;;;;;;;;;;;;mBAiBA,GAAP,UAAiBR,CAAjB;SACSS,WAAL,GAAmBE,SAAnB,CAA6BX,CAA7B;GADG;;;;;;;;;;;;;;;;;;;kBAoBA,GAAP,UAAgBY,OAAhB,EAAiCC,OAAjC;WACW,KAAKJ,WAAL,GAAmBK,QAAnB,CAA4BF,OAA5B,EAAqCC,OAArC,CAAP;GADG;;;;;;;;;;;;;iBAaA,GAAP;WACW,KAAKJ,WAAL,GAAmBM,OAAnB,EAAP;GADG;;;;;;;;;;;;;;;;;;kBAkBA,GAAP,UAAgBjC,KAAhB,EAAiDkC,QAAjD;SACSC,aAAL,CAAmBC,QAAnB,CAA4BpC,KAA5B,EAAmCkC,QAAnC;GADG;;;;;;;;;;;;;sBAaA,GAAP;SACSP,WAAL,GAAmBU,YAAnB;GADG;;;;;;;;;;;;iBAYA,GAAP;IACIjB,MAAM,CAAC,EAAD,EAAK,KAAKE,WAAV,CAAN;SACKgB,GAAL;SACKhB,WAAL,GAAmB,IAAnB;SACKa,aAAL,GAAqB,IAArB;GAJG;;qBAMC,GAAR;WACW,KAAKA,aAAL,CAAmBI,cAA1B;GADI;;EA9JNpC,QAAQ,eAdbqC,UAAU,CAACjC,UAAD,EAAa,UAACkC,SAAD,EAAYC,QAAZ;IACpBC,MAAM,CAACC,cAAP,CAAsBH,SAAtB,EAAiCC,QAAjC,EAA2C;MACvCG,GAAG;eACQ,KAAKlB,WAAL,GAAmB9B,KAAnB,CAAyB6C,QAAzB,CAAP;OAFmC;MAIvCI,GAAG,YAACC;;;aACKX,QAAL,WACIY,GAACN,SAAD,GAAYK,SADhB;OALmC;MASvCE,UAAU,EAAE,IAT2B;MAUvCC,YAAY,EAAE;KAVlB;GADO,IAcL/C,SAAA;iBAiKN;EAjKuBgD,YAAvB;;;;;"} \ No newline at end of file diff --git a/dist/moveable.js b/dist/moveable.js new file mode 100644 index 000000000..72b8091c2 --- /dev/null +++ b/dist/moveable.js @@ -0,0 +1,7495 @@ +/* +Copyright (c) 2019 Daybrush +name: moveable +license: MIT +author: Daybrush +repository: git+https://github.com/daybrush/moveable.git +version: 0.12.0 +*/ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.Moveable = factory()); +}(this, function () { 'use strict'; + + /*! ***************************************************************************** + Copyright (c) Microsoft Corporation. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); you may not use + this file except in compliance with the License. You may obtain a copy of the + License at http://www.apache.org/licenses/LICENSE-2.0 + + THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED + WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, + MERCHANTABLITY OR NON-INFRINGEMENT. + + See the Apache Version 2.0 License for specific language governing permissions + and limitations under the License. + ***************************************************************************** */ + /* global Reflect, Promise */ + + var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + + function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + } + + var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); + }; + + function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; + } + + /* + Copyright (c) 2017 NAVER Corp. + @egjs/component project is licensed under the MIT license + + @egjs/component JavaScript library + https://naver.github.io/egjs-component + + @version 2.1.2 + */ + /** + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ + function isUndefined(value) { + return typeof value === "undefined"; + } + /** + * A class used to manage events in a component + * @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스 + * @alias eg.Component + */ + + + var Component = + /*#__PURE__*/ + function () { + var Component = + /*#__PURE__*/ + function () { + /** + * Version info string + * @ko 버전정보 문자열 + * @name VERSION + * @static + * @type {String} + * @example + * eg.Component.VERSION; // ex) 2.0.0 + * @memberof eg.Component + */ + + /** + * @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"} + */ + function Component() { + this._eventHandler = {}; + this.options = {}; + } + /** + * Triggers a custom event. + * @ko 커스텀 이벤트를 발생시킨다 + * @param {String} eventName The name of the custom event to be triggered 발생할 커스텀 이벤트의 이름 + * @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.2.1 + */ + function prefixNames(prefix) { + var classNames = []; + + for (var _i = 1; _i < arguments.length; _i++) { + classNames[_i - 1] = arguments[_i]; + } + + return classNames.map(function (className) { + return className.split(" ").map(function (name) { + return name ? "" + prefix + name : ""; + }).join(" "); + }).join(" "); + } + function prefixCSS(prefix, css) { + return css.replace(/\.([^{,\s\d.]+)/g, "." + prefix + "$1"); + } + /* react */ + + function ref(target, name) { + return function (e) { + e && (target[name] = e); + }; + } + function refs(target, name, i) { + return function (e) { + e && (target[name][i] = e); + }; + } + /* Class Decorator */ + + function Properties(properties, action) { + return function (component) { + var prototype = component.prototype; + properties.forEach(function (property) { + action(prototype, property); + }); + }; + } + + var n,u,i,t,o,f,r={},e=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function s(n,l){for(var u in l)n[u]=l[u];return n}function a(n){var l=n.parentNode;l&&l.removeChild(n);}function h(n,l,u){var i,t,o,f,r=arguments;if(l=s({},l),arguments.length>3)for(u=[u],i=3;i2&&(l.children=e.slice.call(arguments,2)),v(n.type,l,l.key||n.key,l.ref||n.ref)}function M(n){var l={},u={__c:"__cC"+f++,__p:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var i,t=this;return this.getChildContext||(i=[],this.getChildContext=function(){return l[u.__c]=t,l},this.shouldComponentUpdate=function(l){n.value!==l.value&&i.some(function(n){n.context=l.value,g(n);});},this.sub=function(n){i.push(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){i.splice(i.indexOf(n),1),l&&l.call(n);};}),n.children}};return u.Consumer.contextType=u,u}n={},y.prototype.setState=function(n,l){var u=this.__s!==this.state&&this.__s||(this.__s=s({},this.state));("function"!=typeof n||(n=n(u,this.props)))&&s(u,n),null!=n&&this.__v&&(this.__e=!1,l&&this.__h.push(l),g(this));},y.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),g(this));},y.prototype.render=d,u=[],i="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,t=n.debounceRendering,n.__e=function(n,l,u){for(var i;l=l.__p;)if((i=l.__c)&&!i.__p)try{if(i.constructor&&null!=i.constructor.getDerivedStateFromError)i.setState(i.constructor.getDerivedStateFromError(n));else{if(null==i.componentDidCatch)continue;i.componentDidCatch(n);}return g(i.__E=i)}catch(l){n=l;}throw n},o=r,f=0; + + var t$1,r$1,u$1=[],i$1=n.__r;n.__r=function(n){i$1&&i$1(n),t$1=0,(r$1=n.__c).__H&&(r$1.__H.t.forEach(g$1),r$1.__H.t.forEach(q),r$1.__H.t=[]);};var o$1=n.diffed;n.diffed=function(n){o$1&&o$1(n);var t=n.__c;if(t){var r=t.__H;r&&r.t.length&&A$1(u$1.push(t));}};var f$1=n.__c;n.__c=function(n,t){t.some(function(n){n.__h.forEach(g$1),n.__h=n.__h.filter(function(n){return !n.u||q(n)});}),f$1&&f$1(n,t);};var c$1=n.unmount;function e$1(t){n.__h&&n.__h(r$1);var u=r$1.__H||(r$1.__H={i:[],t:[]});return t>=u.i.length&&u.i.push({}),u.i[t]}function a$1(n){return v$1(E,n)}function v$1(n,u,i){var o=e$1(t$1++);return o.__c||(o.__c=r$1,o.u=[i?i(u):E(void 0,u),function(t){var r=n(o.u[0],t);o.u[0]!==r&&(o.u[0]=r,o.__c.setState({}));}]),o.u}function m$1(n,u){var i=e$1(t$1++);x$1(i.o,u)&&(i.u=n,i.o=u,r$1.__H.t.push(i));}function p$1(n,u){var i=e$1(t$1++);x$1(i.o,u)&&(i.u=n,i.o=u,r$1.__h.push(i));}function l(n){return s$1(function(){return {current:n}},[])}function d$1(n,t,r){p$1(function(){"function"==typeof n?n(t()):n&&(n.current=t());},null==r?r:r.concat(n));}function s$1(n,r){var u=e$1(t$1++);return x$1(u.o,r)?(u.o=r,u.v=n,u.u=n()):u.u}function y$1(n,t){return s$1(function(){return n},t)}function T$1(n){var u=r$1.context[n.__c];if(!u)return n.__p;var i=e$1(t$1++);return null==i.u&&(i.u=!0,u.sub(r$1)),u.props.value}function w$1(t,r){n.useDebugValue&&n.useDebugValue(r?r(t):t);}n.unmount=function(n){c$1&&c$1(n);var t=n.__c;if(t){var r=t.__H;r&&r.i.forEach(function(n){return n.m&&n.m()});}};var A$1=function(){};function F(){u$1.some(function(n){n.__P&&(n.__H.t.forEach(g$1),n.__H.t.forEach(q),n.__H.t=[]);}),u$1=[];}if("undefined"!=typeof window){var _$1=n.requestAnimationFrame;A$1=function(t){1!==t&&_$1===n.requestAnimationFrame||((_$1=n.requestAnimationFrame)||function(n){var t=function(){clearTimeout(r),cancelAnimationFrame(u),setTimeout(n);},r=setTimeout(t,100),u=requestAnimationFrame(t);})(F);};}function g$1(n){n.m&&n.m();}function q(n){var t=n.u();"function"==typeof t&&(n.m=t);}function x$1(n,t){return !n||t.some(function(t,r){return t!==n[r]})}function E(n,t){return "function"==typeof t?t(n):t} + + function E$1(n){var t=n.parentNode;t&&t.removeChild(n);}var _$2=n.__e;function k$1(n){this.__u=[],this.__f=n.fallback;}function w$2(n){var t,e,r;function o(o){if(t||(t=n()).then(function(n){e=n.default;},function(n){r=n;}),r)throw r;if(!e)throw t;return h(e,o)}return o.displayName="Lazy",o.t=!0,o}n.__e=function(n,t,e){if(n.then&&e)for(var r,o=t;o=o.__p;)if((r=o.__c)&&r.o)return e&&(t.__e=e.__e,t.__k=e.__k),void r.o(n);_$2(n,t,e);},(k$1.prototype=new y).o=function(n){var t=this;t.__u.push(n);var e=function(){t.__u[t.__u.indexOf(n)]=t.__u[t.__u.length-1],t.__u.pop(),0==t.__u.length&&(t.__f&&A(t.__f),t.__v.__e=null,t.__v.__k=t.state.u,t.setState({u:null}));};null==t.state.u&&(t.__f=t.__f&&L(t.__f),t.setState({u:t.__v.__k}),function n(t){for(var e=0;e -1; + } + + function getIdentityStringFromArray(rules, defaultStrings) { + var matchedRule = filter(rules, function (rule) { + return isMatched(UA, rule.criteria); + })[0]; + + return matchedRule && matchedRule.identity || defaultStrings.name; + } + + function getRule(rules, targetIdentity) { + return filter(rules, function (rule) { + var criteria = rule.criteria; + var identityMatched = new RegExp(rule.identity, "i").test(targetIdentity); + + if (criteria ? identityMatched && isMatched(UA, criteria) : identityMatched) { + return true; + } else { + return false; + } + })[0]; + } + + function getBrowserName() { + return getIdentityStringFromArray(parseRules.browser, parseRules.defaultString.browser); + } + + function getBrowserRule(browserName) { + var rule = getRule(parseRules.browser, browserName); + + if (!rule) { + rule = { + criteria: browserName, + versionSearch: browserName, + identity: browserName + }; + } + + return rule; + } + + function extractBrowserVersion(versionToken, ua) { + var browserVersion = parseRules.defaultString.browser.version; + var versionRegexResult = new RegExp("(" + versionToken + ")", "i").exec(ua); + + if (!versionRegexResult) { + return browserVersion; + } + + var versionTokenIndex = versionRegexResult.index; + var verTkn = versionRegexResult[0]; + + if (versionTokenIndex > -1) { + var versionIndex = versionTokenIndex + verTkn.length + 1; + + browserVersion = ua.substring(versionIndex).split(" ")[0].replace(/_/g, ".").replace(/;|\)/g, ""); + } + return browserVersion; + } + + function getBrowserVersion(browserName) { + if (!browserName) { + return undefined; + } + + // console.log(browserRule); + // const versionToken = browserRule ? browserRule.versionSearch : browserName; + var browserRule = getBrowserRule(browserName); + var versionToken = browserRule.versionSearch || browserName; + var browserVersion = extractBrowserVersion(versionToken, UA); + + return browserVersion; + } + + function isWebview() { + var webviewRules = parseRules.webview; + var browserVersion = void 0; + + return some(filter(webviewRules, function (rule) { + return isMatched(UA, rule.criteria); + }), function (rule) { + browserVersion = extractBrowserVersion(rule.browserVersionSearch, UA); + if (isMatched(UA, rule.webviewToken) || isMatched(browserVersion, rule.webviewBrowserVersion)) { + return true; + } else { + return false; + } + }); + } + + function getOSRule(osName) { + return getRule(parseRules.os, osName); + } + + function getOsName() { + return getIdentityStringFromArray(parseRules.os, parseRules.defaultString.os); + } + + function getOsVersion(osName) { + var osRule = getOSRule(osName) || {}; + var defaultOSVersion = parseRules.defaultString.os.version; + var osVersion = void 0; + + if (!osName) { + return undefined; + } + if (osRule.versionAlias) { + return osRule.versionAlias; + } + var osVersionToken = osRule.versionSearch || osName; + var osVersionRegex = new RegExp("(" + osVersionToken + ")\\s([\\d_\\.]+|\\d_0)", "i"); + var osVersionRegexResult = osVersionRegex.exec(UA); + + if (osVersionRegexResult) { + osVersion = osVersionRegex.exec(UA)[2].replace(/_/g, ".").replace(/;|\)/g, ""); + } + return osVersion || defaultOSVersion; + } + + function getOs() { + var name = getOsName(); + var version = getOsVersion(name); + + return { name: name, version: version }; + } + + function getBrowser() { + var name = getBrowserName(); + var version = getBrowserVersion(name); + + return { name: name, version: version, webview: isWebview() }; + } + + function getIsMobile() { + return UA.indexOf("Mobi") !== -1; + } + + /** + * Copyright (c) NAVER Corp. + * egjs-agent projects are licensed under the MIT license + */ + + /** + * @namespace eg.agent + */ + /** + * Extracts browser and operating system information from the user agent string. + * @ko 유저 에이전트 문자열에서 브라우저와 운영체제 정보를 추출한다. + * @function eg.agent#agent + * @param {String} [userAgent=navigator.userAgent] user agent string to parse 파싱할 유저에이전트 문자열 + * @return {Object} agentInfo + * @return {Object} agentInfo.os os Operating system information 운영체제 정보 + * @return {String} agentInfo.os.name Operating system name (android, ios, window, mac, unknown) 운영체제 이름 (android, ios, window, mac, unknown) + * @return {String} agentInfo.os.version Operating system version 운영체제 버전 + * @return {String} agentInfo.browser Browser information 브라우저 정보 + * @return {String} agentInfo.browser.name Browser name (safari, chrome, sbrowser, ie, firefox, unknown) 브라우저 이름 (safari, chrome, sbrowser, ie, firefox, unknown) + * @return {String} agentInfo.browser.version Browser version 브라우저 버전 + * @return {Boolean} agentInfo.browser.webview Indicates whether the browser is inapp웹뷰 브라우저 여부 + * @return {Boolean} agentInfo.isMobile Indicates whether the browser is for mobile모바일 브라우저 여부 + * @example + import agent from "@egjs/agent"; + + const {os, browser, isMobile} = agent(); + */ + function agent() { + var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : navigator.userAgent; + + setUa(ua); + + var agentInfo = { + os: getOs(), + browser: getBrowser(), + isMobile: getIsMobile() + }; + + agentInfo.browser.name = agentInfo.browser.name.toLowerCase(); + agentInfo.os.name = agentInfo.os.name.toLowerCase(); + agentInfo.os.version = agentInfo.os.version.toLowerCase(); + + if (agentInfo.os.name === "ios" && agentInfo.browser.webview) { + agentInfo.browser.version = "-1"; + } + + return agentInfo; + } + /** + * Version info string + * @ko 버전정보 문자열 + * @name VERSION + * @static + * @type {String} + * @example + * eg.agent.VERSION; // ex) 2.2.0 + * @memberof eg.agent + */ + agent.VERSION = "2.1.5"; + + /* + Copyright (c) 2018 Daybrush + @name: @daybrush/utils + license: MIT + author: Daybrush + repository: https://github.com/daybrush/utils + @version 0.10.1 + */ + /** + * get string "function" + * @memberof Consts + * @example + import {FUNCTION} from "@daybrush/utils"; + + console.log(FUNCTION); // "function" + */ + + var FUNCTION = "function"; + /** + * get string "object" + * @memberof Consts + * @example + import {OBJECT} from "@daybrush/utils"; + + console.log(OBJECT); // "object" + */ + + var OBJECT = "object"; + /** + * get string "undefined" + * @memberof Consts + * @example + import {UNDEFINED} from "@daybrush/utils"; + + console.log(UNDEFINED); // "undefined" + */ + + var UNDEFINED = "undefined"; + + /** + * @namespace + * @name Utils + */ + + /** + * Returns the inner product of two numbers(`a1`, `a2`) by two criteria(`b1`, `b2`). + * @memberof Utils + * @param - The first number + * @param - The second number + * @param - The first number to base on the inner product + * @param - The second number to base on the inner product + * @return - Returns the inner product + import { dot } from "@daybrush/utils"; + + console.log(dot(0, 15, 2, 3)); // 6 + console.log(dot(5, 15, 2, 3)); // 9 + console.log(dot(5, 15, 1, 1)); // 10 + */ + + function dot(a1, a2, b1, b2) { + return (a1 * b2 + a2 * b1) / (b1 + b2); + } + /** + * Check the type that the value is undefined. + * @memberof Utils + * @param {string} value - Value to check the type + * @return {boolean} true if the type is correct, false otherwise + * @example + import {isUndefined} from "@daybrush/utils"; + + console.log(isUndefined(undefined)); // true + console.log(isUndefined("")); // false + console.log(isUndefined(1)); // false + console.log(isUndefined(null)); // false + */ + + function isUndefined$1(value) { + return typeof value === UNDEFINED; + } + /** + * Check the type that the value is object. + * @memberof Utils + * @param {string} value - Value to check the type + * @return {} true if the type is correct, false otherwise + * @example + import {isObject} from "@daybrush/utils"; + + console.log(isObject({})); // true + console.log(isObject(undefined)); // false + console.log(isObject("")); // false + console.log(isObject(null)); // false + */ + + function isObject(value) { + return value && typeof value === OBJECT; + } + /** + * Check the type that the value is isArray. + * @memberof Utils + * @param {string} value - Value to check the type + * @return {} true if the type is correct, false otherwise + * @example + import {isArray} from "@daybrush/utils"; + + console.log(isArray([])); // true + console.log(isArray({})); // false + console.log(isArray(undefined)); // false + console.log(isArray(null)); // false + */ + + function isArray(value) { + return Array.isArray(value); + } + /** + * Check the type that the value is function. + * @memberof Utils + * @param {string} value - Value to check the type + * @return {} true if the type is correct, false otherwise + * @example + import {isFunction} from "@daybrush/utils"; + + console.log(isFunction(function a() {})); // true + console.log(isFunction(() => {})); // true + console.log(isFunction("1234")); // false + console.log(isFunction(1)); // false + console.log(isFunction(null)); // false + */ + + function isFunction(value) { + return typeof value === FUNCTION; + } + /** + * divide text by bracket "(", ")". + * @memberof Utils + * @param {string} text - text to divide + * @return {object} divided texts + * @example + import {splitBracket} from "@daybrush/utils"; + + console.log(splitBracket("a(1, 2)")); + // {prefix: "a", value: "1, 2", suffix: ""} + console.log(splitBracket("a(1, 2)b")); + // {prefix: "a", value: "1, 2", suffix: "b"} + */ + + function splitBracket(text) { + var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text); + + if (!matches || matches.length < 4) { + return {}; + } else { + return { + prefix: matches[1], + value: matches[2], + suffix: matches[3] + }; + } + } + /** + * divide text by number and unit. + * @memberof Utils + * @param {string} text - text to divide + * @return {} divided texts + * @example + import {splitUnit} from "@daybrush/utils"; + + console.log(splitUnit("10px")); + // {prefix: "", value: 10, unit: "px"} + console.log(splitUnit("-10px")); + // {prefix: "", value: -10, unit: "px"} + console.log(splitUnit("a10%")); + // {prefix: "a", value: 10, unit: "%"} + */ + + function splitUnit(text) { + var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text); + + if (!matches) { + return { + prefix: "", + unit: "", + value: NaN + }; + } + + var prefix = matches[1]; + var value = matches[2]; + var unit = matches[3]; + return { + prefix: prefix, + unit: unit, + value: parseFloat(value) + }; + } + /** + * transform strings to camel-case + * @memberof Utils + * @param {String} text - string + * @return {String} camel-case string + * @example + import {camelize} from "@daybrush/utils"; + + console.log(camelize("transform-origin")); // transformOrigin + console.log(camelize("abcd_efg")); // abcdEfg + console.log(camelize("abcd efg")); // abcdEfg + */ + + function camelize(str) { + return str.replace(/[\s-_]([a-z])/g, function (all, letter) { + return letter.toUpperCase(); + }); + } + /** + * Returns the index of the first element in the array that satisfies the provided testing function. + * @function + * @memberof CrossBrowser + * @param - The array `findIndex` was called upon. + * @param - A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found. + * @param - Returns defaultIndex if not found by the function. + * @example + import { findIndex } from "@daybrush/utils"; + + findIndex([{a: 1}, {a: 2}, {a: 3}, {a: 4}], ({ a }) => a === 2); // 1 + */ + + function findIndex(arr, callback, defaultIndex) { + if (defaultIndex === void 0) { + defaultIndex = -1; + } + + var length = arr.length; + + for (var i = 0; i < length; ++i) { + if (callback(arr[i], i, arr)) { + return i; + } + } + + return defaultIndex; + } + /** + * 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|$)")); + } + /** + * Add the specified class value. If these classe already exist in the element's class attribute they are ignored. + * @memberof DOM + * @param element - target + * @param className - the class name to add + * @example + import {addClass} from "@daybrush/utils"; + + addClass(element, "start"); + */ + + function addClass(element, className) { + if (element.classList) { + element.classList.add(className); + } else { + element.className += " " + className; + } + } + /** + * Removes the specified class value. + * @memberof DOM + * @param element - target + * @param className - the class name to remove + * @example + import {removeClass} from "@daybrush/utils"; + + removeClass(element, "start"); + */ + + function removeClass(element, className) { + if (element.classList) { + element.classList.remove(className); + } else { + var reg = new RegExp("(\\s|^)" + className + "(\\s|$)"); + element.className = element.className.replace(reg, " "); + } + } + /** + * Sets up a function that will be called whenever the specified event is delivered to the target + * @memberof DOM + * @param - event target + * @param - A case-sensitive string representing the event type to listen for. + * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs + * @param - An options object that specifies characteristics about the event listener. The available options are: + * @example + import {addEvent} from "@daybrush/utils"; + + addEvent(el, "click", e => { + console.log(e); + }); + */ + + function addEvent(el, type, listener, options) { + el.addEventListener(type, listener, options); + } + /** + * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener() + * @memberof DOM + * @param - event target + * @param - A case-sensitive string representing the event type to listen for. + * @param - The EventListener function of the event handler to remove from the event target. + * @example + import {addEvent, removeEvent} from "@daybrush/utils"; + const listener = e => { + console.log(e); + }; + addEvent(el, "click", listener); + removeEvent(el, "click", listener); + */ + + function removeEvent(el, type, listener) { + el.removeEventListener(type, listener); + } + + /* + Copyright (c) 2019 Daybrush + name: preact-css-styler + license: MIT + author: Daybrush + repository: https://github.com/daybrush/css-styler/tree/master/preact-css-styler + version: 1.0.0 + */ + + var t$2,r$2,u$2=[],i$2=n.__r;n.__r=function(n){i$2&&i$2(n),t$2=0,(r$2=n.__c).__H&&(r$2.__H.t=A$3(r$2.__H.t));};var f$2=n.diffed;n.diffed=function(n){f$2&&f$2(n);var t=n.__c;if(t){var r=t.__H;r&&(r.u=(r.u.some(function(n){n.ref&&(n.ref.current=n.createHandle());}),[]),r.i=A$3(r.i));}};var o$2=n.unmount;function e$2(t){n.__h&&n.__h(r$2);var u=r$2.__H||(r$2.__H={o:[],t:[],i:[],u:[]});return t>=u.o.length&&u.o.push({}),u.o[t]}function c$2(n){return a$2(q$2,n)}function a$2(n,u,i){var f=e$2(t$2++);return f.__c||(f.__c=r$2,f.v=[i?i(u):q$2(void 0,u),function(t){var r=n(f.v[0],t);f.v[0]!==r&&(f.v[0]=r,f.__c.setState({}));}]),f.v}function v$2(n,u){var i=e$2(t$2++);h$1(i.m,u)&&(i.v=n,i.m=u,r$2.__H.t.push(i),T$3(r$2));}function m$2(n,u){var i=e$2(t$2++);h$1(i.m,u)&&(i.v=n,i.m=u,r$2.__H.i.push(i));}function d$2(n){return l$1(function(){return {current:n}},[])}function p$2(n,u,i){var f=e$2(t$2++);h$1(f.m,i)&&(f.m=i,r$2.__H.u.push({ref:n,createHandle:u}));}function l$1(n,r){var u=e$2(t$2++);return h$1(u.m,r)?(u.m=r,u.p=n,u.v=n()):u.v}function s$2(n,t){return l$1(function(){return n},t)}function y$2(n){var u=r$2.context[n.__c];if(!u)return n.__p;var i=e$2(t$2++);return null==i.v&&(i.v=!0,u.sub(r$2)),u.props.value}function _$3(t,r){n.useDebugValue&&n.useDebugValue(r?r(t):t);}n.unmount=function(n){o$2&&o$2(n);var t=n.__c;if(t){var r=t.__H;r&&r.o.forEach(function(n){return n.l&&n.l()});}};var T$3=function(){};function g$2(){u$2.some(function(n){n.s=!1,n.__P&&(n.__H.t=A$3(n.__H.t));}),u$2=[];}if("undefined"!=typeof window){var w$3=n.requestAnimationFrame;T$3=function(t){(!t.s&&(t.s=!0)&&1===u$2.push(t)||w$3!==n.requestAnimationFrame)&&(w$3=n.requestAnimationFrame,(n.requestAnimationFrame||function(n){var t=function(){clearTimeout(r),cancelAnimationFrame(u),setTimeout(n);},r=setTimeout(t,100),u=requestAnimationFrame(t);})(g$2));};}function A$3(n){return n.forEach(E$2),n.forEach(F$2),[]}function E$2(n){n.l&&n.l();}function F$2(n){var t=n.v();"function"==typeof t&&(n.l=t);}function h$1(n,t){return !n||t.some(function(t,r){return t!==n[r]})}function q$2(n,t){return "function"==typeof t?t(n):t} + + var n$1 = ({ + __proto__: null, + useState: c$2, + useReducer: a$2, + useEffect: v$2, + useLayoutEffect: m$2, + useRef: d$2, + useImperativeHandle: p$2, + useMemo: l$1, + useCallback: s$2, + useContext: y$2, + useDebugValue: _$3 + }); + + function d$1$1(n,t){for(var r in t)n[r]=t[r];return n}function p$1$1(n){var t=n.parentNode;t&&t.removeChild(n);}var h$1$1=n.__e;function m$1$1(){this.t=[];}function y$1$1(n){var t,e,o;function i(i){if(t||(t=n()).then(function(n){e=n.default;},function(n){o=n;}),o)throw o;if(!e)throw t;return h(e,i)}return i.displayName="Lazy",i.o=!0,i}n.__e=function(n,t,r){if(n.then&&r)for(var e,o=t;o=o.__p;)if((e=o.__c)&&e.i)return r&&(t.__e=r.__e,t.__k=r.__k),void e.i(n);h$1$1(n,t,r);},(m$1$1.prototype=new y).i=function(n){var t=this;t.t.push(n);var r=function(){t.t[t.t.indexOf(n)]=t.t[t.t.length-1],t.t.pop(),0==t.t.length&&(A(t.props.fallback),t.__v.__e=null,t.__v.__k=t.state.u,t.setState({u:null}));};null==t.state.u&&(t.setState({u:t.__v.__k}),function n(t){for(var r=0;r>> 0; + } + + var stringHash = hash; + + function getHash(str) { + return stringHash(str).toString(36); + } + function injectStyle(className, css) { + var style = document.createElement("style"); + style.setAttribute("type", "text/css"); + style.innerHTML = css.replace(/([^}{]*){/mg, function (all, selector) { + return splitComma(selector).map(function (subSelector) { + if (subSelector.indexOf(":global") > -1) { + return subSelector.replace(/\:global/g, ""); + } else if (subSelector.indexOf(":host") > -1) { + return "" + subSelector.replace(/\:host/g, "." + className); + } + + return "." + className + " " + subSelector; + }).join(", ") + "{"; + }); + (document.head || document.body).appendChild(style); + return style; + } + + function styled(Tag, css) { + var injectClassName = "rCS" + getHash(css); + var injectCount = 0; + var injectElement; + return ( + /*#__PURE__*/ + function (_super) { + __extends$1(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 S$1(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 = P$2(this)); + }; + + return Styler; + }(y) + ); + } + + /* + Copyright (c) 2019 Daybrush + name: @daybrush/drag + license: MIT + author: Daybrush + repository: git+https://github.com/daybrush/drag.git + version: 0.11.1 + */ + + /*! ***************************************************************************** + Copyright (c) Microsoft Corporation. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); you may not use + this file except in compliance with the License. You may obtain a copy of the + License at http://www.apache.org/licenses/LICENSE-2.0 + + THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED + WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, + MERCHANTABLITY OR NON-INFRINGEMENT. + + See the Apache Version 2.0 License for specific language governing permissions + and limitations under the License. + ***************************************************************************** */ + var __assign$2 = function () { + __assign$2 = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + + return t; + }; + + return __assign$2.apply(this, arguments); + }; + + function getPinchDragPosition(clients, prevClients, startClients, startPinchClients) { + var nowCenter = getAverageClient(clients); + var prevCenter = getAverageClient(prevClients); + var startCenter = getAverageClient(startPinchClients); + var pinchClient = getAddClient(startPinchClients[0], getMinusClient(nowCenter, startCenter)); + var pinchPrevClient = getAddClient(startPinchClients[0], getMinusClient(prevCenter, startCenter)); + return getPosition(pinchClient, pinchPrevClient, startClients[0]); + } + function isMultiTouch(e) { + return e.touches && e.touches.length >= 2; + } + function getPositionEvent(e) { + if (e.touches) { + return getClients(e.touches); + } else { + return [getClient(e)]; + } + } + function getPosition(client, prevClient, startClient) { + var clientX = client.clientX, + clientY = client.clientY; + var prevX = prevClient.clientX, + prevY = prevClient.clientY; + var startX = startClient.clientX, + startY = startClient.clientY; + var deltaX = clientX - prevX; + var deltaY = clientY - prevY; + var distX = clientX - startX; + var distY = clientY - startY; + return { + clientX: clientX, + clientY: clientY, + deltaX: deltaX, + deltaY: deltaY, + distX: distX, + distY: distY + }; + } + function getDist(clients) { + return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2)); + } + function getPositions(clients, prevClients, startClients) { + return clients.map(function (client, i) { + return getPosition(client, prevClients[i], startClients[i]); + }); + } + function getClients(touches) { + var length = Math.min(touches.length, 2); + var clients = []; + + for (var i = 0; i < length; ++i) { + clients.push(getClient(touches[i])); + } + + return clients; + } + function getClient(e) { + return { + clientX: e.clientX, + clientY: e.clientY + }; + } + function getAverageClient(clients) { + return { + clientX: (clients[0].clientX + clients[1].clientX) / 2, + clientY: (clients[0].clientY + clients[1].clientY) / 2 + }; + } + function getAddClient(client1, client2) { + return { + clientX: client1.clientX + client2.clientX, + clientY: client1.clientY + client2.clientY + }; + } + function getMinusClient(client1, client2) { + return { + clientX: client1.clientX - client2.clientX, + clientY: client1.clientY - client2.clientY + }; + } + + var Dragger = + /*#__PURE__*/ + function () { + function Dragger(el, options) { + var _this = this; + + if (options === void 0) { + options = {}; + } + + this.el = el; + this.options = {}; + this.flag = false; + this.pinchFlag = false; + this.datas = {}; + this.isDrag = false; + this.isPinch = false; + this.isMouse = false; + this.isTouch = false; + this.prevClients = []; + this.startClients = []; + this.movement = 0; + this.startPinchClients = []; + this.startDistance = 0; + this.customDist = [0, 0]; + + this.onDragStart = function (e) { + if (!_this.flag && e.cancelable === false) { + return; + } + + if (isMultiTouch(e)) { + if (!_this.flag && e.touches.length !== e.changedTouches.length) { + return; + } + + if (!_this.pinchFlag) { + _this.onPinchStart(e); + } + } + + if (_this.flag) { + return; + } + + var clients = _this.startClients[0] ? _this.startClients : getPositionEvent(e); + _this.customDist = [0, 0]; + _this.flag = true; + _this.isDrag = false; + _this.startClients = clients; + _this.prevClients = clients; + _this.datas = {}; + _this.movement = 0; + var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]); + var _a = _this.options, + dragstart = _a.dragstart, + preventRightClick = _a.preventRightClick; + + if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign$2({ + datas: _this.datas, + inputEvent: e + }, position))) === false) { + _this.startClients = []; + _this.prevClients = []; + _this.flag = false; + } + + _this.flag && e.preventDefault(); + }; + + this.onDrag = function (e, isScroll) { + if (!_this.flag) { + return; + } + + var clients = getPositionEvent(e); + + if (_this.pinchFlag) { + _this.onPinch(e, clients); + } + + var result = _this.move([0, 0], e, clients); + + if (!result || !result.deltaX && !result.deltaY) { + return; + } + + var drag = _this.options.drag; + drag && drag(__assign$2({}, result, { + isScroll: !!isScroll, + inputEvent: e + })); + }; + + this.onDragEnd = function (e) { + if (!_this.flag) { + return; + } + + if (_this.pinchFlag) { + _this.onPinchEnd(e); + } + + _this.flag = false; + var dragend = _this.options.dragend; + var prevClients = _this.prevClients; + var startClients = _this.startClients; + var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients, _this.startPinchClients) : getPosition(prevClients[0], prevClients[0], startClients[0]); + _this.startClients = []; + _this.prevClients = []; + dragend && dragend(__assign$2({ + datas: _this.datas, + isDrag: _this.isDrag, + inputEvent: e + }, position)); + }; + + this.options = __assign$2({ + container: el, + preventRightClick: true, + pinchThreshold: 0, + 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; + this.customDist = [0, 0]; + + if (this.isMouse) { + addEvent(el, "mousedown", this.onDragStart); + addEvent(container, "mousemove", this.onDrag); + addEvent(container, "mouseup", this.onDragEnd); + } + + if (this.isTouch) { + var passive = { + passive: false + }; + addEvent(el, "touchstart", this.onDragStart, passive); + addEvent(container, "touchmove", this.onDrag, passive); + addEvent(container, "touchend", this.onDragEnd, passive); + } + } + + var __proto = Dragger.prototype; + + __proto.isDragging = function () { + return this.isDrag; + }; + + __proto.isPinching = function () { + return this.isPinch; + }; + + __proto.scrollBy = function (deltaX, deltaY, e, isCallDrag) { + if (isCallDrag === void 0) { + isCallDrag = true; + } + + if (!this.flag) { + return; + } + + this.startClients.forEach(function (client) { + client.clientX -= deltaX; + client.clientY -= deltaY; + }); + this.prevClients.forEach(function (client) { + client.clientX -= deltaX; + client.clientY -= deltaY; + }); + isCallDrag && this.onDrag(e, true); + }; + + __proto.move = function (_a, inputEvent, clients) { + var deltaX = _a[0], + deltaY = _a[1]; + + if (clients === void 0) { + clients = this.prevClients; + } + + var customDist = this.customDist; + var prevClients = this.prevClients; + var startClients = this.startClients; + var position = this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients, this.startPinchClients) : getPosition(clients[0], prevClients[0], startClients[0]); + customDist[0] += deltaX; + customDist[1] += deltaY; + position.deltaX += deltaX; + position.deltaY += deltaY; + var positionDeltaX = position.deltaX, + positionDeltaY = position.deltaY; + position.distX += customDist[0]; + position.distY += customDist[1]; + this.movement += Math.sqrt(positionDeltaX * positionDeltaX + positionDeltaY * positionDeltaY); + this.prevClients = clients; + this.isDrag = true; + return __assign$2({ + datas: this.datas + }, position, { + isScroll: false, + inputEvent: inputEvent + }); + }; + + __proto.onPinchStart = function (e) { + var _a, _b; + + var _c = this.options, + pinchstart = _c.pinchstart, + pinchThreshold = _c.pinchThreshold; + + if (this.isDrag && this.movement > pinchThreshold) { + return; + } + + var pinchClients = getClients(e.changedTouches); + this.pinchFlag = true; + + (_a = this.startClients).push.apply(_a, pinchClients); + + (_b = this.prevClients).push.apply(_b, pinchClients); + + this.startDistance = getDist(this.prevClients); + this.startPinchClients = this.prevClients.slice(); + + if (!pinchstart) { + return; + } + + var startClients = this.prevClients; + var startAverageClient = getAverageClient(startClients); + var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient); + pinchstart(__assign$2({ + datas: this.datas, + touches: getPositions(startClients, startClients, startClients) + }, centerPosition, { + inputEvent: e + })); + }; + + __proto.onPinch = function (e, clients) { + if (!this.flag || !this.pinchFlag) { + return; + } + + this.isPinch = true; + var pinch = this.options.pinch; + + if (!pinch) { + return; + } + + var prevClients = this.prevClients; + var startClients = this.startClients; + var centerPosition = getPosition(getAverageClient(clients), getAverageClient(prevClients), getAverageClient(startClients)); + var distance = getDist(clients); + pinch(__assign$2({ + datas: this.datas, + touches: getPositions(clients, prevClients, startClients), + scale: distance / this.startDistance, + distance: distance + }, centerPosition, { + inputEvent: e + })); + }; + + __proto.onPinchEnd = function (e) { + if (!this.flag || !this.pinchFlag) { + return; + } + + var isPinch = this.isPinch; + this.isPinch = false; + this.pinchFlag = false; + var pinchend = this.options.pinchend; + + if (!pinchend) { + return; + } + + var prevClients = this.prevClients; + var startClients = this.startClients; + var centerPosition = getPosition(getAverageClient(prevClients), getAverageClient(prevClients), getAverageClient(startClients)); + pinchend(__assign$2({ + datas: this.datas, + isPinch: isPinch, + touches: getPositions(prevClients, prevClients, startClients) + }, centerPosition, { + inputEvent: e + })); + this.isPinch = false; + this.pinchFlag = false; + }; + + __proto.unset = function () { + var el = this.el; + var container = this.options.container; + + if (this.isMouse) { + removeEvent(el, "mousedown", this.onDragStart); + removeEvent(container, "mousemove", this.onDrag); + removeEvent(container, "mouseup", this.onDragEnd); + } + + if (this.isTouch) { + removeEvent(el, "touchstart", this.onDragStart); + removeEvent(container, "touchmove", this.onDrag); + removeEvent(container, "touchend", this.onDragEnd); + } + }; + + return Dragger; + }(); + + /* + Copyright (c) 2019-present NAVER Corp. + name: @egjs/list-differ + license: MIT + author: NAVER Corp. + repository: https://github.com/naver/egjs-list-differ + version: 1.0.0 + */ + /* + egjs-list-differ + Copyright (c) 2019-present NAVER Corp. + MIT license + */ + var PolyMap = + /*#__PURE__*/ + function () { + function PolyMap() { + this.keys = []; + this.values = []; + } + + var __proto = PolyMap.prototype; + + __proto.get = function (key) { + return this.values[this.keys.indexOf(key)]; + }; + + __proto.set = function (key, value) { + var keys = this.keys; + var values = this.values; + var prevIndex = keys.indexOf(key); + var index = prevIndex === -1 ? keys.length : prevIndex; + keys[index] = key; + values[index] = value; + }; + + return PolyMap; + }(); + + /* + egjs-list-differ + Copyright (c) 2019-present NAVER Corp. + MIT license + */ + var HashMap = + /*#__PURE__*/ + function () { + function HashMap() { + this.object = {}; + } + + var __proto = HashMap.prototype; + + __proto.get = function (key) { + return this.object[key]; + }; + + __proto.set = function (key, value) { + this.object[key] = value; + }; + + return HashMap; + }(); + + /* + egjs-list-differ + Copyright (c) 2019-present NAVER Corp. + MIT license + */ + var SUPPORT_MAP = typeof Map === "function"; + + /* + egjs-list-differ + Copyright (c) 2019-present NAVER Corp. + MIT license + */ + var Link = + /*#__PURE__*/ + function () { + function Link() {} + + var __proto = Link.prototype; + + __proto.connect = function (prevLink, nextLink) { + this.prev = prevLink; + this.next = nextLink; + prevLink && (prevLink.next = this); + nextLink && (nextLink.prev = this); + }; + + __proto.disconnect = function () { + // In double linked list, diconnect the interconnected relationship. + var prevLink = this.prev; + var nextLink = this.next; + prevLink && (prevLink.next = nextLink); + nextLink && (nextLink.prev = prevLink); + }; + + __proto.getIndex = function () { + var link = this; + var index = -1; + + while (link) { + link = link.prev; + ++index; + } + + return index; + }; + + return Link; + }(); + + /* + egjs-list-differ + Copyright (c) 2019-present NAVER Corp. + MIT license + */ + + function orderChanged(changed, fixed) { + // It is roughly in the order of these examples. + // 4, 6, 0, 2, 1, 3, 5, 7 + var fromLinks = []; // 0, 1, 2, 3, 4, 5, 6, 7 + + var toLinks = []; + changed.forEach(function (_a) { + var from = _a[0], + to = _a[1]; + var link = new Link(); + fromLinks[from] = link; + toLinks[to] = link; + }); // `fromLinks` are connected to each other by double linked list. + + fromLinks.forEach(function (link, i) { + link.connect(fromLinks[i - 1]); + }); + return changed.filter(function (_, i) { + return !fixed[i]; + }).map(function (_a, i) { + var from = _a[0], + to = _a[1]; + + if (from === to) { + return [0, 0]; + } + + var fromLink = fromLinks[from]; + var toLink = toLinks[to - 1]; + var fromIndex = fromLink.getIndex(); // Disconnect the link connected to `fromLink`. + + fromLink.disconnect(); // Connect `fromLink` to the right of `toLink`. + + if (!toLink) { + fromLink.connect(undefined, fromLinks[0]); + } else { + fromLink.connect(toLink, toLink.next); + } + + var toIndex = fromLink.getIndex(); + return [fromIndex, toIndex]; + }); + } + + var Result = + /*#__PURE__*/ + function () { + function Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed) { + this.prevList = prevList; + this.list = list; + this.added = added; + this.removed = removed; + this.changed = changed; + this.maintained = maintained; + this.changedBeforeAdded = changedBeforeAdded; + this.fixed = fixed; + } + + var __proto = Result.prototype; + Object.defineProperty(__proto, "ordered", { + get: function () { + if (!this.cacheOrdered) { + this.caculateOrdered(); + } + + return this.cacheOrdered; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(__proto, "pureChanged", { + get: function () { + if (!this.cachePureChanged) { + this.caculateOrdered(); + } + + return this.cachePureChanged; + }, + enumerable: true, + configurable: true + }); + + __proto.caculateOrdered = function () { + var ordered = orderChanged(this.changedBeforeAdded, this.fixed); + var changed = this.changed; + var pureChanged = []; + this.cacheOrdered = ordered.filter(function (_a, i) { + var from = _a[0], + to = _a[1]; + var _b = changed[i], + fromBefore = _b[0], + toBefore = _b[1]; + + if (from !== to) { + pureChanged.push([fromBefore, toBefore]); + return true; + } + }); + this.cachePureChanged = pureChanged; + }; + + return Result; + }(); + + /** + * + * @memberof eg.ListDiffer + * @static + * @function + * @param - Previous List 이전 목록 + * @param - List to Update 업데이트 할 목록 + * @param - This callback function returns the key of the item. 아이템의 키를 반환하는 콜백 함수입니다. + * @return - Returns the diff between `prevList` and `list` `prevList`와 `list`의 다른 점을 반환한다. + * @example + * import { diff } from "@egjs/list-differ"; + * // script => eg.ListDiffer.diff + * const result = diff([0, 1, 2, 3, 4, 5], [7, 8, 0, 4, 3, 6, 2, 1], e => e); + * // List before update + * // [1, 2, 3, 4, 5] + * console.log(result.prevList); + * // Updated list + * // [4, 3, 6, 2, 1] + * console.log(result.list); + * // Index array of values added to `list` + * // [0, 1, 5] + * console.log(result.added); + * // Index array of values removed in `prevList` + * // [5] + * console.log(result.removed); + * // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list` + * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]] + * console.log(result.changed); + * // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>) + * // [[4, 3], [3, 4], [2, 6]] + * console.log(result.pureChanged); + * // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>) + * // [[4, 1], [4, 2], [4, 3]] + * console.log(result.ordered); + * // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved + * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]] + * console.log(result.maintained); + */ + + function diff(prevList, list, findKeyCallback) { + var mapClass = SUPPORT_MAP ? Map : findKeyCallback ? HashMap : PolyMap; + + var callback = findKeyCallback || function (e) { + return e; + }; + + var added = []; + var removed = []; + var maintained = []; + var prevKeys = prevList.map(callback); + var keys = list.map(callback); + var prevKeyMap = new mapClass(); + var keyMap = new mapClass(); + var changedBeforeAdded = []; + var fixed = []; + var removedMap = {}; + var changed = []; + var addedCount = 0; + var removedCount = 0; // Add prevKeys and keys to the hashmap. + + prevKeys.forEach(function (key, prevListIndex) { + prevKeyMap.set(key, prevListIndex); + }); + keys.forEach(function (key, listIndex) { + keyMap.set(key, listIndex); + }); // Compare `prevKeys` and `keys` and add them to `removed` if they are not in `keys`. + + prevKeys.forEach(function (key, prevListIndex) { + var listIndex = keyMap.get(key); // In prevList, but not in list, it is removed. + + if (typeof listIndex === "undefined") { + ++removedCount; + removed.push(prevListIndex); + } else { + removedMap[listIndex] = removedCount; + } + }); // Compare `prevKeys` and `keys` and add them to `added` if they are not in `prevKeys`. + + keys.forEach(function (key, listIndex) { + var prevListIndex = prevKeyMap.get(key); // In list, but not in prevList, it is added. + + if (typeof prevListIndex === "undefined") { + added.push(listIndex); + ++addedCount; + } else { + maintained.push([prevListIndex, listIndex]); + removedCount = removedMap[listIndex] || 0; + changedBeforeAdded.push([prevListIndex - removedCount, listIndex - addedCount]); + fixed.push(listIndex === prevListIndex); + + if (prevListIndex !== listIndex) { + changed.push([prevListIndex, listIndex]); + } + } + }); // Sort by ascending order of 'to(list's index). + + removed.reverse(); + return new Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed); + } + + /** + * A module that checks diff when values are added, removed, or changed in an array. + * @ko 배열 또는 오브젝트에서 값이 추가되거나 삭제되거나 순서가 변경사항을 체크하는 모듈입니다. + * @memberof eg + */ + + var ListDiffer = + /*#__PURE__*/ + function () { + /** + * @param - Initializing Data Array. 초기 설정할 데이터 배열. + * @param - This callback function returns the key of the item. 아이템의 키를 반환하는 콜백 함수입니다. + * @example + * import ListDiffer from "@egjs/list-differ"; + * // script => eg.ListDiffer + * const differ = new ListDiffer([0, 1, 2, 3, 4, 5], e => e); + * const result = differ.update([7, 8, 0, 4, 3, 6, 2, 1]); + * // List before update + * // [1, 2, 3, 4, 5] + * console.log(result.prevList); + * // Updated list + * // [4, 3, 6, 2, 1] + * console.log(result.list); + * // Index array of values added to `list`. + * // [0, 1, 5] + * console.log(result.added); + * // Index array of values removed in `prevList`. + * // [5] + * console.log(result.removed); + * // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`. + * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]] + * console.log(result.changed); + * // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>) + * // [[4, 3], [3, 4], [2, 6]] + * console.log(result.pureChanged); + * // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>) + * // [[4, 1], [4, 2], [4, 3]] + * console.log(result.ordered); + * // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved. + * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]] + * console.log(result.maintained); + */ + function ListDiffer(list, findKeyCallback) { + if (list === void 0) { + list = []; + } + + this.findKeyCallback = findKeyCallback; + this.list = [].slice.call(list); + } + /** + * Update list. + * @ko 리스트를 업데이트를 합니다. + * @param - List to update 업데이트할 리스트 + * @return - Returns the results of an update from `prevList` to `list`. `prevList`에서 `list`로 업데이트한 결과를 반환한다. + */ + + + var __proto = ListDiffer.prototype; + + __proto.update = function (list) { + var newData = [].slice.call(list); + var result = diff(this.list, newData, this.findKeyCallback); + this.list = newData; + return result; + }; + + return ListDiffer; + }(); + + /* + Copyright (c) 2019-present NAVER Corp. + name: @egjs/children-differ + license: MIT + author: NAVER Corp. + repository: https://github.com/naver/egjs-children-differ + version: 1.0.0 + */ + + /*! ***************************************************************************** + Copyright (c) Microsoft Corporation. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); you may not use + this file except in compliance with the License. You may obtain a copy of the + License at http://www.apache.org/licenses/LICENSE-2.0 + + THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED + WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, + MERCHANTABLITY OR NON-INFRINGEMENT. + + See the Apache Version 2.0 License for specific language governing permissions + and limitations under the License. + ***************************************************************************** */ + + /* global Reflect, Promise */ + var extendStatics$2 = function (d, b) { + extendStatics$2 = Object.setPrototypeOf || { + __proto__: [] + } instanceof Array && function (d, b) { + d.__proto__ = b; + } || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + }; + + return extendStatics$2(d, b); + }; + + function __extends$2(d, b) { + extendStatics$2(d, b); + + function __() { + this.constructor = d; + } + + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + } + + /* + egjs-children-differ + Copyright (c) 2019-present NAVER Corp. + MIT license + */ + var findKeyCallback = typeof Map === "function" ? undefined : function () { + var childrenCount = 0; + return function (el) { + return el.__DIFF_KEY__ || (el.__DIFF_KEY__ = ++childrenCount); + }; + }(); + + /** + * A module that checks diff when child are added, removed, or changed . + * @ko 자식 노드들에서 자식 노드가 추가되거나 삭제되거나 순서가 변경된 사항을 체크하는 모듈입니다. + * @memberof eg + * @extends eg.ListDiffer + */ + + var ChildrenDiffer = + /*#__PURE__*/ + function (_super) { + __extends$2(ChildrenDiffer, _super); + /** + * @param - Initializing Children 초기 설정할 자식 노드들 + */ + + + function ChildrenDiffer(list) { + if (list === void 0) { + list = []; + } + + return _super.call(this, list, findKeyCallback) || this; + } + + return ChildrenDiffer; + }(ListDiffer); + + /* + Copyright (c) 2019 Daybrush + name: preact-moveable + license: MIT + author: Daybrush + repository: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable + version: 0.14.0 + */ + + /* + Copyright (c) 2019 Daybrush + name: @moveable/matrix + license: MIT + author: Daybrush + repository: git+https://github.com/daybrush/moveable.git + version: 0.3.0 + */ + 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 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 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 getOrigin(matrix, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var originMatrix = []; + + for (var i = 0; i < n - 1; ++i) { + originMatrix[i] = matrix[(i + 1) * n - 1]; + } + + originMatrix[n - 1] = 0; + return originMatrix; + } + function 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; + + if (!m) { + return matrix2; + } else if (!k) { + return matrix; + } + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i * k + j] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j]; + } + } + } // n * k + + + return newMatrix; + } + function multiplyCSS(matrix, matrix2, n) { + if (n === void 0) { + n = Math.sqrt(matrix.length); + } + + var newMatrix = []; // n(y) * m(x) X m(y) * k(x) + + var m = matrix.length / n; + var k = matrix2.length / m; + + for (var i = 0; i < n; ++i) { + for (var j = 0; j < k; ++j) { + newMatrix[i + j * k] = 0; + + for (var l = 0; l < m; ++l) { + newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k]; + } + } + } // n * k + + + return newMatrix; + } + function average() { + var nums = []; + + for (var _i = 0; _i < arguments.length; _i++) { + nums[_i] = arguments[_i]; + } + + var length = nums.length; + var total = 0; + + for (var i = length - 1; i >= 0; --i) { + total += nums[i]; + } + + return length ? total / length : 0; + } + function plus(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 rotate(pos, rad) { + return caculate(createRotateMatrix(rad, 3), convertPositionMatrix(pos, 3)); + } + 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 createRotateMatrix(rad, n) { + var cos = Math.cos(rad); + var sin = Math.sin(rad); + var m = createIdentityMatrix(n); + m[0] = cos; + m[1] = -sin; + m[n] = sin; + m[n + 1] = cos; + return m; + } + function createIdentityMatrix(n) { + var length = n * n; + var matrix = []; + + for (var i = 0; i < length; ++i) { + matrix[i] = i % (n + 1) ? 0 : 1; + } + + return matrix; + } + function createScaleMatrix(scale, n) { + var m = createIdentityMatrix(n); + var length = Math.min(scale.length, n - 1); + + for (var i = 0; i < length; ++i) { + m[(n + 1) * i] = scale[i]; + } + + return m; + } + function createOriginMatrix(origin, n) { + var m = createIdentityMatrix(n); + var length = Math.min(origin.length, n - 1); + + for (var i = 0; i < length; ++i) { + m[n * (i + 1) - 1] = origin[i]; + } + + return m; + } + function createWarpMatrix(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); + } + + /* + Copyright (c) 2019 Daybrush + name: react-moveable + license: MIT + author: Daybrush + repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable + version: 0.15.0 + */ + + /*! ***************************************************************************** + Copyright (c) Microsoft Corporation. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); you may not use + this file except in compliance with the License. You may obtain a copy of the + License at http://www.apache.org/licenses/LICENSE-2.0 + + THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED + WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, + MERCHANTABLITY OR NON-INFRINGEMENT. + + See the Apache Version 2.0 License for specific language governing permissions + and limitations under the License. + ***************************************************************************** */ + + /* global Reflect, Promise */ + var extendStatics$3 = function (d, b) { + extendStatics$3 = Object.setPrototypeOf || { + __proto__: [] + } instanceof Array && function (d, b) { + d.__proto__ = b; + } || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + }; + + return extendStatics$3(d, b); + }; + + function __extends$3(d, b) { + extendStatics$3(d, b); + + function __() { + this.constructor = d; + } + + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + } + var __assign$3 = function () { + __assign$3 = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + + return t; + }; + + return __assign$3.apply(this, arguments); + }; + + var agent$1 = agent(); + var isWebkit = agent$1.os.name.indexOf("ios") > -1 || agent$1.browser.name.indexOf("safari") > -1; + var PREFIX = "moveable-"; + var MOVEABLE_CSS = prefixCSS(PREFIX, "\n{\n\tposition: fixed;\n\twidth: 0;\n\theight: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 3000;\n}\n.control-box {\n z-index: 0;\n}\n.line, .control {\n\tleft: 0;\n\ttop: 0;\n}\n.control {\n\tposition: absolute;\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n\tbackground: #4af;\n\tmargin-top: -7px;\n margin-left: -7px;\n z-index: 10;\n will-change: transform;\n}\n.line {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tbackground: #4af;\n\ttransform-origin: 0px 0.5px;\n}\n.line.rotation-line {\n\theight: 40px;\n\twidth: 1px;\n\ttransform-origin: 0.5px 39.5px;\n}\n.line.rotation-line .control {\n\tborder-color: #4af;\n\tbackground:#fff;\n\tcursor: alias;\n}\n.line.vertical.bold {\n width: 2px;\n margin-left: -1px;\n}\n.line.horizontal.bold {\n height: 2px;\n margin-top: -1px;\n}\n.control.origin {\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n\tmargin-left: -6px;\n\tpointer-events: none;\n}\n.direction.e, .direction.w {\n\tcursor: ew-resize;\n}\n.direction.s, .direction.n {\n\tcursor: ns-resize;\n}\n.direction.nw, .direction.se, :host.reverse .direction.ne, :host.reverse .direction.sw {\n\tcursor: nwse-resize;\n}\n.direction.ne, .direction.sw, :host.reverse .direction.nw, :host.reverse .direction.se {\n\tcursor: nesw-resize;\n}\n.group {\n z-index: -1;\n}\n.area {\n position: absolute;\n}\n.area-pieces {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n}\n.area.avoid {\n pointer-events: none;\n}\n.area.avoid+.area-pieces {\n display: block;\n}\n.area-piece {\n position: absolute;\n}\n" + (isWebkit ? ":global svg *:before {\n\tcontent:\"\";\n\ttransform-origin: inherit;\n}" : "") + "\n"); + var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]]; + var TINY_NUM = 0.0000001; + var MIN_SCALE = 0.000000001; + var MAX_NUM = Math.pow(10, 10); + var MIN_NUM = -MAX_NUM; + var DIRECTION_INDEXES = { + n: [0, 1], + s: [2, 3], + w: [2, 0], + e: [1, 3], + nw: [0], + ne: [1], + sw: [2], + se: [3] + }; + + function multiply2(pos1, pos2) { + return [pos1[0] * pos2[0], pos1[1] * pos2[1]]; + } + function prefix() { + var classNames = []; + + for (var _i = 0; _i < arguments.length; _i++) { + classNames[_i] = arguments[_i]; + } + + return prefixNames.apply(void 0, [PREFIX].concat(classNames)); + } + function createIdentityMatrix3() { + return createIdentityMatrix(3); + } + function getTransformMatrix(transform) { + if (!transform || transform === "none") { + return [1, 0, 0, 1, 0, 0]; + } + + if (isObject(transform)) { + return transform; + } + + var value = splitBracket(transform).value; + return value.split(/s*,\s*/g).map(function (v) { + return parseFloat(v); + }); + } + function getAbsoluteMatrix(matrix, n, origin) { + return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) { + return -a; + }), n)); + } + function measureSVGSize(el, unit, isHorizontal) { + if (unit === "%") { + var viewBox = el.ownerSVGElement.viewBox.baseVal; + return viewBox[isHorizontal ? "width" : "height"] / 100; + } + + return 1; + } + function getBeforeTransformOrigin(el) { + var relativeOrigin = getTransformOrigin(getComputedStyle(el, ":before")); + return relativeOrigin.map(function (o, i) { + var _a = splitUnit(o), + value = _a.value, + unit = _a.unit; + + return value * measureSVGSize(el, unit, i === 0); + }); + } + function getTransformOrigin(style) { + var transformOrigin = style.transformOrigin; + return transformOrigin ? transformOrigin.split(" ") : ["0", "0"]; + } + function getOffsetInfo(el, lastParent, isParent) { + var body = document.body; + var target = !el || isParent ? el : el.parentElement; + var isEnd = false; + var position = "relative"; + + while (target && target !== body) { + if (lastParent === target) { + isEnd = true; + } + + var style = getComputedStyle(target); + var transform = style.transform; + position = style.position; + + if (position !== "static" || transform && transform !== "none") { + break; + } + + target = target.parentElement; + position = "relative"; + } + + return { + isStatic: position === "static", + isEnd: isEnd || !target || target === body, + offsetParent: target || body + }; + } + function caculateMatrixStack(target, container, prevMatrix, prevN) { + var _a; + + var el = target; + var matrixes = []; + var isSVGGraphicElement = el.tagName.toLowerCase() !== "svg" && "ownerSVGElement" in el; + var originalContainer = container || document.body; + var isEnd = false; + var is3d = false; + var n = 3; + var transformOrigin; + var targetMatrix; + var offsetContainer = getOffsetInfo(container, container, true).offsetParent; + + if (prevMatrix) { + container = target.parentElement; + } + + while (el && !isEnd) { + var style = getComputedStyle(el); + var tagName = el.tagName.toLowerCase(); + var position = style.position; + var isFixed = position === "fixed"; + var styleTransform = style.transform; + var matrix = convertCSStoMatrix(getTransformMatrix(styleTransform)); + + if (!is3d && matrix.length === 16) { + is3d = true; + n = 4; + var matrixesLength = matrixes.length; + + for (var i = 0; i < matrixesLength; ++i) { + matrixes[i] = convertDimension(matrixes[i], 3, 4); + } + } + + if (is3d && matrix.length === 9) { + matrix = convertDimension(matrix, 3, 4); + } + + var offsetLeft = el.offsetLeft; + var offsetTop = el.offsetTop; + + if (isFixed) { + var containerRect = (container || document.documentElement).getBoundingClientRect(); + offsetLeft -= containerRect.left; + offsetTop -= containerRect.top; + } // svg + + + var isSVG = isUndefined$1(offsetLeft); + var hasNotOffset = isSVG; + var origin = void 0; // inner svg element + + if (hasNotOffset && tagName !== "svg") { + origin = isWebkit ? getBeforeTransformOrigin(el) : getTransformOrigin(style).map(function (pos) { + return parseFloat(pos); + }); + hasNotOffset = false; + + if (tagName === "g") { + offsetLeft = 0; + offsetTop = 0; + } else { + _a = getSVGGraphicsOffset(el, origin), offsetLeft = _a[0], offsetTop = _a[1], origin[0] = _a[2], origin[1] = _a[3]; + } + } else { + origin = getTransformOrigin(style).map(function (pos) { + return parseFloat(pos); + }); + } + + if (tagName === "svg" && targetMatrix) { + matrixes.push(getSVGMatrix(el, n), createIdentityMatrix(n)); + } + + var _b = getOffsetInfo(el, container), + offsetParent = _b.offsetParent, + isOffsetEnd = _b.isEnd, + isStatic = _b.isStatic; + + if (isWebkit && !hasNotOffset && !isSVG && isStatic && position === "relative") { + offsetLeft -= offsetParent.offsetLeft; + offsetTop -= offsetParent.offsetTop; + isEnd = isEnd || isOffsetEnd; + } + + var parentClientLeft = 0; + var parentClientTop = 0; + + if (!hasNotOffset && offsetContainer !== offsetParent) { + parentClientLeft = offsetParent.clientLeft; + parentClientTop = offsetParent.clientTop; + } + + matrixes.push(getAbsoluteMatrix(matrix, n, origin), createOriginMatrix([hasNotOffset ? el : offsetLeft - el.scrollLeft + parentClientLeft, hasNotOffset ? origin : offsetTop - el.scrollTop + parentClientTop], n)); + + if (!targetMatrix) { + targetMatrix = matrix; + } + + if (!transformOrigin) { + transformOrigin = origin; + } + + if (isEnd || isFixed) { + break; + } else { + el = offsetParent; + isEnd = isOffsetEnd; + } + } + + var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n); + var beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n); + var offsetMatrix = createIdentityMatrix(n); + var length = matrixes.length; + var endContainer = getOffsetInfo(originalContainer, originalContainer, true).offsetParent; + matrixes.reverse(); + matrixes.forEach(function (matrix, i) { + var _a; + + if (length - 2 === i) { + beforeMatrix = mat.slice(); + } + + if (length - 1 === i) { + offsetMatrix = mat.slice(); + } + + if (isObject(matrix[n - 1])) { + _a = getSVGOffset(matrix[n - 1], endContainer, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1]; + } + + mat = multiply(mat, matrix, n); + }); + var isMatrix3d = !isSVGGraphicElement && is3d; + var transform = (isMatrix3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(isSVGGraphicElement && targetMatrix.length === 16 ? convertDimension(targetMatrix, 4, 3) : targetMatrix) + ")"; + return [beforeMatrix, offsetMatrix, mat, targetMatrix, transform, transformOrigin, is3d]; + } + function getSVGMatrix(el, n) { + var clientWidth = el.clientWidth; + var clientHeight = el.clientHeight; + var viewBox = el.viewBox.baseVal; + var viewBoxWidth = viewBox.width || clientWidth; + var viewBoxHeight = viewBox.height || clientHeight; + var scaleX = clientWidth / viewBoxWidth; + var scaleY = clientHeight / viewBoxHeight; + var preserveAspectRatio = el.preserveAspectRatio.baseVal; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio + + var align = preserveAspectRatio.align; // 1 : meet 2: slice + + var meetOrSlice = preserveAspectRatio.meetOrSlice; + var svgOrigin = [0, 0]; + var scale = [scaleX, scaleY]; + var translate = [0, 0]; + + if (align !== 1) { + var xAlign = (align - 2) % 3; + var yAlign = Math.floor((align - 2) / 3); + svgOrigin[0] = viewBoxWidth * xAlign / 2; + svgOrigin[1] = viewBoxHeight * yAlign / 2; + var scaleDimension = meetOrSlice === 2 ? Math.max(scaleY, scaleX) : Math.min(scaleX, scaleY); + scale[0] = scaleDimension; + scale[1] = scaleDimension; + translate[0] = (clientWidth - viewBoxWidth) / 2 * xAlign; + translate[1] = (clientHeight - viewBoxHeight) / 2 * yAlign; + } + + var scaleMatrix = createScaleMatrix(scale, n); + scaleMatrix[n - 1] = translate[0], scaleMatrix[2 * n - 1] = translate[1]; + return getAbsoluteMatrix(scaleMatrix, n, svgOrigin); + } + function getSVGGraphicsOffset(el, origin) { + if (!el.getBBox) { + return [0, 0]; + } + + var bbox = el.getBBox(); + var svgElement = el.ownerSVGElement; + var viewBox = svgElement.viewBox.baseVal; + var left = bbox.x - viewBox.x; + var top = bbox.y - viewBox.y; + return [left, top, origin[0] - left, origin[1] - top]; + } + function caculatePosition(matrix, pos, n) { + return caculate(matrix, convertPositionMatrix(pos, n), n); + } + function caculatePoses(matrix, width, height, n) { + var pos1 = caculatePosition(matrix, [0, 0], n); + var pos2 = caculatePosition(matrix, [width, 0], n); + var pos3 = caculatePosition(matrix, [0, height], n); + var pos4 = caculatePosition(matrix, [width, height], n); + return [pos1, pos2, pos3, pos4]; + } + function getRect(poses) { + var posesX = poses.map(function (pos) { + return pos[0]; + }); + var posesY = poses.map(function (pos) { + return pos[1]; + }); + var left = Math.min.apply(Math, posesX); + var top = Math.min.apply(Math, posesY); + var right = Math.max.apply(Math, posesX); + var bottom = Math.max.apply(Math, posesY); + var rectWidth = right - left; + var rectHeight = bottom - top; + return { + left: left, + top: top, + right: right, + bottom: bottom, + width: rectWidth, + height: rectHeight + }; + } + function caculateRect(matrix, width, height, n) { + var poses = caculatePoses(matrix, width, height, n); + return getRect(poses); + } + function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) { + var _a; + + var _b = getSize(el), + width = _b[0], + height = _b[1]; + + var containerRect = container.getBoundingClientRect(); + var rect = el.getBoundingClientRect(); + var rectLeft = rect.left - containerRect.left + container.scrollLeft; + var rectTop = rect.top - containerRect.top + container.scrollTop; + var rectWidth = rect.width; + var rectHeight = rect.height; + var mat = multiplies(n, beforeMatrix, absoluteMatrix); + + var _c = caculateRect(mat, width, height, n), + prevLeft = _c.left, + prevTop = _c.top, + prevWidth = _c.width, + prevHeight = _c.height; + + var posOrigin = caculatePosition(mat, origin, n); + var prevOrigin = minus(posOrigin, [prevLeft, prevTop]); + var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight]; + var offset = [0, 0]; + var count = 0; + + while (++count < 10) { + var inverseBeforeMatrix = invert(beforeMatrix, n); + _a = minus(caculatePosition(inverseBeforeMatrix, rectOrigin, n), caculatePosition(inverseBeforeMatrix, posOrigin, n)), offset[0] = _a[0], offset[1] = _a[1]; + var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix); + + var _d = caculateRect(mat2, width, height, n), + nextLeft = _d.left, + nextTop = _d.top; + + var distLeft = nextLeft - rectLeft; + var distTop = nextTop - rectTop; + + if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) { + break; + } + + rectOrigin[0] -= distLeft; + rectOrigin[1] -= distTop; + } + + return offset.map(function (p) { + return Math.round(p); + }); + } + function caculateMoveablePosition(matrix, origin, width, height) { + var is3d = matrix.length === 16; + var n = is3d ? 4 : 3; + + var _a = caculatePoses(matrix, width, height, n), + _b = _a[0], + x1 = _b[0], + y1 = _b[1], + _c = _a[1], + x2 = _c[0], + y2 = _c[1], + _d = _a[2], + x3 = _d[0], + y3 = _d[1], + _e = _a[3], + x4 = _e[0], + y4 = _e[1]; + + var _f = caculatePosition(matrix, origin, n), + originX = _f[0], + originY = _f[1]; + + var left = Math.min(x1, x2, x3, x4); + var top = Math.min(y1, y2, y3, y4); + var right = Math.max(x1, x2, x3, x4); + var bottom = Math.max(y1, y2, y3, y4); + x1 = x1 - left || 0; + x2 = x2 - left || 0; + x3 = x3 - left || 0; + x4 = x4 - left || 0; + y1 = y1 - top || 0; + y2 = y2 - top || 0; + y3 = y3 - top || 0; + y4 = y4 - top || 0; + originX = originX - left || 0; + originY = originY - top || 0; + var center = [(x1 + x2 + x3 + x4) / 4, (y1 + y2 + y3 + y4) / 4]; + var pos1Rad = getRad(center, [x1, y1]); + var pos2Rad = getRad(center, [x2, y2]); + var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1; + return [[left, top, right, bottom], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4], direction]; + } + 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(rotation) { + var poses = []; + + for (var _i = 1; _i < arguments.length; _i++) { + poses[_i - 1] = 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) rotate(" + rotation + "deg)" + }; + } + function getCSSSize(target) { + var style = window.getComputedStyle(target); + return [parseFloat(style.width), parseFloat(style.height)]; + } + function getSize(target, style, isOffset, isBoxSizing) { + if (style === void 0) { + style = window.getComputedStyle(target); + } + + if (isBoxSizing === void 0) { + isBoxSizing = isOffset || style.boxSizing === "border-box"; + } + + var width = target.offsetWidth; + var height = target.offsetHeight; + var hasOffset = !isUndefined$1(width); + + if ((isOffset || isBoxSizing) && hasOffset) { + return [width, height]; + } + + width = target.clientWidth; + height = target.clientHeight; + + if (!hasOffset && !width && !height) { + var bbox = target.getBBox(); + return [bbox.width, bbox.height]; + } + + if (isOffset || isBoxSizing) { + var borderLeft = parseFloat(style.borderLeftWidth) || 0; + var borderRight = parseFloat(style.borderRightWidth) || 0; + var borderTop = parseFloat(style.borderTopWidth) || 0; + var borderBottom = parseFloat(style.borderBottomWidth) || 0; + return [width + borderLeft + borderRight, height + borderTop + borderBottom]; + } else { + var paddingLeft = parseFloat(style.paddingLeft) || 0; + var paddingRight = parseFloat(style.paddingRight) || 0; + var paddingTop = parseFloat(style.paddingTop) || 0; + var paddingBottom = parseFloat(style.paddingBottom) || 0; + return [width - paddingLeft - paddingRight, height - paddingTop - paddingBottom]; + } + } + function getRotationRad(poses, direction) { + return getRad(direction > 0 ? poses[0] : poses[1], direction > 0 ? poses[1] : poses[0]); + } + function getTargetInfo(target, container, parentContainer, state) { + var _a, _b, _c, _d, _e; + + var left = 0; + var top = 0; + var right = 0; + var bottom = 0; + var origin = [0, 0]; + var pos1 = [0, 0]; + var pos2 = [0, 0]; + var pos3 = [0, 0]; + var pos4 = [0, 0]; + var offsetMatrix = createIdentityMatrix3(); + var beforeMatrix = createIdentityMatrix3(); + var matrix = createIdentityMatrix3(); + var targetMatrix = createIdentityMatrix3(); + var width = 0; + var height = 0; + var transformOrigin = [0, 0]; + var direction = 1; + var beforeDirection = 1; + var is3d = false; + var targetTransform = ""; + var beforeOrigin = [0, 0]; + var clientRect = { + left: 0, + right: 0, + top: 0, + bottom: 0, + width: 0, + height: 0 + }; + var containerRect = { + left: 0, + right: 0, + top: 0, + bottom: 0, + width: 0, + height: 0 + }; + var rotation = 0; + var prevMatrix = state ? state.beforeMatrix : undefined; + var prevN = state ? state.is3d ? 4 : 3 : undefined; + + if (target) { + if (state) { + width = state.width; + height = state.height; + } else { + var style = 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, prevMatrix, prevN), beforeMatrix = _b[0], offsetMatrix = _b[1], matrix = _b[2], targetMatrix = _b[3], targetTransform = _b[4], transformOrigin = _b[5], is3d = _b[6]; + _c = caculateMoveablePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], right = _d[2], bottom = _d[3], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5], direction = _c[6]; + var n = is3d ? 4 : 3; + var beforePos = [0, 0]; + _e = caculateMoveablePosition(offsetMatrix, plus(transformOrigin, getOrigin(targetMatrix, n)), width, height), beforePos = _e[0], beforeOrigin = _e[1], beforeDirection = _e[6]; + beforeOrigin = [beforeOrigin[0] + beforePos[0] - left, beforeOrigin[1] + beforePos[1] - top]; + clientRect = getClientRect(target); + containerRect = getClientRect(getOffsetInfo(parentContainer, parentContainer, true).offsetParent || document.body); + rotation = getRotationRad([pos1, pos2], direction); + } + + return { + rotation: rotation, + containerRect: containerRect, + beforeDirection: beforeDirection, + direction: direction, + target: target, + left: left, + top: top, + right: right, + bottom: bottom, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + width: width, + height: height, + beforeMatrix: beforeMatrix, + matrix: matrix, + targetTransform: targetTransform, + offsetMatrix: offsetMatrix, + targetMatrix: targetMatrix, + is3d: is3d, + beforeOrigin: beforeOrigin, + origin: origin, + transformOrigin: transformOrigin, + clientRect: clientRect + }; + } + function getClientRect(el) { + var _a = el.getBoundingClientRect(), + left = _a.left, + width = _a.width, + top = _a.top, + bottom = _a.bottom, + right = _a.right, + height = _a.height; + + return { + left: left, + right: right, + top: top, + bottom: bottom, + width: width, + height: height + }; + } + function getDirection(target) { + if (!target) { + return; + } + + var direciton = target.getAttribute("data-direction"); + + if (!direciton) { + return; + } + + var dir = [0, 0]; + direciton.indexOf("w") > -1 && (dir[0] = -1); + direciton.indexOf("e") > -1 && (dir[0] = 1); + direciton.indexOf("n") > -1 && (dir[1] = -1); + direciton.indexOf("s") > -1 && (dir[1] = 1); + return dir; + } + function getAbsolutePoses(poses, dist) { + return [plus(dist, poses[0]), plus(dist, poses[1]), plus(dist, poses[2]), plus(dist, poses[3])]; + } + function getAbsolutePosesByState(_a) { + var left = _a.left, + top = _a.top, + pos1 = _a.pos1, + pos2 = _a.pos2, + pos3 = _a.pos3, + pos4 = _a.pos4; + return getAbsolutePoses([pos1, pos2, pos3, pos4], [left, top]); + } + 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); + }); + return nums; + } + function unset(self, name) { + if (self[name]) { + self[name].unset(); + self[name] = null; + } + } + function getOrientationDirection(pos, pos1, pos2) { + return (pos[0] - pos1[0]) * (pos2[1] - pos1[1]) - (pos[1] - pos1[1]) * (pos2[0] - pos1[0]); + } + function isInside(pos, pos1, pos2, pos3, pos4) { + var k1 = getOrientationDirection(pos, pos1, pos2); + var k2 = getOrientationDirection(pos, pos2, pos4); + var k3 = getOrientationDirection(pos, pos4, pos1); + var k4 = getOrientationDirection(pos, pos2, pos4); + var k5 = getOrientationDirection(pos, pos4, pos3); + var k6 = getOrientationDirection(pos, pos3, pos2); + var signs1 = [k1, k2, k3]; + var signs2 = [k4, k5, k6]; + + if (signs1.every(function (sign) { + return sign >= 0; + }) || signs1.every(function (sign) { + return sign <= 0; + }) || signs2.every(function (sign) { + return sign >= 0; + }) || signs2.every(function (sign) { + return sign <= 0; + })) { + return true; + } + + return false; + } + function fillParams(moveable, e, params) { + var datas = e.datas; + + if (!datas.datas) { + datas.datas = {}; + } + + return __assign$3({}, params, { + target: moveable.state.target, + clientX: e.clientX, + clientY: e.clientY, + inputEvent: e.inputEvent, + currentTarget: moveable, + datas: datas.datas + }); + } + function triggerEvent(moveable, name, params) { + return moveable.triggerEvent(name, params); + } + function getComputedStyle(el, pseudoElt) { + return window.getComputedStyle(el, pseudoElt); + } + function filterAbles(ables, methods) { + var enabledAbles = {}; + var ableGroups = {}; + return ables.filter(function (able) { + var name = able.name; + + if (enabledAbles[name] || !methods.some(function (method) { + return able[method]; + })) { + return false; + } + + if (able.ableGroup) { + if (ableGroups[name]) { + return false; + } + + ableGroups[name] = true; + } + + enabledAbles[name] = true; + return true; + }); + } + function getKeepRatioHeight(width, isWidth, ratio) { + return width * (isWidth ? ratio : 1 / ratio); + } + function getKeepRatioWidth(height, isWidth, ratio) { + return height * (isWidth ? 1 / ratio : ratio); + } + function equals(a1, a2) { + if (a1 === a2) { + return true; + } else if (a1 == null && a2 == null) { + return true; + } else { + return false; + } + } + + function triggerRenderStart(moveable, isGroup, e) { + var params = fillParams(moveable, e, { + isPinch: !!e.isPinch + }); + var eventAffix = isGroup ? "Group" : ""; + + if (isGroup) { + params.targets = moveable.props.targets; + } + + triggerEvent(moveable, "onRender" + eventAffix + "Start", params); + } + function triggerRender(moveable, isGroup, e) { + var params = fillParams(moveable, e, { + isPinch: !!e.isPinch + }); + var eventAffix = isGroup ? "Group" : ""; + + if (isGroup) { + params.targets = moveable.props.targets; + } + + triggerEvent(moveable, "onRender" + eventAffix, params); + } + function triggerRenderEnd(moveable, isGroup, e) { + var params = fillParams(moveable, e, { + isPinch: !!e.sPinch, + isDrag: e.isDrag + }); + var eventAffix = isGroup ? "Group" : ""; + + if (isGroup) { + params.targets = moveable.props.targets; + } + + triggerEvent(moveable, "onRender" + eventAffix + "End", params); + } + + function triggerAble(moveable, ableType, eventOperation, eventAffix, eventType, e) { + var isStart = eventType === "Start"; + + if (isStart && eventAffix.indexOf("Control") > -1 && moveable.areaElement === e.inputEvent.target) { + return false; + } + + var eventName = "" + eventOperation + eventAffix + eventType; + var conditionName = "" + eventOperation + eventAffix + "Condition"; + var isEnd = eventType === "End"; + var isAfter = eventType.indexOf("After") > -1; + + if (isStart) { + moveable.updateRect(eventType, true, false); + } + + var isGroup = eventAffix.indexOf("Group") > -1; + var ables = moveable[ableType]; + var results = ables.filter(function (able) { + var condition = isStart && able[conditionName]; + + if (able[eventName] && (!condition || condition(e.inputEvent.target, moveable))) { + return able[eventName](moveable, e); + } + + return false; + }); + var isUpdate = results.length; + + if (isStart) { + triggerRenderStart(moveable, isGroup, e); + } else if (isEnd) { + triggerRenderEnd(moveable, isGroup, e); + } else if (isUpdate) { + triggerRender(moveable, isGroup, e); + } + + if (isEnd) { + moveable.state.dragger = null; + } + + if (!isStart && isUpdate) { + if (results.some(function (able) { + return able.updateRect; + }) && !isGroup) { + moveable.updateRect(eventType, false, false); + } else { + moveable.updateRect(eventType, true, false); + } + } + + if (!isStart && isUpdate || isEnd && !isUpdate) { + moveable.forceUpdate(); + } + + if (!isStart && !isEnd && !isAfter && isUpdate) { + triggerAble(moveable, ableType, eventOperation, eventAffix, eventType + "After", e); + } + } + + function getAbleDragger(moveable, target, ableType, eventAffix) { + var options = { + container: window, + pinchThreshold: moveable.props.pinchThreshold + }; + ["drag", "pinch"].forEach(function (eventOperation) { + ["Start", "", "End"].forEach(function (eventType) { + options["" + eventOperation + eventType.toLowerCase()] = function (e) { + return triggerAble(moveable, ableType, eventOperation, eventAffix, eventType, e); + }; + }); + }); + return new Dragger(target, options); + } + + var ControlBoxElement = styled("div", MOVEABLE_CSS); + + function renderLine(direction, pos1, pos2, index) { + return W("div", { + key: "line" + index, + className: prefix("line", "direction", direction), + "data-direction": direction, + style: getLineStyle(pos1, pos2) + }); + } + + var MoveableManager = + /*#__PURE__*/ + function (_super) { + __extends$3(MoveableManager, _super); + + function MoveableManager() { + var _this = _super !== null && _super.apply(this, arguments) || this; + + _this.state = { + conatainer: null, + target: null, + beforeMatrix: createIdentityMatrix3(), + matrix: createIdentityMatrix3(), + targetMatrix: createIdentityMatrix3(), + targetTransform: "", + is3d: false, + left: 0, + top: 0, + width: 0, + height: 0, + transformOrigin: [0, 0], + direction: 1, + beforeDirection: 1, + beforeOrigin: [0, 0], + origin: [0, 0], + pos1: [0, 0], + pos2: [0, 0], + pos3: [0, 0], + pos4: [0, 0], + clientRect: { + left: 0, + top: 0, + bottom: 0, + right: 0, + width: 0, + height: 0 + }, + containerRect: { + left: 0, + top: 0, + bottom: 0, + right: 0, + width: 0, + height: 0 + }, + rotation: 0 + }; + _this.targetAbles = []; + _this.controlAbles = []; + return _this; + } + + var __proto = MoveableManager.prototype; + + __proto.render = function () { + var _a = this.props, + edge = _a.edge, + parentPosition = _a.parentPosition, + className = _a.className; + this.checkUpdate(); + + var _b = parentPosition || { + left: 0, + top: 0 + }, + parentLeft = _b.left, + parentTop = _b.top; + + var _c = this.state, + left = _c.left, + top = _c.top, + pos1 = _c.pos1, + pos2 = _c.pos2, + pos3 = _c.pos3, + pos4 = _c.pos4, + target = _c.target, + direction = _c.direction; + return W(ControlBoxElement, { + ref: ref(this, "controlBox"), + className: prefix("control-box", direction === -1 ? "reverse" : "") + " " + className, + style: { + position: "absolute", + display: target ? "block" : "none", + transform: "translate(" + (left - parentLeft) + "px, " + (top - parentTop) + "px) translateZ(50px)" + } + }, this.renderAbles(), renderLine(edge ? "n" : "", pos1, pos2, 0), renderLine(edge ? "e" : "", pos2, pos4, 1), renderLine(edge ? "w" : "", pos1, pos3, 2), renderLine(edge ? "s" : "", pos3, pos4, 3)); + }; + + __proto.componentDidMount = function () { + this.controlBox.getElement(); + var props = this.props; + var parentMoveable = props.parentMoveable, + container = props.container; + this.updateEvent(props); + + if (!container && !parentMoveable) { + this.updateRect("End", false, true); + } + }; + + __proto.componentDidUpdate = function (prevProps) { + this.updateEvent(prevProps); + }; + + __proto.componentWillUnmount = function () { + unset(this, "targetDragger"); + unset(this, "controlDragger"); + }; + + __proto.getContainer = function () { + var _a = this.props, + parentMoveable = _a.parentMoveable, + container = _a.container; + return container || parentMoveable && parentMoveable.getContainer() || this.controlBox.getElement().parentElement; + }; + + __proto.isMoveableElement = function (target) { + return target && (target.getAttribute("class") || "").indexOf(PREFIX) > -1; + }; + + __proto.dragStart = function (e) { + if (this.targetDragger) { + this.targetDragger.onDragStart(e); + } + }; + + __proto.isInside = function (clientX, clientY) { + var _a = this.state, + pos1 = _a.pos1, + pos2 = _a.pos2, + pos3 = _a.pos3, + pos4 = _a.pos4, + target = _a.target; + + if (!target) { + return false; + } + + var _b = target.getBoundingClientRect(), + left = _b.left, + top = _b.top; + + var pos = [clientX - left, clientY - top]; + return isInside(pos, pos1, pos2, pos4, pos3); + }; + + __proto.updateRect = function (type, isTarget, isSetState) { + if (isSetState === void 0) { + isSetState = true; + } + + var parentMoveable = this.props.parentMoveable; + var state = this.state; + var target = state.target || this.props.target; + var container = this.getContainer(); + this.updateState(getTargetInfo(target, container, container, isTarget ? state : undefined), parentMoveable ? false : isSetState); + }; + + __proto.updateEvent = function (prevProps) { + var controlBoxElement = this.controlBox.getElement(); + var hasTargetAble = this.targetAbles.length; + var hasControlAble = this.controlAbles.length; + var target = this.props.target; + var prevTarget = prevProps.target; + var dragArea = this.props.dragArea; + var prevDragArea = prevProps.dragArea; + var isTargetChanged = !dragArea && prevTarget !== target; + var isUnset = !hasTargetAble && this.targetDragger || isTargetChanged || prevDragArea !== dragArea; + + if (isUnset) { + unset(this, "targetDragger"); + this.updateState({ + dragger: null + }); + } + + if (!hasControlAble) { + unset(this, "controlDragger"); + } + + if (target && hasTargetAble && !this.targetDragger) { + if (dragArea) { + this.targetDragger = getAbleDragger(this, this.areaElement, "targetAbles", ""); + } else { + this.targetDragger = getAbleDragger(this, target, "targetAbles", ""); + } + } + + if (!this.controlDragger && hasControlAble) { + this.controlDragger = getAbleDragger(this, controlBoxElement, "controlAbles", "Control"); + } + + if (isUnset) { + this.unsetAbles(); + } + }; + + __proto.updateTarget = function (type) { + this.updateRect(type, true); + }; + + __proto.getRect = function () { + var state = this.state; + var poses = getAbsolutePosesByState(this.state); + var pos1 = poses[0], + pos2 = poses[1], + pos3 = poses[2], + pos4 = poses[3]; + var rect = getRect(poses); + var offsetWidth = state.width, + offsetHeight = state.height; + var width = rect.width, + height = rect.height, + left = rect.left, + top = rect.top; + return { + width: width, + height: height, + left: left, + top: top, + pos1: pos1, + pos2: pos2, + pos3: pos3, + pos4: pos4, + offsetWidth: offsetWidth, + offsetHeight: offsetHeight + }; + }; + + __proto.checkUpdate = function () { + var _a = this.props, + target = _a.target, + container = _a.container, + parentMoveable = _a.parentMoveable; + var _b = this.state, + stateTarget = _b.target, + stateContainer = _b.container; + + if (!stateTarget && !target) { + return; + } + + this.updateAbles(); + var isChanged = !equals(stateTarget, target) || !equals(stateContainer, container); + + if (!isChanged) { + return; + } + + this.updateState({ + target: target, + container: container + }); + + if (!parentMoveable && (container || this.controlBox)) { + this.updateRect("End", false, false); + } + }; + + __proto.triggerEvent = function (name, e) { + var callback = this.props[name]; + return callback && callback(e); + }; + + __proto.unsetAbles = function () { + var _this = this; + + if (this.targetAbles.filter(function (able) { + if (able.unset) { + able.unset(_this); + return true; + } + + return false; + }).length) { + this.forceUpdate(); + } + }; + + __proto.updateAbles = function (ables, eventAffix) { + if (ables === void 0) { + ables = this.props.ables; + } + + if (eventAffix === void 0) { + eventAffix = ""; + } + + var props = this.props; + var enabledAbles = ables.filter(function (able) { + return able && props[able.name]; + }); + var dragStart = "drag" + eventAffix + "Start"; + var pinchStart = "pinch" + eventAffix + "Start"; + var dragControlStart = "drag" + eventAffix + "ControlStart"; + var targetAbles = filterAbles(enabledAbles, [dragStart, pinchStart]); + var controlAbles = filterAbles(enabledAbles, [dragControlStart]); + this.targetAbles = targetAbles; + this.controlAbles = controlAbles; + }; + + __proto.updateState = function (nextState, isSetState) { + if (isSetState) { + this.setState(nextState); + } else { + var state = this.state; + + for (var name in nextState) { + state[name] = nextState[name]; + } + } + }; + + __proto.renderAbles = function () { + var _this = this; + + var props = this.props; + var ables = props.ables; + var enabledAbles = ables.filter(function (able) { + return able && props[able.name]; + }); + return filterAbles(enabledAbles, ["render"]).map(function (_a) { + var render = _a.render; + return render(_this, React); + }); + }; + + MoveableManager.defaultProps = { + target: null, + container: null, + origin: true, + keepRatio: false, + edge: false, + parentMoveable: null, + parentPosition: null, + ables: [], + pinchThreshold: 20, + dragArea: false, + transformOrigin: "", + className: "" + }; + return MoveableManager; + }($$1); + + function getRotatiion(touches) { + return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180; + } + + var Pinchable = { + name: "pinchable", + updateRect: true, + pinchStart: function (moveable, e) { + var datas = e.datas, + clientX = e.clientX, + clientY = e.clientY, + touches = e.touches, + inputEvent = e.inputEvent, + targets = e.targets; + var _a = moveable.props, + pinchable = _a.pinchable, + ables = _a.ables; + + if (!pinchable) { + return false; + } + + var eventName = "onPinch" + (targets ? "Group" : "") + "Start"; + var controlEventName = "drag" + (targets ? "Group" : "") + "ControlStart"; + var pinchAbles = (pinchable === true ? moveable.controlAbles : ables.filter(function (able) { + return pinchable.indexOf(able.name) > -1; + })).filter(function (able) { + return able.canPinch && able[controlEventName]; + }); + var params = fillParams(moveable, e, {}); + + if (targets) { + params.targets = targets; + } + + var result = triggerEvent(moveable, eventName, params); + datas.isPinch = result !== false; + datas.ables = pinchAbles; + var isPinch = datas.isPinch; + + if (!isPinch) { + return false; + } + + var parentRotate = getRotatiion(touches); + pinchAbles.forEach(function (able) { + datas[able.name + "Datas"] = {}; + var ableEvent = { + datas: datas[able.name + "Datas"], + clientX: clientX, + clientY: clientY, + inputEvent: inputEvent, + parentRotate: parentRotate, + pinchFlag: true + }; + able[controlEventName](moveable, ableEvent); + }); + moveable.state.snapDirection = [0, 0]; + return isPinch; + }, + pinch: function (moveable, e) { + var datas = e.datas, + clientX = e.clientX, + clientY = e.clientY, + pinchScale = e.scale, + distance = e.distance, + touches = e.touches, + inputEvent = e.inputEvent, + targets = e.targets; + + if (!datas.isPinch) { + return; + } + + var parentRotate = getRotatiion(touches); + var parentDistance = distance * (1 - 1 / pinchScale); + var params = fillParams(moveable, e, {}); + + if (targets) { + params.targets = targets; + } + + var eventName = "onPinch" + (targets ? "Group" : ""); + triggerEvent(moveable, eventName, params); + var ables = datas.ables; + var controlEventName = "drag" + (targets ? "Group" : "") + "Control"; + ables.forEach(function (able) { + able[controlEventName](moveable, { + clientX: clientX, + clientY: clientY, + datas: datas[able.name + "Datas"], + inputEvent: inputEvent, + parentDistance: parentDistance, + parentRotate: parentRotate, + pinchFlag: true + }); + }); + return params; + }, + pinchEnd: function (moveable, e) { + var datas = e.datas, + clientX = e.clientX, + clientY = e.clientY, + isPinch = e.isPinch, + inputEvent = e.inputEvent, + targets = e.targets; + + if (!datas.isPinch) { + return; + } + + var eventName = "onPinch" + (targets ? "Group" : "") + "End"; + var params = fillParams(moveable, e, { + isDrag: isPinch + }); + + if (targets) { + params.targets = targets; + } + + triggerEvent(moveable, eventName, params); + var ables = datas.ables; + var controlEventName = "drag" + (targets ? "Group" : "") + "ControlEnd"; + ables.forEach(function (able) { + able[controlEventName](moveable, { + clientX: clientX, + clientY: clientY, + isDrag: isPinch, + datas: datas[able.name + "Datas"], + inputEvent: inputEvent, + pinchFlag: true + }); + }); + return isPinch; + }, + pinchGroupStart: function (moveable, e) { + return this.pinchStart(moveable, __assign$3({}, e, { + targets: moveable.props.targets + })); + }, + pinchGroup: function (moveable, e) { + return this.pinch(moveable, __assign$3({}, e, { + targets: moveable.props.targets + })); + }, + pinchGroupEnd: function (moveable, e) { + return this.pinchEnd(moveable, __assign$3({}, e, { + targets: moveable.props.targets + })); + } + }; + + function triggerChildAble(moveable, able, type, datas, eachEvent, callback) { + var name = able.name; + var ableDatas = datas[name] || (datas[name] = []); + var isEnd = !!type.match(/End$/g); + var childs = moveable.moveables.map(function (child, i) { + var childDatas = ableDatas[i] || (ableDatas[i] = {}); + var childEvent = isFunction(eachEvent) ? eachEvent(child, childDatas) : eachEvent; + var result = able[type](child, __assign$3({}, childEvent, { + datas: childDatas, + parentFlag: true + })); + result && callback && callback(child, childDatas, result, i); + + if (isEnd) { + child.state.dragger = null; + } + + return result; + }); + return childs; + } + function directionCondition(target) { + return hasClass(target, prefix("direction")); + } + + function setDragStart(moveable, _a) { + var datas = _a.datas; + var _b = moveable.state, + matrix = _b.matrix, + beforeMatrix = _b.beforeMatrix, + is3d = _b.is3d, + left = _b.left, + top = _b.top, + origin = _b.origin, + offsetMatrix = _b.offsetMatrix, + targetMatrix = _b.targetMatrix, + transformOrigin = _b.transformOrigin; + var n = is3d ? 4 : 3; + datas.is3d = is3d; + datas.matrix = matrix; + datas.targetMatrix = targetMatrix; + datas.beforeMatrix = beforeMatrix; + datas.offsetMatrix = offsetMatrix; + datas.transformOrigin = transformOrigin; + datas.inverseMatrix = invert(matrix, n); + datas.inverseBeforeMatrix = invert(beforeMatrix, n); + datas.absoluteOrigin = convertPositionMatrix(plus([left, top], origin), n); + datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n); + datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, n); + } + function getDragDist(_a, isBefore) { + var datas = _a.datas, + distX = _a.distX, + distY = _a.distY; + var inverseBeforeMatrix = datas.inverseBeforeMatrix, + inverseMatrix = datas.inverseMatrix, + is3d = datas.is3d, + startDragBeforeDist = datas.startDragBeforeDist, + startDragDist = datas.startDragDist, + absoluteOrigin = datas.absoluteOrigin; + var n = is3d ? 4 : 3; + return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, plus(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist); + } + function caculateTransformOrigin(transformOrigin, width, height, prevWidth, prevHeight, prevOrigin) { + if (prevWidth === void 0) { + prevWidth = width; + } + + if (prevHeight === void 0) { + prevHeight = height; + } + + if (prevOrigin === void 0) { + prevOrigin = [0, 0]; + } + + if (!transformOrigin) { + return prevOrigin; + } + + return transformOrigin.map(function (pos, i) { + var _a = splitUnit(pos), + value = _a.value, + unit = _a.unit; + + var prevSize = i ? prevHeight : prevWidth; + var size = i ? height : width; + + if (pos === "%" || isNaN(value)) { + // no value but % + var measureRatio = prevSize ? prevOrigin[i] / prevSize : 0; + return size * measureRatio; + } else if (unit !== "%") { + return value; + } + + return size * value / 100; + }); + } + function getPosIndexesByDirection(direction) { + var indexes = []; + + if (direction[1] >= 0) { + if (direction[0] >= 0) { + indexes.push(3); + } + + if (direction[0] <= 0) { + indexes.push(2); + } + } + + if (direction[1] <= 0) { + if (direction[0] >= 0) { + indexes.push(1); + } + + if (direction[0] <= 0) { + indexes.push(0); + } + } + + return indexes; + } + function getPosesByDirection(poses, direction) { + /* + [-1, -1](pos1) [0, -1](pos1,pos2) [1, -1](pos2) + [-1, 0](pos1, pos3) [1, 0](pos2, pos4) + [-1, 1](pos3) [0, 1](pos3, pos4) [1, 1](pos4) + */ + return getPosIndexesByDirection(direction).map(function (index) { + return poses[index]; + }); + } + function getPosByDirection(poses, direction) { + /* + [-1, -1](pos1) [0, -1](pos1,pos2) [1, -1](pos2) + [-1, 0](pos1, pos3) [1, 0](pos2, pos4) + [-1, 1](pos3) [0, 1](pos3, pos4) [1, 1](pos4) + */ + var nextPoses = getPosesByDirection(poses, direction); + return [average.apply(void 0, nextPoses.map(function (pos) { + return pos[0]; + })), average.apply(void 0, nextPoses.map(function (pos) { + return pos[1]; + }))]; + } + function getPosByReverseDirection(_a, direction) { + /* + [-1, -1](pos4) [0, -1](pos3,pos4) [1, -1](pos3) + [-1, 0](pos2, pos4) [1, 0](pos3, pos1) + [-1, 1](pos2) [0, 1](pos1, pos2) [1, 1](pos1) + */ + var pos1 = _a[0], + pos2 = _a[1], + pos3 = _a[2], + pos4 = _a[3]; + return getPosByDirection([pos4, pos3, pos2, pos1], direction); + } + + function getStartPos(poses, direction) { + var startPos1 = poses[0], + startPos2 = poses[1], + startPos3 = poses[2], + startPos4 = poses[3]; + return getPosByReverseDirection([startPos1, startPos2, startPos3, startPos4], direction); + } + + function getDist$1(startPos, matrix, width, height, n, direction) { + var poses = caculatePoses(matrix, width, height, n); + var pos = getPosByReverseDirection(poses, direction); + var distX = startPos[0] - pos[0]; + var distY = startPos[1] - pos[1]; + return [distX, distY]; + } + + function getNextMatrix(offsetMatrix, targetMatrix, origin, n) { + return multiply(offsetMatrix, getAbsoluteMatrix(targetMatrix, n, origin), n); + } + function scaleMatrix(state, scale) { + var transformOrigin = state.transformOrigin, + offsetMatrix = state.offsetMatrix, + is3d = state.is3d, + targetMatrix = state.targetMatrix; + var n = is3d ? 4 : 3; + return getNextMatrix(offsetMatrix, multiply(targetMatrix, createScaleMatrix(scale, n), n), transformOrigin, n); + } + function getScaleDist(moveable, scale, direction, dragClient) { + var state = moveable.state; + var is3d = state.is3d, + left = state.left, + top = state.top, + width = state.width, + height = state.height; + var n = is3d ? 4 : 3; + var groupable = moveable.props.groupable; + var nextMatrix = scaleMatrix(moveable.state, scale); + var groupLeft = groupable ? left : 0; + var groupTop = groupable ? top : 0; + var startPos = dragClient ? dragClient : getStartPos(getAbsolutePosesByState(moveable.state), direction); + var dist = getDist$1(startPos, nextMatrix, width, height, n, direction); + return minus(dist, [groupLeft, groupTop]); + } + function getResizeDist(moveable, width, height, // prevWidth: number, + // prevHeight: number, + direction, fixedPosition, transformOrigin) { + var groupable = moveable.props.groupable; + var _a = moveable.state, + prevOrigin = _a.transformOrigin, + targetMatrix = _a.targetMatrix, + offsetMatrix = _a.offsetMatrix, + is3d = _a.is3d, + prevWidth = _a.width, + prevHeight = _a.height, + left = _a.left, + top = _a.top; + var n = is3d ? 4 : 3; + var nextOrigin = caculateTransformOrigin(transformOrigin, width, height, prevWidth, prevHeight, prevOrigin); + var groupLeft = groupable ? left : 0; + var groupTop = groupable ? top : 0; + var nextMatrix = getNextMatrix(offsetMatrix, targetMatrix, nextOrigin, n); + var dist = getDist$1(fixedPosition, nextMatrix, width, height, n, direction); + return minus(dist, [groupLeft, groupTop]); + } + function getStartDirection(moveable, direction) { + var _a = moveable.props.baseDirection, + baseDirection = _a === void 0 ? [-1, -1] : _a; + return [direction[0] ? direction[0] : baseDirection[0] * -1, direction[1] ? direction[1] : baseDirection[1] * -1]; + } + function getFixedPosition(moveable, direction) { + return getStartPos(getAbsolutePosesByState(moveable.state), direction); + } + + function snapStart(moveable) { + var state = moveable.state; + + if (state.guidelines && state.guidelines.length) { + return; + } + + var _a = moveable.props, + _b = _a.horizontalGuidelines, + horizontalGuidelines = _b === void 0 ? [] : _b, + _c = _a.verticalGuidelines, + verticalGuidelines = _c === void 0 ? [] : _c, + _d = _a.elementGuidelines, + elementGuidelines = _d === void 0 ? [] : _d, + bounds = _a.bounds, + snapCenter = _a.snapCenter; + + if (!bounds && !horizontalGuidelines.length && !verticalGuidelines.length && !elementGuidelines.length) { + return; + } + + var _e = state.containerRect, + containerWidth = _e.width, + containerHeight = _e.height, + containerTop = _e.top, + containerLeft = _e.left, + _f = state.clientRect, + clientTop = _f.top, + clientLeft = _f.left, + targetLeft = state.left, + targetTop = state.top; + var distLeft = targetLeft - (clientLeft - containerLeft); + var distTop = targetTop - (clientTop - containerTop); + var guidelines = []; + horizontalGuidelines.forEach(function (pos) { + guidelines.push({ + type: "horizontal", + pos: [0, pos], + size: containerWidth + }); + }); + verticalGuidelines.forEach(function (pos) { + guidelines.push({ + type: "vertical", + pos: [pos, 0], + size: containerHeight + }); + }); + elementGuidelines.forEach(function (el) { + var rect = el.getBoundingClientRect(); + var top = rect.top, + left = rect.left, + width = rect.width, + height = rect.height; + var elementTop = top - containerTop; + var elementBottom = elementTop + height; + var elementLeft = left - containerLeft; + var elementRight = elementLeft + width; + guidelines.push({ + type: "vertical", + element: el, + pos: [elementLeft + distLeft, elementTop], + size: height + }); + guidelines.push({ + type: "vertical", + element: el, + pos: [elementRight + distLeft, elementTop], + size: height + }); + guidelines.push({ + type: "horizontal", + element: el, + pos: [elementLeft, elementTop + distTop], + size: width + }); + guidelines.push({ + type: "horizontal", + element: el, + pos: [elementLeft, elementBottom + distTop], + size: width + }); + + if (snapCenter) { + guidelines.push({ + type: "vertical", + element: el, + pos: [(elementLeft + elementRight) / 2 + distLeft, elementTop], + size: height, + center: true + }); + guidelines.push({ + type: "horizontal", + element: el, + pos: [elementLeft, (elementTop + elementBottom) / 2 + distTop], + size: width, + center: true + }); + } + }); + state.guidelines = guidelines; + state.enableSnap = true; + } + + function checkBounds(moveable, verticalPoses, horizontalPoses, snapThreshold) { + return { + vertical: checkBound(moveable, verticalPoses, true, snapThreshold), + horizontal: checkBound(moveable, horizontalPoses, false, snapThreshold) + }; + } + + function checkBound(moveable, poses, isVertical, snapThreshold) { + if (snapThreshold === void 0) { + snapThreshold = 0; + } + + var bounds = moveable.props.bounds; + + if (bounds) { + var startPos = bounds[isVertical ? "left" : "top"]; + var endPos = bounds[isVertical ? "right" : "bottom"]; + var minPos = Math.min.apply(Math, poses); + var maxPos = Math.max.apply(Math, poses); + + if (!isUndefined$1(startPos) && startPos + snapThreshold > minPos) { + return { + isBound: true, + offset: minPos - startPos, + pos: startPos + }; + } + + if (!isUndefined$1(endPos) && endPos - snapThreshold < maxPos) { + return { + isBound: true, + offset: maxPos - endPos, + pos: endPos + }; + } + } + + return { + isBound: false, + offset: 0, + pos: 0 + }; + } + + function checkSnap(guidelines, targetType, targetPoses, isSnapCenter, snapThreshold) { + if (!guidelines) { + return { + isSnap: false, + dist: -1, + offset: 0, + guidelines: [], + snapPoses: [] + }; + } + + var snapGuidelines = []; + var snapDist = Infinity; + var snapOffset = 0; + var isVertical = targetType === "vertical"; + var posType = isVertical ? 0 : 1; + var snapPoses = targetPoses.filter(function (targetPos) { + return guidelines.filter(function (guideline) { + var type = guideline.type, + pos = guideline.pos, + center = guideline.center; + + if (!isSnapCenter && center || type !== targetType) { + return false; + } + + var offset = targetPos - pos[posType]; + var dist = Math.abs(offset); + + if (dist > snapThreshold) { + return false; + } + + if (snapDist > dist) { + snapDist = dist; + snapGuidelines = []; + } + + if (snapDist === dist) { + snapOffset = offset; + snapGuidelines.push(guideline); + } + + return true; + }).length; + }); + return { + isSnap: !!snapGuidelines.length, + dist: isFinite(snapDist) ? snapDist : -1, + offset: snapOffset, + guidelines: snapGuidelines, + snapPoses: snapPoses + }; + } + + function hasGuidelines(moveable, ableName) { + var _a = moveable.props, + snappable = _a.snappable, + bounds = _a.bounds, + _b = moveable.state, + guidelines = _b.guidelines, + enableSnap = _b.enableSnap; + + if (!snappable || !enableSnap || ableName && snappable !== true && snappable.indexOf(ableName) || !bounds && (!guidelines || !guidelines.length)) { + return false; + } + + return true; + } + function checkSnapPoses(moveable, posesX, posesY, isSnapCenter, customSnapThreshold) { + var guidelines = moveable.state.guidelines; + var snapThreshold = !isUndefined$1(customSnapThreshold) ? customSnapThreshold : !isUndefined$1(moveable.props.snapThreshold) ? moveable.props.snapThreshold : 5; + return { + vertical: checkSnap(guidelines, "vertical", posesX, isSnapCenter, snapThreshold), + horizontal: checkSnap(guidelines, "horizontal", posesY, isSnapCenter, snapThreshold) + }; + } + function checkSnaps(moveable, rect, isCenter, customSnapThreshold) { + var snapCenter = moveable.props.snapCenter; + var isSnapCenter = snapCenter && isCenter; + var verticalNames = ["left", "right"]; + var horizontalNames = ["top", "bottom"]; + + if (isSnapCenter) { + verticalNames.push("center"); + horizontalNames.push("middle"); + } + + verticalNames = verticalNames.filter(function (name) { + return name in rect; + }); + horizontalNames = horizontalNames.filter(function (name) { + return name in rect; + }); + return checkSnapPoses(moveable, verticalNames.map(function (name) { + return rect[name]; + }), horizontalNames.map(function (name) { + return rect[name]; + }), isSnapCenter, customSnapThreshold); + } + + function checkBoundOneWayDist(moveable, pos) { + var _a = checkBounds(moveable, [pos[0]], [pos[1]]), + _b = _a.horizontal, + isHorizontalBound = _b.isBound, + horizontalBoundOffset = _b.offset, + _c = _a.vertical, + isVerticalBound = _c.isBound, + verticalBoundOffset = _c.offset; + + if (isHorizontalBound || isVerticalBound) { + var isVertical = void 0; + + if (isHorizontalBound && isVerticalBound) { + isVertical = Math.abs(horizontalBoundOffset) < Math.abs(verticalBoundOffset); + } else { + isVertical = isVerticalBound; + } + + var offset = isVertical ? verticalBoundOffset : horizontalBoundOffset; + return { + isVertical: isVertical, + offset: offset, + dist: Math.abs(offset) + }; + } + + return; + } + + function solveNextDist(pos1, pos2, offset, isVertical, isDirectionVertical, datas) { + var sizeOffset = solveEquation(pos1, pos2, -offset, isVertical); + + if (!sizeOffset) { + return NaN; + } + + var _a = getDragDist({ + datas: datas, + distX: sizeOffset[0], + distY: sizeOffset[1] + }), + widthDist = _a[0], + heightDist = _a[1]; + + return isDirectionVertical ? heightDist : widthDist; + } + + function getFixedPoses(matrix, width, height, fixedPos, direction, is3d) { + var nextPoses = caculatePoses(matrix, width, height, is3d ? 4 : 3); + var nextPos = getPosByReverseDirection(nextPoses, direction); + return getAbsolutePoses(nextPoses, minus(fixedPos, nextPos)); + } + + function checkBoundOneWayPos(moveable, pos, reversePos, isDirectionVertical, datas) { + var _a = checkSnapPoses(moveable, [pos[0]], [pos[1]]), + _b = _a.horizontal, + isHorizontalSnap = _b.isSnap, + horizontalOffset = _b.offset, + horizontalDist = _b.dist, + _c = _a.vertical, + isVerticalSnap = _c.isSnap, + verticalOffset = _c.offset, + verticalDist = _c.dist; + + var fixedHorizontal = reversePos[1] === pos[1]; + var fixedVertical = reversePos[0] === pos[0]; + var isVertical; + + if (!isHorizontalSnap && !isVerticalSnap) { + // no snap + return NaN; + } else if (isHorizontalSnap && isVerticalSnap) { + if (horizontalDist === 0 && fixedHorizontal) { + isVertical = true; + } else if (verticalOffset === 0 && fixedVertical) { + isVertical = false; + } else { + isVertical = horizontalDist > verticalDist; + } + } else { + isVertical = isVerticalSnap; + } + + return solveNextDist(reversePos, pos, isVertical ? verticalOffset : horizontalOffset, isVertical, isDirectionVertical, datas); + } + + function checkOneWayPos(moveable, poses, reversePoses, isDirectionVertical, datas) { + var posOffset = 0; + var boundInfo; + var boundIndex = -1; + var boundInfos = poses.map(function (pos) { + return checkBoundOneWayDist(moveable, pos); + }); + boundInfos.forEach(function (info, i) { + if (!info) { + return; + } + + if (!boundInfo || boundInfo.dist < info.dist) { + boundInfo = info; + boundIndex = i; + } + }); + + if (boundInfo) { + var nextDist = solveNextDist(reversePoses[boundIndex], poses[boundIndex], boundInfo.offset, boundInfo.isVertical, isDirectionVertical, datas); + + if (!isNaN(nextDist)) { + posOffset = nextDist; + } + } else { + poses.some(function (pos, i) { + var nextDist = checkBoundOneWayPos(moveable, pos, reversePoses[i], isDirectionVertical, datas); + + if (isNaN(nextDist)) { + return false; + } + + posOffset = nextDist; + return true; + }); + } + + return posOffset; + } + function checkOneWayDist(moveable, poses, direction, datas) { + var directionIndex = direction[0] !== 0 ? 0 : 1; + var isDirectionVertical = directionIndex > 0; + var reversePoses = poses.slice().reverse(); + var directionPoses; + var reverseDirectionPoses; + + if (moveable.props.keepRatio) { + directionPoses = [getPosByDirection(poses, direction)]; + reverseDirectionPoses = [getPosByDirection(reversePoses, direction)]; + } else { + directionPoses = getPosesByDirection(poses, direction); + reverseDirectionPoses = getPosesByDirection(reversePoses, direction); + directionPoses.push([(directionPoses[0][0] + directionPoses[1][0]) / 2, (directionPoses[0][1] + directionPoses[1][1]) / 2]); + reverseDirectionPoses.reverse(); + reverseDirectionPoses.push([(reverseDirectionPoses[0][0] + reverseDirectionPoses[1][0]) / 2, (reverseDirectionPoses[0][1] + reverseDirectionPoses[1][1]) / 2]); + } + + var posOffset = checkOneWayPos(moveable, directionPoses, reverseDirectionPoses, isDirectionVertical, datas); + var offset = [0, 0]; + offset[directionIndex] = direction[directionIndex] * posOffset; + return offset; + } + function checkTwoWayDist(moveable, poses, direction, datas, matrix, width, height, fixedPos, is3d) { + var _a; + + var directionPoses = getPosesByDirection(poses, direction); + var verticalDirection = [direction[0], direction[1] * -1]; + var horizontalDirection = [direction[0] * -1, direction[1]]; + var verticalPos = getPosByDirection(poses, verticalDirection); + var horizontalPos = getPosByDirection(poses, horizontalDirection); + + var _b = checkBounds(moveable, [directionPoses[0][0]], [directionPoses[0][1]]), + _c = _b.horizontal, + isHorizontalBound = _c.isBound, + horizontalBoundOffset = _c.offset, + _d = _b.vertical, + isVerticalBound = _d.isBound, + verticalBoundOffset = _d.offset; // share drag event + + + var widthDist = 0; + var heightDist = 0; + var verticalBoundInfo = checkBoundOneWayDist(moveable, verticalPos); + var horizontalBoundInfo = checkBoundOneWayDist(moveable, horizontalPos); + var isVeritcalDirectionBound = verticalBoundInfo && verticalBoundInfo.dist > Math.abs(verticalBoundOffset); + var isHorizontalDirectionBound = horizontalBoundInfo && horizontalBoundInfo.dist > Math.abs(horizontalBoundOffset); + + if (!isVeritcalDirectionBound && !isHorizontalDirectionBound) { + var _e = checkSnapPoses(moveable, [directionPoses[0][0]], [directionPoses[0][1]]), + horizontalOffset = _e.horizontal.offset, + verticalOffset = _e.vertical.offset; + + _a = getDragDist({ + datas: datas, + distX: -(isVerticalBound ? verticalBoundOffset : verticalOffset), + distY: -(isHorizontalBound ? horizontalBoundOffset : horizontalOffset) + }), widthDist = _a[0], heightDist = _a[1]; + } else if (isVeritcalDirectionBound) { + // left to right, right to left + var reversePos = getPosByDirection(poses, [verticalDirection[0] * -1, verticalDirection[1]]); + var nextDist = solveNextDist(reversePos, verticalPos, verticalBoundInfo.offset, verticalBoundInfo.isVertical, false, datas); + + if (!isNaN(nextDist)) { + widthDist = nextDist; + } + + var nextPoses = getFixedPoses(matrix, width + direction[0] * widthDist, height + direction[1] * heightDist, fixedPos, direction, is3d); + heightDist = checkOneWayPos(moveable, [getPosByDirection(nextPoses, direction)], [getPosByDirection(nextPoses, verticalDirection)], true, datas); + } else { + // top to bottom, bottom to top + var reversePos = getPosByDirection(poses, [horizontalDirection[0] * -1, horizontalDirection[1]]); + var nextDist = solveNextDist(reversePos, verticalPos, horizontalBoundInfo.offset, horizontalBoundInfo.isVertical, true, datas); + + if (!isNaN(nextDist)) { + heightDist = nextDist; + } + + var nextPoses = getFixedPoses(matrix, width + direction[0] * widthDist, height + direction[1] * heightDist, fixedPos, direction, is3d); + widthDist = checkOneWayPos(moveable, [getPosByDirection(nextPoses, direction)], [getPosByDirection(nextPoses, horizontalDirection)], false, datas); + } + + return [direction[0] * widthDist, direction[1] * heightDist]; + } + function checkSizeDist(moveable, matrix, width, height, direction, snapDirection, datas, is3d) { + var poses = getAbsolutePosesByState(moveable.state); + var fixedPos = getPosByReverseDirection(poses, snapDirection); + var nextPoses = getFixedPoses(matrix, width, height, fixedPos, direction, is3d); + + if (direction[0] && direction[1]) { + return checkTwoWayDist(moveable, nextPoses, direction, datas, matrix, width, height, fixedPos, is3d); + } else { + return checkOneWayDist(moveable, nextPoses, direction, datas); + } + } + function checkSnapSize(moveable, width, height, direction, datas) { + if (!hasGuidelines(moveable, "resizable")) { + return [0, 0]; + } + + var _a = moveable.state, + matrix = _a.matrix, + is3d = _a.is3d; + return checkSizeDist(moveable, matrix, width, height, direction, direction, datas, is3d); + } + function checkSnapScale(moveable, scale, direction, snapDirection, datas) { + var width = datas.width, + height = datas.height; + + if (!hasGuidelines(moveable, "scalable")) { + return [0, 0]; + } + + var sizeDist = checkSizeDist(moveable, scaleMatrix(datas, scale), width, height, direction, snapDirection, datas, datas.is3d); + return [sizeDist[0] / width, sizeDist[1] / height]; + } + function solveEquation(pos1, pos2, snapOffset, isVertical) { + var dx = pos2[0] - pos1[0]; + var dy = pos2[1] - pos1[1]; + + if (!dx) { + // y = 0 * x + b + // only horizontal + if (!isVertical) { + return [0, snapOffset]; + } + + return; + } + + if (!dy) { + // only vertical + if (isVertical) { + return [snapOffset, 0]; + } + + return; + } // y = ax + b + + + var a = dy / dx; + var b = pos1[1] - a * pos1[0]; + + if (isVertical) { + // y = a * x + b + var y = a * (pos2[0] + snapOffset) + b; + return [snapOffset, y - pos2[1]]; + } else { + // x = (y - b) / a + var x = (pos2[1] + snapOffset - b) / a; + return [x - pos2[0], snapOffset]; + } + } + function getSnapInfosByDirection(moveable, poses, snapDirection) { + if (snapDirection === true) { + var rect = getRect(poses); + rect.middle = (rect.top + rect.bottom) / 2; + rect.center = (rect.left + rect.right) / 2; + return checkSnaps(moveable, rect, true, 1); + } else if (!snapDirection[0] && !snapDirection[1]) { + var alignPoses = [poses[0], poses[1], poses[3], poses[2], poses[0]]; + var nextPoses = []; + + for (var i = 0; i < 4; ++i) { + nextPoses.push(alignPoses[i]); + poses.push([(alignPoses[i][0] + alignPoses[i + 1][0]) / 2, (alignPoses[i][1] + alignPoses[i + 1][1]) / 2]); + } + + return checkSnapPoses(moveable, nextPoses.map(function (pos) { + return pos[0]; + }), nextPoses.map(function (pos) { + return pos[1]; + }), true, 1); + } else { + var nextPoses = void 0; + + if (moveable.props.keepRatio) { + nextPoses = [getPosByDirection(poses, snapDirection)]; + } else { + nextPoses = getPosesByDirection(poses, snapDirection); + + if (nextPoses.length > 1) { + nextPoses.push([(nextPoses[0][0] + nextPoses[1][0]) / 2, (nextPoses[0][1] + nextPoses[1][1]) / 2]); + } + } + + return checkSnapPoses(moveable, nextPoses.map(function (pos) { + return pos[0]; + }), nextPoses.map(function (pos) { + return pos[1]; + }), true, 1); + } + } + function startCheckSnapDrag(moveable, datas) { + datas.absolutePoses = getAbsolutePosesByState(moveable.state); + } + function checkSnapDrag(moveable, distX, distY, datas) { + var snapVerticalInfo = { + isSnap: false, + offset: 0 + }; + var snapHorizontalInfo = { + isSnap: false, + offset: 0 + }; + + if (!hasGuidelines(moveable, "draggable")) { + return [snapVerticalInfo, snapHorizontalInfo]; + } + + var poses = getAbsolutePoses(datas.absolutePoses, [distX, distY]); + + var _a = getRect(poses), + left = _a.left, + right = _a.right, + top = _a.top, + bottom = _a.bottom; + + var snapInfos = checkSnaps(moveable, { + left: left, + right: right, + top: top, + bottom: bottom, + center: (left + right) / 2, + middle: (top + bottom) / 2 + }, true); + var boundInfos = checkBounds(moveable, [left, right], [top, bottom]); + + if (boundInfos.vertical.isBound) { + snapVerticalInfo.offset = boundInfos.vertical.offset; + snapVerticalInfo.isSnap = true; + } else if (snapInfos.vertical.isSnap) { + // has vertical guidelines + snapVerticalInfo.offset = snapInfos.vertical.offset; + snapVerticalInfo.isSnap = true; + } + + if (boundInfos.horizontal.isBound) { + snapHorizontalInfo.offset = boundInfos.horizontal.offset; + snapHorizontalInfo.isSnap = true; + } else if (snapInfos.horizontal.isSnap) { + // has horizontal guidelines + snapHorizontalInfo.offset = snapInfos.horizontal.offset; + snapHorizontalInfo.isSnap = true; + } + + return [snapVerticalInfo, snapHorizontalInfo]; + } + var Snappable = { + name: "snappable", + render: function (moveable, React) { + var _a = moveable.state, + targetTop = _a.top, + targetLeft = _a.left, + pos1 = _a.pos1, + pos2 = _a.pos2, + pos3 = _a.pos3, + pos4 = _a.pos4, + snapDirection = _a.snapDirection, + clientRect = _a.clientRect, + containerRect = _a.containerRect; + var clientLeft = clientRect.left - containerRect.left; + var clientTop = clientRect.top - containerRect.top; + var minLeft = Math.min(pos1[0], pos2[0], pos3[0], pos4[0]); + var minTop = Math.min(pos1[1], pos2[1], pos3[1], pos4[1]); + + if (!snapDirection || !hasGuidelines(moveable, "")) { + return []; + } + + var poses = getAbsolutePosesByState(moveable.state); + + var _b = getRect(poses), + width = _b.width, + height = _b.height, + top = _b.top, + left = _b.left, + bottom = _b.bottom, + right = _b.right; + + var _c = getSnapInfosByDirection(moveable, poses, snapDirection), + _d = _c.vertical, + verticalGuildelines = _d.guidelines, + verticalSnapPoses = _d.snapPoses, + _e = _c.horizontal, + horizontalGuidelines = _e.guidelines, + horizontalSnapPoses = _e.snapPoses; + + var _f = checkBounds(moveable, [left, right], [top, bottom], 1), + _g = _f.vertical, + isVerticalBound = _g.isBound, + verticalBoundPos = _g.pos, + _h = _f.horizontal, + isHorizontalBound = _h.isBound, + horizontalBoundPos = _h.pos; + + if (isVerticalBound && verticalSnapPoses.indexOf(verticalBoundPos) < 0) { + // verticalGuildelines.push({ + // type: "vertical", + // pos: [verticalBoundPos, top], + // size: height, + // }); + verticalSnapPoses.push(verticalBoundPos); + } + + if (isHorizontalBound && horizontalSnapPoses.indexOf(horizontalBoundPos) < 0) { + // horizontalGuidelines.push({ + // type: "horizontal", + // pos: [left, horizontalBoundPos], + // size: width, + // }); + horizontalSnapPoses.push(horizontalBoundPos); + } + + return verticalSnapPoses.map(function (pos, i) { + return React.createElement("div", { + className: prefix("line", "vertical", "guideline", "target", "bold"), + key: "verticalTargetGuidline" + i, + style: { + top: minTop + "px", + left: -targetLeft + pos + "px", + height: height + "px" + } + }); + }).concat(horizontalSnapPoses.map(function (pos, i) { + return React.createElement("div", { + className: prefix("line", "horizontal", "guideline", "target", "bold"), + key: "horizontalTargetGuidline" + i, + style: { + top: -targetTop + pos + "px", + left: minLeft + "px", + width: width + "px" + } + }); + }), verticalGuildelines.map(function (guideline, i) { + var pos = guideline.pos, + size = guideline.size, + element = guideline.element; + return React.createElement("div", { + className: prefix("line", "vertical", "guideline", element ? "bold" : ""), + key: "verticalGuidline" + i, + style: { + top: minTop - clientTop + pos[1] + "px", + left: -targetLeft + pos[0] + "px", + height: size + "px" + } + }); + }), horizontalGuidelines.map(function (guideline, i) { + var pos = guideline.pos, + size = guideline.size, + element = guideline.element; + return React.createElement("div", { + className: prefix("line", "horizontal", "guideline", element ? "bold" : ""), + key: "horizontalGuidline" + i, + style: { + top: -targetTop + pos[1] + "px", + left: minLeft - clientLeft + pos[0] + "px", + width: size + "px" + } + }); + })); + }, + dragStart: function (moveable, e) { + moveable.state.snapDirection = true; + snapStart(moveable); + }, + pinchStart: function (moveable) { + this.unset(moveable); + }, + dragEnd: function (moveable) { + this.unset(moveable); + }, + dragControlCondition: directionCondition, + dragControlStart: function (moveable, e) { + moveable.state.snapDirection = null; + snapStart(moveable); + }, + dragControlEnd: function (moveable) { + this.unset(moveable); + }, + dragGroupStart: function (moveable, e) { + moveable.state.snapDirection = true; + snapStart(moveable); + }, + dragGroupEnd: function (moveable) { + this.unset(moveable); + }, + dragGroupControlStart: function (moveable, e) { + moveable.state.snapDirection = null; + snapStart(moveable); + }, + dragGroupControlEnd: function (moveable) { + this.unset(moveable); + }, + unset: function (moveable) { + var state = moveable.state; + state.enableSnap = false; + state.guidelines = []; + state.snapDirection = null; + } + }; + + var Draggable = { + name: "draggable", + dragStart: function (moveable, e) { + var datas = e.datas, + parentEvent = e.parentEvent, + parentDragger = e.parentDragger; + var state = moveable.state; + var targetTransform = state.targetTransform, + target = state.target, + dragger = state.dragger; + + if (dragger) { + return false; + } + + state.dragger = parentDragger || moveable.targetDragger; + var style = window.getComputedStyle(target); + datas.datas = {}; + datas.left = parseFloat(style.left || "") || 0; + datas.top = parseFloat(style.top || "") || 0; + datas.bottom = parseFloat(style.bottom || "") || 0; + datas.right = parseFloat(style.right || "") || 0; + datas.transform = targetTransform; + datas.startTranslate = [0, 0]; + setDragStart(moveable, { + datas: datas + }); + datas.prevDist = [0, 0]; + datas.prevBeforeDist = [0, 0]; + datas.isDrag = false; + startCheckSnapDrag(moveable, datas); + var params = fillParams(moveable, e, { + set: function (translate) { + datas.startTranslate = translate; + } + }); + var result = parentEvent || triggerEvent(moveable, "onDragStart", params); + + if (result !== false) { + datas.isDrag = true; + } else { + state.dragger = null; + datas.isPinch = false; + } + + return datas.isDrag ? params : false; + }, + drag: function (moveable, e) { + var datas = e.datas, + parentEvent = e.parentEvent, + parentFlag = e.parentFlag; + var distX = e.distX, + distY = e.distY; + var isPinch = datas.isPinch, + isDrag = datas.isDrag, + prevDist = datas.prevDist, + prevBeforeDist = datas.prevBeforeDist, + transform = datas.transform, + startTranslate = datas.startTranslate; + + if (!isDrag) { + return; + } + + var props = moveable.props; + var parentMoveable = props.parentMoveable; + var throttleDrag = parentEvent ? 0 : props.throttleDrag || 0; + var isSnap = false; + + if (!isPinch && !parentEvent && !parentFlag) { + var _a = checkSnapDrag(moveable, distX, distY, datas), + verticalInfo = _a[0], + horizontalInfo = _a[1]; + + isSnap = verticalInfo.isSnap || horizontalInfo.isSnap; + distX -= verticalInfo.offset; + distY -= horizontalInfo.offset; + } + + datas.passDistX = distX; + datas.passDistY = distY; + var beforeTranslate = plus(getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true), startTranslate); + var translate = plus(getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, false), startTranslate); + + if (!isSnap) { + throttleArray(translate, throttleDrag); + throttleArray(beforeTranslate, throttleDrag); + } + + var beforeDist = minus(beforeTranslate, startTranslate); + var dist = minus(translate, startTranslate); + 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 (!parentEvent && !parentMoveable && delta.every(function (num) { + return !num; + }) && beforeDelta.some(function (num) { + return !num; + })) { + return; + } + + var params = fillParams(moveable, e, { + transform: nextTransform, + dist: dist, + delta: delta, + translate: translate, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + beforeTranslate: beforeTranslate, + left: left, + top: top, + right: right, + bottom: bottom, + isPinch: isPinch + }); + !parentEvent && triggerEvent(moveable, "onDrag", params); + return params; + }, + dragEnd: function (moveable, e) { + var parentEvent = e.parentEvent, + datas = e.datas, + isDrag = e.isDrag; + + if (!datas.isDrag) { + return; + } + + moveable.state.dragger = null; + datas.isDrag = false; + !parentEvent && triggerEvent(moveable, "onDragEnd", fillParams(moveable, e, { + isDrag: isDrag + })); + return isDrag; + }, + dragGroupStart: function (moveable, e) { + var datas = e.datas; + var params = this.dragStart(moveable, e); + + if (!params) { + return false; + } + + var events = triggerChildAble(moveable, this, "dragStart", datas, e); + + var nextParams = __assign$3({}, params, { + targets: moveable.props.targets, + events: events + }); + + var result = triggerEvent(moveable, "onDragGroupStart", nextParams); + datas.isDrag = result !== false; + return datas.isDrag ? params : false; + }, + dragGroup: function (moveable, e) { + var datas = e.datas; + + if (!datas.isDrag) { + return; + } + + var params = this.drag(moveable, e); + var _a = e.datas, + passDistX = _a.passDistX, + passDistY = _a.passDistY; + var events = triggerChildAble(moveable, this, "drag", datas, __assign$3({}, e, { + distX: passDistX, + distY: passDistY + })); + + if (!params) { + return; + } + + var nextParams = __assign$3({ + targets: moveable.props.targets, + events: events + }, params); + + triggerEvent(moveable, "onDragGroup", nextParams); + return nextParams; + }, + dragGroupEnd: function (moveable, e) { + var isDrag = e.isDrag, + datas = e.datas; + + if (!datas.isDrag) { + return; + } + + this.dragEnd(moveable, e); + triggerChildAble(moveable, this, "dragEnd", datas, e); + triggerEvent(moveable, "onDragGroupEnd", fillParams(moveable, e, { + targets: moveable.props.targets, + isDrag: isDrag + })); + return isDrag; + } + }; + + function setCustomDrag(state, delta, inputEvent) { + return __assign$3({}, state.dragger.move(delta, inputEvent), { + parentEvent: true + }); + } + + var CustomDragger = + /*#__PURE__*/ + function () { + function CustomDragger() { + this.prevX = 0; + this.prevY = 0; + this.startX = 0; + this.startY = 0; + this.isDrag = false; + this.isFlag = false; + this.datas = {}; + } + + var __proto = CustomDragger.prototype; + + __proto.dragStart = function (client, inputEvent) { + this.isDrag = false; + this.isFlag = false; + this.datas = {}; + return this.move(client, inputEvent); + }; + + __proto.drag = function (client, inputEvent) { + return this.move([client[0] - this.prevX, client[1] - this.prevY], inputEvent); + }; + + __proto.move = function (delta, inputEvent) { + var clientX; + var clientY; + + if (!this.isFlag) { + this.prevX = delta[0]; + this.prevY = delta[1]; + this.startX = delta[0]; + this.startY = delta[1]; + clientX = delta[0]; + clientY = delta[1]; + this.isFlag = true; + } else { + clientX = this.prevX + delta[0]; + clientY = this.prevY + delta[1]; + this.isDrag = true; + } + + this.prevX = clientX; + this.prevY = clientY; + return { + clientX: clientX, + clientY: clientY, + inputEvent: inputEvent, + isDrag: this.isDrag, + distX: clientX - this.startX, + distY: clientY - this.startY, + deltaX: delta[0], + deltaY: delta[1], + datas: this.datas, + parentEvent: true, + parentDragger: this + }; + }; + + return CustomDragger; + }(); + + function setRotateStartInfo(datas, clientX, clientY, origin, rotationPos) { + datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]]; + datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180; + datas.startDeg = datas.prevDeg; + datas.loop = 0; + } + + function getDeg(datas, deg, direction, startRotate, throttleRotate) { + var prevDeg = datas.prevDeg, + startDeg = datas.startDeg, + prevLoop = datas.loop; + + if (prevDeg > deg && prevDeg > 270 && deg < 90) { + // 360 => 0 + ++datas.loop; + } else if (prevDeg < deg && prevDeg < 90 && deg > 270) { + // 0 => 360 + --datas.loop; + } + + var loop = datas.loop; + var absolutePrevDeg = prevLoop * 360 + prevDeg - startDeg + startRotate; + var absoluteDeg = loop * 360 + deg - startDeg + startRotate; + absoluteDeg = throttle(absoluteDeg, throttleRotate); + var delta = direction * (absoluteDeg - absolutePrevDeg); + var dist = direction * (absoluteDeg - startRotate); + datas.prevDeg = absoluteDeg - loop * 360 + startDeg - startRotate; + return [delta, dist, absoluteDeg]; + } + + function getRotateInfo(datas, direction, clientX, clientY, startRotate, throttleRotate) { + return getDeg(datas, getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, direction, startRotate, throttleRotate); + } + + function getPositions$1(rotationPosition, pos1, pos2, pos3, pos4) { + if (rotationPosition === "left") { + return [pos3, pos1]; + } else if (rotationPosition === "right") { + return [pos2, pos4]; + } else if (rotationPosition === "bottom") { + return [pos4, pos3]; + } + + return [pos1, pos2]; + } + function getRotationPosition(_a, rad) { + var pos1 = _a[0], + pos2 = _a[1]; + var relativeRotationPos = rotate([0, -40, 1], rad); + var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]]; + return rotationPos; + } + + function dragControlCondition(target) { + return hasClass(target, prefix("rotation")); + } + + var Rotatable = { + name: "rotatable", + canPinch: true, + render: function (moveable, React) { + var _a = moveable.props, + rotatable = _a.rotatable, + rotationPosition = _a.rotationPosition; + + if (!rotatable) { + return null; + } + + var _b = moveable.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4, + direction = _b.direction; + var poses = getPositions$1(rotationPosition, pos1, pos2, pos3, pos4); + var rotationRad = getRotationRad(poses, direction); + return React.createElement("div", { + key: "rotation", + className: prefix("line rotation-line"), + style: { + // tslint:disable-next-line: max-line-length + transform: "translate(" + (poses[0][0] + poses[1][0]) / 2 + "px, " + (poses[0][1] + poses[1][1]) / 2 + "px) translateY(-40px) rotate(" + rotationRad + "rad)" + } + }, React.createElement("div", { + className: prefix("control", "rotation") + })); + }, + dragControlCondition: dragControlCondition, + dragControlStart: function (moveable, e) { + var datas = e.datas, + clientX = e.clientX, + clientY = e.clientY, + parentRotate = e.parentRotate, + parentFlag = e.parentFlag, + pinchFlag = e.pinchFlag; + var _a = moveable.state, + target = _a.target, + left = _a.left, + top = _a.top, + origin = _a.origin, + beforeOrigin = _a.beforeOrigin, + direction = _a.direction, + beforeDirection = _a.beforeDirection, + targetTransform = _a.targetTransform, + pos1 = _a.pos1, + pos2 = _a.pos2, + pos3 = _a.pos3, + pos4 = _a.pos4; + + if (!target) { + return false; + } + + datas.transform = targetTransform; + datas.left = left; + datas.top = top; + var poses = getPositions$1(moveable.props.rotationPosition, pos1, pos2, pos3, pos4); + var rotationPos = getRotationPosition(poses, getRotationRad(poses, direction)); + + if (pinchFlag || parentFlag) { + datas.beforeInfo = { + prevDeg: parentRotate, + startDeg: parentRotate, + loop: 0 + }; + datas.afterInfo = { + prevDeg: parentRotate, + startDeg: parentRotate, + loop: 0 + }; + } else { + datas.afterInfo = {}; + datas.beforeInfo = {}; + setRotateStartInfo(datas.afterInfo, clientX, clientY, origin, rotationPos); + setRotateStartInfo(datas.beforeInfo, clientX, clientY, beforeOrigin, rotationPos); + } + + datas.direction = direction; + datas.beforeDirection = beforeDirection; + datas.startRotate = 0; + datas.datas = {}; + var params = fillParams(moveable, e, { + set: function (rotatation) { + datas.startRotate = rotatation; + } + }); + var result = triggerEvent(moveable, "onRotateStart", params); + datas.isRotate = result !== false; + return datas.isRotate ? params : false; + }, + dragControl: function (moveable, e) { + var _a, _b, _c, _d; + + var datas = e.datas, + clientX = e.clientX, + clientY = e.clientY, + parentRotate = e.parentRotate, + parentFlag = e.parentFlag, + pinchFlag = e.pinchFlag; + var direction = datas.direction, + beforeDirection = datas.beforeDirection, + beforeInfo = datas.beforeInfo, + afterInfo = datas.afterInfo, + isRotate = datas.isRotate, + startRotate = datas.startRotate; + + if (!isRotate) { + return; + } + + var _e = moveable.props, + _f = _e.throttleRotate, + throttleRotate = _f === void 0 ? 0 : _f, + parentMoveable = _e.parentMoveable; + var delta; + var dist; + var rotate; + var beforeDelta; + var beforeDist; + var beforeRotate; + + if (pinchFlag || parentFlag) { + _a = getDeg(afterInfo, parentRotate, direction, startRotate, throttleRotate), delta = _a[0], dist = _a[1], rotate = _a[2]; + _b = getDeg(beforeInfo, parentRotate, direction, startRotate, throttleRotate), beforeDelta = _b[0], beforeDist = _b[1], beforeRotate = _b[2]; + } else { + _c = getRotateInfo(afterInfo, direction, clientX, clientY, startRotate, throttleRotate), delta = _c[0], dist = _c[1], rotate = _c[2]; + _d = getRotateInfo(beforeInfo, beforeDirection, clientX, clientY, startRotate, throttleRotate), beforeDelta = _d[0], beforeDist = _d[1], beforeRotate = _d[2]; + } + + if (!delta && !beforeDelta && !parentMoveable) { + return; + } + + var params = fillParams(moveable, e, { + delta: delta, + dist: dist, + rotate: rotate, + beforeDist: beforeDist, + beforeDelta: beforeDelta, + beforeRotate: beforeRotate, + transform: datas.transform + " rotate(" + dist + "deg)", + isPinch: !!pinchFlag + }); + triggerEvent(moveable, "onRotate", params); + return params; + }, + dragControlEnd: function (moveable, e) { + var datas = e.datas, + isDrag = e.isDrag; + + if (!datas.isRotate) { + return false; + } + + datas.isRotate = false; + triggerEvent(moveable, "onRotateEnd", fillParams(moveable, e, { + isDrag: isDrag + })); + return isDrag; + }, + dragGroupControlCondition: dragControlCondition, + dragGroupControlStart: function (moveable, e) { + var datas = e.datas, + inputEvent = e.inputEvent; + var _a = moveable.state, + parentLeft = _a.left, + parentTop = _a.top, + parentBeforeOrigin = _a.beforeOrigin; + var params = this.dragControlStart(moveable, e); + + if (!params) { + return false; + } + + var events = triggerChildAble(moveable, this, "dragControlStart", datas, __assign$3({}, e, { + parentRotate: 0 + }), function (child, childDatas, eventParams) { + var _a = child.state, + left = _a.left, + top = _a.top, + beforeOrigin = _a.beforeOrigin; + var childClient = plus(minus([left, top], [parentLeft, parentTop]), minus(beforeOrigin, parentBeforeOrigin)); + childDatas.prevClient = childClient; + eventParams.dragStart = Draggable.dragStart(child, new CustomDragger().dragStart(childClient, inputEvent)); + }); + + var nextParams = __assign$3({}, params, { + targets: moveable.props.targets, + events: events + }); + + var result = triggerEvent(moveable, "onRotateGroupStart", nextParams); + datas.isRotate = result !== false; + return datas.isDrag ? params : false; + }, + dragGroupControl: function (moveable, e) { + var inputEvent = e.inputEvent, + datas = e.datas; + + if (!datas.isRotate) { + return; + } + + var params = this.dragControl(moveable, e); + + if (!params) { + return; + } + + var parentRotate = params.beforeDist; + var deg = params.beforeDelta; + var rad = deg / 180 * Math.PI; + var events = triggerChildAble(moveable, this, "dragControl", datas, __assign$3({}, e, { + parentRotate: parentRotate + }), function (child, childDatas, result, i) { + var _a = childDatas.prevClient, + prevX = _a[0], + prevY = _a[1]; + + var _b = rotate([prevX, prevY], rad), + clientX = _b[0], + clientY = _b[1]; + + var delta = [clientX - prevX, clientY - prevY]; + childDatas.prevClient = [clientX, clientY]; + var dragResult = Draggable.drag(child, setCustomDrag(child.state, delta, inputEvent)); + result.drag = dragResult; + }); + + var nextParams = __assign$3({ + targets: moveable.props.targets, + events: events + }, params); + + moveable.rotation += params.beforeDelta; + triggerEvent(moveable, "onRotateGroup", nextParams); + return nextParams; + }, + dragGroupControlEnd: function (moveable, e) { + var isDrag = e.isDrag, + datas = e.datas; + + if (!datas.isRotate) { + return; + } + + this.dragControlEnd(moveable, e); + triggerChildAble(moveable, this, "dragControlEnd", datas, e); + var nextParams = fillParams(moveable, e, { + targets: moveable.props.targets, + isDrag: isDrag + }); + triggerEvent(moveable, "onRotateGroupEnd", nextParams); + return isDrag; + } + }; + + function renderControls(moveable, defaultDirections, React) { + var _a = moveable.state, + pos1 = _a.pos1, + pos2 = _a.pos2, + pos3 = _a.pos3, + pos4 = _a.pos4, + rotation = _a.rotation; + var _b = moveable.props.renderDirections, + directions = _b === void 0 ? defaultDirections : _b; + var poses = [pos1, pos2, pos3, pos4]; + var directionMap = {}; + directions.forEach(function (direction) { + directionMap[direction] = true; + }); + return directions.map(function (direction) { + var indexes = DIRECTION_INDEXES[direction]; + + if (!indexes || !directionMap[direction]) { + return null; + } + + return React.createElement("div", { + className: prefix("control", "direction", direction), + "data-direction": direction, + key: direction, + style: getControlTransform.apply(void 0, [rotation].concat(indexes.map(function (index) { + return poses[index]; + }))) + }); + }); + } + function renderAllDirections(moveable, React) { + return renderControls(moveable, ["nw", "ne", "sw", "se", "n", "w", "s", "e"], React); + } + function renderDiagonalDirections(moveable, React) { + return renderControls(moveable, ["nw", "ne", "sw", "se"], React); + } + + var Resizable = { + name: "resizable", + ableGroup: "size", + updateRect: true, + canPinch: true, + render: function (moveable, React) { + var _a = moveable.props, + resizable = _a.resizable, + edge = _a.edge; + + if (resizable) { + if (edge) { + return renderDiagonalDirections(moveable, React); + } + + return renderAllDirections(moveable, React); + } + }, + dragControlCondition: directionCondition, + dragControlStart: function (moveable, e) { + var _a; + + var inputEvent = e.inputEvent, + pinchFlag = e.pinchFlag, + datas = e.datas; + var inputTarget = inputEvent.target; + var direction = pinchFlag ? [1, 1] : getDirection(inputTarget); + var _b = moveable.state, + target = _b.target, + width = _b.width, + height = _b.height; + + if (!direction || !target) { + return false; + } + + !pinchFlag && setDragStart(moveable, { + datas: datas + }); + datas.datas = {}; + datas.direction = direction; + datas.startOffsetWidth = width; + datas.startOffsetHeight = height; + datas.prevWidth = 0; + datas.prevHeight = 0; + _a = getCSSSize(target), datas.startWidth = _a[0], datas.startHeight = _a[1]; + datas.transformOrigin = moveable.props.transformOrigin; + datas.startDirection = getStartDirection(moveable, direction); + datas.fixedPosition = getFixedPosition(moveable, datas.startDirection); + datas.fixedOriginalPosition = getFixedPosition(moveable, direction); + var params = fillParams(moveable, e, { + direction: direction, + set: function (_a) { + var startWidth = _a[0], + startHeight = _a[1]; + datas.startWidth = startWidth; + datas.startHeight = startHeight; + }, + setOrigin: function (origin) { + datas.transformOrigin = origin; + }, + dragStart: Draggable.dragStart(moveable, new CustomDragger().dragStart([0, 0], inputEvent)) + }); + var result = triggerEvent(moveable, "onResizeStart", params); + + if (result !== false) { + datas.isResize = true; + moveable.state.snapDirection = direction; + } + + return datas.isResize ? params : false; + }, + dragControl: function (moveable, e) { + var datas = e.datas, + distX = e.distX, + distY = e.distY, + parentFlag = e.parentFlag, + pinchFlag = e.pinchFlag, + parentDistance = e.parentDistance, + parentScale = e.parentScale, + inputEvent = e.inputEvent, + dragClient = e.dragClient; + var direction = datas.direction, + isResize = datas.isResize, + transformOrigin = datas.transformOrigin; + + if (!isResize) { + return; + } + + var startWidth = datas.startWidth, + startHeight = datas.startHeight, + startOffsetWidth = datas.startOffsetWidth, + startOffsetHeight = datas.startOffsetHeight, + prevWidth = datas.prevWidth, + prevHeight = datas.prevHeight; + var _a = moveable.props, + _b = _a.throttleResize, + throttleResize = _b === void 0 ? 0 : _b, + parentMoveable = _a.parentMoveable; + var keepRatio = moveable.props.keepRatio || parentScale; + var isWidth = direction[0] || !direction[1]; + var ratio = isWidth ? startOffsetHeight / startOffsetWidth : startOffsetWidth / startOffsetHeight; + var distWidth = 0; + var distHeight = 0; + + if (parentScale) { + distWidth = (parentScale[0] - 1) * startOffsetWidth; + distHeight = (parentScale[1] - 1) * startOffsetHeight; + } else if (pinchFlag) { + if (parentDistance) { + distWidth = parentDistance; + distHeight = parentDistance * startOffsetHeight / startOffsetWidth; + } + } else { + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + distWidth = direction[0] * dist[0]; + distHeight = direction[1] * dist[1]; + + if (keepRatio && startOffsetWidth && startOffsetHeight) { + var rad = getRad([0, 0], dist); + var standardRad = getRad([0, 0], direction); + var ratioRad = getRad([0, 0], [startOffsetWidth, startOffsetHeight]); + var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight); + var signSize = Math.cos(rad - standardRad) * size; + + if (!direction[0]) { + // top, bottom + distHeight = signSize; + distWidth = getKeepRatioWidth(distHeight, isWidth, ratio); + } else if (!direction[1]) { + // left, right + distWidth = signSize; + distHeight = getKeepRatioHeight(distWidth, isWidth, ratio); + } else { + // two-way + distWidth = Math.cos(ratioRad) * signSize; + distHeight = Math.sin(ratioRad) * signSize; + } + } + } + + var nextWidth = direction[0] || keepRatio ? Math.max(startOffsetWidth + distWidth, 0) : startOffsetWidth; + var nextHeight = direction[1] || keepRatio ? Math.max(startOffsetHeight + distHeight, 0) : startOffsetHeight; + var snapDist = [0, 0]; + + if (!pinchFlag) { + snapDist = checkSnapSize(moveable, nextWidth, nextHeight, direction, datas); + } + + if (keepRatio) { + if (direction[0] && direction[1] && snapDist[0] && snapDist[1]) { + if (Math.abs(snapDist[0]) > Math.abs(snapDist[1])) { + snapDist[1] = 0; + } else { + snapDist[0] = 0; + } + } + + var isNoSnap = !snapDist[0] && !snapDist[1]; + + if (isNoSnap) { + if (isWidth) { + nextWidth = throttle(nextWidth, throttleResize); + } else { + nextHeight = throttle(nextHeight, throttleResize); + } + } + + if (direction[0] && !direction[1] || snapDist[0] && !snapDist[1] || isNoSnap && isWidth) { + nextWidth += snapDist[0]; + nextHeight = getKeepRatioHeight(nextWidth, isWidth, ratio); + } else if (!direction[0] && direction[1] || !snapDist[0] && snapDist[1] || isNoSnap && !isWidth) { + nextHeight += snapDist[1]; + nextWidth = getKeepRatioWidth(nextHeight, isWidth, ratio); + } + } else { + nextWidth += snapDist[0]; + nextHeight += snapDist[1]; + + if (!snapDist[0]) { + nextWidth = throttle(nextWidth, throttleResize); + } + + if (!snapDist[1]) { + nextHeight = throttle(nextHeight, throttleResize); + } + } + + nextWidth = Math.round(nextWidth); + nextHeight = Math.round(nextHeight); + distWidth = nextWidth - startOffsetWidth; + distHeight = nextHeight - startOffsetHeight; + var delta = [distWidth - prevWidth, distHeight - prevHeight]; + datas.prevWidth = distWidth; + datas.prevHeight = distHeight; + + if (!parentMoveable && delta.every(function (num) { + return !num; + })) { + return; + } + + var startDirection = keepRatio || parentFlag ? direction : datas.startDirection; + var fixedPosition = dragClient || (keepRatio ? datas.fixedOriginalPosition : datas.fixedPosition); + var inverseDelta = !parentFlag && pinchFlag ? [0, 0] : getResizeDist(moveable, nextWidth, nextHeight, startDirection, fixedPosition, transformOrigin); + var params = fillParams(moveable, e, { + width: startWidth + distWidth, + height: startHeight + distHeight, + offsetWidth: nextWidth, + offsetHeight: nextHeight, + direction: direction, + dist: [distWidth, distHeight], + delta: delta, + isPinch: !!pinchFlag, + drag: Draggable.drag(moveable, setCustomDrag(moveable.state, inverseDelta, inputEvent)) + }); + triggerEvent(moveable, "onResize", params); + return params; + }, + dragControlAfter: function (moveable, e) { + var datas = e.datas; + var isResize = datas.isResize, + startOffsetWidth = datas.startOffsetWidth, + startOffsetHeight = datas.startOffsetHeight, + prevWidth = datas.prevWidth, + prevHeight = datas.prevHeight; + + if (!isResize) { + return; + } + + var _a = moveable.state, + width = _a.width, + height = _a.height; + var errorWidth = width - (startOffsetWidth + prevWidth); + var errorHeight = height - (startOffsetHeight + prevHeight); + var isErrorWidth = Math.abs(errorWidth) > 3; + var isErrorHeight = Math.abs(errorHeight) > 3; + + if (isErrorWidth) { + datas.startWidth += errorWidth; + datas.startOffsetWidth += errorWidth; + datas.prevWidth += errorWidth; + } + + if (isErrorHeight) { + datas.startHeight += errorHeight; + datas.startOffsetHeight += errorHeight; + datas.prevHeight += errorHeight; + } + + if (isErrorWidth || isErrorHeight) { + this.dragControl(moveable, e); + return true; + } + }, + dragControlEnd: function (moveable, e) { + var datas = e.datas, + isDrag = e.isDrag; + + if (!datas.isResize) { + return false; + } + + datas.isResize = false; + var params = fillParams(moveable, e, { + isDrag: isDrag + }); + triggerEvent(moveable, "onResizeEnd", params); + return isDrag; + }, + dragGroupControlCondition: directionCondition, + dragGroupControlStart: function (moveable, e) { + var datas = e.datas; + var params = this.dragControlStart(moveable, e); + + if (!params) { + return false; + } + + var direction = params.direction; + var startPos = getPosByReverseDirection(getAbsolutePosesByState(moveable.state), direction); + var events = triggerChildAble(moveable, this, "dragControlStart", datas, function (child, childDatas) { + var pos = getPosByReverseDirection(getAbsolutePosesByState(child.state), direction); + + var _a = caculate(createRotateMatrix(-moveable.rotation / 180 * Math.PI, 3), [pos[0] - startPos[0], pos[1] - startPos[1], 1], 3), + originalX = _a[0], + originalY = _a[1]; + + childDatas.originalX = originalX; + childDatas.originalY = originalY; + return e; + }); + + var nextParams = __assign$3({}, params, { + targets: moveable.props.targets, + events: events + }); + + var result = triggerEvent(moveable, "onResizeGroupStart", nextParams); + datas.isResize = result !== false; + return datas.isResize ? params : false; + }, + dragGroupControl: function (moveable, e) { + var datas = e.datas; + + if (!datas.isResize) { + return; + } + + var params = this.dragControl(moveable, e); + + if (!params) { + return; + } + + var offsetWidth = params.offsetWidth, + offsetHeight = params.offsetHeight, + dist = params.dist; + var parentScale = [offsetWidth / (offsetWidth - dist[0]), offsetHeight / (offsetHeight - dist[1])]; + var fixedPosition = datas.fixedOriginalPosition; + var events = triggerChildAble(moveable, this, "dragControl", datas, function (_, childDatas) { + var _a = caculate(createRotateMatrix(moveable.rotation / 180 * Math.PI, 3), [childDatas.originalX * parentScale[0], childDatas.originalY * parentScale[1], 1], 3), + clientX = _a[0], + clientY = _a[1]; + + return __assign$3({}, e, { + parentScale: parentScale, + dragClient: plus(fixedPosition, [clientX, clientY]) + }); + }); + + var nextParams = __assign$3({ + targets: moveable.props.targets, + events: events + }, params); + + triggerEvent(moveable, "onResizeGroup", nextParams); + return nextParams; + }, + dragGroupControlEnd: function (moveable, e) { + var isDrag = e.isDrag, + datas = e.datas; + + if (!datas.isResize) { + return; + } + + this.dragControlEnd(moveable, e); + triggerChildAble(moveable, this, "dragControlEnd", datas, e); + var nextParams = fillParams(moveable, e, { + targets: moveable.props.targets, + isDrag: isDrag + }); + triggerEvent(moveable, "onResizeGroupEnd", nextParams); + return isDrag; + } + }; + + var Scalable = { + name: "scalable", + ableGroup: "size", + canPinch: true, + render: function (moveable, React) { + var _a = moveable.props, + resizable = _a.resizable, + scalable = _a.scalable, + edge = _a.edge; + + if (!resizable && scalable) { + if (edge) { + return renderDiagonalDirections(moveable, React); + } + + return renderAllDirections(moveable, React); + } + }, + dragControlCondition: directionCondition, + dragControlStart: function (moveable, e) { + var datas = e.datas, + pinchFlag = e.pinchFlag, + inputEvent = e.inputEvent; + var inputTarget = inputEvent.target; + var direction = pinchFlag ? [1, 1] : getDirection(inputTarget); + var _a = moveable.state, + width = _a.width, + height = _a.height, + targetTransform = _a.targetTransform, + target = _a.target; + + if (!direction || !target) { + return false; + } + + if (!pinchFlag) { + setDragStart(moveable, { + datas: datas + }); + } + + datas.datas = {}; + datas.transform = targetTransform; + datas.prevDist = [1, 1]; + datas.direction = direction; + datas.width = width; + datas.height = height; + datas.startScale = [1, 1]; + var params = fillParams(moveable, e, { + direction: direction, + set: function (scale) { + datas.startScale = scale; + }, + dragStart: Draggable.dragStart(moveable, new CustomDragger().dragStart([0, 0], inputEvent)) + }); + var result = triggerEvent(moveable, "onScaleStart", params); + + if (result !== false) { + datas.isScale = true; + moveable.state.snapDirection = direction; + } + + return datas.isScale ? params : false; + }, + dragControl: function (moveable, e) { + var datas = e.datas, + distX = e.distX, + distY = e.distY, + parentScale = e.parentScale, + parentDistance = e.parentDistance, + parentFlag = e.parentFlag, + pinchFlag = e.pinchFlag, + inputEvent = e.inputEvent, + dragClient = e.dragClient; + var prevDist = datas.prevDist, + direction = datas.direction, + width = datas.width, + height = datas.height, + transform = datas.transform, + isScale = datas.isScale, + startScale = datas.startScale; + + if (!isScale) { + return false; + } + + var _a = moveable.props, + throttleScale = _a.throttleScale, + parentMoveable = _a.parentMoveable; + var keepRatio = moveable.props.keepRatio || parentScale; + var state = moveable.state; + var isWidth = direction[0] || !direction[1]; + var scaleX = 1; + var scaleY = 1; + var startWidth = width * startScale[0]; + var startHeight = height * startScale[1]; + var ratio = isWidth ? startHeight / startWidth : startWidth / startHeight; + + if (parentScale) { + scaleX = parentScale[0]; + scaleY = parentScale[1]; + } else if (pinchFlag) { + if (parentDistance) { + scaleX = (width + parentDistance) / width; + scaleY = (height + parentDistance * height / width) / height; + } + } else { + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }); + var distWidth = direction[0] * dist[0]; + var distHeight = direction[1] * dist[1]; + + if (keepRatio && width && height) { + var rad = getRad([0, 0], dist); + var standardRad = getRad([0, 0], direction); + var ratioRad = getRad([0, 0], [startWidth, startHeight]); + var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight); + var signSize = Math.cos(rad - standardRad) * size; + + if (!direction[0]) { + // top, bottom + distHeight = signSize; + distWidth = getKeepRatioWidth(distHeight, isWidth, ratio); + } else if (!direction[1]) { + // left, right + distWidth = signSize; + distHeight = getKeepRatioHeight(distWidth, isWidth, ratio); + } else { + // two-way + distWidth = Math.cos(ratioRad) * signSize; + distHeight = Math.sin(ratioRad) * signSize; + } + } + + scaleX = (width + distWidth) / width; + scaleY = (height + distHeight) / height; + } + + scaleX = direction[0] ? scaleX * startScale[0] : startScale[0]; + scaleY = direction[1] ? scaleY * startScale[1] : startScale[1]; + + if (scaleX === 0) { + scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE; + } + + if (scaleY === 0) { + scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE; + } + + var nowDist = [scaleX / startScale[0], scaleY / startScale[1]]; + var scale = [scaleX, scaleY]; + var snapDirection = direction; + + if (moveable.props.groupable) { + snapDirection = [(nowDist[0] >= 0 ? 1 : -1) * direction[0], (nowDist[1] >= 0 ? 1 : -1) * direction[1]]; + var stateDirection = state.snapDirection; + + if (isArray(stateDirection) && (stateDirection[0] || stateDirection[1])) { + state.snapDirection = snapDirection; + } + } + + var snapDist = [0, 0]; + + if (!pinchFlag) { + snapDist = checkSnapScale(moveable, nowDist, direction, snapDirection, datas); + } + + if (keepRatio) { + if (direction[0] && direction[1] && snapDist[0] && snapDist[1]) { + if (Math.abs(snapDist[0]) > Math.abs(snapDist[1])) { + snapDist[1] = 0; + } else { + snapDist[0] = 0; + } + } + + var isNoSnap = !snapDist[0] && !snapDist[1]; + + if (isNoSnap) { + if (isWidth) { + nowDist[0] = throttle(nowDist[0] * startScale[0], throttleScale) / startScale[0]; + } else { + nowDist[1] = throttle(nowDist[1] * startScale[1], throttleScale) / startScale[1]; + } + } + + if (direction[0] && !direction[1] || snapDist[0] && !snapDist[1] || isNoSnap && isWidth) { + nowDist[0] += snapDist[0]; + var snapHeight = getKeepRatioHeight(width * nowDist[0] * startScale[0], isWidth, ratio); + nowDist[1] = snapHeight / height / startScale[1]; + } else if (!direction[0] && direction[1] || !snapDist[0] && snapDist[1] || isNoSnap && !isWidth) { + nowDist[1] += snapDist[1]; + var snapWidth = getKeepRatioWidth(height * nowDist[1] * startScale[1], isWidth, ratio); + nowDist[0] = snapWidth / width / startScale[0]; + } + } else { + if (!snapDist[0]) { + nowDist[0] = throttle(nowDist[0] * startScale[0], throttleScale) / startScale[0]; + } + + if (!snapDist[1]) { + nowDist[1] = throttle(nowDist[1] * startScale[1], throttleScale) / startScale[1]; + } + } + + if (nowDist[0] === 0) { + nowDist[0] = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE; + } + + if (nowDist[1] === 0) { + nowDist[1] = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE; + } + + var delta = [nowDist[0] / prevDist[0], nowDist[1] / prevDist[1]]; + scale = multiply2(nowDist, startScale); + datas.prevDist = nowDist; + + if (scaleX === prevDist[0] && scaleY === prevDist[1] && !parentMoveable) { + return false; + } + + var inverseDelta = !parentFlag && pinchFlag ? [0, 0] : getScaleDist(moveable, delta, direction, dragClient); + var params = fillParams(moveable, e, { + scale: scale, + direction: direction, + dist: nowDist, + delta: delta, + transform: transform + " scale(" + scaleX + ", " + scaleY + ")", + isPinch: !!pinchFlag, + drag: Draggable.drag(moveable, setCustomDrag(moveable.state, inverseDelta, inputEvent)) + }); + triggerEvent(moveable, "onScale", params); + return params; + }, + dragControlEnd: function (moveable, e) { + var datas = e.datas, + isDrag = e.isDrag; + + if (!datas.isScale) { + return false; + } + + datas.isScale = false; + triggerEvent(moveable, "onScaleEnd", fillParams(moveable, e, { + isDrag: isDrag + })); + return isDrag; + }, + dragGroupControlCondition: directionCondition, + dragGroupControlStart: function (moveable, e) { + var datas = e.datas; + var params = this.dragControlStart(moveable, e); + + if (!params) { + return false; + } + + var direction = params.direction; + var startPos = getPosByReverseDirection(getAbsolutePosesByState(moveable.state), direction); + var events = triggerChildAble(moveable, this, "dragControlStart", datas, function (child, childDatas) { + var pos = getPosByReverseDirection(getAbsolutePosesByState(child.state), direction); + + var _a = caculate(createRotateMatrix(-moveable.rotation / 180 * Math.PI, 3), [pos[0] - startPos[0], pos[1] - startPos[1], 1], 3), + originalX = _a[0], + originalY = _a[1]; + + childDatas.originalX = originalX; + childDatas.originalY = originalY; + return e; + }); + + var nextParams = __assign$3({}, params, { + targets: moveable.props.targets, + events: events + }); + + var result = triggerEvent(moveable, "onScaleGroupStart", nextParams); + datas.isScale = result !== false; + return datas.isScale ? nextParams : false; + }, + dragGroupControl: function (moveable, e) { + var datas = e.datas; + + if (!datas.isScale) { + return; + } + + var params = this.dragControl(moveable, e); + + if (!params) { + return; + } + + var scale = params.scale, + direction = params.direction, + dist = params.dist; + var prevPos = getPosByReverseDirection(getAbsolutePosesByState(moveable.state), multiply2(direction, dist)); + var events = triggerChildAble(moveable, this, "dragControl", datas, function (_, childDatas) { + var _a = caculate(createRotateMatrix(moveable.rotation / 180 * Math.PI, 3), [childDatas.originalX * scale[0], childDatas.originalY * scale[1], 1], 3), + clientX = _a[0], + clientY = _a[1]; + + return __assign$3({}, e, { + parentScale: scale, + dragClient: plus(prevPos, [clientX, clientY]) + }); + }); + + var nextParams = __assign$3({ + targets: moveable.props.targets, + events: events + }, params); + + triggerEvent(moveable, "onScaleGroup", nextParams); + return nextParams; + }, + dragGroupControlEnd: function (moveable, e) { + var isDrag = e.isDrag, + datas = e.datas; + + if (!datas.isScale) { + return; + } + + this.dragControlEnd(moveable, e); + triggerChildAble(moveable, this, "dragControlEnd", datas, e); + var nextParams = fillParams(moveable, e, { + targets: moveable.props.targets, + isDrag: isDrag + }); + triggerEvent(moveable, "onScaleGroupEnd", nextParams); + return isDrag; + } + }; + + function getMiddleLinePos(pos1, pos2) { + return pos1.map(function (pos, i) { + return dot(pos, pos2[i], 1, 2); + }); + } + + function getTriangleRad(pos1, pos2, pos3) { + // pos1 Rad + var rad1 = getRad(pos1, pos2); + var rad2 = getRad(pos1, pos3); + var rad = rad2 - rad1; + return rad >= 0 ? rad : rad + 2 * Math.PI; + } + + function isValidPos(poses1, poses2) { + var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]); + var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]); + var pi = Math.PI; + + if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) { + return false; + } + + return true; + } + + var Warpable = { + name: "warpable", + ableGroup: "size", + render: function (moveable, React) { + var _a = moveable.props, + resizable = _a.resizable, + scalable = _a.scalable, + warpable = _a.warpable; + + if (resizable || scalable || !warpable) { + return; + } + + var _b = moveable.state, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + var linePosFrom1 = getMiddleLinePos(pos1, pos2); + var linePosFrom2 = getMiddleLinePos(pos2, pos1); + var linePosFrom3 = getMiddleLinePos(pos1, pos3); + var linePosFrom4 = getMiddleLinePos(pos3, pos1); + var linePosTo1 = getMiddleLinePos(pos3, pos4); + var linePosTo2 = getMiddleLinePos(pos4, pos3); + var linePosTo3 = getMiddleLinePos(pos2, pos4); + var linePosTo4 = getMiddleLinePos(pos4, pos2); + return [React.createElement("div", { + className: prefix("line"), + key: "middeLine1", + style: getLineStyle(linePosFrom1, linePosTo1) + }), React.createElement("div", { + className: prefix("line"), + key: "middeLine2", + style: getLineStyle(linePosFrom2, linePosTo2) + }), React.createElement("div", { + className: prefix("line"), + key: "middeLine3", + style: getLineStyle(linePosFrom3, linePosTo3) + }), React.createElement("div", { + className: prefix("line"), + key: "middeLine4", + style: getLineStyle(linePosFrom4, linePosTo4) + })].concat(renderAllDirections(moveable, React)); + }, + dragControlCondition: function (target) { + return hasClass(target, prefix("direction")); + }, + dragControlStart: function (moveable, e) { + var datas = e.datas, + inputEvent = e.inputEvent; + var target = moveable.props.target; + var inputTarget = inputEvent.target; + var direction = getDirection(inputTarget); + + if (!direction || !target) { + return false; + } + + var state = moveable.state; + var transformOrigin = state.transformOrigin, + is3d = state.is3d, + targetTransform = state.targetTransform, + targetMatrix = state.targetMatrix, + width = state.width, + height = state.height, + left = state.left, + top = state.top; + datas.datas = {}; + datas.targetTransform = targetTransform; + datas.warpTargetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4); + datas.targetInverseMatrix = ignoreDimension(invert(datas.warpTargetMatrix, 4), 3, 4); + datas.direction = direction; + datas.left = left; + datas.top = top; + setDragStart(moveable, { + datas: datas + }); + datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) { + return minus(p, transformOrigin); + }); + datas.nextPoses = datas.poses.map(function (_a) { + var x = _a[0], + y = _a[1]; + return caculate(datas.warpTargetMatrix, [x, y, 0, 1], 4); + }); + datas.startMatrix = createIdentityMatrix(4); + datas.prevMatrix = createIdentityMatrix(4); + datas.absolutePoses = getAbsolutePosesByState(state); + datas.posIndexes = getPosIndexesByDirection(direction); + state.snapDirection = direction; + var params = fillParams(moveable, e, { + set: function (matrix) { + datas.startMatrix = matrix; + } + }); + var result = triggerEvent(moveable, "onWarpStart", params); + + if (result !== false) { + datas.isWarp = true; + } + + return result; + }, + dragControl: function (moveable, e) { + var datas = e.datas; + var distX = e.distX, + distY = e.distY; + var targetInverseMatrix = datas.targetInverseMatrix, + prevMatrix = datas.prevMatrix, + isWarp = datas.isWarp, + startMatrix = datas.startMatrix, + poses = datas.poses, + posIndexes = datas.posIndexes, + absolutePoses = datas.absolutePoses; + + if (!isWarp) { + return false; + } + + if (hasGuidelines(moveable, "warpable")) { + var selectedPoses = posIndexes.map(function (index) { + return absolutePoses[index]; + }); + + if (selectedPoses.length > 1) { + selectedPoses.push([(selectedPoses[0][0] + selectedPoses[1][0]) / 2, (selectedPoses[0][1] + selectedPoses[1][1]) / 2]); + } + + var snapInfos = checkSnapPoses(moveable, selectedPoses.map(function (pos) { + return pos[0] + distX; + }), selectedPoses.map(function (pos) { + return pos[1] + distY; + })); + var horizontalOffset = snapInfos.horizontal.offset, + verticalOffset = snapInfos.vertical.offset; + distY -= horizontalOffset; + distX -= verticalOffset; + } + + var dist = getDragDist({ + datas: datas, + distX: distX, + distY: distY + }, true); + var nextPoses = datas.nextPoses.slice(); + posIndexes.forEach(function (index) { + nextPoses[index] = plus(nextPoses[index], dist); + }); + + if (!NEARBY_POS.every(function (nearByPoses) { + return isValidPos(nearByPoses.map(function (i) { + return poses[i]; + }), nearByPoses.map(function (i) { + return nextPoses[i]; + })); + })) { + return false; + } + + var h = createWarpMatrix(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]); + + if (!h.length) { + return false; + } + + var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4)); + var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")"; + var delta = multiplyCSS(invert(prevMatrix, 4), matrix, 4); + datas.prevMatrix = matrix; + triggerEvent(moveable, "onWarp", fillParams(moveable, e, { + delta: delta, + matrix: multiplyCSS(startMatrix, matrix, 4), + multiply: multiplyCSS, + dist: matrix, + transform: transform + })); + return true; + }, + dragControlEnd: function (moveable, e) { + var datas = e.datas, + isDrag = e.isDrag; + + if (!datas.isWarp) { + return false; + } + + datas.isWarp = false; + triggerEvent(moveable, "onWarpEnd", fillParams(moveable, e, { + isDrag: isDrag + })); + return isDrag; + } + }; + + var AREA = prefix("area"); + var AREA_PIECES = prefix("area-pieces"); + var AREA_PIECE = prefix("area-piece"); + var AVOID = prefix("avoid"); + + function restoreStyle(moveable) { + var el = moveable.areaElement; + var _a = moveable.state, + width = _a.width, + height = _a.height; + removeClass(el, AVOID); + el.style.cssText += "left: 0px; top: 0px; width: " + width + "px; height: " + height + "px"; + } + + function renderPieces(React) { + return React.createElement("div", { + key: "area_pieces", + className: AREA_PIECES + }, React.createElement("div", { + className: AREA_PIECE + }), React.createElement("div", { + className: AREA_PIECE + }), React.createElement("div", { + className: AREA_PIECE + }), React.createElement("div", { + className: AREA_PIECE + })); + } + + var DragArea = { + name: "dragArea", + render: function (moveable, React) { + var _a = moveable.props, + target = _a.target, + dragArea = _a.dragArea, + groupable = _a.groupable; + var _b = moveable.state, + width = _b.width, + height = _b.height, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + + if (groupable) { + return [React.createElement("div", { + key: "area", + ref: ref(moveable, "areaElement"), + className: AREA + }), renderPieces(React)]; + } + + if (!target || !dragArea) { + return []; + } + + var h = createWarpMatrix([0, 0], [width, 0], [0, height], [width, height], pos1, pos2, pos3, pos4); + var transform = h.length ? "matrix3d(" + convertMatrixtoCSS(h).join(",") + ")" : "none"; + return [React.createElement("div", { + key: "area", + ref: ref(moveable, "areaElement"), + className: AREA, + style: { + top: "0px", + left: "0px", + width: width + "px", + height: height + "px", + transformOrigin: "0 0", + transform: transform + } + }), renderPieces(React)]; + }, + dragStart: function (moveable, _a) { + var datas = _a.datas, + clientX = _a.clientX, + clientY = _a.clientY, + inputEvent = _a.inputEvent; + datas.isDragArea = false; + datas.inputTarget = inputEvent.target; + var areaElement = moveable.areaElement; + var _b = moveable.state, + clientRect = _b.clientRect, + pos1 = _b.pos1, + pos2 = _b.pos2, + pos3 = _b.pos3, + pos4 = _b.pos4; + var left = clientRect.left, + top = clientRect.top, + width = clientRect.width, + height = clientRect.height; + + var _c = getRect([pos1, pos2, pos3, pos4]), + relativeLeft = _c.left, + relativeTop = _c.top; + + var posX = clientX - left; + var posY = clientY - top; + var rects = [{ + left: relativeLeft, + top: relativeTop, + width: width, + height: posY - 10 + }, { + left: relativeLeft, + top: relativeTop, + width: posX - 10, + height: height + }, { + left: relativeLeft, + top: relativeTop + posY + 10, + width: width, + height: height - posY - 10 + }, { + left: relativeLeft + posX + 10, + top: relativeTop, + width: width - posX - 10, + height: height + }]; + var children = [].slice.call(areaElement.nextElementSibling.children); + rects.forEach(function (rect, i) { + children[i].style.cssText = "left: " + rect.left + "px;top: " + rect.top + "px; width: " + rect.width + "px; height: " + rect.height + "px;"; + }); + addClass(areaElement, AVOID); + }, + drag: function (moveable, _a) { + var datas = _a.datas; + + if (!datas.isDragArea) { + datas.isDragArea = true; + restoreStyle(moveable); + } + }, + dragEnd: function (moveable, e) { + var inputEvent = e.inputEvent, + isDragArea = e.isDragArea, + datas = e.datas; + + if (!datas.isDragArea) { + restoreStyle(moveable); + } + + var target = moveable.state.target; + var inputTarget = inputEvent.target; + + if (isDragArea || moveable.isMoveableElement(inputTarget)) { + return; + } + + var containsTarget = target.contains(inputTarget); + triggerEvent(moveable, "onClick", fillParams(moveable, e, { + inputTarget: inputTarget, + isTarget: target === inputTarget, + containsTarget: containsTarget + })); + }, + dragGroupStart: function (moveable, e) { + this.dragStart(moveable, e); + }, + dragGroup: function (moveable, e) { + this.drag(moveable, e); + }, + dragGroupEnd: function (moveable, e) { + var inputEvent = e.inputEvent, + isDragArea = e.isDragArea, + datas = e.datas; + + if (!isDragArea) { + restoreStyle(moveable); + } + + var prevInputTarget = datas.inputTarget; + var inputTarget = inputEvent.target; + + if (isDragArea || moveable.isMoveableElement(inputTarget) || prevInputTarget === inputTarget) { + return; + } + + var targets = moveable.props.targets; + var targetIndex = targets.indexOf(inputTarget); + var isTarget = targetIndex > -1; + var containsTarget = false; + + if (targetIndex === -1) { + targetIndex = findIndex(targets, function (parentTarget) { + return parentTarget.contains(inputTarget); + }); + containsTarget = targetIndex > -1; + } + + triggerEvent(moveable, "onClickGroup", fillParams(moveable, e, { + targets: targets, + inputTarget: inputTarget, + targetIndex: targetIndex, + isTarget: isTarget, + containsTarget: containsTarget + })); + } + }; + + var Origin = { + name: "origin", + render: function (moveable, React) { + if (!moveable.props.origin) { + return null; + } + + var _a = moveable.state, + beforeOrigin = _a.beforeOrigin, + rotation = _a.rotation; + return [React.createElement("div", { + className: prefix("control", "origin"), + style: getControlTransform(rotation, beforeOrigin), + key: "beforeOrigin" + })]; + } + }; + + function getDefaultScrollPosition(e) { + var scrollContainer = e.scrollContainer; + return [scrollContainer.scrollLeft, scrollContainer.scrollTop]; + } + + var Scrollable = { + name: "scrollable", + canPinch: true, + dragStart: function (moveable, e) { + var props = moveable.props; + var _a = props.scrollContainer, + scrollContainer = _a === void 0 ? moveable.getContainer() : _a; + var scrollClientRect = scrollContainer.getBoundingClientRect(); + var datas = e.datas; + datas.scrollContainer = scrollContainer; + datas.scrollRect = { + left: scrollClientRect.left, + top: scrollClientRect.top, + width: scrollClientRect.width, + height: scrollClientRect.height + }; + datas.isScroll = true; + }, + drag: function (moveable, e) { + this.checkScroll(moveable, e); + }, + dragEnd: function (moveable, e) { + e.datas.isScroll = false; + }, + dragGroupStart: function (moveable, e) { + this.dragStart(moveable, e); + }, + dragGroup: function (moveable, e) { + this.drag(moveable, __assign$3({}, e, { + targets: moveable.props.targets + })); + }, + dragGroupEnd: function (moveable, e) { + this.dragEnd(moveable, e); + }, + checkScroll: function (moveable, e) { + var datas = e.datas, + inputEvent = e.inputEvent, + clientX = e.clientX, + clientY = e.clientY, + isScroll = e.isScroll, + targets = e.targets; + + if (!datas.isScroll) { + return; + } + + if (!isScroll) { + datas.prevClientX = clientX; + datas.prevClientY = clientY; + } + + var _a = moveable.props, + _b = _a.scrollThreshold, + scrollThreshold = _b === void 0 ? 0 : _b, + _c = _a.getScrollPosition, + getScrollPosition = _c === void 0 ? getDefaultScrollPosition : _c; + var scrollContainer = datas.scrollContainer, + scrollRect = datas.scrollRect; + var direction = [0, 0]; + + if (scrollRect.top > clientY - scrollThreshold) { + direction[1] = -1; + } else if (scrollRect.top + scrollRect.height < clientY + scrollThreshold) { + direction[1] = 1; + } + + if (scrollRect.left > clientX - scrollThreshold) { + direction[0] = -1; + } else if (scrollRect.left + scrollRect.width < clientX + scrollThreshold) { + direction[0] = 1; + } + + if (!direction[0] && !direction[1]) { + return; + } + + var pos = getScrollPosition({ + scrollContainer: scrollContainer, + direction: direction + }); + var params = fillParams(moveable, e, { + scrollContainer: scrollContainer, + direction: direction + }); + var eventName = targets ? "onScrollGroup" : "onScroll"; + + if (targets) { + params.targets = targets; + } + + triggerEvent(moveable, eventName, params); + requestAnimationFrame(function () { + if (datas.prevClientX !== clientX || datas.prevClientY !== clientY) { + return; + } + + var nextPos = getScrollPosition({ + scrollContainer: scrollContainer, + direction: direction + }); + var offsetX = nextPos[0] - pos[0]; + var offsetY = nextPos[1] - pos[1]; + + if (!offsetX && !offsetY) { + return; + } + + moveable.targetDragger.scrollBy(direction[0] ? offsetX : 0, direction[1] ? offsetY : 0, inputEvent, false); + setTimeout(function () { + if (datas.prevClientX !== clientX || datas.prevClientY !== clientY) { + return; + } + + moveable.targetDragger.onDrag(inputEvent, true); + }, 10); + }); + } + }; + + var MOVEABLE_ABLES = [Snappable, Pinchable, Draggable, Rotatable, Resizable, Scalable, Warpable, Scrollable, DragArea, Origin]; + + var Groupable = { + name: "groupable", + render: function (moveable, React) { + var targets = moveable.props.targets || []; + moveable.moveables = []; + var _a = moveable.state, + left = _a.left, + top = _a.top; + var position = { + left: left, + top: top + }; + return targets.map(function (target, i) { + return React.createElement(MoveableManager, { + key: i, + ref: refs(moveable, "moveables", i), + target: target, + origin: false, + parentMoveable: moveable, + parentPosition: position + }); + }).slice(); + } + }; + + function getMaxPos(poses, index) { + return Math.max.apply(Math, poses.map(function (_a) { + var pos1 = _a[0], + pos2 = _a[1], + pos3 = _a[2], + pos4 = _a[3]; + return Math.max(pos1[index], pos2[index], pos3[index], pos4[index]); + })); + } + + function getMinPos(poses, index) { + return Math.min.apply(Math, poses.map(function (_a) { + var pos1 = _a[0], + pos2 = _a[1], + pos3 = _a[2], + pos4 = _a[3]; + return Math.min(pos1[index], pos2[index], pos3[index], pos4[index]); + })); + } + + function getGroupRect(moveables, rotation) { + if (!moveables.length) { + return [0, 0, 0, 0]; + } + + var moveablePoses = moveables.map(function (_a) { + var state = _a.state; + return getAbsolutePosesByState(state); + }); + var minX = MAX_NUM; + var minY = MAX_NUM; + var groupWidth = 0; + var groupHeight = 0; + var fixedRotation = throttle(rotation, TINY_NUM); + + if (fixedRotation % 90) { + var rad_1 = rotation / 180 * Math.PI; + var a1_1 = Math.tan(rad_1); + var a2_1 = -1 / a1_1; + var b1s_1 = [MIN_NUM, MAX_NUM]; + var b2s_1 = [MIN_NUM, MAX_NUM]; + moveablePoses.forEach(function (poses) { + poses.forEach(function (pos) { + // ax + b = y + // ㅠ = y - ax + var b1 = pos[1] - a1_1 * pos[0]; + var b2 = pos[1] - a2_1 * pos[0]; + b1s_1[0] = Math.max(b1s_1[0], b1); + b1s_1[1] = Math.min(b1s_1[1], b1); + b2s_1[0] = Math.max(b2s_1[0], b2); + b2s_1[1] = Math.min(b2s_1[1], b2); + }); + }); + b1s_1.forEach(function (b1) { + // a1x + b1 = a2x + b2 + b2s_1.forEach(function (b2) { + // (a1 - a2)x = b2 - b1 + var x = (b2 - b1) / (a1_1 - a2_1); + var y = a1_1 * x + b1; + minX = Math.min(minX, x); + minY = Math.min(minY, y); + }); + }); + var rotatePoses = moveablePoses.map(function (_a) { + var pos1 = _a[0], + pos2 = _a[1], + pos3 = _a[2], + pos4 = _a[3]; + return [rotate(pos1, -rad_1), rotate(pos2, -rad_1), rotate(pos3, -rad_1), rotate(pos4, -rad_1)]; + }); + groupWidth = getMaxPos(rotatePoses, 0) - getMinPos(rotatePoses, 0); + groupHeight = getMaxPos(rotatePoses, 1) - getMinPos(rotatePoses, 1); + } else { + minX = getMinPos(moveablePoses, 0); + minY = getMinPos(moveablePoses, 1); + groupWidth = getMaxPos(moveablePoses, 0) - minX; + groupHeight = getMaxPos(moveablePoses, 1) - minY; + + if (fixedRotation % 180) { + var changedWidth = groupWidth; + groupWidth = groupHeight; + groupHeight = changedWidth; + } + } + + return [minX, minY, groupWidth, groupHeight]; + } + + var MoveableGroup = + /*#__PURE__*/ + function (_super) { + __extends$3(MoveableGroup, _super); + + function MoveableGroup() { + var _this = _super !== null && _super.apply(this, arguments) || this; + + _this.differ = new ChildrenDiffer(); + _this.moveables = []; + _this.rotation = 0; + return _this; + } + + var __proto = MoveableGroup.prototype; + + __proto.updateEvent = function (prevProps) { + var state = this.state; + var props = this.props; + + if (!state.target) { + state.target = this.areaElement; + this.controlBox.getElement().style.display = "block"; + this.targetDragger = getAbleDragger(this, state.target, "targetAbles", "Group"); + this.controlDragger = getAbleDragger(this, this.controlBox.getElement(), "controlAbles", "GroupControl"); + } + + var isContainerChanged = !equals(prevProps.container, props.container); + + if (isContainerChanged) { + state.container = props.container; + } + + var _a = this.differ.update(props.targets), + added = _a.added, + changed = _a.changed, + removed = _a.removed; + + if (isContainerChanged || added.length || changed.length || removed.length) { + this.updateRect(); + } + }; + + __proto.checkUpdate = function () { + this.updateAbles(); + }; + + __proto.updateRect = function (type, isTarget, isSetState) { + var _a; + + if (isSetState === void 0) { + isSetState = true; + } + + if (!this.controlBox) { + return; + } + + this.moveables.forEach(function (moveable) { + moveable.updateRect(type, false, false); + }); + var state = this.state; + var props = this.props; + var target = state.target || props.target; + + if (!isTarget || type !== "" && props.updateGroup) { + // reset rotataion + this.rotation = props.defaultGroupRotate; + } + + var rotation = this.rotation; + + var _b = getGroupRect(this.moveables, rotation), + left = _b[0], + top = _b[1], + width = _b[2], + height = _b[3]; // tslint:disable-next-line: max-line-length + + + target.style.cssText += "left:0px;top:0px;width:" + width + "px; height:" + height + "px;transform:rotate(" + rotation + "deg)"; + state.width = width; + state.height = height; + var info = getTargetInfo(target, this.controlBox.getElement(), this.getContainer(), state); + var pos = [info.left, info.top]; + _a = getAbsolutePosesByState(info), info.pos1 = _a[0], info.pos2 = _a[1], info.pos3 = _a[2], info.pos4 = _a[3]; + info.origin = plus(pos, info.origin); + info.beforeOrigin = plus(pos, info.beforeOrigin); + var clientRect = info.clientRect; + clientRect.top += top - info.top - state.top; + clientRect.left += left - info.left - state.left; + this.updateState(__assign$3({}, info, { + left: left - info.left, + top: top - info.top + }), isSetState); + }; + + __proto.triggerEvent = function (name, e) { + if (name.indexOf("Group") > -1) { + return _super.prototype.triggerEvent.call(this, name, e); + } + }; + + __proto.updateAbles = function () { + _super.prototype.updateAbles.call(this, this.props.ables.concat([Groupable]), "Group"); + }; + + MoveableGroup.defaultProps = __assign$3({}, MoveableManager.defaultProps, { + transformOrigin: ["50%", "50%"], + groupable: true, + dragArea: true, + keepRatio: true, + targets: [], + defaultGroupRotate: 0 + }); + return MoveableGroup; + }(MoveableManager); + + var Moveable = + /*#__PURE__*/ + function (_super) { + __extends$3(Moveable, _super); + + function Moveable() { + return _super !== null && _super.apply(this, arguments) || this; + } + + var __proto = Moveable.prototype; + + __proto.render = function () { + var props = this.props; + var ables = props.ables || []; + var target = this.props.target || this.props.targets; + var isArr = isArray(target); + var isGroup = isArr && target.length > 1; + + if (isGroup) { + var nextProps = __assign$3({}, this.props, { + target: null, + targets: target, + ables: MOVEABLE_ABLES.concat([Groupable], ables) + }); + + return W(MoveableGroup, __assign$3({ + key: "group", + ref: ref(this, "moveable") + }, nextProps)); + } else { + var moveableTarget = isArr ? target[0] : target; + return W(MoveableManager, __assign$3({ + key: "single", + ref: ref(this, "moveable") + }, __assign$3({}, this.props, { + target: moveableTarget, + ables: MOVEABLE_ABLES.concat(ables) + }))); + } + }; + + __proto.isMoveableElement = function (target) { + return this.moveable.isMoveableElement(target); + }; + + __proto.dragStart = function (e) { + this.moveable.dragStart(e); + }; + + __proto.isInside = function (clientX, clientY) { + return this.moveable.isInside(clientX, clientY); + }; + + __proto.updateRect = function () { + this.moveable.updateRect(); + }; + + __proto.updateTarget = function () { + this.moveable.updateTarget(); + }; + + __proto.getRect = function () { + return this.moveable.getRect(); + }; + + __proto.destroy = function () { + this.moveable.componentWillUnmount(); + }; + + return Moveable; + }($$1); + + 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 j$1(h(Moveable, __assign({ + ref: ref(this, "preactMoveable") + }, this.state)), this.state.parentElement); + }; + + return InnerMoveable; + }(y); + + var PROPERTIES = ["draggable", "resizable", "scalable", "rotatable", "warpable", "pinchable", "snappable", "origin", "target", "edge", "throttleDrag", "throttleResize", "throttleScale", "throttleRotate", "keepRatio", "dragArea", "pinchThreshold", "snapCenter", "snapThreshold", "horizontalGuidelines", "verticalGuidelines", "elementGuidelines", "bounds", "className", "renderDirections", "scrollable", "getScrollPosition", "scrollContainer", "scrollThreshold", "baseDirection"]; + var EVENTS = ["dragStart", "drag", "dragEnd", "resizeStart", "resize", "resizeEnd", "scaleStart", "scale", "scaleEnd", "rotateStart", "rotate", "rotateEnd", "warpStart", "warp", "warpEnd", "pinchStart", "pinch", "pinchEnd", "dragGroupStart", "dragGroup", "dragGroupEnd", "resizeGroupStart", "resizeGroup", "resizeGroupEnd", "scaleGroupStart", "scaleGroup", "scaleGroupEnd", "rotateGroupStart", "rotateGroup", "rotateGroupEnd", "pinchGroupStart", "pinchGroup", "pinchGroupEnd", "clickGroup", "scroll", "scrollGroup", "renderStart", "render", "renderEnd", "renderGroupStart", "renderGroup", "renderGroupEnd"]; + + /** + * 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.tempElement = document.createElement("div"); + + var nextOptions = __assign({ + container: parentElement + }, options); + + var events = {}; + EVENTS.forEach(function (name) { + events[camelize("on " + name)] = function (e) { + return _this.trigger(name, e); + }; + }); + H(h(InnerMoveable, __assign({ + ref: ref(_this, "innerMoveable"), + parentElement: parentElement + }, nextOptions, events)), _this.tempElement); + var target = nextOptions.target; + + if (isArray(target) && target.length > 1) { + _this.updateRect(); + } + + return _this; + } + /** + * Check if the target is an element included in the moveable. + * @param - the target + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("click", e => { + * if (!moveable.isMoveableElement(e.target)) { + * moveable.target = e.target; + * } + * }); + */ + + + var __proto = Moveable.prototype; + + __proto.isMoveableElement = function (target) { + return this.getMoveable().isMoveableElement(target); + }; + /** + * If the width, height, left, and top of all elements change, update the shape of the moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * window.addEventListener("resize", e => { + * moveable.updateRect(); + * }); + */ + + + __proto.updateRect = function () { + this.getMoveable().updateRect(); + }; + /** + * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart) + * @param - external `MouseEvent`or `TouchEvent` + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * document.body.addEventListener("mousedown", e => { + * if (!moveable.isMoveableElement(e.target)) { + * moveable.dragStart(e); + * } + * }); + */ + + + __proto.dragStart = function (e) { + this.getMoveable().dragStart(e); + }; + /** + * Whether the coordinates are inside Moveable + * @param - x coordinate + * @param - y coordinate + * @return - True if the coordinate is in moveable or false + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * document.body.addEventListener("mousedown", e => { + * if (moveable.isInside(e.clientX, e.clientY)) { + * console.log("inside"); + * } + * }); + */ + + + __proto.isInside = function (clientX, clientY) { + return this.getMoveable().isInside(clientX, clientY); + }; + /** + * You can get the vertex information, position and offset size information of the target based on the container. + * @return - The Rect Info + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * const rectInfo = moveable.getRect(); + */ + + + __proto.getRect = function () { + return this.getMoveable().getRect(); + }; + /** + * You can change options or properties dynamically. + * @param - options or properties + * @param - After the change, the callback function is executed when the update is completed. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.setState({ + * target: document.querySelector(".target"), + * }, () => { + * moveable.dragStart(e); + * }) + */ + + + __proto.setState = function (state, callback) { + this.innerMoveable.setState(state, callback); + }; + /** + * If the width, height, left, and top of the only target change, update the shape of the moveable. + * @param - the values of x and y to move moveable. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.updateTarget(); + */ + + + __proto.updateTarget = function () { + this.getMoveable().updateTarget(); + }; + /** + * Remove the Moveable object and the events. + * @example + * import Moveable from "moveable"; + * + * const moveable = new Moveable(document.body); + * + * moveable.destroy(); + */ + + + __proto.destroy = function () { + H("", this.tempElement); + this.off(); + this.tempElement = null; + this.innerMoveable = null; + }; + + __proto.getMoveable = function () { + return this.innerMoveable.preactMoveable; + }; + + Moveable = __decorate([Properties(PROPERTIES, function (prototype, property) { + Object.defineProperty(prototype, property, { + get: function () { + return this.getMoveable().props[property]; + }, + set: function (value) { + var _a; + + this.setState((_a = {}, _a[property] = value, _a)); + }, + enumerable: true, + configurable: true + }); + })], Moveable); + return Moveable; + }(Component); + + Moveable$1.PROPERTIES = PROPERTIES; + Moveable$1.EVENTS = EVENTS; + + return Moveable$1; + +})); +//# sourceMappingURL=moveable.js.map diff --git a/dist/moveable.js.map b/dist/moveable.js.map new file mode 100644 index 000000000..33c62f928 --- /dev/null +++ b/dist/moveable.js.map @@ -0,0 +1 @@ +{"version":3,"file":"moveable.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx","../src/index.umd.ts"],"sourcesContent":["import { Component, h } from \"preact\";\nimport { createPortal } from \"preact/compat\";\nimport Moveable, { MoveableProps, PreactMoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component {\n public state: MoveableProps = {};\n public preactMoveable: PreactMoveableInterface;\n constructor(props: MoveableProps) {\n super(props);\n this.state = this.props;\n }\n public render() {\n return createPortal(, this.state.parentElement);\n }\n}\n","import { MoveableEvents, MoveableOptions } from \"./types\";\n\nexport const PROPERTIES: Array = [\n \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n \"warpable\", \"pinchable\", \"snappable\", \"origin\", \"target\", \"edge\",\n \"throttleDrag\", \"throttleResize\",\n \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n \"dragArea\",\n \"pinchThreshold\",\n \"snapCenter\", \"snapThreshold\",\n \"horizontalGuidelines\", \"verticalGuidelines\", \"elementGuidelines\",\n \"bounds\",\n\n \"className\",\n \"renderDirections\",\n \"scrollable\",\n \"getScrollPosition\",\n \"scrollContainer\",\n \"scrollThreshold\",\n \"baseDirection\",\n];\nexport const EVENTS: Array = [\n \"dragStart\",\n \"drag\",\n \"dragEnd\",\n \"resizeStart\",\n \"resize\",\n \"resizeEnd\",\n \"scaleStart\",\n \"scale\",\n \"scaleEnd\",\n \"rotateStart\",\n \"rotate\",\n \"rotateEnd\",\n \"warpStart\",\n \"warp\",\n \"warpEnd\",\n \"pinchStart\",\n \"pinch\",\n \"pinchEnd\",\n \"dragGroupStart\",\n \"dragGroup\",\n \"dragGroupEnd\",\n \"resizeGroupStart\",\n \"resizeGroup\",\n \"resizeGroupEnd\",\n \"scaleGroupStart\",\n \"scaleGroup\",\n \"scaleGroupEnd\",\n \"rotateGroupStart\",\n \"rotateGroup\",\n \"rotateGroupEnd\",\n \"pinchGroupStart\",\n \"pinchGroup\",\n \"pinchGroupEnd\",\n \"clickGroup\",\n\n \"scroll\",\n \"scrollGroup\",\n\n \"renderStart\",\n \"render\",\n \"renderEnd\",\n \"renderGroupStart\",\n \"renderGroup\",\n \"renderGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n OnDragStart, OnDrag, OnResize, OnResizeStart,\n OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart, OnClickGroup,\n MoveableInterface,\n RectInfo,\n OnClick,\n OnScroll,\n OnScrollGroup,\n OnRenderStart,\n OnRender,\n OnRenderEnd,\n OnRenderGroupStart,\n OnRenderGroup,\n OnRenderGroupEnd,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n Object.defineProperty(prototype, property, {\n get() {\n return this.getMoveable().props[property];\n },\n set(value) {\n this.setState({\n [property]: value,\n });\n },\n enumerable: true,\n configurable: true,\n });\n})\nclass Moveable extends EgComponent implements MoveableInterface {\n private innerMoveable!: InnerMoveable;\n private tempElement = document.createElement(\"div\");\n\n /**\n *\n */\n constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n super();\n const nextOptions = { container: parentElement, ...options };\n\n const events: any = {};\n\n EVENTS.forEach(name => {\n events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n });\n\n render(\n ,\n this.tempElement,\n );\n const target = nextOptions.target!;\n if (isArray(target) && target.length > 1) {\n this.updateRect();\n }\n }\n /**\n * Check if the target is an element included in the moveable.\n * @param - the target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"click\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.target = e.target;\n * }\n * });\n */\n public isMoveableElement(target: HTMLElement | SVGElement) {\n return this.getMoveable().isMoveableElement(target);\n }\n /**\n * If the width, height, left, and top of all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)\n * @param - external `MouseEvent`or `TouchEvent`\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.dragStart(e);\n * }\n * });\n */\n public dragStart(e: MouseEvent | TouchEvent): void {\n this.getMoveable().dragStart(e);\n }\n\n /**\n * Whether the coordinates are inside Moveable\n * @param - x coordinate\n * @param - y coordinate\n * @return - True if the coordinate is in moveable or false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (moveable.isInside(e.clientX, e.clientY)) {\n * console.log(\"inside\");\n * }\n * });\n */\n public isInside(clientX: number, clientY: number): boolean {\n return this.getMoveable().isInside(clientX, clientY);\n }\n /**\n * You can get the vertex information, position and offset size information of the target based on the container.\n * @return - The Rect Info\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * const rectInfo = moveable.getRect();\n */\n public getRect(): RectInfo {\n return this.getMoveable().getRect();\n }\n /**\n * You can change options or properties dynamically.\n * @param - options or properties\n * @param - After the change, the callback function is executed when the update is completed.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.setState({\n * target: document.querySelector(\".target\"),\n * }, () => {\n * moveable.dragStart(e);\n * })\n */\n public setState(state: Partial, callback?: () => any) {\n this.innerMoveable.setState(state, callback);\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n /**\n * Remove the Moveable object and the events.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.destroy();\n */\n public destroy() {\n render(\"\", this.tempElement);\n this.off();\n this.tempElement = null;\n this.innerMoveable = null;\n }\n private getMoveable() {\n return this.innerMoveable.preactMoveable;\n }\n}\n/**\n * Whether or not the origin controlbox will be visible or not (default: true)\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged. (default: false)\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized. (default: false)\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled. (default: false)\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated. (default: false)\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped. (default: false)\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height. (default: false)\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * throttle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n\n /**\n * Whether or not target can be snapped to the guideline. (default: false)\n * @name Moveable#snappable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snappable = true;\n */\n/**\n * When you drag, make the snap in the center of the target. (default: false)\n * @name Moveable#snapCenter\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapCenter = true;\n */\n\n/**\n * Distance value that can snap to guidelines. (default: 5)\n * @name Moveable#snapThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapThreshold = 5;\n */\n\n/**\n * Add guidelines in the horizontal direction. (default: [])\n * @name Moveable#horizontalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.horizontalGuidlines = [100, 200, 500];\n */\n\n/**\n * Add guidelines in the vertical direction. (default: [])\n * @name Moveable#\n * moveable.verticalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.verticalGuidlines = [100, 200, 500];\n */\n/**\n * Add guidelines for the element. (default: [])\n * @name Moveable#elementGuidelines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.elementGuidelines = [\n * document.querySelector(\".element\"),\n * ];\n */\n/**\n * You can set up boundaries. (default: [])\n * @name Moveable#bounds\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};\n */\n/**\n * Add an event to the moveable area instead of the target for stopPropagation. (default: false)\n * @name Moveable#dragArea\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * dragArea: false,\n * });\n */\n/**\n * You can specify the position of the rotation. (default: \"top\")\n * @name Moveable#rotationPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotationPosition: \"top\",\n * });\n *\n * moveable.rotationPosition = \"bottom\"\n */\n/**\n * You can specify the className of the moveable controlbox. (default: \"\")\n * @name Moveable#className\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * className: \"\",\n * });\n *\n * moveable.className = \"moveable1\";\n */\n/**\n * Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n * @name Moveable#renderDirections\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n * });\n *\n * moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n */\n\n /**\n * Set target's base direciton using top, left, right, bottom\n * (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])\n * @name Moveable#baseDirection\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * baseDirection: [-1, -1]\n * });\n *\n * moveable.baseDirection = [-1, -1];\n */\n\n /**\n * Sets the initial rotation of the group. (default 0)\n * @name Moveable#defaultGroupRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * defaultGroupRotate: 0,\n * });\n *\n * moveable.defaultGroupRotate = 40;\n */\n\n/**\n * Whether or not target can be scrolled to the scroll container (default: false)\n * @name Moveable#scrollable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n *\n * moveable.scrollable = true;\n */\n\n/**\n * The container to which scroll is applied (default: container)\n * @name Moveable#scrollContainer\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n/**\n * Expand the range of the scroll check area. (default: 0)\n * @name Moveable#scrollThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n\n/**\n * Sets a function to get the scroll position. (default: Function)\n * @name Moveable#getScrollPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\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 /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n * console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n * console.log(\"onDragGroup\", targets);\n * events.forEach(ev => {\n * // drag event\n * console.log(\"onDrag left, top\", ev.left, ev.top);\n * // ev.target!.style.left = `${ev.left}px`;\n * // ev.target!.style.top = `${ev.top}px`;\n * console.log(\"onDrag translate\", ev.dist);\n * ev.target!.style.transform = ev.transform;)\n * });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n * target.style.width = `${e.width}px`;\n * target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n* console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n * 1, 0, 0, 0,\n * 0, 1, 0, 0,\n * 0, 0, 1, 0,\n * 0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n * // target.style.transform = transform;\n * matrix = multiply(matrix, delta);\n * target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n * console.log(target);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n * console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n * console.log(\"onResizeGroup\", targets);\n * events.forEach(ev => {\n * const offset = [\n * direction[0] < 0 ? -ev.delta[0] : 0,\n * direction[1] < 0 ? -ev.delta[1] : 0,\n * ];\n * // ev.drag is a drag event that occurs when the group resize.\n * const left = offset[0] + ev.drag.beforeDist[0];\n * const top = offset[1] + ev.drag.beforeDist[1];\n * const width = ev.width;\n * const top = ev.top;\n * });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n * console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n * console.log(\"onScaleGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group scale.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const scaleX = ev.scale[0];\n * const scaleY = ev.scale[1];\n * });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n * console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n * console.log(\"onRotateGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group rotate.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const deg = ev.beforeDist;\n * });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n * console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n/**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n * console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When you click on the element, the `click` event is called.\n * @memberof Moveable\n * @event click\n * @param {Moveable.OnClick} - Parameters for the `click` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"click\", ({ hasTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", target, hasTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * When you click on the element inside the group, the `clickGroup` event is called.\n * @memberof Moveable\n * @event clickGroup\n * @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"clickGroup\", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", inputTarget, isTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * `renderStart` event occurs at the first start of all events.\n * @memberof Moveable\n * @event renderStart\n * @param {Moveable.OnRenderStart} - Parameters for the `renderStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderStart\", ({ target }) => {\n * console.log(\"onRenderStart\", target);\n * });\n */\n\n/**\n * `render` event occurs before the target is drawn on the screen.\n * @memberof Moveable\n * @event render\n * @param {Moveable.OnRender} - Parameters for the `render` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"render\", ({ target }) => {\n * console.log(\"onRender\", target);\n * });\n */\n\n/**\n * `renderEnd` event occurs at the end of all events.\n * @memberof Moveable\n * @event renderEnd\n * @param {Moveable.OnRenderEnd} - Parameters for the `renderEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderEnd\", ({ target }) => {\n * console.log(\"onRenderEnd\", target);\n * });\n */\n\n/**\n * `renderGroupStart` event occurs at the first start of all events in group.\n * @memberof Moveable\n * @event renderGroupStart\n * @param {Moveable.OnRenderGroupStart} - Parameters for the `renderGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupStart\", ({ targets }) => {\n * console.log(\"onRenderGroupStart\", targets);\n * });\n */\n\n/**\n * `renderGroup` event occurs before the target is drawn on the screen in group.\n * @memberof Moveable\n * @event renderGroup\n * @param {Moveable.OnRenderGroup} - Parameters for the `renderGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroup\", ({ targets }) => {\n * console.log(\"onRenderGroup\", targets);\n * });\n */\n\n/**\n * `renderGroupEnd` event occurs at the end of all events in group.\n * @memberof Moveable\n * @event renderGroupEnd\n * @param {Moveable.OnRenderGroupEnd} - Parameters for the `renderGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupEnd\", ({ targets }) => {\n * console.log(\"onRenderGroupEnd\", targets);\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.\n * @memberof Moveable\n * @event scroll\n * @param {Moveable.OnScroll} - Parameters for the `scroll` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.\n * @memberof Moveable\n * @event scrollGroup\n * @param {Moveable.OnScrollGroup} - Parameters for the `scrollGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\ninterface Moveable extends MoveableGetterSetter {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n on(eventName: \"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: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n on(eventName: \"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: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n on(eventName: \"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: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n on(eventName: \"click\", handlerToAttach: (event: OnClick) => any): this;\n on(eventName: \"clickGroup\", handlerToAttach: (event: OnClickGroup) => any): this;\n\n on(eventName: \"scroll\", handlerToAttach: (event: OnScroll) => any): this;\n on(eventName: \"scrollGroup\", handlerToAttach: (event: OnScrollGroup) => any): this;\n\n on(eventName: \"renderStart\", handlerToAttach: (event: OnRenderStart) => any): this;\n on(eventName: \"render\", handlerToAttach: (event: OnRender) => any): this;\n on(eventName: \"renderEnd\", handlerToAttach: (event: OnRenderEnd) => any): this;\n on(eventName: \"renderGroupStart\", handlerToAttach: (event: OnRenderGroupStart) => any): this;\n on(eventName: \"renderGroup\", handlerToAttach: (event: OnRenderGroup) => any): this;\n on(eventName: \"renderGroupEnd\", handlerToAttach: (event: OnRenderGroupEnd) => any): this;\n\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n","import Moveable from \"./Moveable\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\n\n(Moveable as any).PROPERTIES = PROPERTIES;\n(Moveable as any).EVENTS = EVENTS;\n\nexport default Moveable;\n"],"names":["__extends","props","_super","_this","state","createPortal","h","Moveable","ref","parentElement","Component","PROPERTIES","EVENTS","options","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","tempElement","target","isArray","length","updateRect","getMoveable","isMoveableElement","dragStart","clientX","clientY","isInside","getRect","callback","innerMoveable","setState","updateTarget","off","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","_a","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKA;;;IAA2CA,EAAAA,gCAAA;;IAGvC,wBAAA,CAAYC,KAAZ;IAAA,gBACIC,WAAA,KAAA,EAAMD,KAAN,SADJ;;IAFOE,IAAAA,WAAA,GAAuB,EAAvB;IAIHA,IAAAA,KAAI,CAACC,KAAL,GAAaD,KAAI,CAACF,KAAlB;;IACH;;;;IACM,gBAAA,GAAP;IACI,WAAOI,GAAY,CAACC,EAACC;IAASC,MAAAA,GAAG,EAAEA,GAAG,CAAC,IAAD,EAAO,gBAAP;WAA8B,KAAKJ,OAAtD,EAAiE,KAAKA,KAAL,CAAWK,aAA5E,CAAnB;IACH,GAFM;;IAGX,sBAAA;IAVA,EAA2CC,EAA3C;;ICHO,IAAMC,UAAU,GAAiC,CACpD,WADoD,EACvC,WADuC,EAC1B,UAD0B,EACd,WADc,EAEpD,UAFoD,EAExC,WAFwC,EAE3B,WAF2B,EAEd,QAFc,EAEJ,QAFI,EAEM,MAFN,EAGpD,cAHoD,EAGpC,gBAHoC,EAIpD,eAJoD,EAInC,gBAJmC,EAIjB,WAJiB,EAKpD,UALoD,EAMpD,gBANoD,EAOpD,YAPoD,EAOtC,eAPsC,EAQpD,sBARoD,EAQ5B,oBAR4B,EAQN,mBARM,EASpD,QAToD,EAWpD,WAXoD,EAYpD,kBAZoD,EAapD,YAboD,EAcpD,mBAdoD,EAepD,iBAfoD,EAgBpD,iBAhBoD,EAiBpD,eAjBoD,CAAjD;AAmBP,IAAO,IAAMC,MAAM,GAAgC,CAC/C,WAD+C,EAE/C,MAF+C,EAG/C,SAH+C,EAI/C,aAJ+C,EAK/C,QAL+C,EAM/C,WAN+C,EAO/C,YAP+C,EAQ/C,OAR+C,EAS/C,UAT+C,EAU/C,aAV+C,EAW/C,QAX+C,EAY/C,WAZ+C,EAa/C,WAb+C,EAc/C,MAd+C,EAe/C,SAf+C,EAgB/C,YAhB+C,EAiB/C,OAjB+C,EAkB/C,UAlB+C,EAmB/C,gBAnB+C,EAoB/C,WApB+C,EAqB/C,cArB+C,EAsB/C,kBAtB+C,EAuB/C,aAvB+C,EAwB/C,gBAxB+C,EAyB/C,iBAzB+C,EA0B/C,YA1B+C,EA2B/C,eA3B+C,EA4B/C,kBA5B+C,EA6B/C,aA7B+C,EA8B/C,gBA9B+C,EA+B/C,iBA/B+C,EAgC/C,YAhC+C,EAiC/C,eAjC+C,EAkC/C,YAlC+C,EAoC/C,QApC+C,EAqC/C,aArC+C,EAuC/C,aAvC+C,EAwC/C,QAxC+C,EAyC/C,WAzC+C,EA0C/C,kBA1C+C,EA2C/C,aA3C+C,EA4C/C,gBA5C+C,CAA5C;;ICSP;;;;;;IAmBA;;;IAAuBZ,EAAAA,2BAAA;IAInB;;;;;IAGA,mBAAA,CAAYS,aAAZ,EAAqDI,OAArD;IAAqD,0BAAA,EAAA;IAAAA,MAAAA,YAAA;;;IAArD,gBACIX,WAAA,KAAA,SADJ;;IALQC,IAAAA,iBAAA,GAAcW,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAd;;IAOJ,QAAMC,WAAW;IAAKC,MAAAA,SAAS,EAAER;WAAkBI,QAAnD;;IAEA,QAAMK,MAAM,GAAQ,EAApB;IAEAN,IAAAA,MAAM,CAACO,OAAP,CAAe,UAAAC,IAAA;IACXF,MAAAA,MAAM,CAACG,QAAQ,CAAC,QAAMD,IAAP,CAAT,CAAN,GAAiC,UAACE,CAAD;IAAY,eAAAnB,KAAI,CAACoB,OAAL,CAAaH,IAAb,EAAmBE,CAAnB,CAAA;IAAqB,OAAlE;IACH,KAFD;IAIAE,IAAAA,CAAM,CACFlB,EAACmB;IACGjB,MAAAA,GAAG,EAAEA,GAAG,CAACL,KAAD,EAAO,eAAP;IACRM,MAAAA,aAAa,EAAEA;WACXO,aACAE,QALN,EAOFf,KAAI,CAACuB,WAPH,CAAN;IASA,QAAMC,MAAM,GAAGX,WAAW,CAACW,MAA3B;;IACA,QAAIC,OAAO,CAACD,MAAD,CAAP,IAAmBA,MAAM,CAACE,MAAP,GAAgB,CAAvC,EAA0C;IACtC1B,MAAAA,KAAI,CAAC2B,UAAL;IACH;;;IACJ;IACD;;;;;;;;;;;;;;;;;;IAcO,2BAAA,GAAP,UAAyBH,MAAzB;IACI,WAAO,KAAKI,WAAL,GAAmBC,iBAAnB,CAAqCL,MAArC,CAAP;IACH,GAFM;IAGP;;;;;;;;;;;;;IAWO,oBAAA,GAAP;IACI,SAAKI,WAAL,GAAmBD,UAAnB;IACH,GAFM;IAGP;;;;;;;;;;;;;;;;IAcO,mBAAA,GAAP,UAAiBR,CAAjB;IACI,SAAKS,WAAL,GAAmBE,SAAnB,CAA6BX,CAA7B;IACH,GAFM;IAIP;;;;;;;;;;;;;;;;;;IAgBO,kBAAA,GAAP,UAAgBY,OAAhB,EAAiCC,OAAjC;IACI,WAAO,KAAKJ,WAAL,GAAmBK,QAAnB,CAA4BF,OAA5B,EAAqCC,OAArC,CAAP;IACH,GAFM;IAGP;;;;;;;;;;;;IAUO,iBAAA,GAAP;IACI,WAAO,KAAKJ,WAAL,GAAmBM,OAAnB,EAAP;IACH,GAFM;IAGP;;;;;;;;;;;;;;;;;IAeO,kBAAA,GAAP,UAAgBjC,KAAhB,EAAiDkC,QAAjD;IACI,SAAKC,aAAL,CAAmBC,QAAnB,CAA4BpC,KAA5B,EAAmCkC,QAAnC;IACH,GAFM;IAGP;;;;;;;;;;;;IAUO,sBAAA,GAAP;IACI,SAAKP,WAAL,GAAmBU,YAAnB;IACH,GAFM;IAGP;;;;;;;;;;;IASO,iBAAA,GAAP;IACIjB,IAAAA,CAAM,CAAC,EAAD,EAAK,KAAKE,WAAV,CAAN;IACA,SAAKgB,GAAL;IACA,SAAKhB,WAAL,GAAmB,IAAnB;IACA,SAAKa,aAAL,GAAqB,IAArB;IACH,GALM;;IAMC,qBAAA,GAAR;IACI,WAAO,KAAKA,aAAL,CAAmBI,cAA1B;IACH,GAFO;;IA9JNpC,EAAAA,QAAQ,eAdbqC,UAAU,CAACjC,UAAD,EAAa,UAACkC,SAAD,EAAYC,QAAZ;IACpBC,IAAAA,MAAM,CAACC,cAAP,CAAsBH,SAAtB,EAAiCC,QAAjC,EAA2C;IACvCG,MAAAA,GAAG;IACC,eAAO,KAAKlB,WAAL,GAAmB9B,KAAnB,CAAyB6C,QAAzB,CAAP;IACH,OAHsC;IAIvCI,MAAAA,GAAG,YAACC;;;IACA,aAAKX,QAAL,WACIY,GAACN,SAAD,GAAYK,SADhB;IAGH,OARsC;IASvCE,MAAAA,UAAU,EAAE,IAT2B;IAUvCC,MAAAA,YAAY,EAAE;IAVyB,KAA3C;IAYH,GAbU,IAcL/C,SAAA;IAiKN,iBAAA;IAAC,EAjKsBgD,UAAvB;;AC9CChD,cAAgB,CAACI,UAAjB,GAA8BA,UAA9B;AACAJ,cAAgB,CAACK,MAAjB,GAA0BA,MAA1B;;;;;;;;"} \ No newline at end of file diff --git a/dist/moveable.min.js b/dist/moveable.min.js new file mode 100644 index 000000000..b301a351d --- /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.12.0 +*/ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Moveable=e()}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function i(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var s=function(){return(s=Object.assign||function(t){for(var e,n=1,r=arguments.length;n=e.i.length&&e.i.push({}),e.i[t]}function q(t){return $(lt,t)}function $(n,t,e){var r=V(W++);return r.__c||(r.__c=H,r.u=[e?e(t):lt(void 0,t),function(t){var e=n(r.u[0],t);r.u[0]!==e&&(r.u[0]=e,r.__c.setState({}))}]),r.u}function Z(t,e){var n=V(W++);ct(n.o,e)&&(n.u=t,n.o=e,H.__H.t.push(n))}function K(t,e){var n=V(W++);ct(n.o,e)&&(n.u=t,n.o=e,H.__h.push(n))}function J(t){return tt(function(){return{current:t}},[])}function Q(t,e,n){K(function(){"function"==typeof t?t(e()):t&&(t.current=e())},null==n?n:n.concat(t))}function tt(t,e){var n=V(W++);return ct(n.o,e)?(n.o=e,n.v=t,n.u=t()):n.u}function et(t,e){return tt(function(){return t},e)}function nt(t){var e=H.context[t.__c];if(!e)return t.__p;var n=V(W++);return null==n.u&&(n.u=!0,e.sub(H)),e.props.value}function rt(t,e){y.useDebugValue&&y.useDebugValue(e?e(t):t)}y.unmount=function(t){U&&U(t);var e=t.__c;if(e){var n=e.__H;n&&n.i.forEach(function(t){return t.m&&t.m()})}};var it=function(){};function ot(){B.some(function(t){t.__P&&(t.__H.t.forEach(st),t.__H.t.forEach(ut),t.__H.t=[])}),B=[]}if("undefined"!=typeof window){var at=y.requestAnimationFrame;it=function(t){1!==t&&at===y.requestAnimationFrame||((at=y.requestAnimationFrame)||function(t){function e(){clearTimeout(n),cancelAnimationFrame(r),setTimeout(t)}var n=setTimeout(e,100),r=requestAnimationFrame(e)})(ot)}}function st(t){t.m&&t.m()}function ut(t){var e=t.u();"function"==typeof e&&(t.m=e)}function ct(n,t){return!n||t.some(function(t,e){return t!==n[e]})}function lt(t,e){return"function"==typeof e?e(t):e}function ft(t){var e=t.parentNode;e&&e.removeChild(t)}var pt=y.__e;function ht(t){this.__u=[],this.__f=t.fallback}function dt(e){var n,r,i;function t(t){if(n||(n=e()).then(function(t){r=t.default},function(t){i=t}),i)throw i;if(!r)throw n;return f(r,t)}return t.displayName="Lazy",t.t=!0,t}y.__e=function(t,e,n){if(t.then&&n)for(var r,i=e;i=i.__p;)if((r=i.__c)&&r.o)return n&&(e.__e=n.__e,e.__k=n.__k),void r.o(t);pt(t,e,n)},(ht.prototype=new w).o=function(t){var e=this;e.__u.push(t);function n(){e.__u[e.__u.indexOf(t)]=e.__u[e.__u.length-1],e.__u.pop(),0==e.__u.length&&(e.__f&&G(e.__f),e.__v.__e=null,e.__v.__k=e.state.u,e.setState({u:null}))}null==e.state.u&&(e.__f=e.__f&&Y(e.__f),e.setState({u:e.__v.__k}),function t(e){for(var n=0;n=e.o.length&&e.o.push({}),e.o[t]}function be(n,t,e){var r=_e(pe++);return r.__c||(r.__c=he,r.v=[e?e(t):Pe(void 0,t),function(t){var e=n(r.v[0],t);r.v[0]!==e&&(r.v[0]=e,r.__c.setState({}))}]),r.v}function ye(t,e){var n=_e(pe++);return De(n.m,e)?(n.m=e,n.p=t,n.v=t()):n.v}y.unmount=function(t){me&&me(t);var e=t.__c;if(e){var n=e.__H;n&&n.o.forEach(function(t){return t.l&&t.l()})}};var xe=function(){};function Ee(){de.some(function(t){t.s=!1,t.__P&&(t.__H.t=Se(t.__H.t))}),de=[]}if("undefined"!=typeof window){var Ce=y.requestAnimationFrame;xe=function(t){(!t.s&&(t.s=!0)&&1===de.push(t)||Ce!==y.requestAnimationFrame)&&(Ce=y.requestAnimationFrame,(y.requestAnimationFrame||function(t){function e(){clearTimeout(n),cancelAnimationFrame(r),setTimeout(t)}var n=setTimeout(e,100),r=requestAnimationFrame(e)})(Ee))}}function Se(t){return t.forEach(we),t.forEach(Me),[]}function we(t){t.l&&t.l()}function Me(t){var e=t.v();"function"==typeof e&&(t.l=e)}function De(n,t){return!n||t.some(function(t,e){return t!==n[e]})}function Pe(t,e){return"function"==typeof e?e(t):e}var ke={__proto__:null,useState:function(t){return be(Pe,t)},useReducer:be,useEffect:function(t,e){var n=_e(pe++);De(n.m,e)&&(n.v=t,n.m=e,he.__H.t.push(n),xe(he))},useLayoutEffect:function(t,e){var n=_e(pe++);De(n.m,e)&&(n.v=t,n.m=e,he.__H.i.push(n))},useRef:function(t){return ye(function(){return{current:t}},[])},useImperativeHandle:function(t,e,n){var r=_e(pe++);De(r.m,n)&&(r.m=n,he.__H.u.push({ref:t,createHandle:e}))},useMemo:ye,useCallback:function(t,e){return ye(function(){return t},e)},useContext:function(t){var e=he.context[t.__c];if(!e)return t.__p;var n=_e(pe++);return null==n.v&&(n.v=!0,e.sub(he)),e.props.value},useDebugValue:function(t,e){y.useDebugValue&&y.useDebugValue(e?e(t):t)}};function Re(t,e){for(var n in e)t[n]=e[n];return t}function Oe(t){var e=t.parentNode;e&&e.removeChild(t)}var Ne=y.__e;function Ae(){this.t=[]}y.__e=function(t,e,n){if(t.then&&n)for(var r,i=e;i=i.__p;)if((r=i.__c)&&r.i)return n&&(e.__e=n.__e,e.__k=n.__k),void r.i(t);Ne(t,e,n)},(Ae.prototype=new w).i=function(t){var e=this;e.t.push(t);function n(){e.t[e.t.indexOf(t)]=e.t[e.t.length-1],e.t.pop(),0==e.t.length&&(G(e.props.fallback),e.__v.__e=null,e.__v.__k=e.state.u,e.setState({u:null}))}null==e.state.u&&(e.setState({u:e.__v.__k}),function t(e){for(var n=0;n>>0};function nn(n,t){var e=document.createElement("style");return e.setAttribute("type","text/css"),e.innerHTML=t.replace(/([^}{]*){/gm,function(t,e){return function(t){var e=t.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);return e?e.map(function(t){return t.trim()}):[]}(e).map(function(t){return-1o)){var a=ln(t.changedTouches);if(this.pinchFlag=!0,(e=this.startClients).push.apply(e,a),(n=this.prevClients).push.apply(n,a),this.startDistance=un(this.prevClients),this.startPinchClients=this.prevClients.slice(),i){var s=this.prevClients,u=pn(s),c=sn(u,u,u);i(rn({datas:this.datas,touches:cn(s,s,s)},c,{inputEvent:t}))}}},e.onPinch=function(t,e){if(this.flag&&this.pinchFlag){this.isPinch=!0;var n=this.options.pinch;if(n){var r=this.prevClients,i=this.startClients,o=sn(pn(e),pn(r),pn(i)),a=un(e);n(rn({datas:this.datas,touches:cn(e,r,i),scale:a/this.startDistance,distance:a},o,{inputEvent:t}))}}},e.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var e=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var r=this.prevClients,i=this.startClients,o=sn(pn(r),pn(r),pn(i));n(rn({datas:this.datas,isPinch:e,touches:cn(r,r,i)},o,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},e.unset=function(){var t=this.el,e=this.options.container;this.isMouse&&(fe(t,"mousedown",this.onDragStart),fe(e,"mousemove",this.onDrag),fe(e,"mouseup",this.onDragEnd)),this.isTouch&&(fe(t,"touchstart",this.onDragStart),fe(e,"touchmove",this.onDrag),fe(e,"touchend",this.onDragEnd))},t}(),gn=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var n=this.keys,r=this.values,i=n.indexOf(t),o=-1===i?n.length:i;n[o]=t,r[o]=e},t}(),mn=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),_n="function"==typeof Map,bn=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var yn=function(){function t(t,e,n,r,i,o,a,s){this.prevList=t,this.list=e,this.added=n,this.removed=r,this.changed=i,this.maintained=o,this.changedBeforeAdded=a,this.fixed=s}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t=function(t,n){var s=[],u=[];return t.forEach(function(t){var e=t[0],n=t[1],r=new bn;s[e]=r,u[n]=r}),s.forEach(function(t,e){t.connect(s[e-1])}),t.filter(function(t,e){return!n[e]}).map(function(t,e){var n=t[0],r=t[1];if(n===r)return[0,0];var i=s[n],o=u[r-1],a=i.getIndex();return i.disconnect(),o?i.connect(o,o.next):i.connect(void 0,s[0]),[a,i.getIndex()]})}(this.changedBeforeAdded,this.fixed),s=this.changed,u=[];this.cacheOrdered=t.filter(function(t,e){var n=t[0],r=t[1],i=s[e],o=i[0],a=i[1];if(n!==r)return u.push([o,a]),!0}),this.cachePureChanged=u},t}();var xn=function(t,e){return(xn=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var En,Cn="function"==typeof Map?void 0:(En=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++En)}),Sn=function(e){function t(t){return void 0===t&&(t=[]),e.call(this,t,Cn)||this}return function(t,e){function n(){this.constructor=t}xn(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,e),t}(function(){function t(t,e){void 0===t&&(t=[]),this.findKeyCallback=e,this.list=[].slice.call(t)}return t.prototype.update=function(t){var e=[].slice.call(t),n=function(t,e,n){var r=_n?Map:n?mn:gn,i=n||function(t){return t},o=[],a=[],s=[],u=t.map(i),c=e.map(i),l=new r,f=new r,p=[],h=[],d={},v=[],g=0,m=0;return u.forEach(function(t,e){l.set(t,e)}),c.forEach(function(t,e){f.set(t,e)}),u.forEach(function(t,e){var n=f.get(t);void 0===n?(++m,a.push(e)):d[n]=m}),c.forEach(function(t,e){var n=l.get(t);void 0===n?(o.push(e),++g):(s.push([n,e]),m=d[e]||0,p.push([n-m,e-g]),h.push(e===n),n!==e&&v.push([n,e]))}),a.reverse(),new yn(t,e,o,a,v,s,p,h)}(this.list,e,this.findKeyCallback);return this.list=e,n},t}());function wn(t,e,n,r,i,o){for(var a=n;aMath.abs(x),D=w&&w.dist>Math.abs(_);if(M||D)if(M){var P=yi(ii(e,[-1*f[0],f[1]]),h,S.offset,S.isVertical,!1,r);isNaN(P)||(E=P),C=Ei(t,[ii(k=xi(i,o+n[0]*E,a+n[1]*C,s,n,u),n)],[ii(k,f)],!0,r)}else{var k;P=yi(ii(e,[-1*p[0],p[1]]),h,w.offset,w.isVertical,!0,r);isNaN(P)||(C=P),E=Ei(t,[ii(k=xi(i,o+n[0]*E,a+n[1]*C,s,n,u),n)],[ii(k,p)],!1,r)}else{var R=mi(t,[l[0][0]],[l[0][1]]),O=R.horizontal.offset,N=R.vertical.offset;E=(c=ei({datas:r,distX:-(y?x:N),distY:-(m?_:O)}))[0],C=c[1]}return[n[0]*E,n[1]*C]}(t,c,i,a,e,n,r,u,s):function(t,e,n,r){var i,o,a=0!==n[0]?0:1,s=0Math.abs(F[1])?F[1]=0:F[0]=0);var Y=!F[0]&&!F[1];Y&&(w?T=kr(T,E):z=kr(z,E)),f[0]&&!f[1]||F[0]&&!F[1]||Y&&w?z=Fr(T+=F[0],w,M):(!f[0]&&f[1]||!F[0]&&F[1]||Y&&!w)&&(T=Yr(z+=F[1],w,M))}else T+=F[0],z+=F[1],F[0]||(T=kr(T,E)),F[1]||(z=kr(z,E));var X=[(D=(T=Math.round(T))-g)-_,(P=(z=Math.round(z))-m)-b];if(n.prevWidth=D,n.prevHeight=P,C||!X.every(function(t){return!t})){var W=S||o?f:n.startDirection,H=l||(S?n.fixedOriginalPosition:n.fixedPosition),B=!o&&a?[0,0]:li(t,T,z,W,H,h),I=Ar(t,e,{width:d+D,height:v+P,offsetWidth:T,offsetHeight:z,direction:f,dist:[D,P],delta:X,isPinch:!!a,drag:wi.drag(t,Mi(t.state,B,c))});return Gr(t,"onResize",I),I}}},dragControlAfter:function(t,e){var n=e.datas,r=n.isResize,i=n.startOffsetWidth,o=n.startOffsetHeight,a=n.prevWidth,s=n.prevHeight;if(r){var u=t.state,c=u.width-(i+a),l=u.height-(o+s),f=3Math.abs(H[1])?H[1]=0:H[0]=0);var B=!H[0]&&!H[1];if(B&&(C?Y[0]=kr(Y[0]*m[0],b)/m[0]:Y[1]=kr(Y[1]*m[1],b)/m[1]),p[0]&&!p[1]||H[0]&&!H[1]||B&&C){Y[0]+=H[0];var I=Fr(h*Y[0]*m[0],C,P);Y[1]=I/d/m[1]}else if(!p[0]&&p[1]||!H[0]&&H[1]||B&&!C){Y[1]+=H[1];var L=Yr(d*Y[1]*m[1],C,P);Y[0]=L/h/m[0]}}else H[0]||(Y[0]=kr(Y[0]*m[0],b)/m[0]),H[1]||(Y[1]=kr(Y[1]*m[1],b)/m[1]);0===Y[0]&&(Y[0]=1e-9*(0s-l?v[1]=-1:d.top+d.heighta-l?v[0]=-1:d.left+d.width {\n public state: MoveableProps = {};\n public preactMoveable: PreactMoveableInterface;\n constructor(props: MoveableProps) {\n super(props);\n this.state = this.props;\n }\n public render() {\n return createPortal(, this.state.parentElement);\n }\n}\n","import { MoveableEvents, MoveableOptions } from \"./types\";\n\nexport const PROPERTIES: Array = [\n \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n \"warpable\", \"pinchable\", \"snappable\", \"origin\", \"target\", \"edge\",\n \"throttleDrag\", \"throttleResize\",\n \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n \"dragArea\",\n \"pinchThreshold\",\n \"snapCenter\", \"snapThreshold\",\n \"horizontalGuidelines\", \"verticalGuidelines\", \"elementGuidelines\",\n \"bounds\",\n\n \"className\",\n \"renderDirections\",\n \"scrollable\",\n \"getScrollPosition\",\n \"scrollContainer\",\n \"scrollThreshold\",\n \"baseDirection\",\n];\nexport const EVENTS: Array = [\n \"dragStart\",\n \"drag\",\n \"dragEnd\",\n \"resizeStart\",\n \"resize\",\n \"resizeEnd\",\n \"scaleStart\",\n \"scale\",\n \"scaleEnd\",\n \"rotateStart\",\n \"rotate\",\n \"rotateEnd\",\n \"warpStart\",\n \"warp\",\n \"warpEnd\",\n \"pinchStart\",\n \"pinch\",\n \"pinchEnd\",\n \"dragGroupStart\",\n \"dragGroup\",\n \"dragGroupEnd\",\n \"resizeGroupStart\",\n \"resizeGroup\",\n \"resizeGroupEnd\",\n \"scaleGroupStart\",\n \"scaleGroup\",\n \"scaleGroupEnd\",\n \"rotateGroupStart\",\n \"rotateGroup\",\n \"rotateGroupEnd\",\n \"pinchGroupStart\",\n \"pinchGroup\",\n \"pinchGroupEnd\",\n \"clickGroup\",\n\n \"scroll\",\n \"scrollGroup\",\n\n \"renderStart\",\n \"render\",\n \"renderEnd\",\n \"renderGroupStart\",\n \"renderGroup\",\n \"renderGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n OnDragStart, OnDrag, OnResize, OnResizeStart,\n OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart, OnClickGroup,\n MoveableInterface,\n RectInfo,\n OnClick,\n OnScroll,\n OnScrollGroup,\n OnRenderStart,\n OnRender,\n OnRenderEnd,\n OnRenderGroupStart,\n OnRenderGroup,\n OnRenderGroupEnd,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n Object.defineProperty(prototype, property, {\n get() {\n return this.getMoveable().props[property];\n },\n set(value) {\n this.setState({\n [property]: value,\n });\n },\n enumerable: true,\n configurable: true,\n });\n})\nclass Moveable extends EgComponent implements MoveableInterface {\n private innerMoveable!: InnerMoveable;\n private tempElement = document.createElement(\"div\");\n\n /**\n *\n */\n constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n super();\n const nextOptions = { container: parentElement, ...options };\n\n const events: any = {};\n\n EVENTS.forEach(name => {\n events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n });\n\n render(\n ,\n this.tempElement,\n );\n const target = nextOptions.target!;\n if (isArray(target) && target.length > 1) {\n this.updateRect();\n }\n }\n /**\n * Check if the target is an element included in the moveable.\n * @param - the target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"click\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.target = e.target;\n * }\n * });\n */\n public isMoveableElement(target: HTMLElement | SVGElement) {\n return this.getMoveable().isMoveableElement(target);\n }\n /**\n * If the width, height, left, and top of all elements change, update the shape of the moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * window.addEventListener(\"resize\", e => {\n * moveable.updateRect();\n * });\n */\n public updateRect() {\n this.getMoveable().updateRect();\n }\n /**\n * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)\n * @param - external `MouseEvent`or `TouchEvent`\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (!moveable.isMoveableElement(e.target)) {\n * moveable.dragStart(e);\n * }\n * });\n */\n public dragStart(e: MouseEvent | TouchEvent): void {\n this.getMoveable().dragStart(e);\n }\n\n /**\n * Whether the coordinates are inside Moveable\n * @param - x coordinate\n * @param - y coordinate\n * @return - True if the coordinate is in moveable or false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * document.body.addEventListener(\"mousedown\", e => {\n * if (moveable.isInside(e.clientX, e.clientY)) {\n * console.log(\"inside\");\n * }\n * });\n */\n public isInside(clientX: number, clientY: number): boolean {\n return this.getMoveable().isInside(clientX, clientY);\n }\n /**\n * You can get the vertex information, position and offset size information of the target based on the container.\n * @return - The Rect Info\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * const rectInfo = moveable.getRect();\n */\n public getRect(): RectInfo {\n return this.getMoveable().getRect();\n }\n /**\n * You can change options or properties dynamically.\n * @param - options or properties\n * @param - After the change, the callback function is executed when the update is completed.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.setState({\n * target: document.querySelector(\".target\"),\n * }, () => {\n * moveable.dragStart(e);\n * })\n */\n public setState(state: Partial, callback?: () => any) {\n this.innerMoveable.setState(state, callback);\n }\n /**\n * If the width, height, left, and top of the only target change, update the shape of the moveable.\n * @param - the values of x and y to move moveable.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.updateTarget();\n */\n public updateTarget(): void {\n this.getMoveable().updateTarget();\n }\n /**\n * Remove the Moveable object and the events.\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.destroy();\n */\n public destroy() {\n render(\"\", this.tempElement);\n this.off();\n this.tempElement = null;\n this.innerMoveable = null;\n }\n private getMoveable() {\n return this.innerMoveable.preactMoveable;\n }\n}\n/**\n * Whether or not the origin controlbox will be visible or not (default: true)\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged. (default: false)\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized. (default: false)\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled. (default: false)\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated. (default: false)\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped. (default: false)\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height. (default: false)\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * throttle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n\n /**\n * Whether or not target can be snapped to the guideline. (default: false)\n * @name Moveable#snappable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snappable = true;\n */\n/**\n * When you drag, make the snap in the center of the target. (default: false)\n * @name Moveable#snapCenter\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapCenter = true;\n */\n\n/**\n * Distance value that can snap to guidelines. (default: 5)\n * @name Moveable#snapThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapThreshold = 5;\n */\n\n/**\n * Add guidelines in the horizontal direction. (default: [])\n * @name Moveable#horizontalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.horizontalGuidlines = [100, 200, 500];\n */\n\n/**\n * Add guidelines in the vertical direction. (default: [])\n * @name Moveable#\n * moveable.verticalGuidlines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.verticalGuidlines = [100, 200, 500];\n */\n/**\n * Add guidelines for the element. (default: [])\n * @name Moveable#elementGuidelines\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.elementGuidelines = [\n * document.querySelector(\".element\"),\n * ];\n */\n/**\n * You can set up boundaries. (default: [])\n * @name Moveable#bounds\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};\n */\n/**\n * Add an event to the moveable area instead of the target for stopPropagation. (default: false)\n * @name Moveable#dragArea\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * dragArea: false,\n * });\n */\n/**\n * You can specify the position of the rotation. (default: \"top\")\n * @name Moveable#rotationPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotationPosition: \"top\",\n * });\n *\n * moveable.rotationPosition = \"bottom\"\n */\n/**\n * You can specify the className of the moveable controlbox. (default: \"\")\n * @name Moveable#className\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * className: \"\",\n * });\n *\n * moveable.className = \"moveable1\";\n */\n/**\n * Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n * @name Moveable#renderDirections\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n * });\n *\n * moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n */\n\n /**\n * Set target's base direciton using top, left, right, bottom\n * (top: -1, left: -1, right: 1, bottom: 1) (default: [-1, -1])\n * @name Moveable#baseDirection\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * baseDirection: [-1, -1]\n * });\n *\n * moveable.baseDirection = [-1, -1];\n */\n\n /**\n * Sets the initial rotation of the group. (default 0)\n * @name Moveable#defaultGroupRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * defaultGroupRotate: 0,\n * });\n *\n * moveable.defaultGroupRotate = 40;\n */\n\n/**\n * Whether or not target can be scrolled to the scroll container (default: false)\n * @name Moveable#scrollable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n *\n * moveable.scrollable = true;\n */\n\n/**\n * The container to which scroll is applied (default: container)\n * @name Moveable#scrollContainer\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n/**\n * Expand the range of the scroll check area. (default: 0)\n * @name Moveable#scrollThreshold\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\n */\n\n/**\n * Sets a function to get the scroll position. (default: Function)\n * @name Moveable#getScrollPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * scrollable: true,\n * scrollContainer: document.body,\n * scrollThreshold: 0,\n * getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),\n * });\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 /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n * console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n * console.log(\"onDragGroup\", targets);\n * events.forEach(ev => {\n * // drag event\n * console.log(\"onDrag left, top\", ev.left, ev.top);\n * // ev.target!.style.left = `${ev.left}px`;\n * // ev.target!.style.top = `${ev.top}px`;\n * console.log(\"onDrag translate\", ev.dist);\n * ev.target!.style.transform = ev.transform;)\n * });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n * target.style.width = `${e.width}px`;\n * target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n * target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n* console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n * 1, 0, 0, 0,\n * 0, 1, 0, 0,\n * 0, 0, 1, 0,\n * 0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n * // target.style.transform = transform;\n * matrix = multiply(matrix, delta);\n * target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n * console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n * console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * rotatable: true,\n * scalable: true,\n * pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n * console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n * console.log(target);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n * console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n * console.log(\"onResizeGroup\", targets);\n * events.forEach(ev => {\n * const offset = [\n * direction[0] < 0 ? -ev.delta[0] : 0,\n * direction[1] < 0 ? -ev.delta[1] : 0,\n * ];\n * // ev.drag is a drag event that occurs when the group resize.\n * const left = offset[0] + ev.drag.beforeDist[0];\n * const top = offset[1] + ev.drag.beforeDist[1];\n * const width = ev.width;\n * const top = ev.top;\n * });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n * console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n * console.log(\"onScaleGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group scale.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const scaleX = ev.scale[0];\n * const scaleY = ev.scale[1];\n * });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n * console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n * console.log(\"onRotateGroup\", targets);\n * events.forEach(ev => {\n * const target = ev.target;\n * // ev.drag is a drag event that occurs when the group rotate.\n * const left = ev.drag.beforeDist[0];\n * const top = ev.drag.beforeDist[1];\n * const deg = ev.beforeDist;\n * });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n * console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n/**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n * console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n * console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When you click on the element, the `click` event is called.\n * @memberof Moveable\n * @event click\n * @param {Moveable.OnClick} - Parameters for the `click` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"click\", ({ hasTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", target, hasTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * When you click on the element inside the group, the `clickGroup` event is called.\n * @memberof Moveable\n * @event clickGroup\n * @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"clickGroup\", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {\n * // If you click on an element other than the target and not included in the target, index is -1.\n * console.log(\"onClickGroup\", inputTarget, isTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * `renderStart` event occurs at the first start of all events.\n * @memberof Moveable\n * @event renderStart\n * @param {Moveable.OnRenderStart} - Parameters for the `renderStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderStart\", ({ target }) => {\n * console.log(\"onRenderStart\", target);\n * });\n */\n\n/**\n * `render` event occurs before the target is drawn on the screen.\n * @memberof Moveable\n * @event render\n * @param {Moveable.OnRender} - Parameters for the `render` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"render\", ({ target }) => {\n * console.log(\"onRender\", target);\n * });\n */\n\n/**\n * `renderEnd` event occurs at the end of all events.\n * @memberof Moveable\n * @event renderEnd\n * @param {Moveable.OnRenderEnd} - Parameters for the `renderEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderEnd\", ({ target }) => {\n * console.log(\"onRenderEnd\", target);\n * });\n */\n\n/**\n * `renderGroupStart` event occurs at the first start of all events in group.\n * @memberof Moveable\n * @event renderGroupStart\n * @param {Moveable.OnRenderGroupStart} - Parameters for the `renderGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupStart\", ({ targets }) => {\n * console.log(\"onRenderGroupStart\", targets);\n * });\n */\n\n/**\n * `renderGroup` event occurs before the target is drawn on the screen in group.\n * @memberof Moveable\n * @event renderGroup\n * @param {Moveable.OnRenderGroup} - Parameters for the `renderGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroup\", ({ targets }) => {\n * console.log(\"onRenderGroup\", targets);\n * });\n */\n\n/**\n * `renderGroupEnd` event occurs at the end of all events in group.\n * @memberof Moveable\n * @event renderGroupEnd\n * @param {Moveable.OnRenderGroupEnd} - Parameters for the `renderGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupEnd\", ({ targets }) => {\n * console.log(\"onRenderGroupEnd\", targets);\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.\n * @memberof Moveable\n * @event scroll\n * @param {Moveable.OnScroll} - Parameters for the `scroll` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.\n * @memberof Moveable\n * @event scrollGroup\n * @param {Moveable.OnScrollGroup} - Parameters for the `scrollGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n * target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n * scrollContainer.scrollLeft += direction[0] * 10;\n * scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\ninterface Moveable extends MoveableGetterSetter {\n on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n on(eventName: \"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: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n on(eventName: \"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: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n on(eventName: \"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: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n on(eventName: \"click\", handlerToAttach: (event: OnClick) => any): this;\n on(eventName: \"clickGroup\", handlerToAttach: (event: OnClickGroup) => any): this;\n\n on(eventName: \"scroll\", handlerToAttach: (event: OnScroll) => any): this;\n on(eventName: \"scrollGroup\", handlerToAttach: (event: OnScrollGroup) => any): this;\n\n on(eventName: \"renderStart\", handlerToAttach: (event: OnRenderStart) => any): this;\n on(eventName: \"render\", handlerToAttach: (event: OnRender) => any): this;\n on(eventName: \"renderEnd\", handlerToAttach: (event: OnRenderEnd) => any): this;\n on(eventName: \"renderGroupStart\", handlerToAttach: (event: OnRenderGroupStart) => any): this;\n on(eventName: \"renderGroup\", handlerToAttach: (event: OnRenderGroup) => any): this;\n on(eventName: \"renderGroupEnd\", handlerToAttach: (event: OnRenderGroupEnd) => any): this;\n\n on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n","import Moveable from \"./Moveable\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\n\n(Moveable as any).PROPERTIES = PROPERTIES;\n(Moveable as any).EVENTS = EVENTS;\n\nexport default Moveable;\n"],"names":["props","_super","_this","state","__extends","createPortal","h","Moveable","ref","this","parentElement","Component","PROPERTIES","EVENTS","options","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","tempElement","target","isArray","length","updateRect","getMoveable","isMoveableElement","dragStart","clientX","clientY","isInside","getRect","callback","innerMoveable","setState","updateTarget","off","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;w9hGAQgBA,SACRC,YAAMD,gBAHHE,QAAuB,GAI1BA,EAAKC,MAAQD,EAAKF,eALiBI,0BAOvC,kBACWC,GAAaC,EAACC,MAASC,IAAKA,EAAIC,KAAM,mBAAuBA,KAAKN,QAAWM,KAAKN,MAAMO,mBAR5DC,GCH9BC,GAA2C,CACpD,YAAa,YAAa,WAAY,YACtC,WAAY,YAAa,YAAa,SAAU,SAAU,OAC1D,eAAgB,iBAChB,gBAAiB,iBAAkB,YACnC,WACA,iBACA,aAAc,gBACd,uBAAwB,qBAAsB,oBAC9C,SAEA,YACA,mBACA,aACA,oBACA,kBACA,kBACA,iBAESC,GAAsC,CAC/C,YACA,OACA,UACA,cACA,SACA,YACA,aACA,QACA,WACA,cACA,SACA,YACA,YACA,OACA,UACA,aACA,QACA,WACA,iBACA,YACA,eACA,mBACA,cACA,iBACA,kBACA,aACA,gBACA,mBACA,cACA,iBACA,kBACA,aACA,gBACA,aAEA,SACA,cAEA,cACA,SACA,YACA,mBACA,cACA,4CCTYH,EAAyCI,gBAAAA,YACjDb,mBANIC,cAAca,SAASC,cAAc,WAOnCC,KAAgBC,UAAWR,GAAkBI,GAE7CK,EAAc,GAEpBN,GAAOO,QAAQ,SAAAC,GACXF,uFAAOG,CAAS,MAAMD,IAAW,SAACE,UAAWrB,EAAKsB,QAAQH,EAAME,MAGpEE,EACInB,EAACoB,MACGlB,IAAKA,EAAIN,EAAM,iBACfQ,cAAeA,GACXO,EACAE,IAERjB,EAAKyB,iBAEHC,EAASX,EAAYW,cACvBC,GAAQD,IAA2B,EAAhBA,EAAOE,QAC1B5B,EAAK6B,eA5BM3B,oDA6CnB,SAAyBwB,UACdnB,KAAKuB,cAAcC,kBAAkBL,iBAahD,gBACSI,cAAcD,0BAgBvB,SAAiBR,QACRS,cAAcE,UAAUX,eAmBjC,SAAgBY,EAAiBC,UACtB3B,KAAKuB,cAAcK,SAASF,EAASC,cAYhD,kBACW3B,KAAKuB,cAAcM,sBAiB9B,SAAgBnC,EAAiCoC,QACxCC,cAAcC,SAAStC,EAAOoC,mBAYvC,gBACSP,cAAcU,0BAWvB,WACIjB,EAAO,GAAIhB,KAAKkB,kBACXgB,WACAhB,YAAc,UACda,cAAgB,oBAEzB,kBACW/B,KAAK+B,cAAcI,gBA/J5BrC,0ZAdLsC,CAAWjC,GAAY,SAACkC,EAAWC,GAChCC,OAAOC,eAAeH,EAAWC,EAAU,CACvCG,sBACWzC,KAAKuB,cAAchC,MAAM+C,IAEpCI,aAAIC,cACKX,iBACAM,GAAWK,OAGpBC,YAAY,EACZC,cAAc,OAGhB/C,IAAiBgD,aC9CL3C,WAAaA,MACbC,OAASA"} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5e3836c66..b410e76b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "moveable", - "version": "0.11.1", + "version": "0.12.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1099,12 +1099,12 @@ } }, "preact-moveable": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.13.4.tgz", - "integrity": "sha512-7WS3GkX6Gt2PbfHJy66OrCZqdyMeT9LnBUvr7gaZHKxLfn2vuqqi0pGwEubWDhB40BJum3zu8KocRQnxQtvZZw==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.14.0.tgz", + "integrity": "sha512-8Az7OsxUAYS7kShgsn72xf9yvbfuwft0y09Zhhora0WBeI2fmZdBE1ns9a8ICuMiTk2ujLyZB647C8nWPqUWuw==", "requires": { "preact-css-styler": "^1.0.0", - "react-moveable": "^0.14.5" + "react-moveable": "^0.15.0" } }, "preact-render-to-string": { @@ -1211,9 +1211,9 @@ "dev": true }, "react-moveable": { - "version": "0.14.5", - "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.14.5.tgz", - "integrity": "sha512-WAR3xvLN/kwl0yahATLx6nl3GR5BnyDhzcH9FRSxT8fhVyxLHcqa+jOGhEhDiPQZzzNJTbXQG0VUWPqqUWE6TQ==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.15.0.tgz", + "integrity": "sha512-pXUfVR7fSGfAVP30fnFdo2Q/GVMgdvcyHGNuZMYX/A9Cpgml9zAKdIPc0yVbC73aqUNl0vKOxYkRFrGFNgnDwg==", "requires": { "@daybrush/drag": "^0.11.1", "@daybrush/utils": "^0.10.0", diff --git a/package.json b/package.json index de652775a..3ee701580 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "moveable", - "version": "0.11.1", + "version": "0.12.0", "description": "Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.", "main": "./dist/moveable.cjs.js", "module": "./dist/moveable.esm.js", @@ -57,7 +57,7 @@ "dependencies": { "@egjs/component": "^2.1.2", "preact": "^10.0.4", - "preact-moveable": "^0.13.4" + "preact-moveable": "^0.14.0" }, "devDependencies": { "@daybrush/builder": "^0.1.2", diff --git a/packages/ngx-moveable/projects/ngx-moveable/package-lock.json b/packages/ngx-moveable/projects/ngx-moveable/package-lock.json index 164b6602b..21fdda143 100644 --- a/packages/ngx-moveable/projects/ngx-moveable/package-lock.json +++ b/packages/ngx-moveable/projects/ngx-moveable/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-moveable", - "version": "0.7.1", + "version": "0.8.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -51,13 +51,13 @@ "integrity": "sha512-KSB3kl/hlR4LiKBbK3hEydNFgj1fM3ymmxTmT9doeUVaMr7mTpIRmeTJ3/aCMl52Z0/It8Fm5pEJBQRLcb/yCw==" }, "moveable": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.11.1.tgz", - "integrity": "sha512-BJfoR+n1vpT6RRTI+nXUDsth6EIFNNLhoCT+YavTNNXjrYEBooLU5Jd+LAc1P7UMRD1290/HXfO8VwOiXzHgtw==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.12.0.tgz", + "integrity": "sha512-Hnven+0jN9baKwUtPezHjzSfX+d5s9gLVZ3oQ+4U/36Tk8nhGBoa01SVgHcIJfauLszAUrlg/w4VPfoMv6M12g==", "requires": { "@egjs/component": "^2.1.2", "preact": "^10.0.4", - "preact-moveable": "^0.13.4" + "preact-moveable": "^0.14.0" } }, "preact": { @@ -74,12 +74,12 @@ } }, "preact-moveable": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.13.4.tgz", - "integrity": "sha512-7WS3GkX6Gt2PbfHJy66OrCZqdyMeT9LnBUvr7gaZHKxLfn2vuqqi0pGwEubWDhB40BJum3zu8KocRQnxQtvZZw==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.14.0.tgz", + "integrity": "sha512-8Az7OsxUAYS7kShgsn72xf9yvbfuwft0y09Zhhora0WBeI2fmZdBE1ns9a8ICuMiTk2ujLyZB647C8nWPqUWuw==", "requires": { "preact-css-styler": "^1.0.0", - "react-moveable": "^0.14.5" + "react-moveable": "^0.15.0" } }, "react-css-styler": { @@ -91,9 +91,9 @@ } }, "react-moveable": { - "version": "0.14.5", - "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.14.5.tgz", - "integrity": "sha512-WAR3xvLN/kwl0yahATLx6nl3GR5BnyDhzcH9FRSxT8fhVyxLHcqa+jOGhEhDiPQZzzNJTbXQG0VUWPqqUWE6TQ==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.15.0.tgz", + "integrity": "sha512-pXUfVR7fSGfAVP30fnFdo2Q/GVMgdvcyHGNuZMYX/A9Cpgml9zAKdIPc0yVbC73aqUNl0vKOxYkRFrGFNgnDwg==", "requires": { "@daybrush/drag": "^0.11.1", "@daybrush/utils": "^0.10.0", diff --git a/packages/ngx-moveable/projects/ngx-moveable/package.json b/packages/ngx-moveable/projects/ngx-moveable/package.json index 4e673fb10..2ccfdbead 100644 --- a/packages/ngx-moveable/projects/ngx-moveable/package.json +++ b/packages/ngx-moveable/projects/ngx-moveable/package.json @@ -1,6 +1,6 @@ { "name": "ngx-moveable", - "version": "0.7.1", + "version": "0.8.0", "description": "An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.", "repository": { "type": "git", @@ -44,6 +44,6 @@ }, "dependencies": { "framework-utils": "^0.2.1", - "moveable": "^0.11.1" + "moveable": "^0.12.0" } } diff --git a/packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts b/packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts index 38eb006e6..56616576f 100644 --- a/packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts +++ b/packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts @@ -61,6 +61,7 @@ export class NgxMoveableComponent @Input() public dragArea!: boolean; @Input() public rotationPosition!: 'top' | 'bottom' | 'left' | 'right'; @Input() public baseDirection!: number[]; + @Input() public defaultGroupRotate!: boolean; @Input() public ables!: Able[]; @Input() public className!: string; diff --git a/packages/preact-moveable/package-lock.json b/packages/preact-moveable/package-lock.json index 530e05a7c..49b7cf676 100644 --- a/packages/preact-moveable/package-lock.json +++ b/packages/preact-moveable/package-lock.json @@ -1,6 +1,6 @@ { "name": "preact-moveable", - "version": "0.13.4", + "version": "0.14.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -14,45 +14,44 @@ } }, "@babel/generator": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.0.tgz", - "integrity": "sha512-1TTVrt7J9rcG5PMjvO7VEG3FrEoEJNHxumRq66GemPmzboLWtIjjcJgk8rokuAS7IiRSpgVSu5Vb9lc99iJkOA==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.4.tgz", + "integrity": "sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==", "dev": true, "requires": { - "@babel/types": "^7.5.0", + "@babel/types": "^7.7.4", "jsesc": "^2.5.1", - "lodash": "^4.17.11", - "source-map": "^0.5.0", - "trim-right": "^1.0.1" + "lodash": "^4.17.13", + "source-map": "^0.5.0" } }, "@babel/helper-function-name": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", - "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz", + "integrity": "sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==", "dev": true, "requires": { - "@babel/helper-get-function-arity": "^7.0.0", - "@babel/template": "^7.1.0", - "@babel/types": "^7.0.0" + "@babel/helper-get-function-arity": "^7.7.4", + "@babel/template": "^7.7.4", + "@babel/types": "^7.7.4" } }, "@babel/helper-get-function-arity": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz", - "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz", + "integrity": "sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==", "dev": true, "requires": { - "@babel/types": "^7.0.0" + "@babel/types": "^7.7.4" } }, "@babel/helper-split-export-declaration": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", - "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz", + "integrity": "sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==", "dev": true, "requires": { - "@babel/types": "^7.4.4" + "@babel/types": "^7.7.4" } }, "@babel/highlight": { @@ -67,61 +66,72 @@ } }, "@babel/parser": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.0.tgz", - "integrity": "sha512-I5nW8AhGpOXGCCNYGc+p7ExQIBxRFnS2fd/d862bNOKvmoEPjYPcfIjsfdy0ujagYOIYPczKgD9l3FsgTkAzKA==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.4.tgz", + "integrity": "sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==", "dev": true }, "@babel/template": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", - "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz", + "integrity": "sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.4.4", - "@babel/types": "^7.4.4" + "@babel/parser": "^7.7.4", + "@babel/types": "^7.7.4" } }, "@babel/traverse": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.0.tgz", - "integrity": "sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz", + "integrity": "sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==", "dev": true, "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.5.0", - "@babel/helper-function-name": "^7.1.0", - "@babel/helper-split-export-declaration": "^7.4.4", - "@babel/parser": "^7.5.0", - "@babel/types": "^7.5.0", + "@babel/code-frame": "^7.5.5", + "@babel/generator": "^7.7.4", + "@babel/helper-function-name": "^7.7.4", + "@babel/helper-split-export-declaration": "^7.7.4", + "@babel/parser": "^7.7.4", + "@babel/types": "^7.7.4", "debug": "^4.1.0", "globals": "^11.1.0", - "lodash": "^4.17.11" + "lodash": "^4.17.13" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", + "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", + "dev": true, + "requires": { + "@babel/highlight": "^7.0.0" + } + } } }, "@babel/types": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.0.tgz", - "integrity": "sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==", + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz", + "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==", "dev": true, "requires": { "esutils": "^2.0.2", - "lodash": "^4.17.11", + "lodash": "^4.17.13", "to-fast-properties": "^2.0.0" } }, "@daybrush/builder": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@daybrush/builder/-/builder-0.1.1.tgz", - "integrity": "sha512-btgTbn4wf/TbAqfjAtk4PQQmStiRce9ZPvQiMlHBbB9MeK6zLIAC7RwFNch0mGA8mzTFWE3EfRoSyhM4IWUyxg==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@daybrush/builder/-/builder-0.1.2.tgz", + "integrity": "sha512-Yk+lZLFRPGFsKLKjiLwzSYlF83Bav+B8PhSsUsvhVyl/f30hjOS/lM3sdCF8WI9lWWcCG/XpNUf/O16qDvLKqQ==", "dev": true, "requires": { "@daybrush/rollup-plugin-prototype-minify": "^1.1.2", "rollup": "^1.7.4", "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-node-resolve": "^4.0.1", - "rollup-plugin-prototype-minify": "^1.0.5", + "rollup-plugin-prototype-minify": "^1.1.0", "rollup-plugin-replace": "^2.1.1", "rollup-plugin-typescript": "^1.0.1", "rollup-plugin-uglify": "^6.0.2", @@ -205,9 +215,9 @@ } }, "@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "version": "0.0.40", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.40.tgz", + "integrity": "sha512-p3KZgMto/JyxosKGmnLDJ/dG5wf+qTRMUjHJcspC2oQKa4jP7mz+tv0ND56lLBu3ojHlhzY33Ol+khLyNmilkA==", "dev": true }, "@types/node": { @@ -226,9 +236,9 @@ } }, "acorn": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.0.tgz", - "integrity": "sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz", + "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==", "dev": true }, "ansi-styles": { @@ -309,12 +319,6 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, - "core-util-is": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true - }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -460,19 +464,13 @@ "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=", "dev": true }, - "isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true - }, "jest-worker": { - "version": "24.6.0", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.6.0.tgz", - "integrity": "sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==", + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz", + "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==", "dev": true, "requires": { - "merge-stream": "^1.0.1", + "merge-stream": "^2.0.0", "supports-color": "^6.1.0" }, "dependencies": { @@ -571,9 +569,9 @@ } }, "lodash": { - "version": "4.17.14", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", - "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, "loose-envify": { @@ -586,22 +584,19 @@ } }, "magic-string": { - "version": "0.25.3", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz", - "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==", + "version": "0.25.4", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.4.tgz", + "integrity": "sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw==", "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } }, "merge-stream": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz", - "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=", - "dev": true, - "requires": { - "readable-stream": "^2.0.1" - } + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true }, "minimatch": { "version": "3.0.4", @@ -744,12 +739,6 @@ "filesize": "^3.6.1" } }, - "process-nextick-args": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "dev": true - }, "prop-types": { "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", @@ -762,9 +751,9 @@ } }, "prototype-minify": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/prototype-minify/-/prototype-minify-1.0.5.tgz", - "integrity": "sha512-Ftp1ZRixf3OxZlJ+OaP9Jfm7UWAXIwCTNLuUiqwQA/18hVanSv0rJ103ek/h8E/hcKtW9BRsLi9syAwzDIJkOg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prototype-minify/-/prototype-minify-1.1.0.tgz", + "integrity": "sha512-xsxG/Bh06Y0keIM/DNsOnX0lFuPVrhl7v48FxEHg8xCAjPjjoI2EruVdJbzfYHCGqf8HqD4JI3s7gsWZ392x9w==", "dev": true, "requires": { "@babel/generator": "^7.1.2", @@ -788,9 +777,9 @@ "dev": true }, "react-moveable": { - "version": "0.14.5", - "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.14.5.tgz", - "integrity": "sha512-WAR3xvLN/kwl0yahATLx6nl3GR5BnyDhzcH9FRSxT8fhVyxLHcqa+jOGhEhDiPQZzzNJTbXQG0VUWPqqUWE6TQ==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.15.0.tgz", + "integrity": "sha512-pXUfVR7fSGfAVP30fnFdo2Q/GVMgdvcyHGNuZMYX/A9Cpgml9zAKdIPc0yVbC73aqUNl0vKOxYkRFrGFNgnDwg==", "requires": { "@daybrush/drag": "^0.11.1", "@daybrush/utils": "^0.10.0", @@ -810,21 +799,6 @@ "shallowequal": "^1.1.0" } }, - "readable-stream": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", - "dev": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, "resolve": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz", @@ -835,22 +809,14 @@ } }, "rollup": { - "version": "1.16.7", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.16.7.tgz", - "integrity": "sha512-P3GVcbVSLLjHWFLKGerYRe3Q/yggRXmTZFx/4WZf4wzGwO6hAg5jyMAFMQKc0dts8rFID4BQngfoz6yQbI7iMQ==", + "version": "1.27.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.5.tgz", + "integrity": "sha512-8rfVdzuTg2kt8ObD9LNJpEwUN7B6lsl3sHc5fddtgICpLjpYeSf4m2+RftBzcCaBTMi1iYX3Ez8zFT4Gj2nJjg==", "dev": true, "requires": { - "@types/estree": "0.0.39", - "@types/node": "^12.0.10", - "acorn": "^6.1.1" - }, - "dependencies": { - "@types/node": { - "version": "12.6.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.2.tgz", - "integrity": "sha512-gojym4tX0FWeV2gsW4Xmzo5wxGjXGm550oVUII7f7G5o4BV6c7DBdiG1RRQd+y1bvqRyYtPfMK85UM95vsapqQ==", - "dev": true - } + "@types/estree": "*", + "@types/node": "*", + "acorn": "^7.1.0" } }, "rollup-plugin-commonjs": { @@ -900,12 +866,12 @@ } }, "rollup-plugin-prototype-minify": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/rollup-plugin-prototype-minify/-/rollup-plugin-prototype-minify-1.0.5.tgz", - "integrity": "sha512-3qeEFacOSjhoyByz53E7iBuK8roWrKVnWqHM1pOj600+0NX80/exxxH3QBY4Zj4YdMeGVk9SlA4lnNe13g2whQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-prototype-minify/-/rollup-plugin-prototype-minify-1.1.0.tgz", + "integrity": "sha512-8kMi+F3Zy1q3NnxJbfIQuH0trYA1GxAtJjGxNidupsLIi47/azAM1rFvIlyeAD3gkqL3ZP/YrQgevH07D17b6g==", "dev": true, "requires": { - "prototype-minify": "^1.0.0" + "prototype-minify": "^1.1.0" } }, "rollup-plugin-replace": { @@ -929,14 +895,14 @@ } }, "rollup-plugin-uglify": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.2.tgz", - "integrity": "sha512-qwz2Tryspn5QGtPUowq5oumKSxANKdrnfz7C0jm4lKxvRDsNe/hSGsB9FntUul7UeC4TsZEWKErVgE1qWSO0gw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.3.tgz", + "integrity": "sha512-PIv3CfhZJlOG8C85N0GX+uK09TPggmAS6Nk6fpp2ELzDAV5VUhNzOURDU2j7+MwuRr0zq9IZttUTADc/jH8Gkg==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "jest-worker": "^24.0.0", - "serialize-javascript": "^1.6.1", + "serialize-javascript": "^1.9.0", "uglify-js": "^3.4.9" } }, @@ -969,12 +935,6 @@ "estree-walker": "^0.6.1" } }, - "safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, "scenejs": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/scenejs/-/scenejs-1.1.4.tgz", @@ -986,9 +946,9 @@ } }, "serialize-javascript": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.7.0.tgz", - "integrity": "sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz", + "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==", "dev": true }, "shallowequal": { @@ -1037,15 +997,6 @@ "integrity": "sha1-PHQJ9MecQN6axyxhbPZ5qZTzdVE=", "dev": true }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -1061,12 +1012,6 @@ "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", "dev": true }, - "trim-right": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", - "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", - "dev": true - }, "tslib": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", @@ -1130,15 +1075,21 @@ "dev": true }, "uglify-js": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz", - "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.0.tgz", + "integrity": "sha512-PC/ee458NEMITe1OufAjal65i6lB58R1HWMRcxwvdz1UopW0DYqlRL3xdu3IcTvTXsB02CRHykidkTRL+A3hQA==", "dev": true, "requires": { - "commander": "~2.20.0", + "commander": "~2.20.3", "source-map": "~0.6.1" }, "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -1153,12 +1104,6 @@ "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", "dev": true }, - "util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true - }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/packages/preact-moveable/package.json b/packages/preact-moveable/package.json index b5dfd08ed..f910e6074 100644 --- a/packages/preact-moveable/package.json +++ b/packages/preact-moveable/package.json @@ -1,6 +1,6 @@ { "name": "preact-moveable", - "version": "0.13.4", + "version": "0.14.0", "description": "A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Pinchable, Groupable, Snappable.", "main": "./dist/moveable.cjs.js", "module": "./dist/moveable.esm.js", @@ -47,7 +47,7 @@ }, "homepage": "https://daybrush.com/moveable", "devDependencies": { - "@daybrush/builder": "^0.1.0", + "@daybrush/builder": "^0.1.2", "@scenejs/effects": "^1.0.1", "keycon": "^0.3.0", "preact": "^10.0.0", @@ -61,6 +61,6 @@ }, "dependencies": { "preact-css-styler": "^1.0.0", - "react-moveable": "^0.14.5" + "react-moveable": "^0.15.0" } } diff --git a/packages/preact-moveable/rollup.config.js b/packages/preact-moveable/rollup.config.js index e61e7817a..57017bf8c 100644 --- a/packages/preact-moveable/rollup.config.js +++ b/packages/preact-moveable/rollup.config.js @@ -3,6 +3,7 @@ const preact = require("rollup-plugin-preact"); const defaultOptions = { + sourcemap: false, tsconfig: "tsconfig.build.json", external: { "@daybrush/utils": "utils", diff --git a/packages/react-moveable/src/react-moveable/ables/Resizable.ts b/packages/react-moveable/src/react-moveable/ables/Resizable.ts index 87a1da3a4..abfbda38c 100644 --- a/packages/react-moveable/src/react-moveable/ables/Resizable.ts +++ b/packages/react-moveable/src/react-moveable/ables/Resizable.ts @@ -375,7 +375,6 @@ export default { } const { offsetWidth, offsetHeight, dist, - direction, } = params; const parentScale = [ diff --git a/packages/svelte-moveable/package-lock.json b/packages/svelte-moveable/package-lock.json index 1cb2bc633..e36669a53 100644 --- a/packages/svelte-moveable/package-lock.json +++ b/packages/svelte-moveable/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte-moveable", - "version": "0.2.1", + "version": "0.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1872,13 +1872,13 @@ } }, "moveable": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.11.1.tgz", - "integrity": "sha512-BJfoR+n1vpT6RRTI+nXUDsth6EIFNNLhoCT+YavTNNXjrYEBooLU5Jd+LAc1P7UMRD1290/HXfO8VwOiXzHgtw==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.12.0.tgz", + "integrity": "sha512-Hnven+0jN9baKwUtPezHjzSfX+d5s9gLVZ3oQ+4U/36Tk8nhGBoa01SVgHcIJfauLszAUrlg/w4VPfoMv6M12g==", "requires": { "@egjs/component": "^2.1.2", "preact": "^10.0.4", - "preact-moveable": "^0.13.4" + "preact-moveable": "^0.14.0" } }, "mri": { @@ -2072,12 +2072,12 @@ } }, "preact-moveable": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.13.4.tgz", - "integrity": "sha512-7WS3GkX6Gt2PbfHJy66OrCZqdyMeT9LnBUvr7gaZHKxLfn2vuqqi0pGwEubWDhB40BJum3zu8KocRQnxQtvZZw==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.14.0.tgz", + "integrity": "sha512-8Az7OsxUAYS7kShgsn72xf9yvbfuwft0y09Zhhora0WBeI2fmZdBE1ns9a8ICuMiTk2ujLyZB647C8nWPqUWuw==", "requires": { "preact-css-styler": "^1.0.0", - "react-moveable": "^0.14.5" + "react-moveable": "^0.15.0" }, "dependencies": { "preact-css-styler": { @@ -2155,9 +2155,9 @@ "dev": true }, "react-moveable": { - "version": "0.14.5", - "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.14.5.tgz", - "integrity": "sha512-WAR3xvLN/kwl0yahATLx6nl3GR5BnyDhzcH9FRSxT8fhVyxLHcqa+jOGhEhDiPQZzzNJTbXQG0VUWPqqUWE6TQ==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.15.0.tgz", + "integrity": "sha512-pXUfVR7fSGfAVP30fnFdo2Q/GVMgdvcyHGNuZMYX/A9Cpgml9zAKdIPc0yVbC73aqUNl0vKOxYkRFrGFNgnDwg==", "requires": { "@daybrush/drag": "^0.11.1", "@daybrush/utils": "^0.10.0", diff --git a/packages/svelte-moveable/package.json b/packages/svelte-moveable/package.json index 0b6b295da..f64eba465 100644 --- a/packages/svelte-moveable/package.json +++ b/packages/svelte-moveable/package.json @@ -1,6 +1,6 @@ { "name": "svelte-moveable", - "version": "0.2.1", + "version": "0.3.0", "description": "A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.", "main": "./dist/moveable.cjs.js", "module": "./dist/moveable.esm.js", @@ -59,7 +59,7 @@ "typescript": "^3.6.4" }, "dependencies": { - "moveable": "^0.11.1" + "moveable": "^0.12.0" }, "scripts": { "build": "rollup -c rollup.build.config.js",