uiik 1.0.9 → 1.3.0-alpha

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.0.9
+ * uiik v1.3.0-alpha
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@holyhigh/func.js')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@holyhigh/func.js'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.func_js));
-})(this, (function (exports, func_js) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/is'), require('myfx/collection'), require('myfx/object'), require('myfx/string'), require('myfx/array'), require('myfx'), require('myfx/utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/string', 'myfx/array', 'myfx', 'myfx/utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.string, global.array, null, global.utils));
+})(this, (function (exports, is, collection, object, string, array, myfx, utils) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -36,21 +36,346 @@
         if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
         if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    const UtMap = new WeakMap();
+    const EXP_MATRIX$1 = /matrix\((?<a>[\d-.]+)\s*,\s*(?<b>[\d-.]+)\s*,\s*(?<c>[\d-.]+)\s*,\s*(?<d>[\d-.]+)\s*,\s*(?<x>[\d-.]+)\s*,\s*(?<y>[\d-.]+)\)/gim;
+    class UiiTransformer {
+        constructor(el) {
+            this.angle = 0;
+            this.el = el;
+            this.normalize(el);
+            UtMap.set(el, this);
+        }
+        normalize(el) {
+            let { x, y } = normalize(el);
+            this.x = x;
+            this.y = y;
+            return this;
+        }
+        moveTo(x, y) {
+            this.x = x;
+            this.y = y;
+            moveTo(this.el, this.x, this.y);
+        }
+        moveToX(x) {
+            this.x = x;
+            moveTo(this.el, this.x, this.y);
+        }
+        moveToY(y) {
+            this.y = y;
+            moveTo(this.el, this.x, this.y);
+        }
+    }
+    function normalize(el) {
+        const style = window.getComputedStyle(el);
+        let x = 0, y = 0;
+        if (el instanceof HTMLElement) {
+            x = (parseFloat(style.left) || 0) + (parseFloat(style.marginLeft) || 0);
+            y = (parseFloat(style.top) || 0) + (parseFloat(style.marginTop) || 0);
+            el.style.setProperty("left", "0", "important");
+            el.style.setProperty("top", "0", "important");
+            el.style.setProperty("margin", "0", "important");
+        }
+        else {
+            x = parseFloat(style.x || style.cx) || 0;
+            y = parseFloat(style.y || style.cy) || 0;
+            el.removeAttribute("x");
+            el.removeAttribute("y");
+            el.removeAttribute("cx");
+            el.removeAttribute("cy");
+        }
+        EXP_MATRIX$1.lastIndex = 0;
+        const rs = EXP_MATRIX$1.exec(window.getComputedStyle(el).transform);
+        if (rs && rs.groups) {
+            x += parseFloat(rs.groups.x) || 0;
+            y += parseFloat(rs.groups.y) || 0;
+        }
+        moveTo(el, x, y);
+        return { x, y };
+    }
+    function wrapper(el) {
+        let ut = UtMap.get(el);
+        if (ut)
+            return ut.normalize(el);
+        return new UiiTransformer(el);
+    }
+    function transformMove(transofrmStr, x, y, unit = false) {
+        return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""})` +
+            transofrmStr.replace(/translate\([^)]+?\)/, ""));
+    }
+    function getTranslate(el) {
+        let xVal = NaN, yVal = NaN;
+        let transformStr = "";
+        if (el instanceof SVGGraphicsElement) {
+            transformStr = el.getAttribute("transform") || "";
+        }
+        else {
+            let style = el.style;
+            transformStr = style.transform || "";
+        }
+        EXP_GET_TRANSLATE.lastIndex = 0;
+        const xy = EXP_GET_TRANSLATE.exec(transformStr);
+        if (xy && xy.groups) {
+            xVal = parseFloat(xy.groups.x);
+            yVal = parseFloat(xy.groups.y);
+        }
+        else {
+            EXP_GET_TRANSLATE_XY.lastIndex = 0;
+            const xy = EXP_GET_TRANSLATE_XY.exec(transformStr);
+            if (xy && xy.groups) {
+                if (xy.groups.dir == "X") {
+                    xVal = parseFloat(xy.groups.v);
+                }
+                else {
+                    yVal = parseFloat(xy.groups.v);
+                }
+            }
+        }
+        return { x: xVal, y: yVal };
+    }
+    function moveTo(el, x, y) {
+        if (el instanceof SVGGraphicsElement) {
+            el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x, y));
+        }
+        else {
+            let style = el.style;
+            style.transform = transformMove(style.transform || "", x, y, true);
+        }
+    }
+    const EXP_GET_TRANSLATE = /translate\(\s*(?<x>[\d.-]+)\D*,\s*(?<y>[\d.-]+)\D*\)/gim;
+    const EXP_GET_TRANSLATE_XY = /translate(?<dir>X|Y)\(\s*(?<v>[\d.-]+)\D*\)/gim;
+    function moveBy(el, x, y) {
+        const xy = getTranslate(el);
+        if (el instanceof SVGGraphicsElement) {
+            el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", xy.x + x, xy.y + y));
+        }
+        else {
+            let style = el.style;
+            style.transform = transformMove(style.transform || "", xy.x + x, xy.y + y, true);
+        }
+    }
+    function rotateTo(el, deg, cx, cy) {
+        if (el instanceof SVGGraphicsElement) {
+            let transformStr = el.getAttribute("transform") || "";
+            let originPos = is.isDefined(cx) && is.isDefined(cy);
+            let origin = "";
+            if (originPos) {
+                if (el.x instanceof SVGAnimatedLength) {
+                    cx += el.x.animVal.value;
+                    cy += el.y.animVal.value;
+                }
+                else if (el.cx instanceof SVGAnimatedLength) {
+                    cx += el.cx.animVal.value;
+                    cy += el.cy.animVal.value;
+                }
+                origin = `,${cx},${cy}`;
+            }
+            transformStr =
+                transformStr.replace(/rotate\([^)]+?\)/, "") + ` rotate(${deg}${origin})`;
+            el.setAttribute("transform", transformStr);
+        }
+        else {
+            let style = el.style;
+            style.transform =
+                style.transform.replace(/rotate\([^)]+?\)/, "").replace(/rotateZ\([^)]+?\)/, "") +
+                    " rotateZ(" +
+                    deg +
+                    "deg)";
+        }
+    }
+
+    const ONE_ANG = Math.PI / 180;
+    const ONE_RAD = 180 / Math.PI;
+    function getBox(child, parent) {
+        const rect = child.getBoundingClientRect();
+        const rs = { x: 0, y: 0, w: rect.width, h: rect.height };
+        parent =
+            parent ||
+                child.offsetParent ||
+                child.ownerSVGElement ||
+                child.parentElement ||
+                document.body;
+        const parentRect = parent.getBoundingClientRect();
+        const parentStyle = window.getComputedStyle(parent);
+        const parentBorderLeft = parseFloat(parentStyle.borderLeftWidth);
+        const parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+        rs.x = rect.x - parentRect.x + parent.scrollLeft;
+        rs.y = rect.y - parentRect.y + parent.scrollTop;
+        if (child instanceof SVGElement) ;
+        else {
+            rs.x -= parentBorderLeft;
+            rs.y -= parentBorderTop;
+        }
+        return rs;
+    }
+    function getPointOffset(e, pos) {
+        let ox = e.offsetX || 0, oy = e.offsetY || 0;
+        if (e.target instanceof SVGElement) {
+            ox -= pos.x;
+            oy -= pos.y;
+        }
+        return [ox, oy];
+    }
+    function isSVGEl(el) {
+        return el instanceof SVGElement;
+    }
+    const EDGE_THRESHOLD = 5;
+    const DRAGGING_RULE = "body * { pointer-events: none; }";
+    let lockSheet;
+    function lockPage() {
+        lockSheet = getFirstSS();
+        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
+    }
+    function unlockPage() {
+        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
+    }
+    function getFirstSS() {
+        if (document.styleSheets.length < 1) {
+            document.head.appendChild(document.createElement("style"));
+        }
+        const sheet = collection.find(document.styleSheets, (ss) => !ss.href);
+        if (!sheet) {
+            document.head.appendChild(document.createElement("style"));
+        }
+        return sheet || collection.find(document.styleSheets, (ss) => !ss.href);
+    }
+    let cursor = { html: "", body: "" };
+    function saveCursor() {
+        cursor.body = document.body.style.cursor;
+        cursor.html = document.documentElement.style.cursor;
+    }
+    function setCursor(cursor) {
+        document.body.style.cursor = document.documentElement.style.cursor = cursor;
+    }
+    function restoreCursor() {
+        document.body.style.cursor = cursor.body;
+        document.documentElement.style.cursor = cursor.html;
+    }
+    function getStyleXy(el) {
+        const style = window.getComputedStyle(el);
+        let x = 0, y = 0;
+        if (el instanceof SVGGraphicsElement) {
+            x = parseFloat(style.x || style.cx) || 0;
+            y = parseFloat(style.y || style.cy) || 0;
+        }
+        else {
+            x = parseFloat(style.left) || 0;
+            y = parseFloat(style.top) || 0;
+        }
+        return { x, y };
+    }
+    const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
+    function getMatrixInfo(elCStyle) {
+        let a = 1, b = 0, x = 0, y = 0;
+        let e = undefined, f = undefined;
+        if (elCStyle instanceof SVGGraphicsElement) {
+            const transMatrix = elCStyle.transform.animVal[0];
+            if (transMatrix) {
+                e = transMatrix.matrix.e;
+                f = transMatrix.matrix.f;
+            }
+            elCStyle = window.getComputedStyle(elCStyle);
+        }
+        else {
+            if (elCStyle instanceof HTMLElement) {
+                elCStyle = window.getComputedStyle(elCStyle);
+            }
+        }
+        const matched = elCStyle.transform.match(EXP_MATRIX);
+        if (matched && matched.groups) {
+            a = parseFloat(matched.groups.a);
+            b = parseFloat(matched.groups.b);
+            parseFloat(matched.groups.c);
+            parseFloat(matched.groups.d);
+            x = parseFloat(matched.groups.x);
+            y = parseFloat(matched.groups.y);
+        }
+        if (e && f) {
+            x = e;
+            y = f;
+        }
+        const rs = { scale: 1, angle: 0, x, y };
+        rs.scale = Math.sqrt(a * a + b * b);
+        rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+        return rs;
+    }
+    function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
+        if (!elRect) {
+            elRect = el.getBoundingClientRect();
+        }
+        if (!elCStyle) {
+            elCStyle = window.getComputedStyle(el);
+        }
+        if (!matrixInfo) {
+            matrixInfo = getMatrixInfo(elCStyle);
+        }
+        const scale = matrixInfo.scale;
+        let x = event.clientX -
+            elRect.x -
+            (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
+            el.scrollLeft * scale;
+        let y = event.clientY -
+            elRect.y -
+            (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
+            el.scrollTop * scale;
+        return { x: x / scale, y: y / scale };
+    }
+    function getRectInContainer(el, container) {
+        const elRect = el.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const elCStyle = window.getComputedStyle(container);
+        const matrixInfo = getMatrixInfo(elCStyle);
+        const scale = matrixInfo.scale;
+        let x = elRect.x -
+            containerRect.x -
+            (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
+            container.scrollLeft * scale;
+        let y = elRect.y -
+            containerRect.y -
+            (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
+            container.scrollTop * scale;
+        return {
+            x: x / scale,
+            y: y / scale,
+            w: elRect.width / scale,
+            h: elRect.height / scale,
+        };
+    }
+    function getCenterXy(el) {
+        const cStyle = window.getComputedStyle(el);
+        const center = cStyle.transformOrigin;
+        const centerPair = center.split(" ");
+        const ox = parseFloat(centerPair[0]);
+        const oy = parseFloat(centerPair[1]);
+        const shadowDom = el.cloneNode();
+        rotateTo(shadowDom, 0);
+        const parentEl = el.parentElement;
+        let startX = 0, startY = 0;
+        if (parentEl) {
+            parentEl.appendChild(shadowDom);
+            const offsetXY = getRectInContainer(shadowDom, parentEl);
+            (startX = offsetXY.x), (startY = offsetXY.y);
+            parentEl.removeChild(shadowDom);
+        }
+        return { sx: startX, sy: startY, x: startX + ox, y: startY + oy, ox, oy };
     }
 
     var _Uii_listeners;
-    /**
-     * A Base class for all Uii classes
-     */
     class Uii {
         constructor(ele, opts) {
             this.enabled = true;
             _Uii_listeners.set(this, []);
             this.opts = opts || {};
-            if (func_js.isArrayLike(ele) && !func_js.isString(ele)) {
-                this.ele = func_js.map(ele, (el) => {
-                    let e = func_js.isString(el) ? document.querySelector(el) : el;
-                    if (!func_js.isElement(e)) {
+            if (is.isArrayLike(ele) && !is.isString(ele)) {
+                this.ele = collection.map(ele, (el) => {
+                    let e = is.isString(el) ? document.querySelector(el) : el;
+                    if (!is.isElement(e)) {
                         console.error('Invalid element "' + el + '"');
                         return false;
                     }
@@ -58,30 +383,95 @@
                 });
             }
             else {
-                const el = func_js.isString(ele) ? document.querySelectorAll(ele) : ele;
-                if (!func_js.isElement(el) && !func_js.isArrayLike(el)) {
+                if (is.isString(ele)) {
+                    this.eleString = ele;
+                }
+                const el = is.isString(ele) ? document.querySelectorAll(ele) : ele;
+                if (!is.isElement(el) && !is.isArrayLike(el)) {
                     console.error('Invalid element "' + ele + '"');
                     return;
                 }
-                this.ele = func_js.isArrayLike(el) ? func_js.toArray(el) : [el];
+                this.ele = is.isArrayLike(el) ? collection.toArray(el) : [el];
             }
         }
-        /**
-         * 销毁uii对象，包括卸载事件、清空元素等
-         */
         destroy() {
-            func_js.each(__classPrivateFieldGet(this, _Uii_listeners, "f"), ev => {
+            collection.each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
                 ev[0].removeEventListener(ev[1], ev[2], ev[3]);
             });
             __classPrivateFieldSet(this, _Uii_listeners, [], "f");
         }
-        /**
-         * 注册事件，以便在{@link destroy}方法中卸载
-         * @param el dom元素
-         * @param event 事件名
-         * @param hook 回调函数
-         * @param useCapture 默认false
-         */
+        addPointerDown(el, pointerDown, opts) {
+            const onPointerDown = pointerDown;
+            const threshold = opts.threshold || 0;
+            const toLockPage = opts.lockPage || false;
+            const uiiOptions = this.opts;
+            this.registerEvent(el, 'mousedown', (e) => {
+                let t = e.target;
+                if (!t)
+                    return;
+                const hasCursor = !is.isEmpty(object.get(uiiOptions, 'cursor.active'));
+                const currentStyle = el.style;
+                const currentCStyle = window.getComputedStyle(el);
+                const currentRect = el.getBoundingClientRect();
+                let dragging = false;
+                const originPosX = e.clientX;
+                const originPosY = e.clientY;
+                if (hasCursor) {
+                    saveCursor();
+                }
+                let onPointerStart;
+                let onPointerMove;
+                let onPointerEnd;
+                onPointerDown({
+                    onPointerMove: (pm) => { onPointerMove = pm; },
+                    onPointerStart: (ps) => { onPointerStart = ps; },
+                    onPointerEnd: (pe) => { onPointerEnd = pe; },
+                    ev: e,
+                    pointX: e.clientX, pointY: e.clientY, target: t,
+                    currentTarget: el, currentStyle, currentCStyle, currentRect
+                });
+                const pointerMove = (ev) => {
+                    const offX = ev.clientX - originPosX;
+                    const offY = ev.clientY - originPosY;
+                    if (!dragging) {
+                        if (Math.abs(offX) > threshold || Math.abs(offY) > threshold) {
+                            dragging = true;
+                            if (toLockPage) {
+                                lockPage();
+                            }
+                            if (hasCursor) {
+                                setCursor(uiiOptions.cursor.active);
+                            }
+                            onPointerMove && onPointerStart({ ev });
+                        }
+                        else {
+                            ev.preventDefault();
+                            return false;
+                        }
+                    }
+                    onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+                };
+                const pointerEnd = (ev) => {
+                    document.removeEventListener('mousemove', pointerMove, false);
+                    document.removeEventListener('mouseup', pointerEnd, false);
+                    window.removeEventListener('blur', pointerEnd, false);
+                    if (dragging) {
+                        if (toLockPage) {
+                            unlockPage();
+                        }
+                        if (hasCursor) {
+                            restoreCursor();
+                        }
+                        onPointerEnd && onPointerEnd({ ev, currentStyle });
+                    }
+                };
+                document.addEventListener("mousemove", pointerMove);
+                document.addEventListener("mouseup", pointerEnd);
+                window.addEventListener("blur", pointerEnd);
+                e.preventDefault();
+                return false;
+            }, true);
+        }
         registerEvent(el, event, hook, useCapture = false) {
             const wrapper = ((ev) => {
                 if (!this.enabled)
@@ -91,107 +481,32 @@
             el.addEventListener(event, wrapper, useCapture);
             __classPrivateFieldGet(this, _Uii_listeners, "f").push([el, event, wrapper, useCapture]);
         }
-        /**
-         * 禁用uii实例，禁用后的dom不会响应事件
-         */
         disable() {
             this.enabled = false;
         }
-        /**
-         * 启用uii实例
-         */
         enable() {
             this.enabled = true;
         }
-        /**
-         * 获取指定名称的选项值
-         * @param name
-         * @returns
-         */
+        getOptions() {
+            return this.opts;
+        }
         getOption(name) {
-            return name ? this.opts[name] : this.opts;
+            return this.opts[name];
         }
-        /**
-         * 一次设置多个选项值。触发`onOptionChanged`
-         * @param options
-         */
         setOptions(options) {
-            func_js.assign(this.opts, options);
+            object.assign(this.opts, options);
             this.onOptionChanged(this.opts);
         }
-        /**
-         * 设置指定name的选项值。触发`onOptionChanged`
-         * @param name
-         * @param value
-         */
         setOption(name, value) {
             this.opts[name] = value;
             this.onOptionChanged(this.opts);
         }
-        /**
-         * @internal
-         */
-        onOptionChanged(opts) {
-        }
+        onOptionChanged(opts) { }
     }
     _Uii_listeners = new WeakMap();
 
-    /* eslint-disable max-len */
-    /**
-     * 获取child相对于parent的offset信息。含border宽度
-     * @returns
-     */
-    function getOffset(child, parent) {
-        const rs = { x: 0, y: 0 };
-        let op = child.offsetParent;
-        while (op && parent && op !== parent) {
-            const style = window.getComputedStyle(op);
-            rs.x += op.offsetLeft + parseFloat(style.borderLeftWidth);
-            rs.y += op.offsetTop + parseFloat(style.borderTopWidth);
-            op = op.offsetParent;
-        }
-        rs.x += child.offsetLeft;
-        rs.y += child.offsetTop;
-        return rs;
-    }
-    /**
-     * 边缘检测最小内部边距
-     */
-    const EDGE_THRESHOLD = 5;
-    const DRAGGING_RULE = "body * { pointer-events: none; }";
-    let lockSheet;
-    function lockPage() {
-        lockSheet = getFirstSS();
-        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
-    }
-    function unlockPage() {
-        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
-    }
-    function getFirstSS() {
-        if (document.styleSheets.length < 1) {
-            document.head.appendChild(document.createElement('style'));
-        }
-        const sheet = func_js.find(document.styleSheets, ss => !ss.href);
-        if (!sheet) {
-            document.head.appendChild(document.createElement('style'));
-        }
-        return sheet || func_js.find(document.styleSheets, ss => !ss.href);
-    }
-    let cursor = { html: '', body: '' };
-    function saveCursor() {
-        cursor.body = document.body.style.cursor;
-        cursor.html = document.documentElement.style.cursor;
-    }
-    function setCursor(cursor) {
-        document.body.style.cursor = document.documentElement.style.cursor = cursor;
-    }
-    function restoreCursor() {
-        document.body.style.cursor = cursor.body;
-        document.documentElement.style.cursor = cursor.html;
-    }
-
     var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
-    const THRESHOLD$3 = 1;
+    const THRESHOLD$4 = 1;
     const CLASS_SPLITTABLE = "uii-splittable";
     const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
     const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
@@ -205,20 +520,9 @@
         }
         return rs;
     }
-    /**
-     * 用于表示一个或多个分割器的定义
-     * > 可用CSS接口
-     * - .uii-splittable
-     * - .uii-splittable-handle
-     * - .uii-splittable-handle-ghost
-     * - .uii-splittable-handle-active
-     * - .uii-splittable-v
-     * - .uii-splittable-h
-     * @public
-     */
     class Splittable extends Uii {
         constructor(container, opts) {
-            super(container, func_js.assign({
+            super(container, object.assign({
                 handleSize: 10,
                 minSize: 0,
                 sticky: false,
@@ -226,65 +530,65 @@
                 ghost: false
             }, opts));
             _Splittable_instances.add(this);
-            const con = this.ele[0];
-            //detect container position
-            const pos = window.getComputedStyle(con).position;
-            if (pos === "static") {
-                con.style.position = "relative";
-            }
-            con.classList.toggle(CLASS_SPLITTABLE, true);
-            const handleDoms = con.querySelectorAll(this.opts.handle);
-            const children = func_js.reject(con.children, c => {
-                if (func_js.includes(handleDoms, c))
-                    return true;
-                return false;
-            });
-            const dir = __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_checkDirection).call(this, con);
-            con.classList.toggle(dir === 'v' ? CLASS_SPLITTABLE_V : CLASS_SPLITTABLE_H, true);
-            const minSizeAry = func_js.map(children, (c, i) => {
-                if (func_js.isArray(this.opts.minSize)) {
-                    return this.opts.minSize[i] || 0;
-                }
-                else {
-                    return this.opts.minSize;
-                }
-            });
-            const stickyAry = func_js.map(children, (c, i) => {
-                if (func_js.isArray(this.opts.sticky)) {
-                    return this.opts.sticky[i] || false;
-                }
-                else {
-                    return this.opts.sticky;
-                }
-            });
-            if (func_js.isEmpty(handleDoms)) {
-                const len = children.length - 1;
-                for (let i = 0; i < len; i++) {
-                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, children[i], children[i + 1]);
-                }
-            }
-            else {
-                func_js.each(handleDoms, (h, i) => {
-                    const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
-                    let dom1, dom2;
-                    if (isRoot) {
-                        dom1 = h.previousElementSibling;
-                        dom2 = h.nextElementSibling;
+            collection.each(this.ele, con => {
+                const pos = window.getComputedStyle(con).position;
+                if (pos === "static") {
+                    con.style.position = "relative";
+                }
+                con.classList.toggle(CLASS_SPLITTABLE, true);
+                const handleDoms = con.querySelectorAll(this.opts.handle);
+                const children = collection.reject(con.children, c => {
+                    if (collection.includes(handleDoms, c))
+                        return true;
+                    return false;
+                });
+                const dir = __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_checkDirection).call(this, con);
+                con.classList.toggle(dir === 'v' ? CLASS_SPLITTABLE_V : CLASS_SPLITTABLE_H, true);
+                const minSizeAry = collection.map(children, (c, i) => {
+                    if (is.isArray(this.opts.minSize)) {
+                        return this.opts.minSize[i] || 0;
                     }
                     else {
-                        dom2 = getRootEl(h, con);
-                        dom1 = dom2.previousElementSibling;
+                        return this.opts.minSize;
                     }
-                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
                 });
-            }
+                const stickyAry = collection.map(children, (c, i) => {
+                    if (is.isArray(this.opts.sticky)) {
+                        return this.opts.sticky[i] || false;
+                    }
+                    else {
+                        return this.opts.sticky;
+                    }
+                });
+                if (is.isEmpty(handleDoms)) {
+                    const len = children.length - 1;
+                    for (let i = 0; i < len; i++) {
+                        __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, children[i], children[i + 1]);
+                    }
+                }
+                else {
+                    collection.each(handleDoms, (h, i) => {
+                        const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
+                        let dom1, dom2;
+                        if (isRoot) {
+                            dom1 = h.previousElementSibling;
+                            dom2 = h.nextElementSibling;
+                        }
+                        else {
+                            dom2 = getRootEl(h, con);
+                            dom1 = dom2.previousElementSibling;
+                        }
+                        __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
+                    });
+                }
+            });
         }
     }
     _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
         let dir = 'h';
         const child = container.children[0];
         let lastY = child.offsetTop;
-        func_js.each(container.children, c => {
+        collection.each(container.children, c => {
             if (c.offsetTop != lastY) {
                 dir = 'v';
                 return false;
@@ -324,34 +628,29 @@
         const oneSideMode = opts.oneSideMode;
         const updateStart = !oneSideMode || oneSideMode === 'start';
         const updateEnd = !oneSideMode || oneSideMode === 'end';
-        handle.onmousedown = function (e) {
-            // 1. 获取原始高度/宽度;设置宽度/高度
+        this.addPointerDown(handle, ({ currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
             let originSize = 0;
             let originSize1 = 0;
-            const originPosX = e.clientX;
-            const originPosY = e.clientY;
             let splitterSize = 1;
-            let blockSize = 0; // 分割区size
+            let blockSize = 0;
             switch (dir) {
                 case 'v':
                     originSize = dom1.offsetHeight;
                     originSize1 = dom2.offsetHeight;
-                    splitterSize = handle.offsetHeight;
+                    splitterSize = currentTarget.offsetHeight;
                     break;
                 case 'h':
                     originSize = dom1.offsetWidth;
                     originSize1 = dom2.offsetWidth;
-                    splitterSize = handle.offsetWidth;
+                    splitterSize = currentTarget.offsetWidth;
                     break;
             }
             blockSize = splitterSize + originSize + originSize1;
             const dom1Style = dom1.style;
             const dom2Style = dom2.style;
-            //ghost
             const ghost = opts.ghost;
             const ghostClass = opts.ghostClass;
             let ghostNode = null;
-            // 初始化sticked位置
             let sticked = 'none';
             if (originSize < minSize1 / 2) {
                 sticked = 'start';
@@ -359,43 +658,31 @@
             else if (blockSize - originSize - splitterSize < minSize2 / 2) {
                 sticked = 'end';
             }
-            let dragging = false;
-            saveCursor();
             let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
             let ds1, anotherSize;
-            const dragListener = (ev) => {
-                var _a;
-                const offsetx = ev.clientX - originPosX;
-                const offsety = ev.clientY - originPosY;
-                if (!dragging) {
-                    if (Math.abs(offsetx) > THRESHOLD$3 || Math.abs(offsety) > THRESHOLD$3) {
-                        dragging = true;
-                        handle === null || handle === void 0 ? void 0 : handle.classList.add(CLASS_SPLITTABLE_HANDLE_ACTIVE);
-                        if (ghost) {
-                            ghostNode = handle.cloneNode(true);
-                            ghostNode.style.opacity = '0.3';
-                            ghostNode.style.pointerEvents = 'none';
-                            ghostNode.classList.add(CLASS_SPLITTABLE_HANDLE_GHOST);
-                            if (ghostNode) {
-                                if (ghostClass) {
-                                    ghostNode.className =
-                                        ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
-                                }
-                                (_a = handle === null || handle === void 0 ? void 0 : handle.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
-                                func_js.call(onClone, ghostNode, e);
-                            }
+            onPointerStart(function (args) {
+                const { ev } = args;
+                currentTarget.classList.add(CLASS_SPLITTABLE_HANDLE_ACTIVE);
+                if (ghost) {
+                    ghostNode = currentTarget.cloneNode(true);
+                    ghostNode.style.opacity = '0.3';
+                    ghostNode.style.pointerEvents = 'none';
+                    ghostNode.classList.add(CLASS_SPLITTABLE_HANDLE_GHOST);
+                    if (ghostNode) {
+                        if (ghostClass) {
+                            ghostNode.className =
+                                ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
                         }
-                        lockPage();
-                        setCursor((handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '');
-                        func_js.call(onStart, originSize, originSize1);
-                    }
-                    else {
-                        ev.preventDefault();
-                        return false;
+                        currentTarget.parentNode.appendChild(ghostNode);
+                        onClone && onClone({ clone: ghostNode }, ev);
                     }
                 }
+                onStart && onStart({ size1: originSize, size2: originSize1 }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev, offX, offY, currentStyle } = args;
                 let doSticky = false;
-                ds1 = dir === 'v' ? originSize + offsety : originSize + offsetx;
+                ds1 = dir === 'v' ? originSize + offY : originSize + offX;
                 if (ds1 < minSize1 / 2 && sticky1 && minSize1 > 0) {
                     if (sticked == 'none') {
                         doSticky = true;
@@ -406,7 +693,6 @@
                 else if (ds1 < minSize1) {
                     ds1 = minSize1;
                     if (sticked == 'start' && sticky1) {
-                        // 重置状态
                         doSticky = true;
                         sticked = 'none';
                     }
@@ -422,7 +708,6 @@
                 else if (blockSize - ds1 - splitterSize < minSize2) {
                     ds1 = blockSize - minSize2 - splitterSize;
                     if (sticked == 'end' && sticky2) {
-                        // 重置状态
                         doSticky = true;
                         sticked = 'none';
                     }
@@ -434,6 +719,7 @@
                     }
                     else {
                         ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
+                        console.log(ghostNode.style.left);
                     }
                 }
                 else {
@@ -445,395 +731,499 @@
                         dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
                     }
                     if (doSticky) {
-                        func_js.call(onSticky, ds1, anotherSize, sticked);
+                        onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
                     }
-                    //update handle
                     if (dir === 'v') {
-                        handle.style.top = dom2.offsetTop - handleSize / 2 + 'px';
+                        currentStyle.top = dom2.offsetTop - handleSize / 2 + 'px';
                     }
                     else {
-                        handle.style.left = dom2.offsetLeft - handleSize / 2 + 'px';
+                        currentStyle.left = dom2.offsetLeft - handleSize / 2 + 'px';
                     }
                 }
-                func_js.call(onSplit, ds1, anotherSize);
-                ev.preventDefault();
-                return false;
-            };
-            const dragEndListener = (ev) => {
+                onSplit && onSplit({ size1: ds1, size2: anotherSize }, ev);
+            });
+            onPointerEnd((args) => {
                 var _a, _b;
-                document.removeEventListener('mousemove', dragListener, false);
-                document.removeEventListener('mouseup', dragEndListener, false);
-                window.removeEventListener('blur', dragEndListener, false);
-                if (dragging) {
-                    switch (dir) {
-                        case 'v':
-                            originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetHeight) || -1;
-                            originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetHeight) || -1;
-                            break;
-                        case 'h':
-                            originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetWidth) || -1;
-                            originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetWidth) || -1;
-                            break;
+                const { ev, currentStyle } = args;
+                switch (dir) {
+                    case 'v':
+                        originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetHeight) || -1;
+                        originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetHeight) || -1;
+                        break;
+                    case 'h':
+                        originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetWidth) || -1;
+                        originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetWidth) || -1;
+                        break;
+                }
+                handle === null || handle === void 0 ? void 0 : handle.classList.remove(CLASS_SPLITTABLE_HANDLE_ACTIVE);
+                if (ghostNode) {
+                    const updateProp = dir === 'v' ? 'height' : 'width';
+                    if (updateStart) {
+                        dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
                     }
-                    handle === null || handle === void 0 ? void 0 : handle.classList.remove(CLASS_SPLITTABLE_HANDLE_ACTIVE);
-                    if (ghostNode) {
-                        const updateProp = dir === 'v' ? 'height' : 'width';
-                        if (updateStart) {
-                            dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
-                        }
-                        if (updateEnd) {
-                            dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
-                        }
-                        //update handle
-                        if (dir === 'v') {
-                            handle.style.top = startPos + ds1 - handleSize / 2 + 'px';
-                        }
-                        else {
-                            handle.style.left = startPos + ds1 - handleSize / 2 + 'px';
-                        }
-                        ((_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = ghostNode.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
+                    if (updateEnd) {
+                        dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
                     }
-                    unlockPage();
-                    restoreCursor();
-                    func_js.call(onEnd, originSize, originSize1);
+                    if (dir === 'v') {
+                        currentStyle.top = startPos + ds1 - handleSize / 2 + 'px';
+                    }
+                    else {
+                        currentStyle.left = startPos + ds1 - handleSize / 2 + 'px';
+                    }
+                    ((_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = ghostNode.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
                 }
-            };
-            document.addEventListener('mousemove', dragListener, false);
-            document.addEventListener('mouseup', dragEndListener, false);
-            window.addEventListener('blur', dragEndListener, false);
-            e.preventDefault();
-            return false;
-        };
+                onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$4,
+            lockPage: true
+        });
     };
-    /**
-     * Add one or more splittors into the container
-     * @param container css selector or html element
-     * @param opts SplittableOptions
-     * @returns
-     */
     function newSplittable(container, opts) {
         return new Splittable(container, opts);
     }
 
-    /* eslint-disable max-len */
-    const THRESHOLD$2 = 2;
+    const THRESHOLD$3 = 2;
     const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
     const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
     const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
-    /**
-     * 用于表示一个或多个可改变尺寸元素的定义
-     * > 可用CSS接口
-     * - .uii-resizable-handle
-     * - .uii-resizable-handle-[n/s/e/w/ne/nw/se/sw]
-     * - .uii-resizable-handle-active
-     * @public
-     */
+    const EXP_DIR = new RegExp(CLASS_RESIZABLE_HANDLE_DIR + "(?<dir>[nesw]+)");
     class Resizable extends Uii {
         constructor(els, opts) {
-            super(els, func_js.assign({
+            super(els, object.assign({
                 handleSize: 8,
                 minSize: 50,
-                dir: ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'],
+                dir: ["n", "s", "e", "w", "ne", "nw", "se", "sw"],
                 ghost: false,
-                offset: 0
+                offset: 0,
             }, opts));
-            func_js.each(this.ele, (el) => {
-                initHandle$1(el, this.opts);
+            collection.each(this.ele, (el) => {
+                this.initHandle(el);
             });
         }
-    }
-    function bindHandle$1(handle, dir, panel, opts) {
-        const onStart = opts.onStart;
-        const onResize = opts.onResize;
-        const onEnd = opts.onEnd;
-        const onClone = opts.onClone;
-        handle.onmousedown = function (e) {
-            // 获取panel当前信息
-            const originW = panel.offsetWidth;
-            const originH = panel.offsetHeight;
-            const originX = panel.offsetLeft;
-            const originY = panel.offsetTop;
-            let changeW = false;
-            let changeH = false;
-            let changeX = false;
-            let changeY = false;
-            switch (dir) {
-                case 's':
-                    changeH = true;
-                    break;
-                case 'e':
-                    changeW = true;
-                    break;
-                case 'n':
-                    changeY = true;
-                    changeH = true;
-                    break;
-                case 'w':
-                    changeX = true;
-                    changeW = true;
-                    break;
-                case 'se':
-                    changeW = true;
-                    changeH = true;
-                    break;
-                case 'sw':
-                    changeX = true;
-                    changeW = true;
-                    changeH = true;
-                    break;
-                case 'ne':
-                    changeY = true;
-                    changeW = true;
-                    changeH = true;
-                    break;
-                case 'nw':
-                    changeX = true;
-                    changeY = true;
-                    changeW = true;
-                    changeH = true;
-                    break;
-            }
-            const originPosX = e.clientX;
-            const originPosY = e.clientY;
-            // boundary
-            let minWidth;
-            let minHeight;
-            let maxWidth;
-            let maxHeight;
-            if (func_js.isArray(opts.minSize)) {
-                minWidth = opts.minSize[0];
-                minHeight = opts.minSize[1];
-            }
-            else if (func_js.isNumber(opts.minSize)) {
-                minWidth = opts.minSize;
-                minHeight = opts.minSize;
-            }
-            if (func_js.isArray(opts.maxSize)) {
-                maxWidth = opts.maxSize[0];
-                maxHeight = opts.maxSize[1];
-            }
-            else if (func_js.isNumber(opts.maxSize)) {
-                maxWidth = opts.maxSize;
-                maxHeight = opts.maxSize;
-            }
-            const minX = maxWidth ? originX - maxWidth + originW : null;
-            const minY = maxHeight ? originY - maxHeight + originH : null;
-            const maxX = minWidth ? originX + originW - minWidth : null;
-            const maxY = minHeight ? originY + originH - minHeight : null;
-            //ghost
-            const ghost = opts.ghost;
-            const ghostClass = opts.ghostClass;
-            let ghostNode = null;
-            //aspectRatio
-            const aspectRatio = opts.aspectRatio;
-            const panelStyle = panel.style;
-            let style = panelStyle;
-            let currentW = originW;
-            let currentH = originH;
-            let dragging = false;
-            saveCursor();
-            const dragListener = (ev) => {
-                var _a;
-                const offsetx = ev.clientX - originPosX;
-                const offsety = ev.clientY - originPosY;
-                if (!dragging) {
-                    if (Math.abs(offsetx) > THRESHOLD$2 || Math.abs(offsety) > THRESHOLD$2) {
-                        dragging = true;
-                        handle.classList.add(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                        if (ghost) {
-                            if (func_js.isFunction(ghost)) {
-                                ghostNode = ghost();
-                            }
-                            else {
-                                ghostNode = panel.cloneNode(true);
-                                ghostNode.style.opacity = '0.3';
-                                ghostNode.style.pointerEvents = 'none';
-                            }
-                            if (ghostNode) {
-                                if (ghostClass) {
-                                    ghostNode.className =
-                                        ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
-                                }
-                                (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
-                                func_js.call(onClone, ghostNode, e);
+        bindHandle(handle, dir, panel, opts) {
+            const onStart = opts.onStart;
+            const onResize = opts.onResize;
+            const onEnd = opts.onEnd;
+            const onClone = opts.onClone;
+            const uiik = this;
+            this.addPointerDown(handle, ({ ev, onPointerStart, onPointerMove, onPointerEnd }) => {
+                const onPointerDown = opts.onPointerDown;
+                if (onPointerDown && onPointerDown(ev) === false)
+                    return;
+                let matrixInfo = getMatrixInfo(panel);
+                const offset = getRectInContainer(panel, panel.parentElement);
+                const offsetParentRect = panel.parentElement.getBoundingClientRect();
+                const offsetParentCStyle = window.getComputedStyle(panel.parentElement);
+                const panelCStyle = window.getComputedStyle(panel);
+                const originW = parseFloat(panelCStyle.width);
+                const originH = parseFloat(panelCStyle.height);
+                const originX = offset.x;
+                const originY = offset.y;
+                let changeW = false;
+                let changeH = false;
+                let changeX = false;
+                let changeY = false;
+                let toTransformOrigin = "";
+                switch (dir) {
+                    case "s":
+                        changeH = true;
+                        break;
+                    case "e":
+                        changeW = true;
+                        break;
+                    case "se":
+                        changeW = true;
+                        changeH = true;
+                        break;
+                    case "n":
+                        changeX = true;
+                        changeY = true;
+                        changeH = true;
+                        toTransformOrigin = "0 0";
+                        break;
+                    case "w":
+                        changeX = true;
+                        changeY = true;
+                        changeW = true;
+                        toTransformOrigin = "0 0";
+                        break;
+                    case "sw":
+                    case "ne":
+                    case "nw":
+                        changeX = true;
+                        changeY = true;
+                        changeW = true;
+                        changeH = true;
+                        toTransformOrigin = "0 0";
+                        break;
+                }
+                let minWidth;
+                let minHeight;
+                let maxWidth;
+                let maxHeight;
+                if (is.isArray(opts.minSize)) {
+                    minWidth = opts.minSize[0];
+                    minHeight = opts.minSize[1];
+                }
+                else if (is.isNumber(opts.minSize)) {
+                    minWidth = opts.minSize;
+                    minHeight = opts.minSize;
+                }
+                if (is.isArray(opts.maxSize)) {
+                    maxWidth = opts.maxSize[0];
+                    maxHeight = opts.maxSize[1];
+                }
+                else if (is.isNumber(opts.maxSize)) {
+                    maxWidth = opts.maxSize;
+                    maxHeight = opts.maxSize;
+                }
+                const ghost = opts.ghost;
+                const ghostClass = opts.ghostClass;
+                let ghostNode = null;
+                const aspectRatio = opts.aspectRatio;
+                const panelStyle = panel.style;
+                let style = panelStyle;
+                let currentW = originW;
+                let currentH = originH;
+                let transformer;
+                let lastX = 0, lastY = 0;
+                let originalTransformOrigin = "";
+                let originVertex;
+                let vertexBeforeTransform;
+                let currentVertex;
+                let refPoint;
+                let k1;
+                onPointerStart(function (args) {
+                    var _a;
+                    const { ev } = args;
+                    handle.classList.add(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                    if (ghost) {
+                        if (is.isFunction(ghost)) {
+                            ghostNode = ghost(panel);
+                        }
+                        else {
+                            ghostNode = panel.cloneNode(true);
+                            ghostNode.style.opacity = "0.3";
+                            ghostNode.style.pointerEvents = "none";
+                        }
+                        if (ghostNode) {
+                            if (ghostClass) {
+                                ghostNode.className =
+                                    ghostNode.className.replace(ghostClass, "") +
+                                        " " +
+                                        ghostClass;
                             }
-                            style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
+                            (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
+                            transformer = wrapper(ghostNode);
+                            onClone && onClone({ clone: ghostNode }, ev);
                         }
-                        lockPage();
-                        setCursor(handle.dataset.cursor || '');
-                        func_js.call(onStart, originW, originH);
+                        style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
                     }
                     else {
-                        ev.preventDefault();
-                        return false;
+                        transformer = wrapper(panel);
                     }
-                }
-                let w = originW;
-                let h = originH;
-                let y = originY;
-                let x = originX;
-                if (changeW) {
-                    w = originW + offsetx * (changeX ? -1 : 1);
-                    if (minWidth && w < minWidth)
-                        w = minWidth;
-                    if (maxWidth && w > maxWidth)
-                        w = maxWidth;
-                }
-                if (changeH) {
-                    h = originH + offsety * (changeY ? -1 : 1);
-                    if (minHeight && h < minHeight)
-                        h = minHeight;
-                    if (maxHeight && h > maxHeight)
-                        h = maxHeight;
-                }
-                if (changeY) {
-                    y = originY + offsety;
-                    if (minY && y < minY)
-                        y = minY;
-                    if (maxY && y > maxY)
-                        y = maxY;
-                }
-                if (changeX) {
-                    x = originX + offsetx;
-                    if (minX && x < minX)
-                        x = minX;
-                    if (maxX && x > maxX)
-                        x = maxX;
-                }
-                if (aspectRatio) {
-                    if (changeW) {
-                        style.width = w + 'px';
-                        style.height = w / aspectRatio + 'px';
-                    }
-                    if (changeH && dir !== 'sw') {
-                        if (dir === 'nw') {
-                            y = originY - w / aspectRatio + originH;
-                        }
-                        else {
-                            style.width = h * aspectRatio + 'px';
-                            style.height = h + 'px';
-                        }
+                    const { x, y, sx, sy } = getCenterXy(panel);
+                    let centerX = x, centerY = y;
+                    const deg = matrixInfo.angle * ONE_ANG;
+                    originVertex = [
+                        { x: 0, y: 0 },
+                        { x: originW, y: 0 },
+                        { x: 0, y: originH },
+                        { x: originW, y: originH },
+                    ];
+                    currentVertex = vertexBeforeTransform = collection.map(originVertex, ({ x, y }) => {
+                        const nx = (x - centerX + sx) * Math.cos(deg) -
+                            (y - centerY + sy) * Math.sin(deg);
+                        const ny = (x - centerX + sx) * Math.sin(deg) +
+                            (y - centerY + sy) * Math.cos(deg);
+                        return { x: centerX + nx, y: centerY + ny };
+                    });
+                    switch (dir) {
+                        case "s":
+                        case "e":
+                        case "se":
+                            refPoint = currentVertex[0];
+                            break;
+                        case "n":
+                        case "w":
+                        case "nw":
+                            refPoint = currentVertex[3];
+                            break;
+                        case "sw":
+                            refPoint = currentVertex[1];
+                            break;
+                        case "ne":
+                            refPoint = currentVertex[2];
+                            break;
                     }
-                }
-                else {
-                    if (changeW) {
-                        style.width = w + 'px';
+                    k1 =
+                        (currentVertex[1].y - refPoint.y) /
+                            (currentVertex[1].x - refPoint.x);
+                    style.transition = "none";
+                    originalTransformOrigin = style.transformOrigin;
+                    if (toTransformOrigin) {
+                        style.transformOrigin = toTransformOrigin;
                     }
-                    if (changeH) {
-                        style.height = h + 'px';
+                    else {
+                        style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.y}px`;
                     }
