uiik 1.1.0 → 1.3.0-alpha

package/droppable.js

@@ -1,160 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (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);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (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 _Droppable_active;
-/* eslint-disable require-jsdoc */
-/* eslint-disable max-len */
-/**
- * 拖动器
- * @author holyhigh2
- */
-import { each } from "myfx/collection";
-import { assign } from 'myfx/object';
-import { split, test } from 'myfx/string';
-import { isString, isFunction } from "myfx/is";
-import { Uii } from "./types";
-import { setCursor } from "./utils";
-const Droppables = [];
-const CLASS_DROPPABLE = "uii-droppable";
-/**
- * 用于表示一个或多个可响应拖动元素的定义
- * > 可用CSS接口
- * - .uii-droppable
- * @public
- */
-export class Droppable extends Uii {
-    constructor(el, opts) {
-        super(el, assign({}, opts));
-        _Droppable_active.set(this, void 0);
-        Droppables.push(this);
-    }
-    /**
-     * @internal
-     */
-    bindEvent(droppable, opts) {
-        //dragenter
-        this.registerEvent(droppable, "mouseenter", (e) => {
-            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
-                return;
-            if (opts.hoverClass) {
-                each(split(opts.hoverClass, ' '), cls => {
-                    droppable.classList.toggle(cls, true);
-                });
-            }
-            if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
-                setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
-            }
-            opts.onEnter && opts.onEnter({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
-        });
-        //dragleave
-        this.registerEvent(droppable, "mouseleave", (e) => {
-            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
-                return;
-            if (opts.hoverClass) {
-                each(split(opts.hoverClass, ' '), cls => {
-                    droppable.classList.toggle(cls, false);
-                });
-            }
-            if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
-                setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
-            }
-            opts.onLeave && opts.onLeave({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
-        });
-        //dragover
-        this.registerEvent(droppable, "mousemove", (e) => {
-            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
-                return;
-            opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
-        });
-        //drop
-        this.registerEvent(droppable, "mouseup", (e) => {
-            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
-                return;
-            if (opts.hoverClass) {
-                each(split(opts.hoverClass, ' '), cls => {
-                    droppable.classList.toggle(cls, false);
-                });
-            }
-            opts.onDrop && opts.onDrop({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
-        });
-    }
-    /**
-     * @internal
-     */
-    active(target) {
-        let valid = true;
-        const opts = this.opts;
-        //check accepts
-        if (isString(opts.accepts)) {
-            valid = !!target.dataset.dropType && test(opts.accepts, target.dataset.dropType);
-        }
-        else if (isFunction(opts.accepts)) {
-            valid = opts.accepts(this.ele, target);
-        }
-        if (!valid)
-            return;
-        __classPrivateFieldSet(this, _Droppable_active, target, "f");
-        if (opts.activeClass) {
-            each(this.ele, el => {
-                each(split(opts.activeClass || '', ' '), cls => {
-                    el.classList.toggle(cls, true);
-                });
-            });
-        }
-        opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
-        //bind events
-        each(this.ele, (el) => {
-            el.classList.toggle(CLASS_DROPPABLE, true);
-            el.style.pointerEvents = 'initial';
-            this.bindEvent(el, opts);
-        });
-    }
-    /**
-     * @internal
-     */
-    deactive(target) {
-        if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
-            return;
-        __classPrivateFieldSet(this, _Droppable_active, null, "f");
-        const opts = this.opts;
-        if (opts.activeClass) {
-            each(this.ele, el => {
-                each(split(opts.activeClass || '', ' '), cls => {
-                    el.classList.toggle(cls, false);
-                });
-            });
-        }
-        opts.onDeactive && opts.onDeactive({ draggable: target, droppables: 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
- */
-export function newDroppable(els, opts) {
-    return new Droppable(els, opts);
-}

package/resizable.js

@@ -1,308 +0,0 @@
-/* eslint-disable max-len */
-/**
- * dom resizer
- * @author holyhigh2
- */
-import { each, } from "myfx/collection";
-import { assign } from 'myfx/object';
-import { isArray, isFunction, isNumber } from 'myfx/is';
-import { Uii } from './types';
-import { lockPage, restoreCursor, saveCursor, setCursor, unlockPage } from './utils';
-const THRESHOLD = 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
- */
-export 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(el, this.opts);
-        });
-    }
-}
-function bindHandle(handle, dir, panel, opts) {
-    const onStart = opts.onStart;
-    const onResize = opts.onResize;
-    const onEnd = opts.onEnd;
-    const onClone = opts.onClone;
-    handle.onmousedown = function (e) {
-        // 获取panel当前信息
-        const originW = panel.offsetWidth;
-        const originH = panel.offsetHeight;
-        const originX = panel.offsetLeft;
-        const originY = panel.offsetTop;
-        let changeW = false;
-        let changeH = false;
-        let changeX = false;
-        let changeY = false;
-        switch (dir) {
-            case 's':
-                changeH = true;
-                break;
-            case 'e':
-                changeW = true;
-                break;
-            case 'n':
-                changeY = true;
-                changeH = true;
-                break;
-            case 'w':
-                changeX = true;
-                changeW = true;
-                break;
-            case 'se':
-                changeW = true;
-                changeH = true;
-                break;
-            case 'sw':
-                changeX = true;
-                changeW = true;
-                changeH = true;
-                break;
-            case 'ne':
-                changeY = true;
-                changeW = true;
-                changeH = true;
-                break;
-            case 'nw':
-                changeX = true;
-                changeY = true;
-                changeW = true;
-                changeH = true;
-                break;
-        }
-        const originPosX = e.clientX;
-        const originPosY = e.clientY;
-        // boundary
-        let minWidth;
-        let minHeight;
-        let maxWidth;
-        let maxHeight;
-        if (isArray(opts.minSize)) {
-            minWidth = opts.minSize[0];
-            minHeight = opts.minSize[1];
-        }
-        else if (isNumber(opts.minSize)) {
-            minWidth = opts.minSize;
-            minHeight = opts.minSize;
-        }
-        if (isArray(opts.maxSize)) {
-            maxWidth = opts.maxSize[0];
-            maxHeight = opts.maxSize[1];
-        }
-        else if (isNumber(opts.maxSize)) {
-            maxWidth = opts.maxSize;
-            maxHeight = opts.maxSize;
-        }
-        const minX = maxWidth ? originX - maxWidth + originW : null;
-        const minY = maxHeight ? originY - maxHeight + originH : null;
-        const maxX = minWidth ? originX + originW - minWidth : null;
-        const maxY = minHeight ? originY + originH - minHeight : null;
-        //ghost
-        const ghost = opts.ghost;
-        const ghostClass = opts.ghostClass;
-        let ghostNode = null;
-        //aspectRatio
-        const aspectRatio = opts.aspectRatio;
-        const panelStyle = panel.style;
-        let style = panelStyle;
-        let currentW = originW;
-        let currentH = originH;
-        let dragging = false;
-        saveCursor();
-        const dragListener = (ev) => {
-            var _a;
-            const offsetx = ev.clientX - originPosX;
-            const offsety = ev.clientY - originPosY;
-            if (!dragging) {
-                if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
-                    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);
-                            onClone && onClone({ clone: ghostNode }, ev);
-                        }
-                        style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
-                    }
-                    lockPage();
-                    setCursor(handle.dataset.cursor || '');
-                    onStart && onStart({ w: originW, h: originH }, ev);
-                }
-                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;
-            onResize && onResize({ w, h }, ev);
-            ev.preventDefault();
-            return false;
-        };
-        const dragEndListener = (ev) => {
-            var _a, _b;
-            document.removeEventListener('mousemove', dragListener, false);
-            document.removeEventListener('mouseup', dragEndListener, false);
-            window.removeEventListener('blur', dragEndListener, false);
-            if (ghost && ghostNode) {
-                ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
-                panelStyle.left = ghostNode.style.left;
-                panelStyle.top = ghostNode.style.top;
-                panelStyle.width = ghostNode.style.width;
-                panelStyle.height = ghostNode.style.height;
-            }
-            if (dragging) {
-                handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                unlockPage();
-                restoreCursor();
-                onEnd && onEnd({ w: currentW, h: currentH }, ev);
-            }
-        };
-        document.addEventListener('mousemove', dragListener, false);
-        document.addEventListener('mouseup', dragEndListener, false);
-        window.addEventListener('blur', dragEndListener, false);
-        e.preventDefault();
-        return false;
-    };
-}
-function initHandle(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(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
- */
-export function newResizable(els, opts) {
-    return new Resizable(els, opts);
-}

package/rotatable.js

@@ -1,137 +0,0 @@
-/* eslint-disable max-len */
-/**
- * dom rotator
- * @author holyhigh2
- */
-import { isDefined } from 'myfx/is';
-import { each } from 'myfx/collection';
-import { Uii } from './types';
-import { lockPage, restoreCursor, saveCursor, setCursor, unlockPage } from './utils';
-const ONE_DEG = 180 / Math.PI;
-const THRESHOLD = 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
- */
-export 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;
-        saveCursor();
-        const dragListener = (ev) => {
-            var _a;
-            const offsetx = ev.clientX - centerX;
-            const offsety = ev.clientY - centerY;
-            if (!dragging) {
-                if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
-                    dragging = true;
-                    //apply classes
-                    el.classList.toggle(CLASS_ROTATABLE_ACTIVE, true);
-                    onStart && onStart({ deg }, ev);
-                    lockPage();
-                    if (isDefined(opts.cursor)) {
-                        setCursor(((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair');
-                    }
-                }
-                else {
-                    ev.preventDefault();
-                    return false;
-                }
-            }
-            deg = Math.atan2(offsety, offsetx) * ONE_DEG + 90 - offsetDeg;
-            if (deg < 0)
-                deg = 360 + deg;
-            onRotate && onRotate({ deg }, ev);
-            style.transform = style.transform.replace(/rotateZ\(.*?\)/, '') + ' rotateZ(' + deg + 'deg)';
-            ev.preventDefault();
-            return false;
-        };
-        const dragEndListener = (ev) => {
-            document.removeEventListener('mousemove', dragListener, false);
-            document.removeEventListener('mouseup', dragEndListener, false);
-            window.removeEventListener('blur', dragEndListener, false);
-            if (dragging) {
-                unlockPage();
-                restoreCursor();
-                el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
-                onEnd && onEnd({ deg }, ev);
-            }
-        };
-        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
- */
-export function newRotatable(els, opts) {
-    return new Rotatable(els, opts);
-}