uiik 1.4.0 → 1.4.1

package/draggable.d.ts

@@ -2,7 +2,7 @@ import { DraggableOptions, Uii } from "./types";
 export declare class Draggable extends Uii {
     #private;
     constructor(els: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DraggableOptions);
-    bindEvent(bindTarget: Element, opts: DraggableOptions, handleMap: WeakMap<Element, Element>): void;
+    bindEvent(bindTarget: Element): void;
     onOptionChanged(opts: Record<string, any>): void;
 }
 export declare function newDraggable(els: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DraggableOptions): Draggable;

package/index.esm.js

@@ -1,16 +1,16 @@
 /**
- * uiik v1.4.0
+ * uiik v1.4.1
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2025 @holyhigh2 may be freely distributed under the MIT license
  */
 import { find, map, toArray, each, reject, includes, some, flatMap, size } from 'myfx/collection';
 import { isDefined, isNumber, isNaN, isString, isArrayLike, isElement, isEmpty, isBlank, isArray, isFunction, isBoolean, isUndefined } from 'myfx/is';
-import { get, assign, merge } from 'myfx/object';
-import { isElement as isElement$1, filter, last } from 'myfx';
+import { get, assign, set, merge } from 'myfx/object';
+import { closest } from 'myfx/tree';
+import { isElement as isElement$1, filter, isCustomElement, last } from 'myfx';
 import { compact, findIndex } from 'myfx/array';
 import { split, test } from 'myfx/string';
