uiik 1.3.7 → 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,17 +1,17 @@
 /**
- * uiik v1.3.7
+ * 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 { 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';
-import { filter, last } from 'myfx';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -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) {
@@ -978,6 +996,7 @@ function newSplittable(container, opts) {
 const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
 const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
 const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
+const CLASS_RESIZABLE_GHOST = "uii-resizable-ghost";
 const EXP_DIR = new RegExp(CLASS_RESIZABLE_HANDLE_DIR + "(?<dir>[nesw]+)");
 class Resizable extends Uii {
     constructor(els, opts) {
@@ -1110,11 +1129,9 @@ class Resizable extends Uii {
                     }
                     if (ghostNode) {
                         if (ghostClass) {
-                            ghostNode.className =
-                                ghostNode.className.replace(ghostClass, "") +
-                                    " " +
-                                    ghostClass;
+                            ghostNode.classList.add(ghostClass);
                         }
+                        ghostNode.classList.toggle(CLASS_RESIZABLE_GHOST, true);
                         (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
                         transform = wrapper(ghostNode);
                         onClone && onClone({ clone: ghostNode }, ev);
@@ -1176,7 +1193,7 @@ class Resizable extends Uii {
                 }
                 startPointXy = getPointInContainer(ev, container, offsetParentRect, offsetParentCStyle, matrixInfo);
                 onStart &&
-                    onStart.call(uiik, { w: originW, h: originH, transform }, ev);
+                    onStart.call(uiik, { w: originW, h: originH, transform, handle, ghost: ghostNode }, ev);
             });
             onPointerMove((args) => {
                 const { ev, offX, offY } = args;
@@ -1397,39 +1414,13 @@ class Resizable extends Uii {
                         break;
                 }
                 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) {
-                        resize(transform, style, w);
-                    }
-                    if (changeH) {
-                        resize(transform, style, undefined, h);
-                    }
-                }
-                if (changeY) {
-                    transform.moveTo(x, y + sY);
-                }
-                if (changeX) {
-                    transform.moveTo(x + sX, y);
-                }
-                lastX = x;
-                lastY = y;
-                console.log(lastX, lastY);
-                currentW = w;
-                currentH = h;
+                let canResize = true;
                 if (onResize && onResize.call) {
                     onResize.call;
                     const panelRect = getRectInContainer(panel, panel.parentElement, matrixInfo);
@@ -1437,7 +1428,7 @@ class Resizable extends Uii {
                     let centerY = Math.round(panelRect.y + panelRect.h / 2);
                     let sx = Math.round(centerX - originW / 2);
                     let sy = Math.round(centerY - originH / 2);
-                    onResize.call(uiik, {
+                    canResize = onResize.call(uiik, {
                         w,
                         h,
                         ow: w - originW,
@@ -1449,20 +1440,68 @@ class Resizable extends Uii {
                         sy: sy,
                         deg: matrixInfo.angle,
                         transform,
+                        handle
                     }, ev);
                 }
+                if (canResize !== false) {
+                    if (aspectRatio) {
+                        if (changeW) {
+                            style.width = w + "px";
+                            style.height = w / aspectRatio + "px";
+                        }
+                        if (changeH && dir !== "sw" && dir !== "nw") {
+                            style.width = h * aspectRatio + "px";
+                            style.height = h + "px";
+                        }
+                    }
+                    else {
+                        if (changeW) {
+                            resize(transform, style, w);
+                        }
+                        if (changeH) {
+                            resize(transform, style, undefined, h);
+                        }
+                    }
+                    if (changeY) {
+                        transform.moveTo(x, y + sY);
+                    }
+                    if (changeX) {
+                        transform.moveTo(x + sX, y);
+                    }
+                }
+                lastX = x;
+                lastY = y;
+                currentW = w;
+                currentH = h;
             });
             onPointerEnd((args) => {
                 var _a, _b;
                 const { ev } = args;
+                let doDefault = true;
+                handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                let ghostLeft = '0';
+                let ghostTop = '0';
+                let ghostWidth = '0';
+                let ghostHeight = '0';
                 if (ghost && ghostNode) {
-                    panelStyle.left = ghostNode.style.left;
-                    panelStyle.top = ghostNode.style.top;
-                    transform = wrapper(panel);
-                    transform.moveTo((lastX + sX), (lastY + sY));
+                    ghostLeft = ghostNode.style.left;
+                    ghostTop = ghostNode.style.top;
+                    ghostWidth = ghostNode.style.width;
+                    ghostHeight = ghostNode.style.height;
                     ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
                         ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
-                    resize(transform, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
+                }
+                if (onEnd) {
+                    doDefault = onEnd.call(uiik, { w: currentW, h: currentH, transform, handle, ghost: ghostNode }, ev);
+                }
+                if (doDefault === false)
+                    return;
+                if (ghost && ghostNode) {
+                    panelStyle.left = ghostLeft;
+                    panelStyle.top = ghostTop;
+                    transform = wrapper(panel);
+                    transform.moveTo((lastX + sX), (lastY + sY));
+                    resize(transform, panelStyle, parseFloat(ghostWidth), parseFloat(ghostHeight));
                 }
                 if (setOrigin)
                     panel.style.transformOrigin = originalTransformOrigin;
@@ -1483,13 +1522,7 @@ class Resizable extends Uii {
                         }
                     }
                 }
-                handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                onEnd &&
-                    onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true,
         });
     }
     initHandle(panel) {
@@ -1502,6 +1535,15 @@ class Resizable extends Uii {
         else if (isFunction(handleStr)) {
             handles = handleStr(panel);
         }
+        else if (isElement$1(handleStr)) {
+            handles = [handleStr];
+        }
+        else if (isArrayLike(handleStr)) {
+            let eles = filter(handleStr, h => isElement$1(h));
+            if (eles.length > 0) {
+                handles = eles;
+            }
+        }
         if (!handles) {
             console.error('Can not find handles in "' + panel.outerHTML + '"');
             return;
@@ -1549,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({
@@ -1571,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) {
@@ -1610,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;
@@ -1628,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) {
@@ -1985,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;
@@ -2002,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) {
@@ -2029,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";
@@ -2043,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) {
@@ -2271,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) {
@@ -2574,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) {
@@ -2973,7 +3046,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.7";
+var version = "1.4.1";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"
@@ -3006,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.3.7
+ * 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/array'), require('myfx/string'), require('myfx/tree'), require('myfx/utils'), require('myfx')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/collection', 'myfx/is', 'myfx/object', 'myfx/array', 'myfx/string', 'myfx/tree', 'myfx/utils', 'myfx'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.collection, global.is, global.object, global.array, global.string, global.tree, global.utils, global.myfx));
-})(this, (function (exports, collection, is, object, array, string, tree, utils, myfx) { '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) {
@@ -975,6 +993,7 @@
     const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
     const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
     const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
+    const CLASS_RESIZABLE_GHOST = "uii-resizable-ghost";
     const EXP_DIR = new RegExp(CLASS_RESIZABLE_HANDLE_DIR + "(?<dir>[nesw]+)");
     class Resizable extends Uii {
         constructor(els, opts) {
@@ -1107,11 +1126,9 @@
                         }
                         if (ghostNode) {
                             if (ghostClass) {
-                                ghostNode.className =
-                                    ghostNode.className.replace(ghostClass, "") +
-                                        " " +
-                                        ghostClass;
+                                ghostNode.classList.add(ghostClass);
                             }
+                            ghostNode.classList.toggle(CLASS_RESIZABLE_GHOST, true);
                             (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
                             transform = wrapper(ghostNode);
                             onClone && onClone({ clone: ghostNode }, ev);
@@ -1173,7 +1190,7 @@
                     }
                     startPointXy = getPointInContainer(ev, container, offsetParentRect, offsetParentCStyle, matrixInfo);
                     onStart &&
-                        onStart.call(uiik, { w: originW, h: originH, transform }, ev);
+                        onStart.call(uiik, { w: originW, h: originH, transform, handle, ghost: ghostNode }, ev);
                 });
                 onPointerMove((args) => {
                     const { ev, offX, offY } = args;
@@ -1394,39 +1411,13 @@
                             break;
                     }
                     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) {
-                            resize(transform, style, w);
-                        }
-                        if (changeH) {
-                            resize(transform, style, undefined, h);
                         }
                     }
-                    if (changeY) {
-                        transform.moveTo(x, y + sY);
-                    }
-                    if (changeX) {
-                        transform.moveTo(x + sX, y);
-                    }
-                    lastX = x;
-                    lastY = y;
-                    console.log(lastX, lastY);
-                    currentW = w;
-                    currentH = h;
+                    let canResize = true;
                     if (onResize && onResize.call) {
                         onResize.call;
                         const panelRect = getRectInContainer(panel, panel.parentElement, matrixInfo);
@@ -1434,7 +1425,7 @@
                         let centerY = Math.round(panelRect.y + panelRect.h / 2);
                         let sx = Math.round(centerX - originW / 2);
                         let sy = Math.round(centerY - originH / 2);
-                        onResize.call(uiik, {
+                        canResize = onResize.call(uiik, {
                             w,
                             h,
                             ow: w - originW,
@@ -1446,20 +1437,68 @@
                             sy: sy,
                             deg: matrixInfo.angle,
                             transform,
+                            handle
                         }, ev);
                     }
+                    if (canResize !== false) {
+                        if (aspectRatio) {
+                            if (changeW) {
+                                style.width = w + "px";
+                                style.height = w / aspectRatio + "px";
+                            }
+                            if (changeH && dir !== "sw" && dir !== "nw") {
+                                style.width = h * aspectRatio + "px";
+                                style.height = h + "px";
+                            }
+                        }
+                        else {
+                            if (changeW) {
+                                resize(transform, style, w);
+                            }
+                            if (changeH) {
+                                resize(transform, style, undefined, h);
+                            }
+                        }
+                        if (changeY) {
+                            transform.moveTo(x, y + sY);
+                        }
+                        if (changeX) {
+                            transform.moveTo(x + sX, y);
+                        }
+                    }
+                    lastX = x;
+                    lastY = y;
+                    currentW = w;
+                    currentH = h;
                 });
                 onPointerEnd((args) => {
                     var _a, _b;
                     const { ev } = args;
+                    let doDefault = true;
+                    handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                    let ghostLeft = '0';
+                    let ghostTop = '0';
+                    let ghostWidth = '0';
+                    let ghostHeight = '0';
                     if (ghost && ghostNode) {
-                        panelStyle.left = ghostNode.style.left;
-                        panelStyle.top = ghostNode.style.top;
-                        transform = wrapper(panel);
-                        transform.moveTo((lastX + sX), (lastY + sY));
+                        ghostLeft = ghostNode.style.left;
+                        ghostTop = ghostNode.style.top;
+                        ghostWidth = ghostNode.style.width;
+                        ghostHeight = ghostNode.style.height;
                         ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
                             ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
-                        resize(transform, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
+                    }
+                    if (onEnd) {
+                        doDefault = onEnd.call(uiik, { w: currentW, h: currentH, transform, handle, ghost: ghostNode }, ev);
+                    }
+                    if (doDefault === false)
+                        return;
+                    if (ghost && ghostNode) {
+                        panelStyle.left = ghostLeft;
+                        panelStyle.top = ghostTop;
+                        transform = wrapper(panel);
+                        transform.moveTo((lastX + sX), (lastY + sY));
+                        resize(transform, panelStyle, parseFloat(ghostWidth), parseFloat(ghostHeight));
                     }
                     if (setOrigin)
                         panel.style.transformOrigin = originalTransformOrigin;
@@ -1480,13 +1519,7 @@
                             }
                         }
                     }
-                    handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                    onEnd &&
-                        onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
                 });
-            }, {
-                threshold: THRESHOLD,
-                lockPage: true,
             });
         }
         initHandle(panel) {
@@ -1499,6 +1532,15 @@
             else if (is.isFunction(handleStr)) {
                 handles = handleStr(panel);
             }
+            else if (myfx.isElement(handleStr)) {
+                handles = [handleStr];
+            }
+            else if (is.isArrayLike(handleStr)) {
+                let eles = myfx.filter(handleStr, h => myfx.isElement(h));
+                if (eles.length > 0) {
+                    handles = eles;
+                }
+            }
             if (!handles) {
                 console.error('Can not find handles in "' + panel.outerHTML + '"');
                 return;
@@ -1546,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({
@@ -1568,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) {
@@ -1607,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;
@@ -1625,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) {
@@ -1982,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;
@@ -1999,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) {
@@ -2026,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";
@@ -2040,6 +2118,7 @@
                     el.dataset.cursorActive = this.opts.cursor.active || "move";
                 }
             }
+            OPTION_MAP.set(el, this.opts);
         });
     };
     function newDraggable(els, opts) {
@@ -2268,9 +2347,6 @@
                 el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
                 onEnd && onEnd({ deg }, ev);
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true,
         });
     }
     function newRotatable(els, opts) {
@@ -2571,9 +2647,6 @@
                 if (onEnd)
                     onEnd({ selection, selectable: con }, ev);
             });
-        }, {
-            threshold: THRESHOLD,
-            lockPage: true
         });
     };
     function newSelectable(container, opts) {
@@ -2970,7 +3043,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.7";
+    var version = "1.4.1";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"
@@ -3016,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.3.7",
+  "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 = {
@@ -25,15 +24,18 @@ export type ResizableOptions = {
     minSize?: number | Array<number>;
     maxSize?: number | Array<number>;
     aspectRatio?: number;
-    ghost?: boolean | Function;
+    ghost?: ((panel: HTMLElement | SVGGraphicsElement) => HTMLElement | SVGGraphicsElement) | boolean;
     ghostClass?: string;
     ox?: number | string;
     oy?: number | string;
+    eventCapture?: boolean;
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         w: number;
         h: number;
         transform: UiiTransform;
+        handle: HTMLElement | SVGGraphicsElement;
+        ghost: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => void;
     onResize?: (data: {
         w: number;
@@ -46,14 +48,17 @@ export type ResizableOptions = {
             y: number;
         }>;
         transform: UiiTransform;
-    }, event: MouseEvent) => void;
+        handle: HTMLElement | SVGGraphicsElement;
+    }, event: MouseEvent) => boolean | void;
     onEnd?: (data: {
         w: number;
         h: number;
         transform: UiiTransform;
-    }, event: MouseEvent) => void;
+        handle: HTMLElement | SVGGraphicsElement;
+        ghost: HTMLElement | SVGGraphicsElement;
+    }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
-        clone: HTMLElement;
+        clone: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => void;
 };
 export type SplittableOptions = {
@@ -66,6 +71,7 @@ export type SplittableOptions = {
     ghostClass?: string;
     ghostTo?: string | HTMLElement;
     handle?: string | HTMLElement | HTMLElement[];
+    eventCapture?: boolean;
     onStart?: (data: {
         size1: number;
         size2: number;
@@ -94,10 +100,10 @@ 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?: ((el: HTMLElement) => HTMLElement) | boolean;
+    ghost?: ((panel: HTMLElement | SVGGraphicsElement) => HTMLElement | SVGGraphicsElement) | boolean;
     ghostClass?: string;
     ghostTo?: string | HTMLElement;
     direction?: "v" | "h";
@@ -117,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;
@@ -139,6 +147,7 @@ export type DraggableOptions = {
         x: number;
         y: number;
         transform: UiiTransform;
+        ghost: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
         clone: HTMLElement | SVGGraphicsElement;
@@ -157,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>;
@@ -190,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;
@@ -217,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>;
@@ -246,6 +258,7 @@ export type SortableOptions = {
     };
     spill?: "remove" | "revert";
     sort?: boolean;
+    eventCapture?: boolean;
     onActive?: (data: {
         item: HTMLElement;
         from: HTMLElement;