uiik 1.0.0

package/index.esm.js

@@ -0,0 +1,1971 @@
+/**
+ * uiik v1.0.0
+ * A UI interaction kit includes draggable, splittable, rotatable, selectable, etc.
+ * https://github.com/holyhigh2/uii
+ * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
+ */
+import { isArrayLike, isString, map, isElement, toArray, each, assign, reject, includes, isArray, isEmpty, call, isNumber, isFunction, isDefined, isUndefined, closest, some, compact, split, test, flatMap } from '@holyhigh/func.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    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;
+}
+
+var _Uii_listeners;
+/**
+ * A Base class for all Uii classes
+ */
+class Uii {
+    constructor(ele, opts) {
+        this.enabled = true;
+        _Uii_listeners.set(this, []);
+        this.opts = opts || {};
+        if (isArrayLike(ele) && !isString(ele)) {
+            this.ele = map(ele, (el) => {
+                let e = isString(el) ? document.querySelector(el) : el;
+                if (!isElement(e)) {
+                    console.error('Invalid element "' + el + '"');
+                    return false;
+                }
+                return e;
+            });
+        }
+        else {
+            const el = isString(ele) ? document.querySelectorAll(ele) : ele;
+            if (!isElement(el) && !isArrayLike(el)) {
+                console.error('Invalid element "' + ele + '"');
+                return;
+            }
+            this.ele = isArrayLike(el) ? toArray(el) : [el];
+        }
+    }
+    /**
+     * 销毁uii对象，包括卸载事件、清空元素等
+     */
+    destroy() {
+        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
+     */
+    registerEvent(el, event, hook, useCapture = false) {
+        const wrapper = ((ev) => {
+            if (!this.enabled)
+                return;
+            hook(ev);
+        }).bind(this);
+        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
+     */
+    getOption(name) {
+        return name ? this.opts[name] : this.opts;
+    }
+    /**
+     * 一次设置多个选项值。触发`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) {
+    }
+}
+_Uii_listeners = new WeakMap();
+
+/* eslint-disable max-len */
+/**
+ * 工具包
+ * @author holyhigh2
+ */
+/**
+ * 获取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; }";
+function lockPage() {
+    document.styleSheets[0].insertRule(DRAGGING_RULE, 0);
+}
+function unlockPage() {
+    document.styleSheets[0].deleteRule(0);
+}
+
+var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
+const THRESHOLD$3 = 1;
+const CLASS_SPLITTABLE = "uii-splittable";
+const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
+const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
+const CLASS_SPLITTABLE_HANDLE_ACTIVE = "uii-splittable-handle-active";
+const CLASS_SPLITTABLE_V = "uii-splittable-v";
+const CLASS_SPLITTABLE_H = "uii-splittable-h";
+function getRootEl(el, root) {
+    let rs = el.parentNode;
+    while (rs && rs.parentNode !== root) {
+        rs = rs.parentNode;
+    }
+    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({
+            handleSize: 10,
+            minSize: 0,
+            sticky: false,
+            inside: false,
+            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;
+                }
+                else {
+                    dom2 = getRootEl(h, con);
+                    dom1 = dom2.previousElementSibling;
+                }
+                __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
+            });
+        }
+    }
+}
+_Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
+    let dir = 'h';
+    const child = container.children[0];
+    let lastY = child.offsetTop;
+    each(container.children, c => {
+        if (c.offsetTop != lastY) {
+            dir = 'v';
+            return false;
+        }
+    });
+    return dir;
+}, _Splittable_bindHandle = function _Splittable_bindHandle(minSizeAry, stickyAry, opts, dir, dom1, dom2, handle) {
+    var _a;
+    const handleSize = opts.handleSize;
+    if (!handle) {
+        handle = document.createElement('div');
+        let initPos = 0;
+        if (!opts.inside) {
+            initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
+        }
+        const sensorHCss = `width:${handleSize}px;height:100%;top:0;left:${initPos - handleSize / 2}px;z-index:9;`;
+        const sensorVCss = `height:${handleSize}px;width:100%;left:0;top:${initPos - handleSize / 2}px;z-index:9;`;
+        handle.style.cssText =
+            'position: absolute;' + (dir === 'v' ? sensorVCss : sensorHCss);
+        if (opts.inside) {
+            dom2.appendChild(handle);
+        }
+        (_a = dom2.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(handle, dom2);
+    }
+    handle.style.cursor = dir === 'v' ? 's-resize' : 'e-resize';
+    handle.dataset.cursor = handle.style.cursor;
+    handle.classList.add(CLASS_SPLITTABLE_HANDLE);
+    const minSize1 = minSizeAry[0];
+    const minSize2 = minSizeAry[1];
+    let sticky1 = stickyAry[0];
+    let sticky2 = stickyAry[1];
+    const onStart = opts.onStart;
+    const onSplit = opts.onSplit;
+    const onEnd = opts.onEnd;
+    const onSticky = opts.onSticky;
+    const onClone = opts.onClone;
+    const oneSideMode = opts.oneSideMode;
+    const updateStart = !oneSideMode || oneSideMode === 'start';
+    const updateEnd = !oneSideMode || oneSideMode === 'end';
+    handle.onmousedown = function (e) {
+        // 1. 获取原始高度/宽度;设置宽度/高度
+        let originSize = 0;
+        let originSize1 = 0;
+        const originPosX = e.clientX;
+        const originPosY = e.clientY;
+        let splitterSize = 1;
+        let blockSize = 0; // 分割区size
+        switch (dir) {
+            case 'v':
+                originSize = dom1.offsetHeight;
+                originSize1 = dom2.offsetHeight;
+                splitterSize = handle.offsetHeight;
+                break;
+            case 'h':
+                originSize = dom1.offsetWidth;
+                originSize1 = dom2.offsetWidth;
+                splitterSize = handle.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';
+        }
+        else if (blockSize - originSize - splitterSize < minSize2 / 2) {
+            sticked = 'end';
+        }
+        let dragging = false;
+        let bodyCursor = document.body.style.cursor;
+        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);
+                        }
+                    }
+                    lockPage();
+                    document.body.style.cursor = (handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '';
+                    call(onStart, originSize, originSize1);
+                }
+                else {
+                    ev.preventDefault();
+                    return false;
+                }
+            }
+            let doSticky = false;
+            ds1 = dir === 'v' ? originSize + offsety : originSize + offsetx;
+            if (ds1 < minSize1 / 2 && sticky1 && minSize1 > 0) {
+                if (sticked == 'none') {
+                    doSticky = true;
+                    sticked = 'start';
+                }
+                ds1 = 0;
+            }
+            else if (ds1 < minSize1) {
+                ds1 = minSize1;
+                if (sticked == 'start' && sticky1) {
+                    // 重置状态
+                    doSticky = true;
+                    sticked = 'none';
+                }
+            }
+            else if (blockSize - ds1 - splitterSize < minSize2 / 2 &&
+                sticky2) {
+                if (sticked == 'none') {
+                    doSticky = true;
+                    sticked = 'end';
+                }
+                ds1 = blockSize - splitterSize;
+            }
+            else if (blockSize - ds1 - splitterSize < minSize2) {
+                ds1 = blockSize - minSize2 - splitterSize;
+                if (sticked == 'end' && sticky2) {
+                    // 重置状态
+                    doSticky = true;
+                    sticked = 'none';
+                }
+            }
+            anotherSize = blockSize - ds1 - splitterSize;
+            if (ghostNode) {
+                if (dir === 'v') {
+                    ghostNode.style.top = startPos + ds1 - handleSize / 2 + 'px';
+                }
+                else {
+                    ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
+                }
+            }
+            else {
+                const updateProp = dir === 'v' ? 'height' : 'width';
+                if (updateStart) {
+                    dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
+                }
+                if (updateEnd) {
+                    dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
+                }
+                if (doSticky) {
+                    call(onSticky, ds1, anotherSize, sticked);
+                }
+                //update handle
+                if (dir === 'v') {
+                    handle.style.top = dom2.offsetTop - handleSize / 2 + 'px';
+                }
+                else {
+                    handle.style.left = dom2.offsetLeft - handleSize / 2 + 'px';
+                }
+            }
+            call(onSplit, ds1, anotherSize);
+            ev.preventDefault();
+            return false;
+        };
+        const dragEndListener = (ev) => {
+            var _a;
+            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;
+                }
+                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.removeChild(ghostNode);
+                }
+                unlockPage();
+                document.body.style.cursor = bodyCursor;
+                call(onEnd, originSize, originSize1);
+            }
+        };
+        document.addEventListener('mousemove', dragListener, false);
+        document.addEventListener('mouseup', dragEndListener, false);
+        window.addEventListener('blur', dragEndListener, false);
+        e.preventDefault();
+        return false;
+    };
+};
+/**
+ * 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 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
+ */
+class Resizable extends Uii {
+    constructor(els, opts) {
+        super(els, assign({
+            handleSize: 8,
+            minSize: 50,
+            dir: ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'],
+            ghost: false,
+            offset: 0
+        }, opts));
+        each(this.ele, (el) => {
+            initHandle$1(el, this.opts);
+        });
+    }
+}
+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;
+        let bodyCursor = document.body.style.cursor;
+        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();
+                    document.body.style.cursor = 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;
+                    }
+                    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) {
+                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;
+            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.removeChild(ghostNode);
+                panelStyle.left = ghostNode.style.left;
+                panelStyle.top = ghostNode.style.top;
+                panelStyle.width = ghostNode.style.width;
+                panelStyle.height = ghostNode.style.height;
+            }
+            handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
+            unlockPage();
+            document.body.style.cursor = bodyCursor;
+            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;`;
+                switch (dir) {
+                    case 'ne':
+                        css += `top:${-offset}px;right:${-offset}px;`;
+                        break;
+                    case 'nw':
+                        css += `top:${-offset}px;left:${-offset}px;`;
+                        break;
+                    case 'se':
+                        css += `bottom:${-offset}px;right:${-offset}px;`;
+                        break;
+                    case 'sw':
+                        css += `bottom:${-offset}px;left:${-offset}px;`;
+                }
+        }
+        bindHandle$1(handle, dir, panel, opts);
+        handle.style.cssText = `position: absolute;cursor: ${dir}-resize;` + css;
+        handle.dataset.cursor = `${dir}-resize`;
+        panel.appendChild(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;
+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,
+            threshold: 0,
+            ghost: false,
+            direction: "",
+            scroll: true,
+            snapOptions: {
+                tolerance: 10,
+            }
+        }, opts));
+        _Draggable_handleMap.set(this, new WeakMap());
+        if (this.opts.handle) {
+            each(this.ele, (el) => {
+                const h = el.querySelector(this.opts.handle);
+                if (!h) {
+                    console.error('No handle found "' + this.opts.handle + '"');
+                    return false;
+                }
+                __classPrivateFieldGet(this, _Draggable_handleMap, "f").set(el, h);
+            });
+        }
+        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';
+                }
+            }
+        });
+    }
+    /**
+     * @internal
+     */
+    onOptionChanged(opts) {
+        const droppable = opts.droppable;
+        if (!isFunction(droppable)) {
+            if (isUndefined(droppable)) {
+                opts.droppable = () => { };
+            }
+            else if (isString(droppable)) {
+                opts.droppable = () => document.querySelectorAll(droppable);
+            }
+            else if (isArrayLike(droppable)) {
+                opts.droppable = () => droppable;
+            }
+            else if (isElement(droppable)) {
+                opts.droppable = () => [droppable];
+            }
+        }
+        if (opts.snap) {
+            opts.snapTargets = map(document.querySelectorAll(opts.snap), (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,
+                };
+            });
+        }
+    }
+}
+_Draggable_handleMap = new WeakMap();
+function bindEvent(registerEvent, el, opts, handleMap) {
+    registerEvent(el, "mousedown", (e) => {
+        // 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;
+        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);
+                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;
+        const snappable = opts.snapTargets;
+        const snapTolerance = opts.snapOptions.tolerance;
+        const onSnap = opts.onSnap;
+        let lastSnapDirY = "", lastSnapDirX = "";
+        let lastSnapping = "";
+        let parentOffsetX = 0, parentOffsetY = 0;
+        if (snapOn) {
+            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;
+        let minY;
+        let maxX;
+        let maxY;
+        if (inContainer) {
+            minX = 0;
+            minY = 0;
+            maxX = container.scrollWidth - originW;
+            maxY = container.scrollHeight - originH;
+        }
+        //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;
+            }
+            else {
+                cursorX = l;
+            }
+            if (isString(t)) {
+                cursorY = parseFloat(t) / 100 * dragDom.offsetWidth;
+            }
+            else {
+                cursorY = t;
+            }
+        }
+        const style = dragDom.style;
+        let dragging = false;
+        let copyNode;
+        let timer = null;
+        let toLeft = false;
+        let toTop = false;
+        let toRight = false;
+        let toBottom = false;
+        let bodyCursor = document.body.style.cursor;
+        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);
+                        }
+                    }
+                    //apply classes
+                    dragDom.classList.add(...compact(split(classes, ' ')));
+                    dragDom.style.zIndex = zIndex;
+                    dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
+                    call(onStart, dragDom, ev);
+                    lockPage();
+                    if (isDefined(opts.cursor)) {
+                        document.body.style.cursor = opts.cursor.active || 'move';
+                    }
+                    //notify
+                    const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
+                    dragDom.dispatchEvent(customEv);
+                }
+                else {
+                    ev.preventDefault();
+                    return false;
+                }
+            }
+            //edge detect
+            if (scroll) {
+                const ltX = ev.clientX - rect.x;
+                const ltY = ev.clientY - rect.y;
+                const rbX = rect.x + rect.width - ev.clientX;
+                const rbY = rect.y + rect.height - ev.clientY;
+                toLeft = ltX < EDGE_THRESHOLD;
+                toTop = ltY < EDGE_THRESHOLD;
+                toRight = rbX < EDGE_THRESHOLD;
+                toBottom = rbY < EDGE_THRESHOLD;
+                if (toLeft || toTop
+                    ||
+                        toRight || toBottom) {
+                    if (!timer) {
+                        timer = setInterval(() => {
+                            if (toLeft) {
+                                container.scrollLeft -= scrollSpeed;
+                            }
+                            else if (toRight) {
+                                container.scrollLeft += scrollSpeed;
+                            }
+                            if (toTop) {
+                                container.scrollTop -= scrollSpeed;
+                            }
+                            else if (toBottom) {
+                                container.scrollTop += scrollSpeed;
+                            }
+                        }, 20);
+                    }
+                }
+                else {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
+                    }
+                }
+            }
+            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 (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";
+                        }
+                        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 (snapX || snapY) {
+                    if (snapX) {
+                        x = snapX - parentOffsetX;
+                    }
+                    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;
+                    }
+                    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 === "v") {
+                        copyNode.style.left = `${x}px`;
+                    }
+                    else {
+                        copyNode.style.left = `${x}px`;
+                        copyNode.style.top = `${y}px`;
+                    }
+                }
+                else {
+                    if (direction === "v") {
+                        style.top = `${y}px`;
+                    }
+                    else if (direction === "v") {
+                        style.left = `${x}px`;
+                    }
+                    else {
+                        style.left = `${x}px`;
+                        style.top = `${y}px`;
+                    }
+                }
+            }
+            ev.preventDefault();
+            return false;
+        };
+        const dragEndListener = (ev) => {
+            var _a;
+            document.removeEventListener("mousemove", dragListener);
+            document.removeEventListener("mouseup", dragEndListener);
+            window.removeEventListener("blur", dragEndListener);
+            if (scroll) {
+                if (timer) {
+                    clearInterval(timer);
+                    timer = null;
+                }
+            }
+            //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();
+                document.body.style.cursor = bodyCursor;
+                if (ghost) {
+                    (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(copyNode);
+                    if (moveToGhost !== false) {
+                        style.left = copyNode.style.left;
+                        style.top = copyNode.style.top;
+                    }
+                }
+            }
+        };
+        document.addEventListener("mousemove", dragListener);
+        document.addEventListener("mouseup", dragEndListener);
+        window.addEventListener("blur", dragEndListener);
+        e.preventDefault();
+        return false;
+    });
+}
+/**
+ * create a draggable pattern for one or more elements with opts
+ * @param els selector string / html element
+ * @param opts
+ * @returns Draggable instance
+ */
+function newDraggable(els, opts) {
+    return new Draggable(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) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.hoverClass) {
+                each(split(opts.hoverClass, ' '), cls => {
+                    el.classList.toggle(cls, true);
+                });
+            }
+            if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver;
+            }
+            call(opts.onEnter, el, e);
+        });
+        //dragleave
+        this.registerEvent(el, "mouseleave", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.hoverClass) {
+                each(split(opts.hoverClass, ' '), cls => {
+                    el.classList.toggle(cls, false);
+                });
+            }
+            if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '';
+            }
+            call(opts.onLeave, el, e);
+        });
+        //dragover
+        this.registerEvent(el, "mousemove", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.onDragOver) {
+                opts.onDragOver(el, e);
+            }
+        });
+        //drop
+        this.registerEvent(el, "mouseup", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.hoverClass) {
+                each(split(opts.hoverClass, ' '), cls => {
+                    el.classList.toggle(cls, false);
+                });
+            }
+            call(opts.onDrop, el, 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);
+        }
+        else if (isFunction(this.opts.accepts)) {
+            valid = this.opts.accepts(this.ele, target);
+        }
+        if (!valid)
+            return;
+        __classPrivateFieldSet(this, _Droppable_active, target, "f");
+        if (this.opts.activeClass) {
+            each(this.ele, el => {
+                each(split(this.opts.activeClass, ' '), cls => {
+                    el.classList.toggle(cls, true);
+                });
+            });
+        }
+        call(this.opts.onActive, target, this.ele);
+        //bind events
+        each(this.ele, (el) => {
+            el.classList.toggle(CLASS_DROPPABLE, true);
+            el.style.pointerEvents = 'initial';
+            this.bindEvent(el, this.opts);
+        });
+    }
+    /**
+     * @internal
+     */
+    deactive(target) {
+        if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+            return;
+        __classPrivateFieldSet(this, _Droppable_active, null, "f");
+        if (this.opts.activeClass) {
+            each(this.ele, el => {
+                each(split(this.opts.activeClass, ' '), cls => {
+                    el.classList.toggle(cls, false);
+                });
+            });
+        }
+        call(this.opts.onDeactive, target, this.ele);
+        //unbind events
+        this.destroy();
+    }
+}
+_Droppable_active = new WeakMap();
+//uii-drag active
+document.addEventListener("uii-dragactive", (e) => {
+    each(Droppables, dpb => {
+        dpb.active(e.target);
+    });
+});
+document.addEventListener("uii-dragdeactive", (e) => {
+    each(Droppables, dpb => {
+        dpb.deactive(e.target);
+    });
+});
+/**
+ * Enable els to response to draggable objects
+ * @param els selector string / html element
+ * @param opts
+ * @returns
+ */
+function newDroppable(els, opts) {
+    return new Droppable(els, opts);
+}
+
+/* eslint-disable max-len */
+const ONE_DEG = 180 / Math.PI;
+const THRESHOLD$1 = 2;
+const 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);
+        });
+    }
+}
+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);
+    el.classList.toggle(CLASS_ROTATABLE, true);
+    el.appendChild(handle);
+}
+function bindHandle(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;
+        let bodyCursor = document.body.style.cursor;
+        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)) {
+                        document.body.style.cursor = ((_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();
+                document.body.style.cursor = bodyCursor;
+                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;
+    };
+}
+/**
+ * Make els rotatable
+ * @param els selector string / html element
+ * @param opts
+ * @returns
+ */
+function newRotatable(els, opts) {
+    return new Rotatable(els, opts);
+}
+
+var _CollisionDetector__targets;
+class CollisionDetector {
+    constructor(el, targets, opts) {
+        _CollisionDetector__targets.set(this, void 0);
+        __classPrivateFieldSet(this, _CollisionDetector__targets, targets, "f");
+        this.opts = {
+            container: document.body
+        };
+        this.opts = assign(this.opts, opts);
+        const domEl = isString(el) ? document.querySelector(el) : el;
+        if (!domEl) {
+            console.error('Invalid selector "' + el + '"');
+            return;
+        }
+        const ele = domEl;
+        this.el = domEl;
+        //el data
+        const offset = getOffset(ele, this.opts.container);
+        const rect = { x: offset.x, y: offset.y, width: ele.offsetWidth, height: ele.offsetHeight };
+        this.elData = {
+            x1: rect.x,
+            y1: rect.y,
+            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"))) {
+            targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f").call(this);
+        }
+        else if (isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
+        }
+        else if (isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
+        }
+        else {
+            targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f");
+        }
+        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 };
+            return {
+                x1: rect.x,
+                y1: rect.y,
+                x2: rect.x + rect.width,
+                y2: rect.y + rect.height,
+                el: t
+            };
+        });
+    }
+    getOverlaps(x1, y1, x2, y2) {
+        let elData = this.elData;
+        if (x1 && x2 && y1 && y2) {
+            elData = {
+                x1,
+                y1,
+                x2,
+                y2,
+            };
+        }
+        let overlaps = flatMap(this.targetsData, (td, i) => {
+            if (elData.x2 < td.x1 || elData.x1 > td.x2 || elData.y2 < td.y1 || elData.y1 > td.y2)
+                return [];
+            return td.el;
+        });
+        return overlaps;
+    }
+    getInclusions(x1, y1, x2, y2) {
+        let elData = this.elData;
+        if (x1 && x2 && y1 && y2) {
+            elData = {
+                x1,
+                y1,
+                x2,
+                y2,
+            };
+        }
+        let contains = flatMap(this.targetsData, (td, i) => {
+            if (elData.x2 >= td.x2 && elData.x1 <= td.x1 && elData.y2 >= td.y2 && elData.y1 <= td.y1)
+                return td.el;
+            return [];
+        });
+        return contains;
+    }
+}
+_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
+ */
+class Selectable extends Uii {
+    constructor(container, opts) {
+        super(container, assign({
+            targets: [],
+            scroll: true,
+        }, opts));
+        _Selectable_instances.add(this);
+        _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;
+        selector.style.cssText = `
+      position:absolute;
+      left:-9999px;
+    `;
+        if (this.opts.class) {
+            selector.className += " " + this.opts.class;
+        }
+        else {
+            selector.style.cssText += "border:1px dashed #000;";
+        }
+        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
+        if (filter) {
+            if (isFunction(filter)) {
+                if (filter(t))
+                    return;
+            }
+            else if (some(con.querySelectorAll(filter), (el) => el.contains(t)))
+                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);
+        }
+        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
+            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) {
+                                con.scrollLeft -= scrollSpeed;
+                            }
+                            else if (toRight) {
+                                con.scrollLeft += scrollSpeed;
+                            }
+                            if (toTop) {
+                                con.scrollTop -= scrollSpeed;
+                            }
+                            else if (toBottom) {
+                                con.scrollTop += scrollSpeed;
+                            }
+                        }, 20);
+                    }
+                }
+                else {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
+                    }
+                }
+            }
+            let x = hitPosX, y = hitPosY, w = Math.abs(offsetx), h = Math.abs(offsety);
+            if (offsetx > 0 && offsety > 0) {
+                x1 = hitPosX;
+                y1 = hitPosY;
+            }
+            else if (offsetx < 0 && offsety < 0) {
+                x = x1 = newX;
+                y = y1 = newY;
+            }
+            else if (offsetx < 0) {
+                x = x1 = newX;
+            }
+            else if (offsety < 0) {
+                y = y1 = newY;
+            }
+            style.left = x + "px";
+            style.top = y + "px";
+            style.width = w + "px";
+            style.height = h + "px";
+            //detect collision
+            if (mode === "overlap") {
+                selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getOverlaps(x1, y1, x1 + w, y1 + h);
+            }
+            else if (mode === "inclusion") {
+                selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getInclusions(x1, y1, x1 + w, y1 + h);
+            }
+            each(lastSelection, (t) => {
+                if (!includes(selection, t)) {
+                    t.classList.toggle(CLASS_SELECTING, false);
+                    each(selectingClassAry, (cls) => {
+                        t.classList.toggle(cls, false);
+                    });
+                }
+            });
+            each(selection, (t) => {
+                t.classList.toggle(CLASS_SELECTING, true);
+                each(selectingClassAry, (cls) => {
+                    t.classList.toggle(cls, true);
+                });
+            });
+            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 (scroll) {
+                if (timer) {
+                    clearInterval(timer);
+                    timer = null;
+                }
+            }
+            //restore container position
+            if (originPos) {
+                con.style.position = originPos;
+            }
+            each(selection, (t) => {
+                each(selectingClassAry, (cls) => {
+                    t.classList.toggle(cls, false);
+                });
+                each(selectedClassAry, (cls) => {
+                    t.classList.toggle(cls, true);
+                });
+                t.classList.toggle(CLASS_SELECTING, false);
+                t.classList.toggle(CLASS_SELECTED, true);
+            });
+            __classPrivateFieldSet(this, _Selectable__lastSelected, selection, "f");
+            if (dragging)
+                call(onEnd, selection);
+        };
+        document.addEventListener("mousemove", dragListener, false);
+        document.addEventListener("mouseup", dragEndListener, false);
+        window.addEventListener("blur", dragEndListener, false);
+        e.preventDefault();
+        return false;
+    });
+};
+/**
+ * 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.0";
+var repository = {
+	type: "git",
+	url: "https://github.com/holyhigh2/uii"
+};
+
+// welcome info
+const welcome = globalThis.top
+    ? globalThis.top.welcome
+    : globalThis.welcome;
+if (!welcome) {
+    const ssAry = [];
+    ['102,227,255', '59,208,251', '67,180,255'].forEach((v, i) => {
+        const cu = 'background:rgb(' + v + ');';
+        if (i < 2) {
+            ssAry[i] = ssAry[5 - 1 - i] = cu;
+        }
+        else {
+            ssAry[i] = 'color:#fff;' + cu;
+        }
+    });
+    console.info(`%c %c %c Uii - UI Interactions | v${version} %c %c `, ...ssAry, `💎 ${repository.url}`);
+    if (globalThis.top) {
+        globalThis.top.welcome = true;
+    }
+    else {
+        globalThis.welcome = true;
+    }
+}
+const VERSION = version;
+var index = {
+    VERSION: version,
+    newSplittable,
+    newResizable,
+    newDraggable,
+    newDroppable,
+    newRotatable,
+    newSelectable
+};
+
+export { CollisionDetector, Draggable, Droppable, Resizable, Rotatable, Selectable, Splittable, Uii, VERSION, index as default, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSplittable };