uiik 1.0.0

package/index.js

@@ -0,0 +1,1995 @@
+/**
+ * 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
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@holyhigh/func.js')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@holyhigh/func.js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uii = {}, global.func_js));
+})(this, (function (exports, func_js) { 'use strict';
+
+    /******************************************************************************
+    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 (func_js.isArrayLike(ele) && !func_js.isString(ele)) {
+                this.ele = func_js.map(ele, (el) => {
+                    let e = func_js.isString(el) ? document.querySelector(el) : el;
+                    if (!func_js.isElement(e)) {
+                        console.error('Invalid element "' + el + '"');
+                        return false;
+                    }
+                    return e;
+                });
+            }
+            else {
+                const el = func_js.isString(ele) ? document.querySelectorAll(ele) : ele;
+                if (!func_js.isElement(el) && !func_js.isArrayLike(el)) {
+                    console.error('Invalid element "' + ele + '"');
+                    return;
+                }
+                this.ele = func_js.isArrayLike(el) ? func_js.toArray(el) : [el];
+            }
+        }
+        /**
+         * 销毁uii对象，包括卸载事件、清空元素等
+         */
+        destroy() {
+            func_js.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) {
+            func_js.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, func_js.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 = func_js.reject(con.children, c => {
+                if (func_js.includes(handleDoms, c))
+                    return true;
+                return false;
+            });
+            const dir = __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_checkDirection).call(this, con);
+            con.classList.toggle(dir === 'v' ? CLASS_SPLITTABLE_V : CLASS_SPLITTABLE_H, true);
+            const minSizeAry = func_js.map(children, (c, i) => {
+                if (func_js.isArray(this.opts.minSize)) {
+                    return this.opts.minSize[i] || 0;
+                }
+                else {
+                    return this.opts.minSize;
+                }
+            });
+            const stickyAry = func_js.map(children, (c, i) => {
+                if (func_js.isArray(this.opts.sticky)) {
+                    return this.opts.sticky[i] || false;
+                }
+                else {
+                    return this.opts.sticky;
+                }
+            });
+            if (func_js.isEmpty(handleDoms)) {
+                const len = children.length - 1;
+                for (let i = 0; i < len; i++) {
+                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, children[i], children[i + 1]);
+                }
+            }
+            else {
+                func_js.each(handleDoms, (h, i) => {
+                    const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
+                    let dom1, dom2;
+                    if (isRoot) {
+                        dom1 = h.previousElementSibling;
+                        dom2 = h.nextElementSibling;
+                    }
+                    else {
+                        dom2 = getRootEl(h, con);
+                        dom1 = dom2.previousElementSibling;
+                    }
+                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
+                });
+            }
+        }
+    }
+    _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
+        let dir = 'h';
+        const child = container.children[0];
+        let lastY = child.offsetTop;
+        func_js.each(container.children, c => {
+            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);
+                                func_js.call(onClone, ghostNode, e);
+                            }
+                        }
+                        lockPage();
+                        document.body.style.cursor = (handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '';
+                        func_js.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) {
+                        func_js.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';
+                    }
+                }
+                func_js.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;
+                    func_js.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, func_js.assign({
+                handleSize: 8,
+                minSize: 50,
+                dir: ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'],
+                ghost: false,
+                offset: 0
+            }, opts));
+            func_js.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 (func_js.isArray(opts.minSize)) {
+                minWidth = opts.minSize[0];
+                minHeight = opts.minSize[1];
+            }
+            else if (func_js.isNumber(opts.minSize)) {
+                minWidth = opts.minSize;
+                minHeight = opts.minSize;
+            }
+            if (func_js.isArray(opts.maxSize)) {
+                maxWidth = opts.maxSize[0];
+                maxHeight = opts.maxSize[1];
+            }
+            else if (func_js.isNumber(opts.maxSize)) {
+                maxWidth = opts.maxSize;
+                maxHeight = opts.maxSize;
+            }
+            const minX = maxWidth ? originX - maxWidth + originW : null;
+            const minY = maxHeight ? originY - maxHeight + originH : null;
+            const maxX = minWidth ? originX + originW - minWidth : null;
+            const maxY = minHeight ? originY + originH - minHeight : null;
+            //ghost
+            const ghost = opts.ghost;
+            const ghostClass = opts.ghostClass;
+            let ghostNode = null;
+            //aspectRatio
+            const aspectRatio = opts.aspectRatio;
+            const panelStyle = panel.style;
+            let style = panelStyle;
+            let currentW = originW;
+            let currentH = originH;
+            let dragging = false;
+            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 (func_js.isFunction(ghost)) {
+                                ghostNode = ghost();
+                            }
+                            else {
+                                ghostNode = panel.cloneNode(true);
+                                ghostNode.style.opacity = '0.3';
+                                ghostNode.style.pointerEvents = 'none';
+                            }
+                            if (ghostNode) {
+                                if (ghostClass) {
+                                    ghostNode.className =
+                                        ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
+                                }
+                                (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
+                                func_js.call(onClone, ghostNode, e);
+                            }
+                            style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
+                        }
+                        lockPage();
+                        document.body.style.cursor = handle.dataset.cursor || '';
+                        func_js.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;
+                func_js.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;
+                func_js.call(onEnd, currentW, currentH);
+            };
+            document.addEventListener('mousemove', dragListener, false);
+            document.addEventListener('mouseup', dragEndListener, false);
+            window.addEventListener('blur', dragEndListener, false);
+            e.preventDefault();
+            return false;
+        };
+    }
+    function initHandle$1(panel, opts) {
+        // create handles
+        const handleSize = opts.handleSize;
+        const offset = opts.offset || 0;
+        func_js.each(opts.dir || ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'], (dir) => {
+            const handle = document.createElement('div');
+            handle.classList.add(CLASS_RESIZABLE_HANDLE, CLASS_RESIZABLE_HANDLE_DIR + dir);
+            handle.setAttribute('name', 'handle');
+            let css = '';
+            switch (dir) {
+                case 'n':
+                    css = `left:0px;top:${-offset}px;width:100%;height:${handleSize}px;`;
+                    break;
+                case 's':
+                    css = `left:0px;bottom:${-offset}px;width:100%;height:${handleSize}px;`;
+                    break;
+                case 'w':
+                    css = `top:0px;left:${-offset}px;width:${handleSize}px;height:100%;`;
+                    break;
+                case 'e':
+                    css = `top:0px;right:${-offset}px;width:${handleSize}px;height:100%;`;
+                    break;
+                default:
+                    css = `width:${handleSize}px;height:${handleSize}px;z-index:9;`;
+                    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, func_js.assign({
+                container: false,
+                threshold: 0,
+                ghost: false,
+                direction: "",
+                scroll: true,
+                snapOptions: {
+                    tolerance: 10,
+                }
+            }, opts));
+            _Draggable_handleMap.set(this, new WeakMap());
+            if (this.opts.handle) {
+                func_js.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);
+            }
+            func_js.each(this.ele, (el) => {
+                bindEvent(this.registerEvent.bind(this), el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+                if (func_js.isDefined(this.opts.type))
+                    el.dataset.dropType = this.opts.type;
+                el.classList.toggle(CLASS_DRAGGABLE, true);
+                const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
+                ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
+                if (func_js.isDefined(this.opts.cursor)) {
+                    el.style.cursor = this.opts.cursor.default || 'move';
+                    if (func_js.isDefined(this.opts.cursor.over)) {
+                        el.dataset.cursorOver = this.opts.cursor.over;
+                        el.dataset.cursorActive = this.opts.cursor.active || 'move';
+                    }
+                }
+            });
+        }
+        /**
+         * @internal
+         */
+        onOptionChanged(opts) {
+            const droppable = opts.droppable;
+            if (!func_js.isFunction(droppable)) {
+                if (func_js.isUndefined(droppable)) {
+                    opts.droppable = () => { };
+                }
+                else if (func_js.isString(droppable)) {
+                    opts.droppable = () => document.querySelectorAll(droppable);
+                }
+                else if (func_js.isArrayLike(droppable)) {
+                    opts.droppable = () => droppable;
+                }
+                else if (func_js.isElement(droppable)) {
+                    opts.droppable = () => [droppable];
+                }
+            }
+            if (opts.snap) {
+                opts.snapTargets = func_js.map(document.querySelectorAll(opts.snap), (el) => {
+                    let offX = 0, offY = 0;
+                    func_js.closest(el, (el) => {
+                        offX += el.offsetLeft;
+                        offY += el.offsetTop;
+                        return false;
+                    }, "offsetParent");
+                    return {
+                        x1: offX,
+                        y1: offY,
+                        x2: offX + el.offsetWidth,
+                        y2: offY + el.offsetHeight,
+                        el: el,
+                    };
+                });
+            }
+        }
+    }
+    _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 (func_js.some(el.querySelectorAll(filter), ele => ele.contains(t)))
+                    return;
+            }
+            const computedStyle = window.getComputedStyle(dragDom);
+            const container = dragDom.offsetParent || document.body;
+            const inContainer = opts.container;
+            const threshold = opts.threshold;
+            const ghost = opts.ghost;
+            const ghostClass = opts.ghostClass;
+            const direction = opts.direction;
+            const onStart = opts.onStart;
+            const onDrag = opts.onDrag;
+            const onEnd = opts.onEnd;
+            const onClone = opts.onClone;
+            const originalZIndex = computedStyle.zIndex;
+            let zIndex = opts.zIndex || originalZIndex;
+            const classes = opts.classes;
+            const group = opts.group;
+            if (group) {
+                let i = -1;
+                func_js.each(DRAGGER_GROUPS[group], el => {
+                    const z = parseInt(window.getComputedStyle(el).zIndex);
+                    if (z > i)
+                        i = z;
+                });
+                zIndex = i + 1;
+            }
+            const scroll = opts.scroll;
+            const scrollSpeed = opts.scrollSpeed || 10;
+            let gridX, gridY;
+            const grid = opts.grid;
+            if (func_js.isArray(grid)) {
+                gridX = grid[0];
+                gridY = grid[1];
+            }
+            else if (func_js.isNumber(grid)) {
+                gridX = gridY = grid;
+            }
+            const snapOn = opts.snap;
+            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) {
+                func_js.closest(dragDom, (el, times) => {
+                    if (times > 0) {
+                        parentOffsetX += el.offsetLeft;
+                        parentOffsetY += el.offsetTop;
+                    }
+                    return false;
+                }, "offsetParent");
+            }
+            const originW = dragDom.offsetWidth + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
+            const originH = dragDom.offsetHeight + parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth);
+            // boundary
+            let minX;
+            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 (func_js.isString(l)) {
+                    cursorX = parseFloat(l) / 100 * dragDom.offsetWidth;
+                }
+                else {
+                    cursorX = l;
+                }
+                if (func_js.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 (func_js.isFunction(ghost)) {
+                                copyNode = ghost(dragDom);
+                            }
+                            else {
+                                copyNode = dragDom.cloneNode(true);
+                                copyNode.style.opacity = "0.3";
+                                copyNode.style.pointerEvents = "none";
+                                copyNode.style.position = "absolute";
+                            }
+                            copyNode.style.left = dragDom.style.left;
+                            copyNode.style.top = dragDom.style.top;
+                            copyNode.style.zIndex = zIndex;
+                            if (ghostClass) {
+                                copyNode.classList.add(...func_js.compact(func_js.split(ghostClass, ' ')));
+                            }
+                            copyNode.classList.add(...func_js.compact(func_js.split(classes, ' ')));
+                            copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
+                            (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
+                            if (onClone) {
+                                onClone(copyNode, ev);
+                            }
+                        }
+                        //apply classes
+                        dragDom.classList.add(...func_js.compact(func_js.split(classes, ' ')));
+                        dragDom.style.zIndex = zIndex;
+                        dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
+                        func_js.call(onStart, dragDom, ev);
+                        lockPage();
+                        if (func_js.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 (func_js.isNumber(gridX) && func_js.isNumber(gridY)) {
+                    x = ((x / gridX) >> 0) * gridX;
+                    y = ((y / gridY) >> 0) * gridY;
+                }
+                if (inContainer) {
+                    if (x < minX)
+                        x = minX;
+                    if (y < minY)
+                        y = minY;
+                    if (x > maxX)
+                        x = maxX;
+                    if (y > maxY)
+                        y = maxY;
+                }
+                let canDrag = true;
+                let emitSnap = false;
+                if (snapOn) {
+                    const currPageX1 = parentOffsetX + x;
+                    const currPageY1 = parentOffsetY + y;
+                    const currPageX2 = currPageX1 + originW;
+                    const currPageY2 = currPageY1 + originH;
+                    //check snappable
+                    let snapX = NaN, snapY = NaN;
+                    let targetX, targetY;
+                    let snapDirX, snapDirY;
+                    if (!direction || direction === "v") {
+                        func_js.each(snappable, (data) => {
+                            if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
+                                //top parallel
+                                snapY = data.y1;
+                                snapDirY = "t2t";
+                            }
+                            else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
+                                //b2t
+                                snapY = data.y2;
+                                snapDirY = "t2b";
+                            }
+                            else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
+                                //t2b
+                                snapY = data.y1 - originH;
+                                snapDirY = "b2t";
+                            }
+                            else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
+                                //bottom parallel
+                                snapY = data.y2 - originH;
+                                snapDirY = "b2b";
+                            }
+                            if (snapY) {
+                                lastSnapDirY = snapDirY;
+                                targetY = data.el;
+                                return false;
+                            }
+                        });
+                    }
+                    if (!direction || direction === "h") {
+                        func_js.each(snappable, (data) => {
+                            if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
+                                //left parallel
+                                snapX = data.x1;
+                                snapDirX = "l2l";
+                            }
+                            else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
+                                //r2l
+                                snapX = data.x2;
+                                snapDirX = "l2r";
+                            }
+                            else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
+                                //l2r
+                                snapX = data.x1 - originW;
+                                snapDirX = "r2l";
+                            }
+                            else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
+                                //right parallel
+                                snapX = data.x2 - originW;
+                                snapDirX = "r2r";
+                            }
+                            if (snapX) {
+                                lastSnapDirX = snapDirX;
+                                targetX = data.el;
+                                return false;
+                            }
+                        });
+                    }
+                    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(...func_js.compact(func_js.split(classes, ' ')));
+                dragDom.style.zIndex = originalZIndex;
+                dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
+                let moveToGhost = true;
+                if (dragging) {
+                    moveToGhost = func_js.call(onEnd, dragDom, ev);
+                }
+                //notify
+                const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
+                dragDom.dispatchEvent(customEv);
+                if (dragging) {
+                    unlockPage();
+                    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, func_js.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) {
+                    func_js.each(func_js.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;
+                }
+                func_js.call(opts.onEnter, el, e);
+            });
+            //dragleave
+            this.registerEvent(el, "mouseleave", (e) => {
+                if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                    return;
+                if (opts.hoverClass) {
+                    func_js.each(func_js.split(opts.hoverClass, ' '), cls => {
+                        el.classList.toggle(cls, false);
+                    });
+                }
+                if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                    document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '';
+                }
+                func_js.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) {
+                    func_js.each(func_js.split(opts.hoverClass, ' '), cls => {
+                        el.classList.toggle(cls, false);
+                    });
+                }
+                func_js.call(opts.onDrop, el, e);
+            });
+        }
+        /**
+         * @internal
+         */
+        active(target) {
+            let valid = true;
+            //check accepts
+            if (func_js.isString(this.opts.accepts)) {
+                valid = !!target.dataset.dropType && func_js.test(this.opts.accepts, target.dataset.dropType);
+            }
+            else if (func_js.isFunction(this.opts.accepts)) {
+                valid = this.opts.accepts(this.ele, target);
+            }
+            if (!valid)
+                return;
+            __classPrivateFieldSet(this, _Droppable_active, target, "f");
+            if (this.opts.activeClass) {
+                func_js.each(this.ele, el => {
+                    func_js.each(func_js.split(this.opts.activeClass, ' '), cls => {
+                        el.classList.toggle(cls, true);
+                    });
+                });
+            }
+            func_js.call(this.opts.onActive, target, this.ele);
+            //bind events
+            func_js.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) {
+                func_js.each(this.ele, el => {
+                    func_js.each(func_js.split(this.opts.activeClass, ' '), cls => {
+                        el.classList.toggle(cls, false);
+                    });
+                });
+            }
+            func_js.call(this.opts.onDeactive, target, this.ele);
+            //unbind events
+            this.destroy();
+        }
+    }
+    _Droppable_active = new WeakMap();
+    //uii-drag active
+    document.addEventListener("uii-dragactive", (e) => {
+        func_js.each(Droppables, dpb => {
+            dpb.active(e.target);
+        });
+    });
+    document.addEventListener("uii-dragdeactive", (e) => {
+        func_js.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);
+            func_js.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);
+                        func_js.call(onStart, deg);
+                        lockPage();
+                        if (func_js.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;
+                func_js.call(onRotate, deg);
+                style.transform = style.transform.replace(/rotateZ\(.*?\)/, '') + ' rotateZ(' + deg + 'deg)';
+                ev.preventDefault();
+                return false;
+            };
+            const dragEndListener = (ev) => {
+                document.removeEventListener('mousemove', dragListener, false);
+                document.removeEventListener('mouseup', dragEndListener, false);
+                window.removeEventListener('blur', dragEndListener, false);
+                if (dragging) {
+                    unlockPage();
+                    document.body.style.cursor = bodyCursor;
+                    el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
+                    func_js.call(onEnd, deg);
+                }
+            };
+            document.addEventListener('mousemove', dragListener, false);
+            document.addEventListener('mouseup', dragEndListener, false);
+            window.addEventListener('blur', dragEndListener, false);
+            e.preventDefault();
+            return false;
+        };
+    }
+    /**
+     * 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 = func_js.assign(this.opts, opts);
+            const domEl = func_js.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 (func_js.isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+                targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f").call(this);
+            }
+            else if (func_js.isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+                targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
+            }
+            else if (func_js.isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+                targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
+            }
+            else {
+                targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f");
+            }
+            this.targetsData = func_js.flatMap(targets, t => {
+                if (!t)
+                    return [];
+                if (!func_js.isElement(t))
+                    return [];
+                const offset = getOffset(t, this.opts.container);
+                const rect = { x: offset.x, y: offset.y, width: t.offsetWidth, height: t.offsetHeight };
+                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 = func_js.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 = func_js.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, func_js.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 = func_js.compact(func_js.split(that.opts.selectingClass, " "));
+            const selectedClassAry = func_js.compact(func_js.split(that.opts.selectedClass, " "));
+            //check filter
+            if (filter) {
+                if (func_js.isFunction(filter)) {
+                    if (filter(t))
+                        return;
+                }
+                else if (func_js.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
+                        func_js.each(__classPrivateFieldGet(this, _Selectable__lastSelected, "f"), t => {
+                            t.classList.toggle(CLASS_SELECTED, false);
+                        });
+                        func_js.call(onStart, t);
+                    }
+                    else {
+                        ev.preventDefault();
+                        return false;
+                    }
+                }
+                //edge detect
+                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);
+                }
+                func_js.each(lastSelection, (t) => {
+                    if (!func_js.includes(selection, t)) {
+                        t.classList.toggle(CLASS_SELECTING, false);
+                        func_js.each(selectingClassAry, (cls) => {
+                            t.classList.toggle(cls, false);
+                        });
+                    }
+                });
+                func_js.each(selection, (t) => {
+                    t.classList.toggle(CLASS_SELECTING, true);
+                    func_js.each(selectingClassAry, (cls) => {
+                        t.classList.toggle(cls, true);
+                    });
+                });
+                const changed = lastSelection.length != selection.length;
+                lastSelection = selection;
+                if (changed)
+                    func_js.call(onSelect, selection);
+                ev.preventDefault();
+                return false;
+            };
+            const dragEndListener = (ev) => {
+                style.left = "-9999px";
+                style.width = style.height = "0px";
+                document.removeEventListener("mousemove", dragListener, false);
+                document.removeEventListener("mouseup", dragEndListener, false);
+                window.removeEventListener("blur", dragEndListener, false);
+                if (scroll) {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
+                    }
+                }
+                //restore container position
+                if (originPos) {
+                    con.style.position = originPos;
+                }
+                func_js.each(selection, (t) => {
+                    func_js.each(selectingClassAry, (cls) => {
+                        t.classList.toggle(cls, false);
+                    });
+                    func_js.each(selectedClassAry, (cls) => {
+                        t.classList.toggle(cls, true);
+                    });
+                    t.classList.toggle(CLASS_SELECTING, false);
+                    t.classList.toggle(CLASS_SELECTED, true);
+                });
+                __classPrivateFieldSet(this, _Selectable__lastSelected, selection, "f");
+                if (dragging)
+                    func_js.call(onEnd, selection);
+            };
+            document.addEventListener("mousemove", dragListener, false);
+            document.addEventListener("mouseup", dragEndListener, false);
+            window.addEventListener("blur", dragEndListener, false);
+            e.preventDefault();
+            return false;
+        });
+    };
+    /**
+     * 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
+    };
+
+    exports.CollisionDetector = CollisionDetector;
+    exports.Draggable = Draggable;
+    exports.Droppable = Droppable;
+    exports.Resizable = Resizable;
+    exports.Rotatable = Rotatable;
+    exports.Selectable = Selectable;
+    exports.Splittable = Splittable;
+    exports.Uii = Uii;
+    exports.VERSION = VERSION;
+    exports["default"] = index;
+    exports.newCollisionDetector = newCollisionDetector;
+    exports.newDraggable = newDraggable;
+    exports.newDroppable = newDroppable;
+    exports.newResizable = newResizable;
+    exports.newRotatable = newRotatable;
+    exports.newSelectable = newSelectable;
+    exports.newSplittable = newSplittable;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));