-                }
-                if (changeY) {
-                    style.top = y + 'px';
-                }
-                if (changeX) {
-                    style.left = x + 'px';
-                }
-                currentW = w;
-                currentH = h;
-                func_js.call(onResize, w, h);
-                ev.preventDefault();
-                return false;
-            };
-            const dragEndListener = (ev) => {
-                var _a, _b;
-                document.removeEventListener('mousemove', dragListener, false);
-                document.removeEventListener('mouseup', dragEndListener, false);
-                window.removeEventListener('blur', dragEndListener, false);
-                if (ghost && ghostNode) {
-                    ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
-                    panelStyle.left = ghostNode.style.left;
-                    panelStyle.top = ghostNode.style.top;
-                    panelStyle.width = ghostNode.style.width;
-                    panelStyle.height = ghostNode.style.height;
-                }
-                if (dragging) {
-                    handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                    unlockPage();
-                    restoreCursor();
-                    func_js.call(onEnd, currentW, currentH);
-                }
-            };
-            document.addEventListener('mousemove', dragListener, false);
-            document.addEventListener('mouseup', dragEndListener, false);
-            window.addEventListener('blur', dragEndListener, false);
-            e.preventDefault();
-            return false;
-        };
-    }
-    function initHandle$1(panel, opts) {
-        // create handles
-        const handleSize = opts.handleSize;
-        const offset = opts.offset || 0;
-        func_js.each(opts.dir || ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'], (dir) => {
-            const handle = document.createElement('div');
-            handle.classList.add(CLASS_RESIZABLE_HANDLE, CLASS_RESIZABLE_HANDLE_DIR + dir);
-            handle.setAttribute('name', 'handle');
-            let css = '';
-            switch (dir) {
-                case 'n':
-                    css = `left:0px;top:${-offset}px;width:100%;height:${handleSize}px;`;
-                    break;
-                case 's':
-                    css = `left:0px;bottom:${-offset}px;width:100%;height:${handleSize}px;`;
-                    break;
-                case 'w':
-                    css = `top:0px;left:${-offset}px;width:${handleSize}px;height:100%;`;
-                    break;
-                case 'e':
-                    css = `top:0px;right:${-offset}px;width:${handleSize}px;height:100%;`;
-                    break;
-                default:
-                    css = `width:${handleSize}px;height:${handleSize}px;z-index:9;`;
+                    onStart && onStart.call(uiik, { w: originW, h: originH }, ev);
+                });
+                onPointerMove((args) => {
+                    const { ev } = args;
+                    const currentXy = getPointInContainer(ev, panel.parentElement, offsetParentRect, offsetParentCStyle);
+                    let newX = currentXy.x;
+                    let newY = currentXy.y;
+                    let angle = Math.atan2(newY - refPoint.y, newX - refPoint.x) * ONE_RAD -
+                        matrixInfo.angle;
+                    let hyLen = Math.sqrt((newX - refPoint.x) * (newX - refPoint.x) +
+                        (newY - refPoint.y) * (newY - refPoint.y));
+                    let pl1 = Math.abs(k1 === Infinity
+                        ? newY - refPoint.y
+                        : hyLen * Math.cos(angle * ONE_ANG));
+                    let pl2 = Math.sqrt(hyLen * hyLen - pl1 * pl1);
+                    let w = originW;
+                    let h = originH;
+                    let y = originY;
+                    let x = originX;
+                    let angl = 0;
                     switch (dir) {
-                        case 'ne':
-                            css += `top:${-offset}px;right:${-offset}px;`;
+                        case "s":
+                            h = pl2;
+                            break;
+                        case "e":
+                            w = pl1;
+                            break;
+                        case "se":
+                            w = pl1;
+                            h = pl2;
+                            break;
+                        case "n":
+                            h = pl2;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
+                            let plh;
+                            if (angl === 90) {
+                                h = newY - currentVertex[2].y;
+                                x = currentVertex[2].x;
+                                y = newY;
+                            }
+                            else if (currentVertex[2].y > currentVertex[0].y) {
+                                plh = h * Math.cos(angl * ONE_ANG);
+                                x = currentVertex[2].x + plh;
+                                y = currentVertex[2].y - Math.sqrt(h * h - plh * plh);
+                            }
+                            else {
+                                plh = h * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[2].x - plh;
+                                y = currentVertex[2].y + Math.sqrt(h * h - plh * plh);
+                            }
+                            break;
+                        case "w":
+                            w = pl1;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
+                            let plw;
+                            if (angl === 0) {
+                                w = newX - currentVertex[1].x;
+                                x = newX;
+                                y = currentVertex[1].y;
+                            }
+                            else if (currentVertex[1].y > currentVertex[0].y) {
+                                plw = w * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[1].x - plw;
+                                y = currentVertex[1].y - Math.sqrt(w * w - plw * plw);
+                            }
+                            else {
+                                plw = w * Math.cos(angl * ONE_ANG);
+                                x = currentVertex[1].x + plw;
+                                y = currentVertex[1].y + Math.sqrt(w * w - plw * plw);
+                            }
                             break;
-                        case 'nw':
-                            css += `top:${-offset}px;left:${-offset}px;`;
+                        case "nw":
+                            w = pl1;
+                            h = pl2;
+                            x = newX;
+                            y = newY;
+                            if (matrixInfo.angle === 180) {
+                                w = newX - currentVertex[3].x;
+                                h = newY - currentVertex[3].y;
+                            }
+                            break;
+                        case "sw":
+                            w = pl1;
+                            h = pl2;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
+                            let plw1;
+                            if (angl === 0) {
+                                x = newX;
+                                y = currentVertex[0].y;
+                            }
+                            else if (currentVertex[1].y > currentVertex[0].y) {
+                                plw1 = w * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[1].x - plw1;
+                                y = currentVertex[1].y - Math.sqrt(w * w - plw1 * plw1);
+                            }
+                            else {
+                                plw1 = w * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[1].x - plw1;
+                                y = currentVertex[1].y + Math.sqrt(w * w - plw1 * plw1);
+                            }
                             break;
-                        case 'se':
-                            css += `bottom:${-offset}px;right:${-offset}px;`;
+                        case "ne":
+                            w = pl1;
+                            h = pl2;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
+                            let plne;
+                            if (angl === 0) {
+                                x = newX;
+                                y = currentVertex[0].y;
+                            }
+                            else if (currentVertex[1].x > currentVertex[0].x) {
+                                plne = h * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[2].x - plne;
+                                y = currentVertex[2].y - Math.sqrt(h * h - plne * plne);
+                            }
+                            else {
+                                plne = h * Math.cos(angl * ONE_ANG);
+                                x = currentVertex[2].x + plne;
+                                y = currentVertex[2].y + Math.sqrt(h * h - plne * plne);
+                            }
                             break;
-                        case 'sw':
-                            css += `bottom:${-offset}px;left:${-offset}px;`;
                     }
+                    if (changeW) {
+                        if (minWidth && w < minWidth)
+                            w = minWidth;
+                        if (maxWidth && w > maxWidth)
+                            w = maxWidth;
+                    }
+                    if (changeH) {
+                        if (minHeight && h < minHeight)
+                            h = minHeight;
+                        if (maxHeight && h > maxHeight)
+                            h = maxHeight;
+                    }
+                    if (aspectRatio) {
+                        if (changeW) {
+                            style.width = w + "px";
+                            style.height = w / aspectRatio + "px";
+                        }
+                        if (changeH && dir !== "sw") {
+                            if (dir === "nw") {
+                                y = originY - w / aspectRatio + originH;
+                            }
+                            else {
+                                style.width = h * aspectRatio + "px";
+                                style.height = h + "px";
+                            }
+                        }
+                    }
+                    else {
+                        if (changeW) {
+                            style.width = w + "px";
+                        }
+                        if (changeH) {
+                            style.height = h + "px";
+                        }
+                    }
+                    if (changeY) {
+                        transformer.moveToY(y);
+                    }
+                    if (changeX) {
+                        transformer.moveToX(x);
+                    }
+                    lastX = x;
+                    lastY = y;
+                    currentW = w;
+                    currentH = h;
+                    onResize &&
+                        onResize.call(uiik, { w, h, ow: w - originW, oh: h - originH }, ev);
+                });
+                onPointerEnd((args) => {
+                    var _a, _b;
+                    const { ev } = args;
+                    if (ghost && ghostNode) {
+                        ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
+                            ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
+                        panelStyle.left = ghostNode.style.left;
+                        panelStyle.top = ghostNode.style.top;
+                        moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
+                        panelStyle.width = ghostNode.style.width;
+                        panelStyle.height = ghostNode.style.height;
+                    }
+                    panel.style.transformOrigin = originalTransformOrigin;
+                    const { x, y, sx, sy } = getCenterXy(panel);
+                    let centerX = x, centerY = y;
+                    const deg = matrixInfo.angle * ONE_ANG;
+                    const currentVertex = collection.map(originVertex, ({ x, y }) => {
+                        const nx = (x - centerX + sx) * Math.cos(deg) -
+                            (y - centerY + sy) * Math.sin(deg);
+                        const ny = (x - centerX + sx) * Math.sin(deg) +
+                            (y - centerY + sy) * Math.cos(deg);
+                        return { x: centerX + nx, y: centerY + ny };
+                    });
+                    if (changeX || changeY) {
+                        transformer.moveTo(transformer.x - (currentVertex[0].x - lastX), transformer.y - (currentVertex[0].y - lastY));
+                    }
+                    else {
+                        transformer.moveTo(transformer.x - (currentVertex[0].x - vertexBeforeTransform[0].x), transformer.y - (currentVertex[0].y - vertexBeforeTransform[0].y));
+                    }
+                    handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                    onEnd && onEnd.call(uiik, { w: currentW, h: currentH }, ev);
+                });
+            }, {
+                threshold: THRESHOLD$3,
+                lockPage: true,
+            });
+        }
+        initHandle(panel) {
+            const opts = this.opts;
+            let handleStr = opts.handle;
+            let handles;
+            if (is.isString(handleStr)) {
+                handles = document.querySelectorAll(handleStr);
             }
-            bindHandle$1(handle, dir, panel, opts);
-            handle.style.cssText = `position: absolute;cursor: ${dir}-resize;` + css;
-            handle.dataset.cursor = `${dir}-resize`;
-            panel.appendChild(handle);
-        });
+            else if (is.isFunction(handleStr)) {
+                handles = handleStr(panel);
+            }
+            if (!handles) {
+                console.error('Can not find handles with "' + panel.outerHTML + '"');
+                return;
+            }
+            handles = is.isArrayLike(handles) ? handles : [handles];
+            collection.each(handles, (h) => {
+                const className = h.getAttribute("class") || "";
+                const matchRs = className.match(EXP_DIR);
+                let dir = "se";
+                if (matchRs) {
+                    dir = matchRs.groups.dir;
+                }
+                h.classList.add(CLASS_RESIZABLE_HANDLE);
+                this.bindHandle(h, dir, panel, opts);
+                h.style.cursor = `${dir}-resize`;
+                h.dataset.cursor = `${dir}-resize`;
+                h.setAttribute("name", "handle");
+            });
+        }
     }
