uiik 1.0.9 → 1.3.0-alpha

package/index.esm.js

@@ -1,10 +1,16 @@
 /**
- * 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
  */
-import { isArrayLike, isString, map, isElement, toArray, each, assign, find, reject, includes, isArray, isEmpty, call, isNumber, isFunction, isDefined, isUndefined, some, closest, compact, split, test, flatMap } from '@holyhigh/func.js';
+import { isDefined, isArrayLike, isString, isElement, isEmpty, isArray, isNumber, isFunction, isBoolean, isUndefined } from 'myfx/is';
+import { find, map, toArray, each, reject, includes, some, flatMap, size } from 'myfx/collection';
+import { get, assign, merge } from 'myfx/object';
+import { split, test } from 'myfx/string';
+import { compact, findIndex } from 'myfx/array';
+import 'myfx';
+import { alphaId } from 'myfx/utils';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -32,12 +38,337 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
     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 = isDefined(cx) && 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 = find(document.styleSheets, (ss) => !ss.href);
+    if (!sheet) {
+        document.head.appendChild(document.createElement("style"));
+    }
+    return sheet || 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;
@@ -54,6 +385,9 @@ class Uii {
             });
         }
         else {
+            if (isString(ele)) {
+                this.eleString = ele;
+            }
             const el = isString(ele) ? document.querySelectorAll(ele) : ele;
             if (!isElement(el) && !isArrayLike(el)) {
                 console.error('Invalid element "' + ele + '"');
@@ -62,22 +396,84 @@ class Uii {
             this.ele = isArrayLike(el) ? toArray(el) : [el];
         }
     }
-    /**
-     * 销毁uii对象，包括卸载事件、清空元素等
-     */
     destroy() {
-        each(__classPrivateFieldGet(this, _Uii_listeners, "f"), ev => {
+        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 = !isEmpty(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)
@@ -87,107 +483,32 @@ class Uii {
         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) {
         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 = find(document.styleSheets, ss => !ss.href);
-    if (!sheet) {
-        document.head.appendChild(document.createElement('style'));
-    }
-    return sheet || 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";
@@ -201,17 +522,6 @@ function getRootEl(el, root) {
     }
     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, assign({
@@ -222,58 +532,58 @@ class Splittable extends Uii {
             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 = reject(con.children, c => {
-            if (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 = map(children, (c, i) => {
-            if (isArray(this.opts.minSize)) {
-                return this.opts.minSize[i] || 0;
-            }
-            else {
-                return this.opts.minSize;
-            }
-        });
-        const stickyAry = map(children, (c, i) => {
-            if (isArray(this.opts.sticky)) {
-                return this.opts.sticky[i] || false;
-            }
-            else {
-                return this.opts.sticky;
-            }
-        });
-        if (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 {
-            each(handleDoms, (h, i) => {
-                const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
-                let dom1, dom2;
-                if (isRoot) {
-                    dom1 = h.previousElementSibling;
-                    dom2 = h.nextElementSibling;
+        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 = reject(con.children, c => {
+                if (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 = map(children, (c, i) => {
+                if (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 = map(children, (c, i) => {
+                if (isArray(this.opts.sticky)) {
+                    return this.opts.sticky[i] || false;
+                }
+                else {
+                    return this.opts.sticky;
+                }
+            });
+            if (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 {
+                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) {
@@ -320,34 +630,29 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
     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';
@@ -355,43 +660,31 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
         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);
-                            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) || '');
-                    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;
@@ -402,7 +695,6 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
             else if (ds1 < minSize1) {
                 ds1 = minSize1;
                 if (sticked == 'start' && sticky1) {
-                    // 重置状态
                     doSticky = true;
                     sticked = 'none';
                 }
@@ -418,7 +710,6 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
             else if (blockSize - ds1 - splitterSize < minSize2) {
                 ds1 = blockSize - minSize2 - splitterSize;
                 if (sticked == 'end' && sticky2) {
-                    // 重置状态
                     doSticky = true;
                     sticked = 'none';
                 }
@@ -430,6 +721,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                 }
                 else {
                     ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
+                    console.log(ghostNode.style.left);
                 }
             }
             else {
@@ -441,395 +733,499 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                     dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
                 }
                 if (doSticky) {
-                    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';
                 }
             }
-            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();
-                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, 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));
         each(this.ele, (el) => {
-            initHandle$1(el, this.opts);
+            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 (isArray(opts.minSize)) {
-            minWidth = opts.minSize[0];
-            minHeight = opts.minSize[1];
-        }
-        else if (isNumber(opts.minSize)) {
-            minWidth = opts.minSize;
-            minHeight = opts.minSize;
-        }
-        if (isArray(opts.maxSize)) {
-            maxWidth = opts.maxSize[0];
-            maxHeight = opts.maxSize[1];
-        }
-        else if (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 (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);
-                            call(onClone, ghostNode, e);
-                        }
-                        style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
-                    }
-                    lockPage();
-                    setCursor(handle.dataset.cursor || '');
-                    call(onStart, originW, originH);
-                }
-                else {
-                    ev.preventDefault();
-                    return false;
-                }
-            }
-            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;
+    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 (isArray(opts.minSize)) {
+                minWidth = opts.minSize[0];
+                minHeight = opts.minSize[1];
+            }
+            else if (isNumber(opts.minSize)) {
+                minWidth = opts.minSize;
+                minHeight = opts.minSize;
+            }
+            if (isArray(opts.maxSize)) {
+                maxWidth = opts.maxSize[0];
+                maxHeight = opts.maxSize[1];
+            }
+            else if (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 (isFunction(ghost)) {
+                        ghostNode = ghost(panel);
                     }
                     else {
-                        style.width = h * aspectRatio + 'px';
-                        style.height = h + 'px';
+                        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);
+                        transformer = wrapper(ghostNode);
+                        onClone && onClone({ clone: ghostNode }, ev);
+                    }
+                    style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
                 }
-            }
-            else {
-                if (changeW) {
-                    style.width = w + 'px';
+                else {
+                    transformer = wrapper(panel);
                 }
-                if (changeH) {
-                    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 = 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;
                 }
-            }
-            if (changeY) {
-                style.top = y + 'px';
-            }
-            if (changeX) {
-                style.left = x + 'px';
-            }
-            currentW = w;
-            currentH = h;
-            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();
-                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;
-    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;`;
+                k1 =
+                    (currentVertex[1].y - refPoint.y) /
+                        (currentVertex[1].x - refPoint.x);
+                style.transition = "none";
+                originalTransformOrigin = style.transformOrigin;
+                if (toTransformOrigin) {
+                    style.transformOrigin = toTransformOrigin;
+                }
+                else {
+                    style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.y}px`;
+                }
+                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 'nw':
-                        css += `top:${-offset}px;left:${-offset}px;`;
+                    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":
+                        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 = 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 (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 (isFunction(handleStr)) {
+            handles = handleStr(panel);
+        }
+        if (!handles) {
+            console.error('Can not find handles with "' + panel.outerHTML + '"');
+            return;
+        }
+        handles = isArrayLike(handles) ? handles : [handles];
+        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, assign({
-            container: false,
+            containment: false,
+            watch: true,
             threshold: 0,
             ghost: false,
             direction: "",
@@ -838,7 +1234,9 @@ class Draggable extends Uii {
                 tolerance: 10,
             }
         }, opts));
+        _Draggable_instances.add(this);
         _Draggable_handleMap.set(this, new WeakMap());
+        _Draggable_container.set(this, null);
         if (this.opts.handle) {
             each(this.ele, (el) => {
                 const h = el.querySelector(this.opts.handle);
@@ -850,465 +1248,428 @@ class Draggable extends Uii {
             });
         }
         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);
         }
-        each(this.ele, (el) => {
-            bindEvent(this.registerEvent.bind(this), el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
-            if (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 (isDefined(this.opts.cursor)) {
-                el.style.cursor = this.opts.cursor.default || 'move';
-                if (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 (isBoolean(this.opts.containment)) {
+                __classPrivateFieldSet(this, _Draggable_container, isEmpty(this.ele) ? null : this.ele[0].parentElement, "f");
             }
-        });
-    }
-    /**
-     * @internal
-     */
-    onOptionChanged(opts) {
-        const droppable = opts.droppable;
-        if (!isFunction(droppable)) {
-            if (isUndefined(droppable)) {
-                opts.droppable = () => { };
+            else if (isString(this.opts.containment)) {
+                __classPrivateFieldSet(this, _Draggable_container, document.querySelector(this.opts.containment), "f");
             }
-            else if (isString(droppable)) {
-                opts.droppable = () => document.querySelectorAll(droppable);
+            else if (isElement(this.opts.containment)) {
+                __classPrivateFieldSet(this, _Draggable_container, this.opts.containment, "f");
             }
-            else if (isArrayLike(droppable)) {
-                opts.droppable = () => droppable;
+        }
+        if (this.opts.watch && this.eleString) {
+            let con;
+            if (isString(this.opts.watch)) {
+                con = document.querySelector(this.opts.watch);
             }
-            else if (isElement(droppable)) {
-                opts.droppable = () => [droppable];
+            else {
+                con = 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 (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;
-            each(DRAGGER_GROUPS[group], el => {
-                const z = parseInt(window.getComputedStyle(el).zIndex) || 0;
-                if (z > i)
-                    i = z;
+        else {
+            each(this.ele, (el) => {
+                this.bindEvent(el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
             });
-            zIndex = i + 1;
-        }
-        const scroll = opts.scroll;
-        const scrollSpeed = opts.scrollSpeed || 10;
-        let gridX, gridY;
-        const grid = opts.grid;
-        if (isArray(grid)) {
-            gridX = grid[0];
-            gridY = grid[1];
         }
-        else if (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 = map(document.querySelectorAll(snapOn), (el) => {
-                let offX = 0, offY = 0;
-                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,
-                };
-            });
-            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 (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 = find(draggableList, el => el.contains(t));
+            if (!findRs)
+                return;
+            const dragDom = findRs;
+            let handle = handleMap.get(dragDom);
+            if (handle && !handle.contains(t)) {
+                return;
             }
-            if (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 (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;
+                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 (isArray(grid)) {
+                gridX = grid[0];
+                gridY = grid[1];
+            }
+            else if (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 = 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 (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(...compact(split(ghostClass, ' ')));
-                        }
-                        copyNode.classList.add(...compact(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 (isFunction(ghost)) {
+                        copyNode = ghost(dragDom);
                     }
-                    //apply classes
-                    dragDom.classList.add(...compact(split(classes, ' ')));
-                    if (!copyNode)
-                        dragDom.style.zIndex = zIndex + '';
-                    dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
-                    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";
+                    }
+                    copyNode.style.zIndex = zIndex + '';
+                    if (ghostClass) {
+                        copyNode.classList.add(...compact(split(ghostClass, ' ')));
                     }
-                    //notify
-                    const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
-                    dragDom.dispatchEvent(customEv);
+                    copyNode.classList.add(...compact(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 {
-                    ev.preventDefault();
-                    return false;
+                    transformer = wrapper(dragDom);
                 }
-            }
-            //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;
+                dragDom.classList.add(...compact(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);
+                        }
+                    }
+                    else {
+                        if (timer) {
+                            clearInterval(timer);
+                            timer = null;
+                        }
+                    }
+                }
+                let x = newX - offsetPointX + 0;
+                let y = newY - offsetPointY + 0;
+                if (isNumber(gridX) && isNumber(gridY)) {
+                    x = ((x / gridX) >> 0) * gridX;
+                    y = ((y / gridY) >> 0) * gridY;
+                }
+                if (inContainer) {
+                    if (originOffX + x < minX) {
+                        x = -0;
+                    }
+                    if (originOffY + y < minY) {
+                        y = -0;
+                    }
+                    if (originOffX + x > maxX) {
+                        x = maxX - originOffX;
+                    }
+                    if (originOffY + y > maxY) {
+                        y = maxY - originOffY;
+                    }
+                }
+                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") {
+                        each(snappable, (data) => {
+                            if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
+                                snapY = data.y1;
+                                snapDirY = "t2t";
                             }
-                            else if (toRight) {
-                                container.scrollLeft += scrollSpeed;
+                            else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
+                                snapY = data.y2;
+                                snapDirY = "t2b";
                             }
-                            if (toTop) {
-                                container.scrollTop -= scrollSpeed;
+                            else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
+                                snapY = data.y1 - originH;
+                                snapDirY = "b2t";
                             }
-                            else if (toBottom) {
-                                container.scrollTop += scrollSpeed;
+                            else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
+                                snapY = data.y2 - originH;
+                                snapDirY = "b2b";
                             }
-                        }, 20);
+                            if (snapY) {
+                                lastSnapDirY = snapDirY;
+                                targetY = data.el;
+                                return false;
+                            }
+                        });
                     }
-                }
-                else {
-                    if (timer) {
-                        clearInterval(timer);
-                        timer = null;
+                    if (!direction || direction === "h") {
+                        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;
+                            }
+                        });
                     }
-                }
-            }
-            let x = newX - cursorX;
-            let y = newY - cursorY;
-            //grid
-            if (isNumber(gridX) && 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") {
-                    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";
+                    if (snapX || snapY) {
+                        if (snapX) {
+                            x = snapX;
                         }
                         if (snapY) {
-                            lastSnapDirY = snapDirY;
-                            targetY = data.el;
-                            return false;
-                        }
-                    });
-                }
-                if (!direction || direction === "h") {
-                    each(snappable, (data) => {
-                        if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
-                            //left parallel
-                            snapX = data.x1;
-                            snapDirX = "l2l";
+                            y = snapY;
                         }
-                        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;
+                        if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
+                            setTimeout(() => {
+                                onSnap({
+                                    el: copyNode || dragDom,
+                                    targetH: targetX,
+                                    targetV: targetY,
+                                    dirH: snapDirX,
+                                    dirV: snapDirY,
+                                }, ev);
+                            }, 0);
+                            lastSnapping = lastSnapDirX + "" + lastSnapDirY;
                         }
-                    });
-                }
-                if (snapX || snapY) {
-                    if (snapX) {
-                        x = snapX - parentOffsetX;
+                        emitSnap = true;
                     }
-                    if (snapY) {
-                        y = snapY - parentOffsetY;
-                    }
-                    if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
-                        setTimeout(() => {
-                            //emit after relocate
-                            onSnap(copyNode || dragDom, targetX, targetY, snapDirX, snapDirY);
-                        }, 0);
-                        lastSnapping = lastSnapDirX + "" + lastSnapDirY;
+                    else {
+                        lastSnapDirX = lastSnapDirY = lastSnapping = "";
                     }
-                    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`;
-                    }
-                    else if (direction === "h") {
-                        copyNode.style.left = `${x}px`;
-                    }
-                    else {
-                        copyNode.style.left = `${x}px`;
-                        copyNode.style.top = `${y}px`;
+                if (onDrag && !emitSnap) {
+                    if (onDrag({
+                        draggable: dragDom,
+                        ox: offX,
+                        oy: offY,
+                        x: x,
+                        y: y
+                    }, ev) === false) {
+                        canDrag = false;
+                        endX = x;
+                        endY = y;
                     }
                 }
-                else {
+                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;
+                }
+            });
+            onPointerEnd((args) => {
+                var _a, _b;
+                const { ev, currentStyle } = args;
+                if (scroll) {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
                     }
                 }
-            }
-            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;
+                dragDom.classList.remove(...compact(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;
                 }
-            }
-            //restore classes
-            dragDom.classList.remove(...compact(split(classes, ' ')));
-            dragDom.style.zIndex = originalZIndex;
-            dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
-            let moveToGhost = true;
-            if (dragging) {
-                moveToGhost = call(onEnd, dragDom, ev);
-            }
-            //notify
-            const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
-            dragDom.dispatchEvent(customEv);
-            if (dragging) {
-                unlockPage();
-                restoreCursor();
+                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 (!isFunction(droppable)) {
+            if (isUndefined(droppable)) {
+                opts.droppable = () => { };
             }
-        };
-        document.addEventListener("mousemove", dragListener);
-        document.addEventListener("mouseup", dragEndListener);
-        window.addEventListener("blur", dragEndListener);
-        e.preventDefault();
-        return false;
-    });
+            else if (isString(droppable)) {
+                opts.droppable = () => document.querySelectorAll(droppable);
+            }
+            else if (isArrayLike(droppable)) {
+                opts.droppable = () => droppable;
+            }
+            else if (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) {
+    each(draggableList, (el) => {
+        if (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 (isDefined(this.opts.cursor)) {
+            el.style.cursor = this.opts.cursor.default || 'move';
+            if (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);
 }
@@ -1316,121 +1677,98 @@ function newDraggable(els, opts) {
 var _Droppable_active;
 const Droppables = [];
 const CLASS_DROPPABLE = "uii-droppable";
-/**
- * 用于表示一个或多个可响应拖动元素的定义
- * > 可用CSS接口
- * - .uii-droppable
- * @public
- */
 class Droppable extends Uii {
     constructor(el, opts) {
         super(el, 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) {
                 each(split(opts.hoverClass, ' '), cls => {
-                    el.classList.toggle(cls, true);
+                    droppable.classList.toggle(cls, true);
                 });
             }
             if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
                 setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
             }
-            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) {
                 each(split(opts.hoverClass, ' '), cls => {
-                    el.classList.toggle(cls, false);
+                    droppable.classList.toggle(cls, false);
                 });
             }
             if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
                 setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
             }
-            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) {
                 each(split(opts.hoverClass, ' '), cls => {
-                    el.classList.toggle(cls, false);
+                    droppable.classList.toggle(cls, false);
                 });
             }
-            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 (isString(this.opts.accepts)) {
-            valid = !!target.dataset.dropType && test(this.opts.accepts, target.dataset.dropType);
+        const opts = this.opts;
+        if (isString(opts.accepts)) {
+            valid = !!target.dataset.dropType && test(opts.accepts, target.dataset.dropType);
         }
-        else if (isFunction(this.opts.accepts)) {
-            valid = this.opts.accepts(this.ele, target);
+        else if (isFunction(opts.accepts)) {
+            valid = opts.accepts(this.ele, target);
         }
         if (!valid)
             return;
         __classPrivateFieldSet(this, _Droppable_active, target, "f");
-        if (this.opts.activeClass) {
+        if (opts.activeClass) {
             each(this.ele, el => {
-                each(split(this.opts.activeClass, ' '), cls => {
+                each(split(opts.activeClass || '', ' '), cls => {
                     el.classList.toggle(cls, true);
                 });
             });
         }
-        call(this.opts.onActive, target, this.ele);
-        //bind events
+        opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
         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) {
+        const opts = this.opts;
+        if (opts.activeClass) {
             each(this.ele, el => {
-                each(split(this.opts.activeClass, ' '), cls => {
+                each(split(opts.activeClass || '', ' '), cls => {
                     el.classList.toggle(cls, false);
                 });
             });
         }
-        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) => {
     each(Droppables, dpb => {
         dpb.active(e.target);
@@ -1441,142 +1779,83 @@ document.addEventListener("uii-dragdeactive", (e) => {
         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);
         each(this.ele, (el) => {
-            initHandle(el, this.opts);
+            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 (isString(handleStr)) {
+        handles = document.querySelectorAll(handleStr);
+    }
+    else if (isFunction(handleStr)) {
+        handles = handleStr(el);
+    }
+    if (!handles) {
+        console.error('Can not find handles with "' + el.outerHTML + '"');
+        return;
+    }
+    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);
-                    call(onStart, deg);
-                    lockPage();
-                    if (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;
-            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);
-                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);
 }
@@ -1597,8 +1876,7 @@ class CollisionDetector {
         }
         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,
@@ -1606,12 +1884,8 @@ class CollisionDetector {
             x2: rect.x + rect.width,
             y2: rect.y + rect.height,
         };
-        //targets data
         this.update();
     }
-    /**
-     * update targets data if them changed
-     */
     update() {
         let targets;
         if (isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
@@ -1619,6 +1893,7 @@ class CollisionDetector {
         }
         else if (isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
             targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
+            targets = reject(targets, t => t === this.el);
         }
         else if (isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
             targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
@@ -1629,15 +1904,12 @@ class CollisionDetector {
         this.targetsData = flatMap(targets, t => {
             if (!t)
                 return [];
-            if (!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
             };
         });
@@ -1678,36 +1950,15 @@ class CollisionDetector {
     }
 }
 _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, assign({
@@ -1718,117 +1969,99 @@ class Selectable extends Uii {
         _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 = compact(split(that.opts.selectingClass, " "));
-        const selectedClassAry = compact(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 = compact(split(opts.selectingClass, " "));
+        const selectedClassAry = compact(split(opts.selectedClass, " "));
         if (filter) {
             if (isFunction(filter)) {
-                if (filter(t))
+                if (filter(target))
                     return;
             }
-            else if (some(con.querySelectorAll(filter), (el) => el.contains(t)))
+            else if (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
-                    each(__classPrivateFieldGet(this, _Selectable__lastSelected, "f"), t => {
-                        t.classList.toggle(CLASS_SELECTED, false);
-                    });
-                    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";
+            }
+            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;
@@ -1858,26 +2091,24 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
                     }
                 }
             }
-            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);
             }
@@ -1900,24 +2131,18 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
             });
             const changed = lastSelection.length != selection.length;
             lastSelection = selection;
-            if (changed)
-                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;
             }
@@ -1931,34 +2156,407 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
                 t.classList.toggle(CLASS_SELECTING, false);
                 t.classList.toggle(CLASS_SELECTED, true);
             });
-            __classPrivateFieldSet(this, _Selectable__lastSelected, selection, "f");
-            if (dragging)
-                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, merge({
+            move: {
+                from: true,
+                to: true,
+            },
+            scroll: true,
+            sort: true
+        }, opts));
+        _Sortable_removeListenItems.set(this, void 0);
+        if (size(this.ele) > 1 && !this.opts.group) {
+            this.opts.group = "uii_sortable_" + alphaId();
+        }
+        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 = isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+        const activableContainers = flatMap(toContainers, (el) => {
+            const valid = acceptFn(draggingItem, fromContainer, el);
+            return valid ? el : [];
+        });
+        each(activableContainers, (el) => {
+            el.setAttribute(ATTR_SORTABLE_ACTIVE, "1");
+            if (toOpts.activeClass) {
+                each(split(toOpts.activeClass || "", " "), (cls) => {
+                    el.classList.toggle(cls, true);
+                });
+            }
+        });
+        __classPrivateFieldSet(this, _Sortable_removeListenItems, 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) {
+        each(toContainers, (el) => {
+            el.removeAttribute(ATTR_SORTABLE_ACTIVE);
+            if (opts.activeClass) {
+                each(split(opts.activeClass || "", " "), (cls) => {
+                    el.classList.toggle(cls, false);
+                });
+            }
+        });
+        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
+            ? map(filteredItems, (el) => el.querySelector(opts.handle || ""))
+            : toArray(filteredItems);
+        const i = 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 = 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(...compact(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]) {
+                        each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                            const filtered = reject(ele, (el) => el === container);
+                            if (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]) {
+                    each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                        const filtered = reject(ele, (el) => el === container);
+                        if (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 = 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();
+    };
+    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 () => {
+        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 = [];
@@ -1982,7 +2580,8 @@ var index = {
     newDraggable,
     newDroppable,
     newRotatable,
-    newSelectable
+    newSelectable,
+    newSortable
 };
 
-export { CollisionDetector, Draggable, Droppable, Resizable, Rotatable, Selectable, Splittable, Uii, VERSION, index as default, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSplittable };
+export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, Uii, UiiTransformer, VERSION, index as default, getBox, getCenterXy, getMatrixInfo, getPointInContainer, getPointOffset, getRectInContainer, getStyleXy, getTranslate, isSVGEl, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, restoreCursor, rotateTo, saveCursor, setCursor, unlockPage, wrapper };