-import { closest } from 'myfx/tree';
 import { alphaId } from 'myfx/utils';
 
 /******************************************************************************
@@ -497,12 +497,17 @@ function isVisible(el) {
 }
 
 var _Uii_listeners;
+const UII_KEY = '__uii_target_';
+const UII_MAP = {};
+let UiiSn = 0;
 class Uii {
     constructor(ele, opts) {
+        var _a;
         this.enabled = true;
         _Uii_listeners.set(this, []);
         this.opts = opts || {};
         this.opts.mouseButton = this.opts.mouseButton || 'left';
+        this.opts.eventCapture = (_a = this.opts.eventCapture) !== null && _a !== void 0 ? _a : true;
         if (isArrayLike(ele) && !isString(ele)) {
             this.ele = map(ele, (el) => {
                 let e = isString(el) ? document.querySelector(el) : el;
@@ -526,6 +531,9 @@ class Uii {
                 ? toArray(el)
                 : [el];
         }
+        let uid = UiiSn++ + '';
+        UII_MAP[uid] = this;
+        this._bindUiik(uid);
     }
     destroy() {
         each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
@@ -533,12 +541,13 @@ class Uii {
         });
         __classPrivateFieldSet(this, _Uii_listeners, [], "f");
     }
-    addPointerDown(el, pointerDown, opts) {
+    addPointerDown(el, pointerDown) {
         const onPointerDown = pointerDown;
-        const threshold = opts.threshold || 0;
-        const toLockPage = opts.lockPage || false;
         const uiiOptions = this.opts;
+        let threshold = 0;
+        let toLockPage = true;
         this.registerEvent(el, "mousedown", (e) => {
+            var _a;
             if (uiiOptions.mouseButton) {
                 switch (uiiOptions.mouseButton) {
                     case "left":
@@ -590,6 +599,12 @@ class Uii {
                 e.preventDefault();
                 return false;
             }
+            let target = closest(t, (node) => node && get(node, UII_KEY), "parentElement");
+            if (target) {
+                let uiiInstance = UII_MAP[get(target, UII_KEY)];
+                threshold = uiiInstance.opts.threshold || 0;
+                toLockPage = (_a = uiiInstance.opts.lockPage) !== null && _a !== void 0 ? _a : true;
+            }
             let matrixInfo = getMatrixInfo(el, true);
             const pointerMove = (ev) => {
                 const offX = (ev.clientX - originPosX) / matrixInfo.scale;
@@ -640,7 +655,7 @@ class Uii {
             window.addEventListener("blur", pointerEnd);
             e.preventDefault();
             return false;
-        }, true);
+        }, this.opts.eventCapture);
     }
     registerEvent(el, event, hook, useCapture = false) {
         const wrapper = ((ev) => {
@@ -671,6 +686,11 @@ class Uii {
         this.opts[name] = value;
         this.onOptionChanged(this.opts);
     }
+    _bindUiik(uid) {
+        each(this.ele, el => {
+            set(el, UII_KEY, uid);
+        });
+    }
     onOptionChanged(opts) { }
 }
 _Uii_listeners = new WeakMap();
@@ -737,7 +757,8 @@ class Splittable extends Uii {
             }
             else {
                 each(handleDoms, (h, i) => {
-                    const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
+                    var _a;
+                    const isRoot = (_a = h.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains(CLASS_SPLITTABLE);
                     let dom1, dom2;
                     if (isRoot) {
                         dom1 = h.previousElementSibling;
@@ -773,7 +794,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
     const child = container.children[0];
     let lastY = child.offsetTop;
     let lastH = child.offsetHeight;
-    each(container.children, c => {
+    each(container.children, (c) => {
         if (c.offsetTop > lastH + lastY) {
             dir = 'v';
             return false;
@@ -966,9 +987,6 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
             }
             onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
         });
-    }, {
-        threshold: THRESHOLD,
-        lockPage: true
     });
 };
 function newSplittable(container, opts) {
@@ -1505,9 +1523,6 @@ class Resizable extends Uii {
                     }
                 }
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true,
         });
     }
     initHandle(panel) {
@@ -1576,12 +1591,16 @@ function newResizable(els, opts) {
     return new Resizable(els, opts);
 }
 
-var _Draggable_instances, _Draggable_handleMap, _Draggable_container, _Draggable_initStyle;
+var _Draggable_instances, _Draggable_container, _Draggable_initHandle, _Draggable_initStyle;
 const DRAGGER_GROUPS = {};
 const CLASS_DRAGGABLE = "uii-draggable";
 const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
 const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
 const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
+const HANDLE_MAP = new WeakMap();
+const OPTION_MAP = new WeakMap();
+const BINDED_CONTAINER = new WeakSet();
+const WATCH_MAP = {};
 class Draggable extends Uii {
     constructor(els, opts) {
         super(els, assign({
@@ -1598,17 +1617,9 @@ class Draggable extends Uii {
             self: false,
         }, opts));
         _Draggable_instances.add(this);
-        _Draggable_handleMap.set(this, new WeakMap());
         _Draggable_container.set(this, null);
         if (this.opts.handle) {
-            each(this.ele, (el) => {
-                const h = el.querySelector(this.opts.handle);
-                if (!h) {
-                    console.error('No handle found "' + this.opts.handle + '"');
-                    return false;
-                }
-                __classPrivateFieldGet(this, _Draggable_handleMap, "f").set(el, h);
-            });
+            __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initHandle).call(this, this.ele);
         }
         this.onOptionChanged(this.opts);
         if (this.opts.group) {
@@ -1637,15 +1648,20 @@ class Draggable extends Uii {
             else {
                 con = isEmpty(this.ele) ? null : this.ele[0].parentElement;
             }
-            this.bindEvent(con || document.body, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+            let bindTarget = con || document.body;
+            if (BINDED_CONTAINER.has(bindTarget))
+                return;
+            WATCH_MAP[this.eleString] = this;
+            this.bindEvent(bindTarget);
+            BINDED_CONTAINER.add(bindTarget);
         }
         else {
             each(this.ele, (el) => {
-                this.bindEvent(el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+                this.bindEvent(el);
             });
         }
     }
-    bindEvent(bindTarget, opts, handleMap) {
+    bindEvent(bindTarget) {
         const container = __classPrivateFieldGet(this, _Draggable_container, "f");
         let draggableList = this.ele;
         const eleString = this.eleString;
@@ -1655,23 +1671,37 @@ class Draggable extends Uii {
             let t = ev.target;
             if (!t)
                 return true;
-            if (opts.watch && eleString) {
-                draggableList = bindTarget.querySelectorAll(eleString);
-                initStyle(draggableList);
+            let opts = {};
+            let findRs = closest(t, (node) => node && get(node, UII_KEY), "parentElement");
+            if (!findRs) {
+                let toBreak = true;
+                each(WATCH_MAP, (v, k) => {
+                    draggableList = bindTarget.querySelectorAll(eleString);
+                    if (!isEmpty(draggableList) && (findRs = closest(t, (node) => includes(draggableList, node), "parentNode"))) {
+                        initStyle(draggableList);
+                        opts = v.opts;
+                        __classPrivateFieldGet(v, _Draggable_instances, "m", _Draggable_initHandle).call(v, draggableList);
+                        toBreak = false;
+                        return false;
+                    }
+                });
+                if (toBreak)
+                    return true;
             }
-            let findRs = closest(t, (node) => includes(draggableList, node), "parentNode");
-            if (!findRs)
-                return true;
             const dragDom = findRs;
-            let handle = handleMap.get(dragDom);
-            if (handle && !handle.contains(t)) {
+            let handle = HANDLE_MAP.get(dragDom);
+            if (handle && !isCustomElement(t) && !handle.contains(t)) {
                 return true;
             }
+            if (isEmpty(opts))
+                opts = OPTION_MAP.get(dragDom);
+            if (!opts || isEmpty(opts))
+                return true;
             if (opts.self && dragDom !== t)
                 return true;
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown &&
-                onPointerDown({ draggable: dragDom }, ev) === false)
+                onPointerDown({ draggable: dragDom, handle }, ev) === false)
                 return true;
             const filter = opts.filter;
             if (filter) {
@@ -2012,7 +2042,7 @@ class Draggable extends Uii {
                 let moveToGhost = true;
                 if (onEnd) {
                     moveToGhost =
-                        onEnd({ draggable: dragDom, x: endX, y: endY, transform }, ev) ===
+                        onEnd({ draggable: dragDom, x: endX, y: endY, transform, ghost: ghostNode }, ev) ===
                             false
                             ? false
                             : true;
@@ -2029,13 +2059,19 @@ class Draggable extends Uii {
                 if (ghost) {
                     (_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
                     if (moveToGhost !== false) {
-                        wrapper(dragDom, opts.useTransform).moveTo(transform.x, transform.y);
+                        let transf = wrapper(dragDom, opts.useTransform);
+                        if (direction === "v") {
+                            transf.moveToY(endY);
+                        }
+                        else if (direction === "h") {
+                            transf.moveToX(endX);
+                        }
+                        else {
+                            transf.moveTo(endX, endY);
+                        }
                     }
                 }
             });
-        }, {
-            threshold: this.opts.threshold || 0,
-            lockPage: true,
         });
     }
     onOptionChanged(opts) {
@@ -2056,12 +2092,27 @@ class Draggable extends Uii {
         }
     }
 }
-_Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
+_Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initHandle = function _Draggable_initHandle(ele) {
+    each(ele, (el) => {
+        let h;
+        if (isString(this.opts.handle)) {
+            h = el.querySelector(this.opts.handle);
+            if (!h) {
+                console.error('No handle found "' + this.opts.handle + '"');
+                return false;
+            }
+        }
+        else if (isElement(this.opts.handle)) {
+            h = this.opts.handle;
+        }
+        HANDLE_MAP.set(el, h);
+    });
+}, _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
     each(draggableList, (el) => {
         if (isDefined(this.opts.type))
             el.dataset.dropType = this.opts.type;
         el.classList.toggle(CLASS_DRAGGABLE, true);
-        const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
+        const ee = HANDLE_MAP.get(el) || el;
         ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
         if (!isUndefined(this.opts.cursor)) {
             el.style.cursor = this.opts.cursor.default || "move";
@@ -2070,6 +2121,7 @@ _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Dra
                 el.dataset.cursorActive = this.opts.cursor.active || "move";
             }
         }
+        OPTION_MAP.set(el, this.opts);
     });
 };
 function newDraggable(els, opts) {
@@ -2298,9 +2350,6 @@ function bindHandle(uiik, handle, el, opts) {
             el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
             onEnd && onEnd({ deg }, ev);
         });
-    }, {
-        threshold: THRESHOLD,
-        lockPage: true,
     });
 }
 function newRotatable(els, opts) {
@@ -2601,9 +2650,6 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
             if (onEnd)
                 onEnd({ selection, selectable: con }, ev);
         });
-    }, {
-        threshold: THRESHOLD,
-        lockPage: true
     });
 };
 function newSelectable(container, opts) {
@@ -3000,7 +3046,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.4.0";
+var version = "1.4.1";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"
@@ -3033,4 +3079,4 @@ var index = {
     newSortable
 };
 
-export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, THRESHOLD, Uii, UiiTransform, VERSION, calcVertex, index as default, getBox, getCenterXy, getCenterXySVG, getMatrixInfo, getPointInContainer, getPointOffset, getRectCenter, getRectInContainer, getStyleSize, getStyleXy, getTranslate, getVertex, isSVGEl, isVisible, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, normalizeVector, parseOxy, restoreCursor, rotateTo, saveCursor, setCursor, transformMoveTo, unlockPage, wrapper };
+export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, THRESHOLD, UII_KEY, Uii, UiiTransform, VERSION, calcVertex, index as default, getBox, getCenterXy, getCenterXySVG, getMatrixInfo, getPointInContainer, getPointOffset, getRectCenter, getRectInContainer, getStyleSize, getStyleXy, getTranslate, getVertex, isSVGEl, isVisible, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, normalizeVector, parseOxy, restoreCursor, rotateTo, saveCursor, setCursor, transformMoveTo, unlockPage, wrapper };

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.4.0
+ * uiik v1.4.1
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2025 @holyhigh2 may be freely distributed under the MIT license
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/collection'), require('myfx/is'), require('myfx/object'), require('myfx'), require('myfx/array'), require('myfx/string'), require('myfx/tree'), require('myfx/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/collection', 'myfx/is', 'myfx/object', 'myfx', 'myfx/array', 'myfx/string', 'myfx/tree', 'myfx/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.collection, global.is, global.object, global.myfx, global.array, global.string, global.tree, global.utils));
-})(this, (function (exports, collection, is, object, myfx, array, string, tree, utils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/collection'), require('myfx/is'), require('myfx/object'), require('myfx/tree'), require('myfx'), require('myfx/array'), require('myfx/string'), require('myfx/utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'myfx/collection', 'myfx/is', 'myfx/object', 'myfx/tree', 'myfx', 'myfx/array', 'myfx/string', 'myfx/utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.collection, global.is, global.object, global.tree, global.myfx, global.array, global.string, global.utils));
+})(this, (function (exports, collection, is, object, tree, myfx, array, string, utils) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -494,12 +494,17 @@
     }
 
     var _Uii_listeners;
+    const UII_KEY = '__uii_target_';
+    const UII_MAP = {};
+    let UiiSn = 0;
     class Uii {
         constructor(ele, opts) {
+            var _a;
             this.enabled = true;
             _Uii_listeners.set(this, []);
             this.opts = opts || {};
             this.opts.mouseButton = this.opts.mouseButton || 'left';
+            this.opts.eventCapture = (_a = this.opts.eventCapture) !== null && _a !== void 0 ? _a : true;
             if (is.isArrayLike(ele) && !is.isString(ele)) {
                 this.ele = collection.map(ele, (el) => {
                     let e = is.isString(el) ? document.querySelector(el) : el;
@@ -523,6 +528,9 @@
                     ? collection.toArray(el)
                     : [el];
             }
+            let uid = UiiSn++ + '';
+            UII_MAP[uid] = this;
+            this._bindUiik(uid);
         }
         destroy() {
             collection.each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
@@ -530,12 +538,13 @@
             });
             __classPrivateFieldSet(this, _Uii_listeners, [], "f");
         }
-        addPointerDown(el, pointerDown, opts) {
+        addPointerDown(el, pointerDown) {
             const onPointerDown = pointerDown;
-            const threshold = opts.threshold || 0;
-            const toLockPage = opts.lockPage || false;
             const uiiOptions = this.opts;
+            let threshold = 0;
+            let toLockPage = true;
             this.registerEvent(el, "mousedown", (e) => {
+                var _a;
                 if (uiiOptions.mouseButton) {
                     switch (uiiOptions.mouseButton) {
                         case "left":
@@ -587,6 +596,12 @@
                     e.preventDefault();
                     return false;
                 }
+                let target = tree.closest(t, (node) => node && object.get(node, UII_KEY), "parentElement");
+                if (target) {
+                    let uiiInstance = UII_MAP[object.get(target, UII_KEY)];
+                    threshold = uiiInstance.opts.threshold || 0;
+                    toLockPage = (_a = uiiInstance.opts.lockPage) !== null && _a !== void 0 ? _a : true;
+                }
                 let matrixInfo = getMatrixInfo(el, true);
                 const pointerMove = (ev) => {
                     const offX = (ev.clientX - originPosX) / matrixInfo.scale;
@@ -637,7 +652,7 @@
                 window.addEventListener("blur", pointerEnd);
                 e.preventDefault();
                 return false;
-            }, true);
+            }, this.opts.eventCapture);
         }
         registerEvent(el, event, hook, useCapture = false) {
             const wrapper = ((ev) => {
@@ -668,6 +683,11 @@
             this.opts[name] = value;
             this.onOptionChanged(this.opts);
         }
+        _bindUiik(uid) {
+            collection.each(this.ele, el => {
+                object.set(el, UII_KEY, uid);
+            });
+        }
         onOptionChanged(opts) { }
     }
     _Uii_listeners = new WeakMap();
@@ -734,7 +754,8 @@
                 }
                 else {
                     collection.each(handleDoms, (h, i) => {
-                        const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
+                        var _a;
+                        const isRoot = (_a = h.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains(CLASS_SPLITTABLE);
                         let dom1, dom2;
                         if (isRoot) {
                             dom1 = h.previousElementSibling;
@@ -770,7 +791,7 @@
         const child = container.children[0];
         let lastY = child.offsetTop;
         let lastH = child.offsetHeight;
-        collection.each(container.children, c => {
+        collection.each(container.children, (c) => {
             if (c.offsetTop > lastH + lastY) {
                 dir = 'v';
                 return false;
@@ -963,9 +984,6 @@
                 }
                 onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true
         });
     };
     function newSplittable(container, opts) {
@@ -1502,9 +1520,6 @@
                         }
                     }
                 });
-            }, {
-                threshold: THRESHOLD,
-                lockPage: true,
             });
         }
         initHandle(panel) {
@@ -1573,12 +1588,16 @@
         return new Resizable(els, opts);
     }
 
-    var _Draggable_instances, _Draggable_handleMap, _Draggable_container, _Draggable_initStyle;
+    var _Draggable_instances, _Draggable_container, _Draggable_initHandle, _Draggable_initStyle;
     const DRAGGER_GROUPS = {};
     const CLASS_DRAGGABLE = "uii-draggable";
     const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
     const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
     const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
+    const HANDLE_MAP = new WeakMap();
+    const OPTION_MAP = new WeakMap();
+    const BINDED_CONTAINER = new WeakSet();
+    const WATCH_MAP = {};
     class Draggable extends Uii {
         constructor(els, opts) {
             super(els, object.assign({
@@ -1595,17 +1614,9 @@
                 self: false,
             }, opts));
             _Draggable_instances.add(this);
-            _Draggable_handleMap.set(this, new WeakMap());
             _Draggable_container.set(this, null);
             if (this.opts.handle) {
-                collection.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);
-                });
+                __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initHandle).call(this, this.ele);
             }
             this.onOptionChanged(this.opts);
             if (this.opts.group) {
@@ -1634,15 +1645,20 @@
                 else {
                     con = is.isEmpty(this.ele) ? null : this.ele[0].parentElement;
                 }
-                this.bindEvent(con || document.body, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+                let bindTarget = con || document.body;
+                if (BINDED_CONTAINER.has(bindTarget))
+                    return;
+                WATCH_MAP[this.eleString] = this;
+                this.bindEvent(bindTarget);
+                BINDED_CONTAINER.add(bindTarget);
             }
             else {
                 collection.each(this.ele, (el) => {
-                    this.bindEvent(el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+                    this.bindEvent(el);
                 });
             }
         }
-        bindEvent(bindTarget, opts, handleMap) {
+        bindEvent(bindTarget) {
             const container = __classPrivateFieldGet(this, _Draggable_container, "f");
             let draggableList = this.ele;
             const eleString = this.eleString;
@@ -1652,23 +1668,37 @@
                 let t = ev.target;
                 if (!t)
                     return true;
-                if (opts.watch && eleString) {
-                    draggableList = bindTarget.querySelectorAll(eleString);
-                    initStyle(draggableList);
+                let opts = {};
+                let findRs = tree.closest(t, (node) => node && object.get(node, UII_KEY), "parentElement");
+                if (!findRs) {
+                    let toBreak = true;
+                    collection.each(WATCH_MAP, (v, k) => {
+                        draggableList = bindTarget.querySelectorAll(eleString);
+                        if (!is.isEmpty(draggableList) && (findRs = tree.closest(t, (node) => collection.includes(draggableList, node), "parentNode"))) {
+                            initStyle(draggableList);
+                            opts = v.opts;
+                            __classPrivateFieldGet(v, _Draggable_instances, "m", _Draggable_initHandle).call(v, draggableList);
+                            toBreak = false;
+                            return false;
+                        }
+                    });
+                    if (toBreak)
+                        return true;
                 }
-                let findRs = tree.closest(t, (node) => collection.includes(draggableList, node), "parentNode");
-                if (!findRs)
-                    return true;
                 const dragDom = findRs;
-                let handle = handleMap.get(dragDom);
-                if (handle && !handle.contains(t)) {
+                let handle = HANDLE_MAP.get(dragDom);
+                if (handle && !myfx.isCustomElement(t) && !handle.contains(t)) {
                     return true;
                 }
+                if (is.isEmpty(opts))
+                    opts = OPTION_MAP.get(dragDom);
+                if (!opts || is.isEmpty(opts))
+                    return true;
                 if (opts.self && dragDom !== t)
                     return true;
                 const onPointerDown = opts.onPointerDown;
                 if (onPointerDown &&
-                    onPointerDown({ draggable: dragDom }, ev) === false)
+                    onPointerDown({ draggable: dragDom, handle }, ev) === false)
                     return true;
                 const filter = opts.filter;
                 if (filter) {
@@ -2009,7 +2039,7 @@
                     let moveToGhost = true;
                     if (onEnd) {
                         moveToGhost =
-                            onEnd({ draggable: dragDom, x: endX, y: endY, transform }, ev) ===
+                            onEnd({ draggable: dragDom, x: endX, y: endY, transform, ghost: ghostNode }, ev) ===
                                 false
                                 ? false
                                 : true;
@@ -2026,13 +2056,19 @@
                     if (ghost) {
                         (_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
                         if (moveToGhost !== false) {
-                            wrapper(dragDom, opts.useTransform).moveTo(transform.x, transform.y);
+                            let transf = wrapper(dragDom, opts.useTransform);
+                            if (direction === "v") {
+                                transf.moveToY(endY);
+                            }
+                            else if (direction === "h") {
+                                transf.moveToX(endX);
+                            }
+                            else {
+                                transf.moveTo(endX, endY);
+                            }
                         }
                     }
                 });
-            }, {
-                threshold: this.opts.threshold || 0,
-                lockPage: true,
             });
         }
         onOptionChanged(opts) {
@@ -2053,12 +2089,27 @@
             }
         }
     }
-    _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
+    _Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initHandle = function _Draggable_initHandle(ele) {
+        collection.each(ele, (el) => {
+            let h;
+            if (is.isString(this.opts.handle)) {
+                h = el.querySelector(this.opts.handle);
+                if (!h) {
+                    console.error('No handle found "' + this.opts.handle + '"');
+                    return false;
+                }
+            }
+            else if (is.isElement(this.opts.handle)) {
+                h = this.opts.handle;
+            }
+            HANDLE_MAP.set(el, h);
+        });
+    }, _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
         collection.each(draggableList, (el) => {
             if (is.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;
+            const ee = HANDLE_MAP.get(el) || el;
             ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
             if (!is.isUndefined(this.opts.cursor)) {
                 el.style.cursor = this.opts.cursor.default || "move";
@@ -2067,6 +2118,7 @@
                     el.dataset.cursorActive = this.opts.cursor.active || "move";
                 }
             }
+            OPTION_MAP.set(el, this.opts);
         });
     };
     function newDraggable(els, opts) {
@@ -2295,9 +2347,6 @@
                 el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
                 onEnd && onEnd({ deg }, ev);
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true,
         });
     }
     function newRotatable(els, opts) {
@@ -2598,9 +2647,6 @@
                 if (onEnd)
                     onEnd({ selection, selectable: con }, ev);
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true
         });
     };
     function newSelectable(container, opts) {
@@ -2997,7 +3043,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.4.0";
+    var version = "1.4.1";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"
@@ -3043,6 +3089,7 @@
     exports.Sortable = Sortable;
     exports.Splittable = Splittable;
     exports.THRESHOLD = THRESHOLD;
+    exports.UII_KEY = UII_KEY;
     exports.Uii = Uii;
     exports.UiiTransform = UiiTransform;
     exports.VERSION = VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
   "main": "index.js",
   "module": "index.esm.js",
@@ -32,7 +32,7 @@
     "doc": "npx typedoc"
   },
   "dependencies": {
-    "myfx": ">=1.1.0"
+    "myfx": ">=1.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",

package/types.d.ts

@@ -1,4 +1,5 @@
 import { UiiTransform } from "./transform";
+export declare const UII_KEY = "__uii_target_";
 export declare abstract class Uii {
     #private;
     protected ele: Array<HTMLElement>;
@@ -7,10 +8,7 @@ export declare abstract class Uii {
     protected eleString: string;
     constructor(ele: string | Element | NodeList | HTMLCollection | Array<string | Element>, opts?: Record<string, any>);
     destroy(): void;
-    addPointerDown(el: Element, pointerDown: (args: Record<string, any>) => void | boolean, opts: {
-        threshold?: number;
-        lockPage?: boolean;
-    }): void;
+    addPointerDown(el: Element, pointerDown: (args: Record<string, any>) => void | boolean): void;
     registerEvent(el: Element, event: string, hook: Function, useCapture?: boolean): void;
     disable(): void;
     enable(): void;
@@ -18,6 +16,7 @@ export declare abstract class Uii {
     getOption(name: string): any;
     setOptions(options?: Record<string, any>): void;
     setOption(name: string, value: any): void;
+    protected _bindUiik(uid: string): void;
     protected onOptionChanged(opts?: Record<string, any>): void;
 }
 export type ResizableOptions = {
@@ -29,6 +28,7 @@ export type ResizableOptions = {
     ghostClass?: string;
     ox?: number | string;
     oy?: number | string;
+    eventCapture?: boolean;
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         w: number;
@@ -71,6 +71,7 @@ export type SplittableOptions = {
     ghostClass?: string;
     ghostTo?: string | HTMLElement;
     handle?: string | HTMLElement | HTMLElement[];
+    eventCapture?: boolean;
     onStart?: (data: {
         size1: number;
         size2: number;
@@ -99,7 +100,7 @@ export type DraggableOptions = {
     containment?: boolean | HTMLElement | string;
     watch?: boolean | string;
     threshold?: number;
-    handle?: string;
+    handle?: string | HTMLElement | SVGGraphicsElement;
     filter?: string;
     droppable?: (() => NodeList | HTMLCollection | HTMLElement[]) | string | HTMLElement | HTMLElement[];
     ghost?: ((panel: HTMLElement | SVGGraphicsElement) => HTMLElement | SVGGraphicsElement) | boolean;
@@ -122,8 +123,10 @@ export type DraggableOptions = {
     };
     grid?: number | number[];
     type?: string;
+    eventCapture?: boolean;
     onPointerDown?: (data: {
         draggable: HTMLElement | SVGGraphicsElement;
+        handle: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => boolean;
     onStart?: (data: {
         draggable: HTMLElement | SVGGraphicsElement;
@@ -144,6 +147,7 @@ export type DraggableOptions = {
         x: number;
         y: number;
         transform: UiiTransform;
+        ghost: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
         clone: HTMLElement | SVGGraphicsElement;
@@ -162,6 +166,7 @@ export type DroppableOptions = {
     activeClass?: string;
     hoverClass?: string;
     accepts?: ((ele: Array<HTMLElement>, draggable: HTMLElement) => boolean) | string;
+    eventCapture?: boolean;
     onActive?: (data: {
         draggable: HTMLElement;
         droppables: Array<HTMLElement>;
@@ -195,6 +200,7 @@ export type RotatableOptions = {
     ox?: number | string;
     oy?: number | string;
     handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
+    eventCapture?: boolean;
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         deg: number;
@@ -222,6 +228,7 @@ export type SelectableOptions = {
     scroll?: boolean;
     scrollSpeed?: number;
     filter?: ((el: HTMLElement) => boolean) | string;
+    eventCapture?: boolean;
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         selection: Array<HTMLElement>;
@@ -251,6 +258,7 @@ export type SortableOptions = {
     };
     spill?: "remove" | "revert";
     sort?: boolean;
+    eventCapture?: boolean;
     onActive?: (data: {
         item: HTMLElement;
         from: HTMLElement;