-    /**
-     * Make els resizable
-     * @param els selector string / html element
-     * @param opts
-     * @returns
-     */
     function newResizable(els, opts) {
         return new Resizable(els, opts);
     }
 
-    var _Draggable_handleMap;
+    var _Draggable_instances, _Draggable_handleMap, _Draggable_container, _Draggable_initStyle;
     const DRAGGER_GROUPS = {};
     const CLASS_DRAGGABLE = "uii-draggable";
     const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
     const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
     const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
-    /**
-     * 用于表示一个或多个可拖动元素的定义
-     * > 可用CSS接口
-     * - .uii-draggable
-     * - .uii-draggable-handle
-     * - .uii-draggable-active
-     * - .uii-draggable-ghost
-     * @public
-     */
     class Draggable extends Uii {
         constructor(els, opts) {
-            super(els, func_js.assign({
-                container: false,
+            super(els, object.assign({
+                containment: false,
+                watch: true,
                 threshold: 0,
                 ghost: false,
                 direction: "",
@@ -842,9 +1232,11 @@
                     tolerance: 10,
                 }
             }, opts));
+            _Draggable_instances.add(this);
             _Draggable_handleMap.set(this, new WeakMap());
+            _Draggable_container.set(this, null);
             if (this.opts.handle) {
-                func_js.each(this.ele, (el) => {
+                collection.each(this.ele, (el) => {
                     const h = el.querySelector(this.opts.handle);
                     if (!h) {
                         console.error('No handle found "' + this.opts.handle + '"');
@@ -854,465 +1246,428 @@
                 });
             }
             this.onOptionChanged(this.opts);
-            //put into group
             if (this.opts.group) {
                 if (!DRAGGER_GROUPS[this.opts.group]) {
                     DRAGGER_GROUPS[this.opts.group] = [];
                 }
                 DRAGGER_GROUPS[this.opts.group].push(...this.ele);
             }
-            func_js.each(this.ele, (el) => {
-                bindEvent(this.registerEvent.bind(this), el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
-                if (func_js.isDefined(this.opts.type))
-                    el.dataset.dropType = this.opts.type;
-                el.classList.toggle(CLASS_DRAGGABLE, true);
-                const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
-                ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
-                if (func_js.isDefined(this.opts.cursor)) {
-                    el.style.cursor = this.opts.cursor.default || 'move';
-                    if (func_js.isDefined(this.opts.cursor.over)) {
-                        el.dataset.cursorOver = this.opts.cursor.over;
-                        el.dataset.cursorActive = this.opts.cursor.active || 'move';
-                    }
+            __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).call(this, this.ele);
+            if (this.opts.containment) {
+                if (is.isBoolean(this.opts.containment)) {
+                    __classPrivateFieldSet(this, _Draggable_container, is.isEmpty(this.ele) ? null : this.ele[0].parentElement, "f");
                 }
-            });
-        }
-        /**
-         * @internal
-         */
-        onOptionChanged(opts) {
-            const droppable = opts.droppable;
-            if (!func_js.isFunction(droppable)) {
-                if (func_js.isUndefined(droppable)) {
-                    opts.droppable = () => { };
+                else if (is.isString(this.opts.containment)) {
+                    __classPrivateFieldSet(this, _Draggable_container, document.querySelector(this.opts.containment), "f");
                 }
-                else if (func_js.isString(droppable)) {
-                    opts.droppable = () => document.querySelectorAll(droppable);
+                else if (is.isElement(this.opts.containment)) {
+                    __classPrivateFieldSet(this, _Draggable_container, this.opts.containment, "f");
                 }
-                else if (func_js.isArrayLike(droppable)) {
-                    opts.droppable = () => droppable;
+            }
+            if (this.opts.watch && this.eleString) {
+                let con;
+                if (is.isString(this.opts.watch)) {
+                    con = document.querySelector(this.opts.watch);
                 }
-                else if (func_js.isElement(droppable)) {
-                    opts.droppable = () => [droppable];
+                else {
+                    con = is.isEmpty(this.ele) ? null : this.ele[0].parentElement;
                 }
+                this.bindEvent(con || document.body, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
             }
-        }
-    }
-    _Draggable_handleMap = new WeakMap();
-    function bindEvent(registerEvent, el, opts, handleMap) {
-        registerEvent(el, "mousedown", (e) => {
-            var _a;
-            // get options
-            let dragDom = e.currentTarget;
-            let t = e.target;
-            if (!t)
-                return;
-            let handle = handleMap.get(dragDom);
-            if (handle && !handle.contains(t)) {
-                return;
-            }
-            const filter = opts.filter;
-            //check filter
-            if (filter) {
-                if (func_js.some(el.querySelectorAll(filter), ele => ele.contains(t)))
-                    return;
-            }
-            const computedStyle = window.getComputedStyle(dragDom);
-            const container = dragDom.offsetParent || document.body;
-            const inContainer = opts.container;
-            const threshold = opts.threshold || 0;
-            const ghost = opts.ghost;
-            const ghostClass = opts.ghostClass;
-            const direction = opts.direction;
-            const onStart = opts.onStart;
-            const onDrag = opts.onDrag;
-            const onEnd = opts.onEnd;
-            const onClone = opts.onClone;
-            const originalZIndex = computedStyle.zIndex;
-            let zIndex = opts.zIndex || originalZIndex;
-            const classes = opts.classes || '';
-            const group = opts.group;
-            if (group) {
-                let i = -1;
-                func_js.each(DRAGGER_GROUPS[group], el => {
-                    const z = parseInt(window.getComputedStyle(el).zIndex) || 0;
-                    if (z > i)
-                        i = z;
-                });
-                zIndex = i + 1;
-            }
-            const scroll = opts.scroll;
-            const scrollSpeed = opts.scrollSpeed || 10;
-            let gridX, gridY;
-            const grid = opts.grid;
-            if (func_js.isArray(grid)) {
-                gridX = grid[0];
-                gridY = grid[1];
-            }
-            else if (func_js.isNumber(grid)) {
-                gridX = gridY = grid;
-            }
-            const snapOn = opts.snap;
-            let snappable;
-            const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
-            const onSnap = opts.onSnap;
-            let lastSnapDirY = "", lastSnapDirX = "";
-            let lastSnapping = "";
-            let parentOffsetX = 0, parentOffsetY = 0;
-            if (snapOn) {
-                snappable = func_js.map(document.querySelectorAll(snapOn), (el) => {
-                    let offX = 0, offY = 0;
-                    func_js.closest(el, (el) => {
-                        offX += el.offsetLeft;
-                        offY += el.offsetTop;
-                        return false;
-                    }, "offsetParent");
-                    return {
-                        x1: offX,
-                        y1: offY,
-                        x2: offX + el.offsetWidth,
-                        y2: offY + el.offsetHeight,
-                        el: el,
-                    };
+            else {
+                collection.each(this.ele, (el) => {
+                    this.bindEvent(el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
                 });
-                func_js.closest(dragDom, (el, times) => {
-                    if (times > 0) {
-                        parentOffsetX += el.offsetLeft;
-                        parentOffsetY += el.offsetTop;
-                    }
-                    return false;
-                }, "offsetParent");
-            }
-            const originW = dragDom.offsetWidth + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
-            const originH = dragDom.offsetHeight + parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth);
-            // boundary
-            let minX = 0;
-            let minY = 0;
-            let maxX = 0;
-            let maxY = 0;
-            if (inContainer) {
-                maxX = container.scrollWidth - originW;
-                maxY = container.scrollHeight - originH;
-            }
-            if (maxX < 0)
-                maxX = 0;
-            if (maxY < 0)
-                maxY = 0;
-            //start point
-            const rect = container.getBoundingClientRect();
-            const offset = getOffset(t, container);
-            const ox = e.offsetX || 0;
-            const oy = e.offsetY || 0;
-            let hitPosX = offset.x + ox + container.scrollLeft;
-            let hitPosY = offset.y + oy + container.scrollTop;
-            let cursorX = ox, cursorY = e.offsetY;
-            if (e.target !== dragDom) {
-                const offset = getOffset(t, dragDom);
-                const style = window.getComputedStyle(t);
-                cursorX = offset.x + ox + parseFloat(style.borderLeftWidth);
-                cursorY = offset.y + oy + parseFloat(style.borderTopWidth);
             }
-            const cursorAt = opts.cursorAt;
-            if (cursorAt) {
-                const l = cursorAt.left;
-                const t = cursorAt.top;
-                if (func_js.isString(l)) {
-                    cursorX = parseFloat(l) / 100 * dragDom.offsetWidth;
+        }
+        bindEvent(bindTarget, opts, handleMap) {
+            const container = __classPrivateFieldGet(this, _Draggable_container, "f");
+            let draggableList = this.ele;
+            const eleString = this.eleString;
+            const initStyle = __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).bind(this);
+            this.addPointerDown(bindTarget, ({ ev, currentTarget, currentStyle, currentCStyle, pointX, pointY, onPointerStart, onPointerMove, onPointerEnd }) => {
+                var _a;
+                let t = ev.target;
+                if (!t)
+                    return;
+                if (opts.watch && eleString) {
+                    draggableList = bindTarget.querySelectorAll(eleString);
+                    initStyle(draggableList);
                 }
-                else {
-                    cursorX = l;
+                let findRs = collection.find(draggableList, el => el.contains(t));
+                if (!findRs)
+                    return;
+                const dragDom = findRs;
+                let handle = handleMap.get(dragDom);
+                if (handle && !handle.contains(t)) {
+                    return;
                 }
-                if (func_js.isString(t)) {
-                    cursorY = parseFloat(t) / 100 * dragDom.offsetWidth;
+                const onPointerDown = opts.onPointerDown;
+                if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
+                    return;
+                const filter = opts.filter;
+                if (filter) {
+                    if (collection.some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
+                        return;
                 }
-                else {
-                    cursorY = t;
+                const offsetParent = dragDom instanceof HTMLElement ? dragDom.offsetParent || document.body : dragDom.ownerSVGElement;
+                const offsetParentRect = offsetParent.getBoundingClientRect();
+                const offsetParentCStyle = window.getComputedStyle(offsetParent);
+                const offsetXy = getPointInContainer(ev, dragDom);
+                let offsetPointX = offsetXy.x;
+                let offsetPointY = offsetXy.y;
+                const matrixInfo = getMatrixInfo(dragDom);
+                const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
+                if (matrixInfo.angle != 0) {
+                    offsetPointX = currentXy.x - matrixInfo.x;
+                    offsetPointY = currentXy.y - matrixInfo.y;
+                }
+                const inContainer = !!container;
+                const ghost = opts.ghost;
+                const ghostClass = opts.ghostClass;
+                const direction = opts.direction;
+                const onStart = opts.onStart;
+                const onDrag = opts.onDrag;
+                const onEnd = opts.onEnd;
+                const onClone = opts.onClone;
+                const originalZIndex = currentCStyle.zIndex;
+                let zIndex = opts.zIndex || originalZIndex;
+                const classes = opts.classes || '';
+                const group = opts.group;
+                if (group) {
+                    let i = -1;
+                    collection.each(DRAGGER_GROUPS[group], el => {
+                        const z = parseInt(currentCStyle.zIndex) || 0;
+                        if (z > i)
+                            i = z;
+                    });
+                    zIndex = i + 1;
+                }
+                const scroll = opts.scroll;
+                const scrollSpeed = opts.scrollSpeed || 10;
+                let gridX, gridY;
+                const grid = opts.grid;
+                if (is.isArray(grid)) {
+                    gridX = grid[0];
+                    gridY = grid[1];
+                }
+                else if (is.isNumber(grid)) {
+                    gridX = gridY = grid;
+                }
+                const snapOn = opts.snap;
+                let snappable;
+                const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
+                const onSnap = opts.onSnap;
+                let lastSnapDirY = "", lastSnapDirX = "";
+                let lastSnapping = "";
+                if (snapOn) {
+                    snappable = collection.map((container || document).querySelectorAll(snapOn), (el) => {
+                        const { x, y, w, h } = getRectInContainer(el, offsetParent);
+                        return {
+                            x1: x,
+                            y1: y,
+                            x2: x + w,
+                            y2: y + h,
+                            el: el,
+                        };
+                    });
                 }
-            }
-            const style = dragDom.style;
-            let dragging = false;
-            let copyNode;
-            let timer = null;
-            let toLeft = false;
-            let toTop = false;
-            let toRight = false;
-            let toBottom = false;
-            saveCursor();
-            const dragListener = (ev) => {
-                var _a;
-                const newX = ev.clientX - rect.x + container.scrollLeft;
-                const newY = ev.clientY - rect.y + container.scrollTop;
-                let offsetx = newX - hitPosX;
-                let offsety = newY - hitPosY;
-                if (!dragging) {
-                    if (Math.abs(offsetx) > threshold || Math.abs(offsety) > threshold) {
-                        dragging = true;
-                        if (ghost) {
-                            if (func_js.isFunction(ghost)) {
-                                copyNode = ghost(dragDom);
-                            }
-                            else {
-                                copyNode = dragDom.cloneNode(true);
-                                copyNode.style.opacity = "0.3";
-                                copyNode.style.pointerEvents = "none";
-                                copyNode.style.position = "absolute";
-                            }
-                            copyNode.style.left = dragDom.style.left;
-                            copyNode.style.top = dragDom.style.top;
-                            copyNode.style.zIndex = zIndex + '';
-                            if (ghostClass) {
-                                copyNode.classList.add(...func_js.compact(func_js.split(ghostClass, ' ')));
-                            }
-                            copyNode.classList.add(...func_js.compact(func_js.split(classes, ' ')));
-                            copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
-                            (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
-                            if (onClone) {
-                                onClone(copyNode, ev);
-                            }
+                const dragDomRect = dragDom.getBoundingClientRect();
+                const originW = dragDomRect.width + parseFloat(currentCStyle.borderLeftWidth) + parseFloat(currentCStyle.borderRightWidth);
+                const originH = dragDomRect.height + parseFloat(currentCStyle.borderTopWidth) + parseFloat(currentCStyle.borderBottomWidth);
+                let minX = 0;
+                let minY = 0;
+                let maxX = 0;
+                let maxY = 0;
+                let originOffX = 0;
+                let originOffY = 0;
+                if (inContainer) {
+                    maxX = container.scrollWidth - originW;
+                    maxY = container.scrollHeight - originH;
+                }
+                if (maxX < 0)
+                    maxX = 0;
+                if (maxY < 0)
+                    maxY = 0;
+                let copyNode;
+                let transformer;
+                let timer = null;
+                let toLeft = false;
+                let toTop = false;
+                let toRight = false;
+                let toBottom = false;
+                let endX = 0, endY = 0;
+                onPointerStart(function (args) {
+                    var _a;
+                    const { ev } = args;
+                    if (ghost) {
+                        if (is.isFunction(ghost)) {
+                            copyNode = ghost(dragDom);
                         }
-                        //apply classes
-                        dragDom.classList.add(...func_js.compact(func_js.split(classes, ' ')));
-                        if (!copyNode)
-                            dragDom.style.zIndex = zIndex + '';
-                        dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
-                        func_js.call(onStart, dragDom, ev);
-                        lockPage();
-                        if (opts.cursor) {
-                            setCursor(opts.cursor.active || 'move');
+                        else {
+                            copyNode = dragDom.cloneNode(true);
+                            copyNode.style.opacity = "0.3";
+                            copyNode.style.pointerEvents = "none";
+                            copyNode.style.position = "absolute";
                         }
-                        //notify
-                        const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
-                        dragDom.dispatchEvent(customEv);
-                    }
-                    else {
-                        ev.preventDefault();
-                        return false;
-                    }
-                }
-                //edge detect
-                if (scroll) {
-                    const ltX = ev.clientX - rect.x;
-                    const ltY = ev.clientY - rect.y;
-                    const rbX = rect.x + rect.width - ev.clientX;
-                    const rbY = rect.y + rect.height - ev.clientY;
-                    toLeft = ltX < EDGE_THRESHOLD;
-                    toTop = ltY < EDGE_THRESHOLD;
-                    toRight = rbX < EDGE_THRESHOLD;
-                    toBottom = rbY < EDGE_THRESHOLD;
-                    if (toLeft || toTop
-                        ||
-                            toRight || toBottom) {
-                        if (!timer) {
-                            timer = setInterval(() => {
-                                if (toLeft) {
-                                    container.scrollLeft -= scrollSpeed;
-                                }
-                                else if (toRight) {
-                                    container.scrollLeft += scrollSpeed;
-                                }
-                                if (toTop) {
-                                    container.scrollTop -= scrollSpeed;
-                                }
-                                else if (toBottom) {
-                                    container.scrollTop += scrollSpeed;
-                                }
-                            }, 20);
+                        copyNode.style.zIndex = zIndex + '';
+                        if (ghostClass) {
+                            copyNode.classList.add(...array.compact(string.split(ghostClass, ' ')));
                         }
+                        copyNode.classList.add(...array.compact(string.split(classes, ' ')));
+                        copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
+                        (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
+                        transformer = wrapper(copyNode);
+                        onClone && onClone({ clone: copyNode }, ev);
                     }
                     else {
-                        if (timer) {
-                            clearInterval(timer);
-                            timer = null;
-                        }
+                        transformer = wrapper(dragDom);
                     }
-                }
-                let x = newX - cursorX;
-                let y = newY - cursorY;
-                //grid
-                if (func_js.isNumber(gridX) && func_js.isNumber(gridY)) {
-                    x = ((x / gridX) >> 0) * gridX;
-                    y = ((y / gridY) >> 0) * gridY;
-                }
-                if (inContainer) {
-                    if (x < minX)
-                        x = minX;
-                    if (y < minY)
-                        y = minY;
-                    if (x > maxX)
-                        x = maxX;
-                    if (y > maxY)
-                        y = maxY;
-                }
-                let canDrag = true;
-                let emitSnap = false;
-                if (snapOn) {
-                    const currPageX1 = parentOffsetX + x;
-                    const currPageY1 = parentOffsetY + y;
-                    const currPageX2 = currPageX1 + originW;
-                    const currPageY2 = currPageY1 + originH;
-                    //check snappable
-                    let snapX = NaN, snapY = NaN;
-                    let targetX, targetY;
-                    let snapDirX, snapDirY;
-                    if (!direction || direction === "v") {
-                        func_js.each(snappable, (data) => {
-                            if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
-                                //top parallel
-                                snapY = data.y1;
-                                snapDirY = "t2t";
-                            }
-                            else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
-                                //b2t
-                                snapY = data.y2;
-                                snapDirY = "t2b";
-                            }
-                            else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
-                                //t2b
-                                snapY = data.y1 - originH;
-                                snapDirY = "b2t";
-                            }
-                            else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
-                                //bottom parallel
-                                snapY = data.y2 - originH;
-                                snapDirY = "b2b";
+                    dragDom.classList.add(...array.compact(string.split(classes, ' ')));
+                    if (!copyNode)
+                        dragDom.style.zIndex = zIndex + '';
+                    dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
+                    onStart && onStart({ draggable: dragDom, x: currentXy.x, y: currentXy.y }, ev);
+                    const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
+                    dragDom.dispatchEvent(customEv);
+                });
+                onPointerMove((args) => {
+                    const { ev, pointX, pointY, offX, offY } = args;
+                    const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
+                    let newX = currentXy.x;
+                    let newY = currentXy.y;
+                    if (scroll) {
+                        const lX = pointX - offsetParentRect.x;
+                        const lY = pointY - offsetParentRect.y;
+                        const rX = offsetParentRect.x + offsetParentRect.width - pointX;
+                        const rY = offsetParentRect.y + offsetParentRect.height - pointY;
+                        toLeft = lX < EDGE_THRESHOLD;
+                        toTop = lY < EDGE_THRESHOLD;
+                        toRight = rX < EDGE_THRESHOLD;
+                        toBottom = rY < EDGE_THRESHOLD;
+                        if (toLeft || toTop
+                            ||
+                                toRight || toBottom) {
+                            if (!timer) {
+                                timer = setInterval(() => {
+                                    if (toLeft) {
+                                        offsetParent.scrollLeft -= scrollSpeed;
+                                    }
+                                    else if (toRight) {
+                                        offsetParent.scrollLeft += scrollSpeed;
+                                    }
+                                    if (toTop) {
+                                        offsetParent.scrollTop -= scrollSpeed;
+                                    }
+                                    else if (toBottom) {
+                                        offsetParent.scrollTop += scrollSpeed;
+                                    }
+                                }, 20);
                             }
-                            if (snapY) {
-                                lastSnapDirY = snapDirY;
-                                targetY = data.el;
-                                return false;
+                        }
+                        else {
+                            if (timer) {
+                                clearInterval(timer);
+                                timer = null;
                             }
-                        });
+                        }
                     }
-                    if (!direction || direction === "h") {
-                        func_js.each(snappable, (data) => {
-                            if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
-                                //left parallel
-                                snapX = data.x1;
-                                snapDirX = "l2l";
-                            }
-                            else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
-                                //r2l
-                                snapX = data.x2;
-                                snapDirX = "l2r";
-                            }
-                            else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
-                                //l2r
-                                snapX = data.x1 - originW;
-                                snapDirX = "r2l";
-                            }
-                            else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
-                                //right parallel
-                                snapX = data.x2 - originW;
-                                snapDirX = "r2r";
-                            }
-                            if (snapX) {
-                                lastSnapDirX = snapDirX;
-                                targetX = data.el;
-                                return false;
-                            }
-                        });
+                    let x = newX - offsetPointX + 0;
+                    let y = newY - offsetPointY + 0;
+                    if (is.isNumber(gridX) && is.isNumber(gridY)) {
+                        x = ((x / gridX) >> 0) * gridX;
+                        y = ((y / gridY) >> 0) * gridY;
                     }
-                    if (snapX || snapY) {
-                        if (snapX) {
-                            x = snapX - parentOffsetX;
+                    if (inContainer) {
+                        if (originOffX + x < minX) {
+                            x = -0;
                         }
-                        if (snapY) {
-                            y = snapY - parentOffsetY;
+                        if (originOffY + y < minY) {
+                            y = -0;
                         }
-                        if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
-                            setTimeout(() => {
-                                //emit after relocate
-                                onSnap(copyNode || dragDom, targetX, targetY, snapDirX, snapDirY);
-                            }, 0);
-                            lastSnapping = lastSnapDirX + "" + lastSnapDirY;
+                        if (originOffX + x > maxX) {
+                            x = maxX - originOffX;
+                        }
+                        if (originOffY + y > maxY) {
+                            y = maxY - originOffY;
                         }
-                        emitSnap = true;
-                    }
-                    else {
-                        lastSnapDirX = lastSnapDirY = lastSnapping = "";
-                    }
-                }
-                if (onDrag && !emitSnap) {
-                    if (onDrag(dragDom, ev, offsetx, offsety, x, y) === false) {
-                        canDrag = false;
                     }
-                }
-                if (canDrag) {
-                    if (copyNode) {
-                        if (direction === "v") {
-                            copyNode.style.top = `${y}px`;
+                    let canDrag = true;
+                    let emitSnap = false;
+                    if (snapOn) {
+                        const currPageX1 = x;
+                        const currPageY1 = y;
+                        const currPageX2 = currPageX1 + originW;
+                        const currPageY2 = currPageY1 + originH;
+                        let snapX = NaN, snapY = NaN;
+                        let targetX, targetY;
+                        let snapDirX, snapDirY;
+                        if (!direction || direction === "v") {
+                            collection.each(snappable, (data) => {
+                                if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
+                                    snapY = data.y1;
+                                    snapDirY = "t2t";
+                                }
+                                else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
+                                    snapY = data.y2;
+                                    snapDirY = "t2b";
+                                }
+                                else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
+                                    snapY = data.y1 - originH;
+                                    snapDirY = "b2t";
+                                }
+                                else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
+                                    snapY = data.y2 - originH;
+                                    snapDirY = "b2b";
+                                }
+                                if (snapY) {
+                                    lastSnapDirY = snapDirY;
+                                    targetY = data.el;
+                                    return false;
+                                }
+                            });
                         }
-                        else if (direction === "h") {
-                            copyNode.style.left = `${x}px`;
+                        if (!direction || direction === "h") {
+                            collection.each(snappable, (data) => {
+                                if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
+                                    snapX = data.x1;
+                                    snapDirX = "l2l";
+                                }
+                                else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
+                                    snapX = data.x2;
+                                    snapDirX = "l2r";
+                                }
+                                else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
+                                    snapX = data.x1 - originW;
+                                    snapDirX = "r2l";
+                                }
+                                else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
+                                    snapX = data.x2 - originW;
+                                    snapDirX = "r2r";
+                                }
+                                if (snapX) {
+                                    lastSnapDirX = snapDirX;
+                                    targetX = data.el;
+                                    return false;
+                                }
+                            });
+                        }
+                        if (snapX || snapY) {
+                            if (snapX) {
+                                x = snapX;
+                            }
+                            if (snapY) {
+                                y = snapY;
+                            }
+                            if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
+                                setTimeout(() => {
+                                    onSnap({
+                                        el: copyNode || dragDom,
+                                        targetH: targetX,
+                                        targetV: targetY,
+                                        dirH: snapDirX,
+                                        dirV: snapDirY,
+                                    }, ev);
+                                }, 0);
+                                lastSnapping = lastSnapDirX + "" + lastSnapDirY;
+                            }
+                            emitSnap = true;
                         }
                         else {
-                            copyNode.style.left = `${x}px`;
-                            copyNode.style.top = `${y}px`;
+                            lastSnapDirX = lastSnapDirY = lastSnapping = "";
                         }
                     }
-                    else {
+                    if (onDrag && !emitSnap) {
+                        if (onDrag({
+                            draggable: dragDom,
+                            ox: offX,
+                            oy: offY,
+                            x: x,
+                            y: y
+                        }, ev) === false) {
+                            canDrag = false;
+                            endX = x;
+                            endY = y;
+                        }
+                    }
+                    if (canDrag) {
                         if (direction === "v") {
-                            style.top = `${y}px`;
+                            transformer.moveToY(y);
                         }
                         else if (direction === "h") {
-                            style.left = `${x}px`;
+                            transformer.moveToX(x);
                         }
                         else {
-                            style.left = `${x}px`;
-                            style.top = `${y}px`;
+                            transformer.moveTo(x, y);
                         }
+                        endX = x;
+                        endY = y;
                     }
-                }
-                ev.preventDefault();
-                return false;
-            };
-            const dragEndListener = (ev) => {
-                var _a, _b;
-                document.removeEventListener("mousemove", dragListener);
-                document.removeEventListener("mouseup", dragEndListener);
-                window.removeEventListener("blur", dragEndListener);
-                if (scroll) {
-                    if (timer) {
-                        clearInterval(timer);
-                        timer = null;
+                });
+                onPointerEnd((args) => {
+                    var _a, _b;
+                    const { ev, currentStyle } = args;
+                    if (scroll) {
+                        if (timer) {
+                            clearInterval(timer);
+                            timer = null;
+                        }
                     }
-                }
-                //restore classes
-                dragDom.classList.remove(...func_js.compact(func_js.split(classes, ' ')));
-                dragDom.style.zIndex = originalZIndex;
-                dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
-                let moveToGhost = true;
-                if (dragging) {
-                    moveToGhost = func_js.call(onEnd, dragDom, ev);
-                }
-                //notify
-                const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
-                dragDom.dispatchEvent(customEv);
-                if (dragging) {
-                    unlockPage();
-                    restoreCursor();
+                    dragDom.classList.remove(...array.compact(string.split(classes, ' ')));
+                    currentStyle.zIndex = originalZIndex;
+                    dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
+                    let moveToGhost = true;
+                    if (onEnd) {
+                        moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY }, ev) === false ? false : true;
+                    }
+                    const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
+                    dragDom.dispatchEvent(customEv);
                     if (ghost) {
                         ((_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.contains(copyNode)) && ((_b = dragDom.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(copyNode));
                         if (moveToGhost !== false) {
-                            style.left = copyNode.style.left;
-                            style.top = copyNode.style.top;
+                            wrapper(dragDom).moveTo(transformer.x, transformer.y);
                         }
                     }
+                });
+            }, {
+                threshold: this.opts.threshold || 0,
+                lockPage: true
+            });
+        }
+        onOptionChanged(opts) {
+            const droppable = opts.droppable;
+            if (!is.isFunction(droppable)) {
+                if (is.isUndefined(droppable)) {
+                    opts.droppable = () => { };
                 }
-            };
-            document.addEventListener("mousemove", dragListener);
-            document.addEventListener("mouseup", dragEndListener);
-            window.addEventListener("blur", dragEndListener);
-            e.preventDefault();
-            return false;
-        });
+                else if (is.isString(droppable)) {
+                    opts.droppable = () => document.querySelectorAll(droppable);
+                }
+                else if (is.isArrayLike(droppable)) {
+                    opts.droppable = () => droppable;
+                }
+                else if (is.isElement(droppable)) {
+                    opts.droppable = () => [droppable];
+                }
+            }
+        }
     }
-    /**
-     * create a draggable pattern for one or more elements with opts
-     * @param els selector string / html element
-     * @param opts
-     * @returns Draggable instance
-     */
+    _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
+        collection.each(draggableList, (el) => {
+            if (is.isDefined(this.opts.type))
+                el.dataset.dropType = this.opts.type;
+            el.classList.toggle(CLASS_DRAGGABLE, true);
+            const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
+            ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
+            if (is.isDefined(this.opts.cursor)) {
+                el.style.cursor = this.opts.cursor.default || 'move';
+                if (is.isDefined(this.opts.cursor.over)) {
+                    el.dataset.cursorOver = this.opts.cursor.over;
+                    el.dataset.cursorActive = this.opts.cursor.active || 'move';
+                }
+            }
+        });
+    };
     function newDraggable(els, opts) {
         return new Draggable(els, opts);
     }
@@ -1320,267 +1675,185 @@
     var _Droppable_active;
     const Droppables = [];
     const CLASS_DROPPABLE = "uii-droppable";
-    /**
-     * 用于表示一个或多个可响应拖动元素的定义
-     * > 可用CSS接口
-     * - .uii-droppable
-     * @public
-     */
     class Droppable extends Uii {
         constructor(el, opts) {
-            super(el, func_js.assign({}, opts));
+            super(el, object.assign({}, opts));
             _Droppable_active.set(this, void 0);
             Droppables.push(this);
         }
-        /**
-         * @internal
-         */
-        bindEvent(el, opts) {
-            //dragenter
-            this.registerEvent(el, "mouseenter", (e) => {
+        bindEvent(droppable, opts) {
+            this.registerEvent(droppable, "mouseenter", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
                 if (opts.hoverClass) {
-                    func_js.each(func_js.split(opts.hoverClass, ' '), cls => {
-                        el.classList.toggle(cls, true);
+                    collection.each(string.split(opts.hoverClass, ' '), cls => {
+                        droppable.classList.toggle(cls, true);
                     });
                 }
                 if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
                     setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
                 }
-                func_js.call(opts.onEnter, el, e);
+                opts.onEnter && opts.onEnter({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
-            //dragleave
-            this.registerEvent(el, "mouseleave", (e) => {
+            this.registerEvent(droppable, "mouseleave", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
                 if (opts.hoverClass) {
-                    func_js.each(func_js.split(opts.hoverClass, ' '), cls => {
-                        el.classList.toggle(cls, false);
+                    collection.each(string.split(opts.hoverClass, ' '), cls => {
+                        droppable.classList.toggle(cls, false);
                     });
                 }
                 if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
                     setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
                 }
-                func_js.call(opts.onLeave, el, e);
+                opts.onLeave && opts.onLeave({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
-            //dragover
-            this.registerEvent(el, "mousemove", (e) => {
+            this.registerEvent(droppable, "mousemove", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
-                if (opts.onDragOver) {
-                    opts.onDragOver(el, e);
-                }
+                opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
-            //drop
-            this.registerEvent(el, "mouseup", (e) => {
+            this.registerEvent(droppable, "mouseup", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
                 if (opts.hoverClass) {
-                    func_js.each(func_js.split(opts.hoverClass, ' '), cls => {
-                        el.classList.toggle(cls, false);
+                    collection.each(string.split(opts.hoverClass, ' '), cls => {
+                        droppable.classList.toggle(cls, false);
                     });
                 }
-                func_js.call(opts.onDrop, el, e);
+                opts.onDrop && opts.onDrop({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
         }
-        /**
-         * @internal
-         */
         active(target) {
             let valid = true;
-            //check accepts
-            if (func_js.isString(this.opts.accepts)) {
-                valid = !!target.dataset.dropType && func_js.test(this.opts.accepts, target.dataset.dropType);
+            const opts = this.opts;
+            if (is.isString(opts.accepts)) {
+                valid = !!target.dataset.dropType && string.test(opts.accepts, target.dataset.dropType);
             }
-            else if (func_js.isFunction(this.opts.accepts)) {
-                valid = this.opts.accepts(this.ele, target);
+            else if (is.isFunction(opts.accepts)) {
+                valid = opts.accepts(this.ele, target);
             }
             if (!valid)
                 return;
             __classPrivateFieldSet(this, _Droppable_active, target, "f");
-            if (this.opts.activeClass) {
-                func_js.each(this.ele, el => {
-                    func_js.each(func_js.split(this.opts.activeClass, ' '), cls => {
+            if (opts.activeClass) {
+                collection.each(this.ele, el => {
+                    collection.each(string.split(opts.activeClass || '', ' '), cls => {
                         el.classList.toggle(cls, true);
                     });
                 });
             }
-            func_js.call(this.opts.onActive, target, this.ele);
-            //bind events
-            func_js.each(this.ele, (el) => {
+            opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
+            collection.each(this.ele, (el) => {
                 el.classList.toggle(CLASS_DROPPABLE, true);
                 el.style.pointerEvents = 'initial';
-                this.bindEvent(el, this.opts);
+                this.bindEvent(el, opts);
             });
         }
-        /**
-         * @internal
-         */
         deactive(target) {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
             __classPrivateFieldSet(this, _Droppable_active, null, "f");
-            if (this.opts.activeClass) {
-                func_js.each(this.ele, el => {
-                    func_js.each(func_js.split(this.opts.activeClass, ' '), cls => {
+            const opts = this.opts;
+            if (opts.activeClass) {
+                collection.each(this.ele, el => {
+                    collection.each(string.split(opts.activeClass || '', ' '), cls => {
                         el.classList.toggle(cls, false);
                     });
                 });
             }
-            func_js.call(this.opts.onDeactive, target, this.ele);
-            //unbind events
+            opts.onDeactive && opts.onDeactive({ draggable: target, droppables: this.ele });
             this.destroy();
         }
     }
     _Droppable_active = new WeakMap();
-    //uii-drag active
     document.addEventListener("uii-dragactive", (e) => {
-        func_js.each(Droppables, dpb => {
+        collection.each(Droppables, dpb => {
             dpb.active(e.target);
         });
     });
     document.addEventListener("uii-dragdeactive", (e) => {
-        func_js.each(Droppables, dpb => {
+        collection.each(Droppables, dpb => {
             dpb.deactive(e.target);
         });
     });
-    /**
-     * Enable els to response to draggable objects
-     * @param els selector string / html element
-     * @param opts
-     * @returns
-     */
     function newDroppable(els, opts) {
         return new Droppable(els, opts);
     }
 
-    /* eslint-disable max-len */
-    const ONE_DEG = 180 / Math.PI;
-    const THRESHOLD$1 = 2;
+    const THRESHOLD$2 = 2;
     const CLASS_ROTATABLE = "uii-rotatable";
     const CLASS_ROTATABLE_HANDLE = "uii-rotatable-handle";
     const CLASS_ROTATABLE_ACTIVE = "uii-rotatable-active";
-    /**
-     * 用于表示一个或多个可旋转元素的定义
-     * > 可用CSS接口
-     * - .uii-rotatable
-     * - .uii-rotatable-handle
-     * - .uii-rotatable-active
-     * @public
-     */
     class Rotatable extends Uii {
         constructor(els, opts) {
             super(els, opts);
-            func_js.each(this.ele, (el) => {
-                initHandle(el, this.opts);
+            collection.each(this.ele, (el) => {
+                initHandle(this, el, this.opts);
             });
         }
     }
-    function initHandle(el, opts) {
-        var _a;
-        const handle = document.createElement('div');
-        handle.className = CLASS_ROTATABLE_HANDLE;
-        handle.style.cssText = `
-    position:absolute;
-    width:12px;
-    height:12px;
-    border-radius:50%;
-    left: calc(50% - 6px);
-    top: -24px;
-    `;
-        handle.style.cursor = ((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.default) || 'crosshair';
-        bindHandle(handle, el, opts);
+    function initHandle(uiik, el, opts) {
+        let handleStr = opts.handle;
+        let handles;
+        if (is.isString(handleStr)) {
+            handles = document.querySelectorAll(handleStr);
+        }
+        else if (is.isFunction(handleStr)) {
+            handles = handleStr(el);
+        }
+        if (!handles) {
+            console.error('Can not find handles with "' + el.outerHTML + '"');
+            return;
+        }
+        collection.each(handles, (h) => {
+            var _a;
+            h.classList.add(CLASS_ROTATABLE_HANDLE);
+            h.style.cursor = ((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.default) || "crosshair";
+            bindHandle(uiik, h, el, opts);
+        });
         el.classList.toggle(CLASS_ROTATABLE, true);
-        el.appendChild(handle);
     }
-    function bindHandle(handle, el, opts) {
+    function bindHandle(uiik, handle, el, opts) {
         const onStart = opts.onStart;
         const onRotate = opts.onRotate;
         const onEnd = opts.onEnd;
-        handle.onmousedown = function (e) {
-            var _a, _b;
-            // calc center
-            const center = window.getComputedStyle(el).transformOrigin || '';
-            const centerPair = center.split(' ');
-            const shadowDom = el.cloneNode();
-            shadowDom.style.cssText = 'transform:rotate(0);z-index:-999;position:absolute;';
-            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(shadowDom);
-            const offsetXY = shadowDom.getBoundingClientRect();
-            (_b = el.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(shadowDom);
-            let centerX = parseFloat(centerPair[0]) + offsetXY.x;
-            let centerY = parseFloat(centerPair[1]) + offsetXY.y;
-            let a = 0, b = 0;
-            const matrix = window.getComputedStyle(el).transform;
-            if (matrix.indexOf('matrix') > -1) {
-                const abcd = matrix.replace(/^matrix\(|\)$/mg, '').split(',');
-                a = parseFloat(abcd[0]);
-                b = parseFloat(abcd[1]);
-            }
-            let deg = Math.atan2(b, a) * ONE_DEG;
-            if (deg < 0)
-                deg = 360 - deg;
-            if (deg > 360)
-                deg = 360 - deg % 360;
-            const style = el.style;
-            let startDeg = Math.atan2(e.clientY - centerY, e.clientX - centerX) * ONE_DEG + 90;
-            if (startDeg < 0)
-                startDeg = 360 + startDeg;
-            const offsetDeg = startDeg - deg;
-            let dragging = false;
-            saveCursor();
-            const dragListener = (ev) => {
-                var _a;
-                const offsetx = ev.clientX - centerX;
-                const offsety = ev.clientY - centerY;
-                if (!dragging) {
-                    if (Math.abs(offsetx) > THRESHOLD$1 || Math.abs(offsety) > THRESHOLD$1) {
-                        dragging = true;
-                        //apply classes
-                        el.classList.toggle(CLASS_ROTATABLE_ACTIVE, true);
-                        func_js.call(onStart, deg);
-                        lockPage();
-                        if (func_js.isDefined(opts.cursor)) {
-                            setCursor(((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair');
-                        }
-                    }
-                    else {
-                        ev.preventDefault();
-                        return false;
-                    }
-                }
-                deg = Math.atan2(offsety, offsetx) * ONE_DEG + 90 - offsetDeg;
-                if (deg < 0)
-                    deg = 360 + deg;
-                func_js.call(onRotate, deg);
-                style.transform = style.transform.replace(/rotateZ\(.*?\)/, '') + ' rotateZ(' + deg + 'deg)';
-                ev.preventDefault();
-                return false;
-            };
-            const dragEndListener = (ev) => {
-                document.removeEventListener('mousemove', dragListener, false);
-                document.removeEventListener('mouseup', dragEndListener, false);
-                window.removeEventListener('blur', dragEndListener, false);
-                if (dragging) {
-                    unlockPage();
-                    restoreCursor();
-                    el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
-                    func_js.call(onEnd, deg);
-                }
-            };
-            document.addEventListener('mousemove', dragListener, false);
-            document.addEventListener('mouseup', dragEndListener, false);
-            window.addEventListener('blur', dragEndListener, false);
-            e.preventDefault();
-            return false;
-        };
+        let deg = 0;
+        uiik.addPointerDown(handle, ({ onPointerStart, onPointerMove, onPointerEnd }) => {
+            const { x, y, ox, oy } = getCenterXy(el);
+            let centerX = x, centerY = y;
+            let startDeg = 0;
+            onPointerStart(function (args) {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, el.parentElement);
+                startDeg =
+                    Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD + 90;
+                if (startDeg < 0)
+                    startDeg = 360 + startDeg;
+                let matrixInfo = getMatrixInfo(el);
+                startDeg -= matrixInfo.angle;
+                el.classList.toggle(CLASS_ROTATABLE_ACTIVE, true);
+                onStart && onStart({ deg, cx: centerX, cy: centerY }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, el.parentElement);
+                deg =
+                    Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
+                        90 - startDeg;
+                onRotate && onRotate({ deg, cx: centerX, cy: centerY }, ev);
+                rotateTo(el, deg, ox, oy);
+            });
+            onPointerEnd((args) => {
+                const { ev } = args;
+                el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
+                onEnd && onEnd({ deg }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$2,
+            lockPage: true,
+        });
     }
-    /**
-     * Make els rotatable
-     * @param els selector string / html element
-     * @param opts
-     * @returns
-     */
     function newRotatable(els, opts) {
         return new Rotatable(els, opts);
     }
@@ -1593,16 +1866,15 @@
             this.opts = {
                 container: document.body
             };
-            this.opts = func_js.assign(this.opts, opts);
-            const domEl = func_js.isString(el) ? document.querySelector(el) : el;
+            this.opts = object.assign(this.opts, opts);
+            const domEl = is.isString(el) ? document.querySelector(el) : el;
             if (!domEl) {
                 console.error('Invalid selector "' + el + '"');
                 return;
             }
             const ele = domEl;
             this.el = domEl;
-            //el data
-            const offset = getOffset(ele, this.opts.container);
+            const offset = getBox(ele, this.opts.container);
             const rect = { x: offset.x, y: offset.y, width: ele.offsetWidth, height: ele.offsetHeight };
             this.elData = {
                 x1: rect.x,
@@ -1610,38 +1882,32 @@
                 x2: rect.x + rect.width,
                 y2: rect.y + rect.height,
             };
-            //targets data
             this.update();
         }
-        /**
-         * update targets data if them changed
-         */
         update() {
             let targets;
-            if (func_js.isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            if (is.isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
                 targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f").call(this);
             }
-            else if (func_js.isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            else if (is.isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
                 targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
+                targets = collection.reject(targets, t => t === this.el);
             }
-            else if (func_js.isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            else if (is.isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
                 targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
             }
             else {
                 targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f");
             }
-            this.targetsData = func_js.flatMap(targets, t => {
+            this.targetsData = collection.flatMap(targets, t => {
                 if (!t)
                     return [];
-                if (!func_js.isElement(t))
-                    return [];
-                const offset = getOffset(t, this.opts.container);
-                const rect = { x: offset.x, y: offset.y, width: t.offsetWidth, height: t.offsetHeight };
+                const rect = getRectInContainer(t, this.opts.container);
                 return {
                     x1: rect.x,
                     y1: rect.y,
-                    x2: rect.x + rect.width,
-                    y2: rect.y + rect.height,
+                    x2: rect.x + rect.w,
+                    y2: rect.y + rect.h,
                     el: t
                 };
             });
@@ -1656,7 +1922,7 @@
                     y2,
                 };
             }
-            let overlaps = func_js.flatMap(this.targetsData, (td, i) => {
+            let overlaps = collection.flatMap(this.targetsData, (td, i) => {
                 if (elData.x2 < td.x1 || elData.x1 > td.x2 || elData.y2 < td.y1 || elData.y1 > td.y2)
                     return [];
                 return td.el;
@@ -1673,7 +1939,7 @@
                     y2,
                 };
             }
-            let contains = func_js.flatMap(this.targetsData, (td, i) => {
+            let contains = collection.flatMap(this.targetsData, (td, i) => {
                 if (elData.x2 >= td.x2 && elData.x1 <= td.x1 && elData.y2 >= td.y2 && elData.y1 <= td.y1)
                     return td.el;
                 return [];
@@ -1682,39 +1948,18 @@
         }
     }
     _CollisionDetector__targets = new WeakMap();
-    /**
-     * create a detector for the el and return
-     * @param el element to be detected
-     * @param targets
-     * @param opts CollisionDetectorOptions
-     * @param opts.container a root element of targets
-     * @returns
-     */
     function newCollisionDetector(el, targets, opts) {
         return new CollisionDetector(el, targets, opts);
     }
 
-    /* eslint-disable max-len */
-    /**
-     * selector
-     * @author holyhigh2
-     */
     var _Selectable_instances, _Selectable__detector, _Selectable__lastSelected, _Selectable_bindEvent;
     const CLASS_SELECTOR = "uii-selector";
     const CLASS_SELECTING = "uii-selecting";
     const CLASS_SELECTED = "uii-selected";
-    const THRESHOLD = 2;
-    /**
-     * 用于表示一个元素选择器的定义
-     * > 可用CSS接口
-     * - .uii-selector
-     * - .uii-selecting
-     * - .uii-selected
-     * @public
-     */
+    const THRESHOLD$1 = 2;
     class Selectable extends Uii {
         constructor(container, opts) {
-            super(container, func_js.assign({
+            super(container, object.assign({
                 targets: [],
                 scroll: true,
             }, opts));
@@ -1722,117 +1967,99 @@
             _Selectable__detector.set(this, void 0);
             _Selectable__lastSelected.set(this, void 0);
             const domEl = this.ele[0];
-            //create selector
-            const selector = document.createElement("div");
-            selector.className = CLASS_SELECTOR;
+            let selector = document.createElement("div");
+            if (domEl instanceof SVGElement) {
+                selector = document.createElementNS('http://www.w3.org/2000/svg', "rect");
+            }
+            selector.setAttribute('class', CLASS_SELECTOR);
             selector.style.cssText = `
       position:absolute;
-      left:-9999px;
+      left:0;top:0;
     `;
             if (this.opts.class) {
-                selector.className += " " + this.opts.class;
+                selector.setAttribute('class', selector.getAttribute('class') + " " + this.opts.class);
             }
             else {
-                selector.style.cssText += "border:1px dashed #000;";
+                selector.style.cssText += "border:1px dashed #000;stroke:#000;";
             }
+            selector.style.display = 'none';
             domEl.appendChild(selector);
-            //create detector
             __classPrivateFieldSet(this, _Selectable__detector, newCollisionDetector(selector, this.opts.targets, {
                 container: domEl,
             }), "f");
             __classPrivateFieldGet(this, _Selectable_instances, "m", _Selectable_bindEvent).call(this, selector, domEl);
         }
-        /**
-         *  更新targets
-         */
         updateTargets() {
             __classPrivateFieldGet(this, _Selectable__detector, "f").update();
         }
-        /**
-         * @internal
-         */
         onOptionChanged() {
             this.updateTargets();
         }
     }
     _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap(), _Selectable_instances = new WeakSet(), _Selectable_bindEvent = function _Selectable_bindEvent(selector, con) {
         const that = this;
-        this.registerEvent(con, "mousedown", (e) => {
-            const t = e.target;
-            const onStart = that.opts.onStart;
-            const onSelect = that.opts.onSelect;
-            const onEnd = that.opts.onEnd;
-            const mode = that.opts.mode || "overlap";
-            const scroll = that.opts.scroll;
-            const scrollSpeed = that.opts.scrollSpeed || 10;
-            const filter = that.opts.filter;
-            const selectingClassAry = func_js.compact(func_js.split(that.opts.selectingClass, " "));
-            const selectedClassAry = func_js.compact(func_js.split(that.opts.selectedClass, " "));
-            //check filter
+        const opts = this.opts;
+        this.addPointerDown(con, ({ ev, target, currentRect, currentCStyle, currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
+            const onStart = opts.onStart;
+            const onSelect = opts.onSelect;
+            const onEnd = opts.onEnd;
+            const mode = opts.mode || "overlap";
+            const scroll = opts.scroll;
+            const scrollSpeed = opts.scrollSpeed || 10;
+            const filter = opts.filter;
+            const selectingClassAry = array.compact(string.split(opts.selectingClass, " "));
+            const selectedClassAry = array.compact(string.split(opts.selectedClass, " "));
             if (filter) {
-                if (func_js.isFunction(filter)) {
-                    if (filter(t))
+                if (is.isFunction(filter)) {
+                    if (filter(target))
                         return;
                 }
-                else if (func_js.some(con.querySelectorAll(filter), (el) => el.contains(t)))
+                else if (collection.some(con.querySelectorAll(filter), (el) => el.contains(target)))
                     return;
             }
+            const onPointerDown = opts.onPointerDown;
+            if (onPointerDown && onPointerDown(ev) === false)
+                return;
             let originPos = "";
-            //offset
-            const rect = con.getBoundingClientRect();
-            const conStyle = window.getComputedStyle(con);
-            const blw = parseFloat(conStyle.borderLeftWidth);
-            const btw = parseFloat(conStyle.borderTopWidth);
-            let hitPosX = e.offsetX + con.scrollLeft, hitPosY = e.offsetY + con.scrollTop;
-            if (t !== con) {
-                const offset = getOffset(t, con);
-                const style = window.getComputedStyle(t);
-                hitPosX = offset.x + e.offsetX + parseFloat(style.borderLeftWidth);
-                hitPosY = offset.y + e.offsetY + parseFloat(style.borderTopWidth);
-            }
+            let matrixInfo = getMatrixInfo(currentCStyle);
+            const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
+            let hitPosX = startxy.x;
+            let hitPosY = startxy.y;
             const style = selector.style;
             let selection = [];
             let lastSelection = [];
             let x1 = hitPosX, y1 = hitPosY;
-            let dragging = false;
             let timer = null;
             let toLeft = false;
             let toTop = false;
             let toRight = false;
             let toBottom = false;
-            const dragListener = (ev) => {
-                const newX = ev.clientX - rect.x + con.scrollLeft - blw;
-                const newY = ev.clientY - rect.y + con.scrollTop - btw;
-                const offsetx = newX - hitPosX;
-                const offsety = newY - hitPosY;
-                if (!dragging) {
-                    if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
-                        dragging = true;
-                        //update targets count & positions
-                        __classPrivateFieldGet(this, _Selectable__detector, "f").update();
-                        //detect container position
-                        const pos = window.getComputedStyle(con).position;
-                        if (pos === "static") {
-                            originPos = con.style.position;
-                            con.style.position = "relative";
-                        }
-                        //clear _lastSelected
-                        func_js.each(__classPrivateFieldGet(this, _Selectable__lastSelected, "f"), t => {
-                            t.classList.toggle(CLASS_SELECTED, false);
-                        });
-                        func_js.call(onStart, t);
-                    }
-                    else {
-                        ev.preventDefault();
-                        return false;
-                    }
-                }
-                //edge detect
+            onPointerStart(function (args) {
+                const { ev } = args;
+                __classPrivateFieldGet(that, _Selectable__detector, "f").update();
+                const pos = currentCStyle.position;
+                if (pos === "static") {
+                    originPos = con.style.position;
+                    con.style.position = "relative";
+                }
+                collection.each(__classPrivateFieldGet(that, _Selectable__lastSelected, "f"), t => {
+                    target.classList.toggle(CLASS_SELECTED, false);
+                });
+                style.display = 'block';
+                onStart && onStart({ selection: __classPrivateFieldGet(that, _Selectable__lastSelected, "f"), selectable: con }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, currentTarget, currentRect, currentCStyle, matrixInfo);
+                let pointX = currentXy.x;
+                let pointY = currentXy.y;
+                let offX = pointX - hitPosX;
+                let offY = pointY - hitPosY;
                 if (scroll) {
-                    const ltX = ev.clientX - rect.x;
-                    const ltY = ev.clientY - rect.y;
-                    const rbX = rect.x + rect.width - ev.clientX;
-                    const rbY = rect.y + rect.height - ev.clientY;
+                    const ltX = ev.clientX - currentRect.x;
+                    const ltY = ev.clientY - currentRect.y;
+                    const rbX = currentRect.x + currentRect.width - ev.clientX;
+                    const rbY = currentRect.y + currentRect.height - ev.clientY;
                     toLeft = ltX < EDGE_THRESHOLD;
                     toTop = ltY < EDGE_THRESHOLD;
                     toRight = rbX < EDGE_THRESHOLD;
@@ -1862,107 +2089,472 @@
                         }
                     }
                 }
-                let x = hitPosX, y = hitPosY, w = Math.abs(offsetx), h = Math.abs(offsety);
-                if (offsetx > 0 && offsety > 0) {
+                let x = hitPosX, y = hitPosY, w = Math.abs(offX), h = Math.abs(offY);
+                if (offX > 0 && offY > 0) {
                     x1 = hitPosX;
                     y1 = hitPosY;
                 }
-                else if (offsetx < 0 && offsety < 0) {
-                    x = x1 = newX;
-                    y = y1 = newY;
+                else if (offX < 0 && offY < 0) {
+                    x = x1 = pointX;
+                    y = y1 = pointY;
                 }
-                else if (offsetx < 0) {
-                    x = x1 = newX;
+                else if (offX < 0) {
+                    x = x1 = pointX;
                 }
-                else if (offsety < 0) {
-                    y = y1 = newY;
+                else if (offY < 0) {
+                    y = y1 = pointY;
                 }
-                style.left = x + "px";
-                style.top = y + "px";
                 style.width = w + "px";
                 style.height = h + "px";
-                //detect collision
+                style.transform = `translate3d(${x}px,${y}px,0)`;
                 if (mode === "overlap") {
                     selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getOverlaps(x1, y1, x1 + w, y1 + h);
                 }
                 else if (mode === "inclusion") {
                     selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getInclusions(x1, y1, x1 + w, y1 + h);
                 }
-                func_js.each(lastSelection, (t) => {
-                    if (!func_js.includes(selection, t)) {
+                collection.each(lastSelection, (t) => {
+                    if (!collection.includes(selection, t)) {
                         t.classList.toggle(CLASS_SELECTING, false);
-                        func_js.each(selectingClassAry, (cls) => {
+                        collection.each(selectingClassAry, (cls) => {
                             t.classList.toggle(cls, false);
                         });
                     }
                 });
-                func_js.each(selection, (t) => {
+                collection.each(selection, (t) => {
                     t.classList.toggle(CLASS_SELECTING, true);
-                    func_js.each(selectingClassAry, (cls) => {
+                    collection.each(selectingClassAry, (cls) => {
                         t.classList.toggle(cls, true);
                     });
                 });
                 const changed = lastSelection.length != selection.length;
                 lastSelection = selection;
-                if (changed)
-                    func_js.call(onSelect, selection);
-                ev.preventDefault();
-                return false;
-            };
-            const dragEndListener = (ev) => {
-                style.left = "-9999px";
-                style.width = style.height = "0px";
-                document.removeEventListener("mousemove", dragListener, false);
-                document.removeEventListener("mouseup", dragEndListener, false);
-                window.removeEventListener("blur", dragEndListener, false);
+                if (changed && onSelect)
+                    onSelect({ selection, selectable: con }, ev);
+            });
+            onPointerEnd((args) => {
+                const { ev, currentStyle } = args;
+                style.display = 'none';
                 if (scroll) {
                     if (timer) {
                         clearInterval(timer);
                         timer = null;
                     }
                 }
-                //restore container position
                 if (originPos) {
                     con.style.position = originPos;
                 }
-                func_js.each(selection, (t) => {
-                    func_js.each(selectingClassAry, (cls) => {
+                collection.each(selection, (t) => {
+                    collection.each(selectingClassAry, (cls) => {
                         t.classList.toggle(cls, false);
                     });
-                    func_js.each(selectedClassAry, (cls) => {
+                    collection.each(selectedClassAry, (cls) => {
                         t.classList.toggle(cls, true);
                     });
                     t.classList.toggle(CLASS_SELECTING, false);
                     t.classList.toggle(CLASS_SELECTED, true);
                 });
-                __classPrivateFieldSet(this, _Selectable__lastSelected, selection, "f");
-                if (dragging)
-                    func_js.call(onEnd, selection);
-            };
-            document.addEventListener("mousemove", dragListener, false);
-            document.addEventListener("mouseup", dragEndListener, false);
-            window.addEventListener("blur", dragEndListener, false);
-            e.preventDefault();
-            return false;
+                __classPrivateFieldSet(that, _Selectable__lastSelected, selection, "f");
+                if (onEnd)
+                    onEnd({ selection, selectable: con }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$1,
+            lockPage: true
         });
     };
-    /**
-     * Add a selector into the container
-     * @param container css selector or html element
-     * @param opts
-     * @returns
-     */
     function newSelectable(container, opts) {
         return new Selectable(container, opts);
     }
 
-    var version = "1.0.9";
+    var _Sortable_removeListenItems;
+    const SORTABLE_GROUPS = {};
+    const CLASS_SORTABLE_CONTAINER = "uii-sortable-container";
+    const CLASS_SORTABLE_GHOST = "uii-sortable-ghost";
+    const CLASS_SORTABLE_ACTIVE = "uii-sortable-active";
+    const ATTR_SORTABLE_ACTIVE = "uii-sortable-active";
+    const THRESHOLD = 2;
+    class Sortable extends Uii {
+        constructor(container, opts) {
+            super(container, object.merge({
+                move: {
+                    from: true,
+                    to: true,
+                },
+                scroll: true,
+                sort: true
+            }, opts));
+            _Sortable_removeListenItems.set(this, void 0);
+            if (collection.size(this.ele) > 1 && !this.opts.group) {
+                this.opts.group = "uii_sortable_" + utils.alphaId();
+            }
+            collection.each(this.ele, (el) => {
+                el.classList.add(CLASS_SORTABLE_CONTAINER);
+                el.style.position = "relative";
+                el.style.pointerEvents = "initial";
+                bindContainer(this.registerEvent.bind(this), el, this.opts);
+            });
+            if (this.opts.group) {
+                if (!SORTABLE_GROUPS[this.opts.group]) {
+                    SORTABLE_GROUPS[this.opts.group] = [];
+                }
+                SORTABLE_GROUPS[this.opts.group].push([this, this.ele]);
+            }
+        }
+        active(draggingItem, fromContainer, toContainers, toOpts) {
+            var _a;
+            const moveFrom = (_a = toOpts.move) === null || _a === void 0 ? void 0 : _a.from;
+            const acceptFn = is.isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+            const activableContainers = collection.flatMap(toContainers, (el) => {
+                const valid = acceptFn(draggingItem, fromContainer, el);
+                return valid ? el : [];
+            });
+            collection.each(activableContainers, (el) => {
+                el.setAttribute(ATTR_SORTABLE_ACTIVE, "1");
+                if (toOpts.activeClass) {
+                    collection.each(string.split(toOpts.activeClass || "", " "), (cls) => {
+                        el.classList.toggle(cls, true);
+                    });
+                }
+            });
+            __classPrivateFieldSet(this, _Sortable_removeListenItems, collection.map(activableContainers, (con) => {
+                const filteredItems = con.querySelectorAll(":scope > *");
+                return listenItems(toOpts, con, draggingItem, filteredItems);
+            }), "f");
+            toOpts.onActive &&
+                toOpts.onActive({ item: draggingItem, from: fromContainer });
+        }
+        deactive(draggingItem, fromContainer, toContainers, opts) {
+            collection.each(toContainers, (el) => {
+                el.removeAttribute(ATTR_SORTABLE_ACTIVE);
+                if (opts.activeClass) {
+                    collection.each(string.split(opts.activeClass || "", " "), (cls) => {
+                        el.classList.toggle(cls, false);
+                    });
+                }
+            });
+            collection.each(__classPrivateFieldGet(this, _Sortable_removeListenItems, "f"), (fn) => {
+                fn();
+            });
+            opts.onDeactive &&
+                opts.onDeactive({ item: draggingItem, from: fromContainer });
+        }
+        onOptionChanged() { }
+    }
+    _Sortable_removeListenItems = new WeakMap();
+    let DraggingData = null;
+    function bindContainer(registerEvent, container, opts) {
+        registerEvent(container, "mousedown", (e) => {
+            var _a;
+            let con = e.currentTarget;
+            let t = e.target;
+            if (t === con)
+                return;
+            const filterStr = opts.filter ? `:not(${opts.filter})` : "";
+            const filteredItems = con.querySelectorAll(":scope > *" + filterStr);
+            const handles = opts.handle
+                ? collection.map(filteredItems, (el) => el.querySelector(opts.handle || ""))
+                : collection.toArray(filteredItems);
+            const i = array.findIndex(handles, (handle) => handle.contains(t));
+            if (i < 0)
+                return;
+            const draggingItem = filteredItems[i];
+            const ghostContainer = opts.ghostContainer || con;
+            const onStart = opts.onStart;
+            const onEnd = opts.onEnd;
+            const ghostClass = opts.ghostClass;
+            const group = opts.group;
+            let moveTo = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.to;
+            const toCopy = moveTo === "copy";
+            const toOutFn = is.isFunction(moveTo) ? moveTo : () => !!moveTo;
+            const moveMode = toOutFn(draggingItem, con);
+            const sort = opts.sort;
+            opts.scroll;
+            opts.scrollSpeed || 10;
+            let hitPosX = e.offsetX + con.scrollLeft, hitPosY = e.offsetY + con.scrollTop;
+            saveCursor();
+            let dragging = false;
+            let ghostNode = null;
+            let removeListenItems = null;
+            const dragListener = (ev) => {
+                const newX = ev.clientX;
+                const newY = ev.clientY;
+                let offsetx = newX - hitPosX;
+                let offsety = newY - hitPosY;
+                if (!dragging) {
+                    if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
+                        dragging = true;
+                        ghostNode = draggingItem.cloneNode(true);
+                        ghostNode.style.opacity = "0.3";
+                        ghostNode.style.pointerEvents = "none";
+                        ghostNode.style.position = "fixed";
+                        ghostNode.style.zIndex = "999";
+                        ghostNode.style.left = draggingItem.style.left;
+                        ghostNode.style.top = draggingItem.style.top;
+                        if (ghostClass) {
+                            ghostNode.classList.add(...array.compact(string.split(ghostClass, " ")));
+                        }
+                        ghostNode.classList.toggle(CLASS_SORTABLE_GHOST, true);
+                        ghostContainer.appendChild(ghostNode);
+                        if (!toCopy)
+                            draggingItem.classList.toggle(CLASS_SORTABLE_ACTIVE, true);
+                        let copy = undefined;
+                        if (toCopy) {
+                            copy = draggingItem.cloneNode(true);
+                            copy.classList.toggle(CLASS_SORTABLE_ACTIVE, true);
+                        }
+                        DraggingData = {
+                            item: draggingItem,
+                            fromIndex: i,
+                            fromContainer: con,
+                            toContainer: con,
+                            moveTo: toCopy ? "copy" : moveMode,
+                            spill: opts.spill,
+                            copy
+                        };
+                        onStart && onStart({ item: draggingItem, from: con, index: i }, ev);
+                        lockPage();
+                        if (sort) {
+                            removeListenItems = listenItems(opts, con, toCopy ? draggingItem : copy, filteredItems, i);
+                        }
+                        if (moveMode && group && SORTABLE_GROUPS[group]) {
+                            collection.each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                                const filtered = collection.reject(ele, (el) => el === container);
+                                if (is.isEmpty(filtered))
+                                    return;
+                                sortable.active(toCopy ? draggingItem : copy, container, filtered, sortable.getOptions());
+                            });
+                        }
+                    }
+                    else {
+                        ev.preventDefault();
+                        return false;
+                    }
+                }
+                ghostNode.style.left = newX + "px";
+                ghostNode.style.top = newY + "px";
+                ev.preventDefault();
+                return false;
+            };
+            const dragEndListener = (ev) => {
+                var _a;
+                document.removeEventListener("mousemove", dragListener);
+                document.removeEventListener("mouseup", dragEndListener);
+                window.removeEventListener("blur", dragEndListener);
+                if (dragging) {
+                    unlockPage();
+                    restoreCursor();
+                    if (ghostNode)
+                        ghostContainer.removeChild(ghostNode);
+                    const toContainer = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.toContainer;
+                    DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item.classList.remove(CLASS_SORTABLE_ACTIVE);
+                    (_a = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy) === null || _a === void 0 ? void 0 : _a.classList.remove(CLASS_SORTABLE_ACTIVE);
+                    DraggingData = null;
+                    if (removeListenItems)
+                        removeListenItems();
+                    if (group && SORTABLE_GROUPS[group]) {
+                        collection.each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                            const filtered = collection.reject(ele, (el) => el === container);
+                            if (is.isEmpty(filtered))
+                                return;
+                            sortable.deactive(draggingItem, container, filtered, sortable.getOptions());
+                        });
+                    }
+                    onEnd && onEnd({ item: draggingItem, from: container, to: toContainer }, e);
+                }
+            };
+            document.addEventListener("mousemove", dragListener);
+            document.addEventListener("mouseup", dragEndListener);
+            window.addEventListener("blur", dragEndListener);
+            e.preventDefault();
+            return false;
+        });
+        registerEvent(container, "mouseleave", (e) => {
+            var _a, _b;
+            if (!DraggingData)
+                return;
+            opts.onLeave &&
+                opts.onLeave({
+                    item: DraggingData.item,
+                    from: DraggingData.fromContainer,
+                    to: container,
+                }, e);
+            if (DraggingData.moveTo !== 'copy') {
+                if (DraggingData.spill === 'remove') {
+                    (_a = DraggingData.item.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(DraggingData.item);
+                }
+                else if (DraggingData.spill === 'revert') {
+                    (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
+                    const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                    DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
+                }
+            }
+        });
+        registerEvent(container, "mouseenter", (e) => {
+            var _a;
+            if (!DraggingData)
+                return;
+            let draggingItem = DraggingData.item;
+            draggingItem.parentElement;
+            const cx = e.clientX;
+            const cy = e.clientY;
+            const rect = container.getBoundingClientRect();
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            const offsetX = cx - rect.x;
+            const offsetY = cy - rect.y;
+            let dir = "";
+            if (offsetX < centerX && offsetY < centerY) {
+                dir = "tl";
+            }
+            else if (offsetX > centerX && offsetY > centerY) {
+                dir = "br";
+            }
+            else if (offsetX < centerX && offsetY > centerY) {
+                dir = "bl";
+            }
+            else if (offsetX > centerX && offsetY < centerY) {
+                dir = "tr";
+            }
+            opts.onEnter &&
+                opts.onEnter({
+                    item: DraggingData.item,
+                    from: DraggingData.fromContainer,
+                    to: container,
+                    dir,
+                }, e);
+            DraggingData.toContainer = container;
+            if (container.getAttribute(ATTR_SORTABLE_ACTIVE)) {
+                let valid = true;
+                const moveFrom = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.from;
+                const acceptFn = is.isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+                valid = acceptFn(DraggingData.item, DraggingData.fromContainer, container);
+                if (!valid)
+                    return;
+                if (container.contains(draggingItem)) {
+                    return;
+                }
+                const moveTo = DraggingData.moveTo;
+                if (moveTo === "copy") {
+                    draggingItem = DraggingData.copy;
+                }
+                if (draggingItem.parentElement)
+                    draggingItem.parentElement.removeChild(draggingItem);
+                let toIndex = 0;
+                if (dir[0] === "t") {
+                    container.insertBefore(draggingItem, container.children[0]);
+                }
+                else {
+                    container.appendChild(draggingItem);
+                    toIndex = container.children.length - 1;
+                }
+                opts.onAdd &&
+                    opts.onAdd({
+                        item: draggingItem,
+                        from: DraggingData.fromContainer,
+                        to: container,
+                        index: toIndex,
+                    }, e);
+            }
+            else if (container === DraggingData.fromContainer) {
+                if (DraggingData.copy) {
+                    let parent = DraggingData.copy.parentElement;
+                    if (parent)
+                        parent.removeChild(DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy);
+                }
+                else {
+                    if (draggingItem.parentElement)
+                        draggingItem.parentElement.removeChild(draggingItem);
+                    if (dir[0] === "t") {
+                        container.insertBefore(draggingItem, container.children[0]);
+                    }
+                    else {
+                        container.appendChild(draggingItem);
+                        container.children.length - 1;
+                    }
+                }
+            }
+        });
+    }
+    function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
+        const listener = (e) => {
+            const ct = e.currentTarget;
+            if (ct.style.transform) {
+                return;
+            }
+            const toIndex = ct._uiik_i;
+            let draggingItem = (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy) || (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item);
+            if (toContainer === (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.fromContainer)) {
+                draggingItem = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item;
+            }
+            let parent = draggingItem.parentElement;
+            parent === null || parent === void 0 ? void 0 : parent.removeChild(draggingItem);
+            const sameContainer = parent === ct.parentElement;
+            if (!sameContainer) {
+                parent = ct.parentElement;
+            }
+            const oldIndex = fromIndex;
+            if (toIndex > fromIndex) {
+                fromIndex = toIndex;
+                parent === null || parent === void 0 ? void 0 : parent.insertBefore(draggingItem, ct.nextElementSibling);
+            }
+            else {
+                fromIndex = toIndex - 1;
+                parent === null || parent === void 0 ? void 0 : parent.insertBefore(draggingItem, ct);
+            }
+            opts.onChange &&
+                opts.onChange({
+                    item: draggingItem,
+                    from: DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.fromContainer,
+                    to: toContainer,
+                    fromIndex: oldIndex,
+                    toIndex: fromIndex,
+                }, e);
+            const toPos = { x: ct.offsetLeft, y: ct.offsetTop };
+            const fromPos = { x: draggingItem.offsetLeft, y: draggingItem.offsetTop };
+            ct.style.transform = `translate3d(${fromPos.x - toPos.x}px,${fromPos.y - toPos.y}px,0)`;
+            draggingItem.style.transform = `translate3d(${toPos.x - fromPos.x}px,${toPos.y - fromPos.y}px,0)`;
+            draggingItem.offsetHeight;
+            ct.offsetHeight;
+            draggingItem.style.transition = "transform .15s";
+            draggingItem.style.transform = `translate3d(0px,0px,0)`;
+            ct.style.transition = "transform .15s";
+            ct.style.transform = `translate3d(0px,0px,0)`;
+            setTimeout(() => {
+                ct.style.transition = "";
+                ct.style.transform = ``;
+                draggingItem.style.transition = "";
+                draggingItem.style.transform = ``;
+            }, 150);
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        collection.each(items, (item, i) => {
+            item.style.position = "relative";
+            if (item === draggingItem)
+                return;
+            item.style.pointerEvents = "initial";
+            item._uiik_i = i;
+            item.addEventListener("mouseenter", listener);
+        });
+        return () => {
+            collection.each(items, (item, i) => {
+                if (item === draggingItem)
+                    return;
+                item.removeEventListener("mouseenter", listener);
+            });
+        };
+    }
+    function newSortable(container, opts) {
+        return new Sortable(container, opts);
+    }
+
+    var version = "1.3.0-alpha";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"
     };
 
-    // welcome info
     const welcome = globalThis.welcome;
     if (!welcome) {
         const ssAry = [];
@@ -1986,26 +2578,52 @@
         newDraggable,
         newDroppable,
         newRotatable,
-        newSelectable
+        newSelectable,
+        newSortable
     };
 
     exports.CollisionDetector = CollisionDetector;
+    exports.DRAGGING_RULE = DRAGGING_RULE;
     exports.Draggable = Draggable;
     exports.Droppable = Droppable;
+    exports.EDGE_THRESHOLD = EDGE_THRESHOLD;
+    exports.ONE_ANG = ONE_ANG;
+    exports.ONE_RAD = ONE_RAD;
     exports.Resizable = Resizable;
     exports.Rotatable = Rotatable;
     exports.Selectable = Selectable;
+    exports.Sortable = Sortable;
     exports.Splittable = Splittable;
     exports.Uii = Uii;
+    exports.UiiTransformer = UiiTransformer;
     exports.VERSION = VERSION;
     exports["default"] = index;
+    exports.getBox = getBox;
+    exports.getCenterXy = getCenterXy;
+    exports.getMatrixInfo = getMatrixInfo;
+    exports.getPointInContainer = getPointInContainer;
+    exports.getPointOffset = getPointOffset;
+    exports.getRectInContainer = getRectInContainer;
+    exports.getStyleXy = getStyleXy;
+    exports.getTranslate = getTranslate;
+    exports.isSVGEl = isSVGEl;
+    exports.lockPage = lockPage;
+    exports.moveBy = moveBy;
+    exports.moveTo = moveTo;
     exports.newCollisionDetector = newCollisionDetector;
     exports.newDraggable = newDraggable;
     exports.newDroppable = newDroppable;
     exports.newResizable = newResizable;
     exports.newRotatable = newRotatable;
     exports.newSelectable = newSelectable;
+    exports.newSortable = newSortable;
     exports.newSplittable = newSplittable;
+    exports.restoreCursor = restoreCursor;
+    exports.rotateTo = rotateTo;
+    exports.saveCursor = saveCursor;
+    exports.setCursor = setCursor;
+    exports.unlockPage = unlockPage;
+    exports.wrapper = wrapper;
 
     Object.defineProperty(exports, '__esModule', { value: true });