uiik 1.1.0 → 1.3.0-alpha

package/selectable.js

@@ -1,281 +0,0 @@
-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 __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 _Selectable_instances, _Selectable__detector, _Selectable__lastSelected, _Selectable_bindEvent;
-/* eslint-disable max-len */
-/**
- * selector
- * @author holyhigh2
- */
-import { each, includes, some } from 'myfx/collection';
-import { assign } from 'myfx/object';
-import { split } from 'myfx/string';
-import { compact } from 'myfx/array';
-import { isFunction } from 'myfx/is';
-import { newCollisionDetector } from "./detector";
-import { Uii } from "./types";
-import { EDGE_THRESHOLD, getOffset } from "./utils";
-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
- */
-export class Selectable extends Uii {
-    constructor(container, opts) {
-        super(container, assign({
-            targets: [],
-            scroll: true,
-        }, opts));
-        _Selectable_instances.add(this);
-        _Selectable__detector.set(this, void 0);
-        _Selectable__lastSelected.set(this, void 0);
-        const domEl = this.ele[0];
-        //create selector
-        const selector = document.createElement("div");
-        selector.className = CLASS_SELECTOR;
-        selector.style.cssText = `
-      position:absolute;
-      left:-9999px;
-    `;
-        if (this.opts.class) {
-            selector.className += " " + this.opts.class;
-        }
-        else {
-            selector.style.cssText += "border:1px dashed #000;";
-        }
-        domEl.appendChild(selector);
-        //create detector
-        __classPrivateFieldSet(this, _Selectable__detector, newCollisionDetector(selector, this.opts.targets, {
-            container: domEl,
-        }), "f");
-        __classPrivateFieldGet(this, _Selectable_instances, "m", _Selectable_bindEvent).call(this, selector, domEl);
-    }
-    /**
-     *  更新targets
-     */
-    updateTargets() {
-        __classPrivateFieldGet(this, _Selectable__detector, "f").update();
-    }
-    /**
-     * @internal
-     */
-    onOptionChanged() {
-        this.updateTargets();
-    }
-}
-_Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap(), _Selectable_instances = new WeakSet(), _Selectable_bindEvent = function _Selectable_bindEvent(selector, con) {
-    const that = this;
-    const opts = this.opts;
-    this.registerEvent(con, "mousedown", (e) => {
-        const t = e.target;
-        const onStart = opts.onStart;
-        const onSelect = opts.onSelect;
-        const onEnd = opts.onEnd;
-        const mode = opts.mode || "overlap";
-        const scroll = opts.scroll;
-        const scrollSpeed = opts.scrollSpeed || 10;
-        const filter = opts.filter;
-        const selectingClassAry = compact(split(opts.selectingClass, " "));
-        const selectedClassAry = compact(split(opts.selectedClass, " "));
-        //check filter
-        if (filter) {
-            if (isFunction(filter)) {
-                if (filter(t))
-                    return;
-            }
-            else if (some(con.querySelectorAll(filter), (el) => el.contains(t)))
-                return;
-        }
-        let originPos = "";
-        //offset
-        const rect = con.getBoundingClientRect();
-        const conStyle = window.getComputedStyle(con);
-        const blw = parseFloat(conStyle.borderLeftWidth);
-        const btw = parseFloat(conStyle.borderTopWidth);
-        let hitPosX = e.offsetX + con.scrollLeft, hitPosY = e.offsetY + con.scrollTop;
-        if (t !== con) {
-            const offset = getOffset(t, con);
-            const style = window.getComputedStyle(t);
-            hitPosX = offset.x + e.offsetX + parseFloat(style.borderLeftWidth);
-            hitPosY = offset.y + e.offsetY + parseFloat(style.borderTopWidth);
-        }
-        const style = selector.style;
-        let selection = [];
-        let lastSelection = [];
-        let x1 = hitPosX, y1 = hitPosY;
-        let dragging = false;
-        let timer = null;
-        let toLeft = false;
-        let toTop = false;
-        let toRight = false;
-        let toBottom = false;
-        const dragListener = (ev) => {
-            const newX = ev.clientX - rect.x + con.scrollLeft - blw;
-            const newY = ev.clientY - rect.y + con.scrollTop - btw;
-            const offsetx = newX - hitPosX;
-            const offsety = newY - hitPosY;
-            if (!dragging) {
-                if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
-                    dragging = true;
-                    //update targets count & positions
-                    __classPrivateFieldGet(this, _Selectable__detector, "f").update();
-                    //detect container position
-                    const pos = window.getComputedStyle(con).position;
-                    if (pos === "static") {
-                        originPos = con.style.position;
-                        con.style.position = "relative";
-                    }
-                    //clear _lastSelected
-                    each(__classPrivateFieldGet(this, _Selectable__lastSelected, "f"), t => {
-                        t.classList.toggle(CLASS_SELECTED, false);
-                    });
-                    onStart && onStart({ selection: __classPrivateFieldGet(this, _Selectable__lastSelected, "f"), selectable: con }, ev);
-                }
-                else {
-                    ev.preventDefault();
-                    return false;
-                }
-            }
-            //edge detect
-            if (scroll) {
-                const ltX = ev.clientX - rect.x;
-                const ltY = ev.clientY - rect.y;
-                const rbX = rect.x + rect.width - ev.clientX;
-                const rbY = rect.y + rect.height - ev.clientY;
-                toLeft = ltX < EDGE_THRESHOLD;
-                toTop = ltY < EDGE_THRESHOLD;
-                toRight = rbX < EDGE_THRESHOLD;
-                toBottom = rbY < EDGE_THRESHOLD;
-                if (toLeft || toTop || toRight || toBottom) {
-                    if (!timer) {
-                        timer = setInterval(() => {
-                            if (toLeft) {
-                                con.scrollLeft -= scrollSpeed;
-                            }
-                            else if (toRight) {
-                                con.scrollLeft += scrollSpeed;
-                            }
-                            if (toTop) {
-                                con.scrollTop -= scrollSpeed;
-                            }
-                            else if (toBottom) {
-                                con.scrollTop += scrollSpeed;
-                            }
-                        }, 20);
-                    }
-                }
-                else {
-                    if (timer) {
-                        clearInterval(timer);
-                        timer = null;
-                    }
-                }
-            }
-            let x = hitPosX, y = hitPosY, w = Math.abs(offsetx), h = Math.abs(offsety);
-            if (offsetx > 0 && offsety > 0) {
-                x1 = hitPosX;
-                y1 = hitPosY;
-            }
-            else if (offsetx < 0 && offsety < 0) {
-                x = x1 = newX;
-                y = y1 = newY;
-            }
-            else if (offsetx < 0) {
-                x = x1 = newX;
-            }
-            else if (offsety < 0) {
-                y = y1 = newY;
-            }
-            style.left = x + "px";
-            style.top = y + "px";
-            style.width = w + "px";
-            style.height = h + "px";
-            //detect collision
-            if (mode === "overlap") {
-                selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getOverlaps(x1, y1, x1 + w, y1 + h);
-            }
-            else if (mode === "inclusion") {
-                selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getInclusions(x1, y1, x1 + w, y1 + h);
-            }
-            each(lastSelection, (t) => {
-                if (!includes(selection, t)) {
-                    t.classList.toggle(CLASS_SELECTING, false);
-                    each(selectingClassAry, (cls) => {
-                        t.classList.toggle(cls, false);
-                    });
-                }
-            });
-            each(selection, (t) => {
-                t.classList.toggle(CLASS_SELECTING, true);
-                each(selectingClassAry, (cls) => {
-                    t.classList.toggle(cls, true);
-                });
-            });
-            const changed = lastSelection.length != selection.length;
-            lastSelection = selection;
-            if (changed && onSelect)
-                onSelect({ selection, selectable: con }, ev);
-            ev.preventDefault();
-            return false;
-        };
-        const dragEndListener = (ev) => {
-            style.left = "-9999px";
-            style.width = style.height = "0px";
-            document.removeEventListener("mousemove", dragListener, false);
-            document.removeEventListener("mouseup", dragEndListener, false);
-            window.removeEventListener("blur", dragEndListener, false);
-            if (scroll) {
-                if (timer) {
-                    clearInterval(timer);
-                    timer = null;
-                }
-            }
-            //restore container position
-            if (originPos) {
-                con.style.position = originPos;
-            }
-            each(selection, (t) => {
-                each(selectingClassAry, (cls) => {
-                    t.classList.toggle(cls, false);
-                });
-                each(selectedClassAry, (cls) => {
-                    t.classList.toggle(cls, true);
-                });
-                t.classList.toggle(CLASS_SELECTING, false);
-                t.classList.toggle(CLASS_SELECTED, true);
-            });
-            __classPrivateFieldSet(this, _Selectable__lastSelected, selection, "f");
-            if (dragging && onEnd)
-                onEnd({ selection, selectable: con }, ev);
-        };
-        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
- */
-export function newSelectable(container, opts) {
-    return new Selectable(container, opts);
-}