uiik 1.3.0-beta.2 → 1.3.0-beta.3

package/CHANGELOG.md

@@ -7,7 +7,12 @@
 ### 新增
 - handle 属性变更，支持更多类型
 - onPointerDown 事件，可用于阻止后续逻辑
-- draggable watch参数，可用于dom变动自动检测 
+- Draggable watch参数，可用于dom变动自动检测
+- Draggable self参数，仅自身元素响应时触发
+- Droppable watch参数，可用于dom变动自动检测
+- Uiik mouseButton参数，可指定鼠标响应按钮
+### 修复
+- Droppable 元素同时为Draggable时会自己触发Droppable事件
 
 ## [1.2.0] - 2023/9/3
 ### Add

package/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.0-beta.2
+ * uiik v1.3.0-beta.3
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
@@ -430,6 +430,7 @@ class Uii {
         this.enabled = true;
         _Uii_listeners.set(this, []);
         this.opts = opts || {};
+        this.opts.mouseButton = this.opts.mouseButton || 'left';
         if (isArrayLike(ele) && !isString(ele)) {
             this.ele = map(ele, (el) => {
                 let e = isString(el) ? document.querySelector(el) : el;
@@ -449,7 +450,9 @@ class Uii {
                 console.error('Invalid element "' + ele + '"');
                 return;
             }
-            this.ele = isArrayLike(el) ? toArray(el) : [el];
+            this.ele = isArrayLike(el)
+                ? toArray(el)
+                : [el];
         }
     }
     destroy() {
@@ -463,11 +466,23 @@ class Uii {
         const threshold = opts.threshold || 0;
         const toLockPage = opts.lockPage || false;
         const uiiOptions = this.opts;
-        this.registerEvent(el, 'mousedown', (e) => {
+        this.registerEvent(el, "mousedown", (e) => {
+            if (uiiOptions.mouseButton) {
+                switch (uiiOptions.mouseButton) {
+                    case "left":
+                        if (e.button != 0)
+                            return;
+                        break;
+                    case "right":
+                        if (e.button != 2)
+                            return;
+                        break;
+                }
+            }
             let t = e.target;
             if (!t)
                 return;
-            const hasCursor = !isEmpty(get(uiiOptions, 'cursor.active'));
+            const hasCursor = !isEmpty(get(uiiOptions, "cursor.active"));
             const currentStyle = el.style;
             const currentCStyle = window.getComputedStyle(el);
             const currentRect = el.getBoundingClientRect();
@@ -481,12 +496,23 @@ class Uii {
             let onPointerMove;
             let onPointerEnd;
             const toBreak = !!onPointerDown({
-                onPointerMove: (pm) => { onPointerMove = pm; },
-                onPointerStart: (ps) => { onPointerStart = ps; },
-                onPointerEnd: (pe) => { onPointerEnd = pe; },
+                onPointerMove: (pm) => {
+                    onPointerMove = pm;
+                },
+                onPointerStart: (ps) => {
+                    onPointerStart = ps;
+                },
+                onPointerEnd: (pe) => {
+                    onPointerEnd = pe;
+                },
                 ev: e,
-                pointX: e.clientX, pointY: e.clientY, target: t,
-                currentTarget: el, currentStyle, currentCStyle, currentRect
+                pointX: e.clientX,
+                pointY: e.clientY,
+                target: t,
+                currentTarget: el,
+                currentStyle,
+                currentCStyle,
+                currentRect,
             });
             if (toBreak) {
                 e.preventDefault();
@@ -511,12 +537,21 @@ class Uii {
                         return false;
                     }
                 }
-                onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+                onPointerMove &&
+                    onPointerMove({
+                        ev,
+                        pointX: ev.clientX,
+                        pointY: ev.clientY,
+                        offX,
+                        offY,
+                        currentStyle,
+                        currentCStyle,
+                    });
             };
             const pointerEnd = (ev) => {
-                document.removeEventListener('mousemove', pointerMove, false);
-                document.removeEventListener('mouseup', pointerEnd, false);
-                window.removeEventListener('blur', pointerEnd, false);
+                document.removeEventListener("mousemove", pointerMove, false);
+                document.removeEventListener("mouseup", pointerEnd, false);
+                window.removeEventListener("blur", pointerEnd, false);
                 if (dragging) {
                     if (toLockPage) {
                         unlockPage();
@@ -1348,7 +1383,8 @@ class Draggable extends Uii {
             scroll: true,
             snapOptions: {
                 tolerance: 10,
-            }
+            },
+            self: true
         }, opts));
         _Draggable_instances.add(this);
         _Draggable_handleMap.set(this, new WeakMap());
@@ -1420,6 +1456,8 @@ class Draggable extends Uii {
             if (handle && !handle.contains(t)) {
                 return true;
             }
+            if (opts.self && dragDom !== t)
+                return;
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                 return true;
@@ -1799,7 +1837,9 @@ const Droppables = [];
 const CLASS_DROPPABLE = "uii-droppable";
 class Droppable extends Uii {
     constructor(el, opts) {
-        super(el, assign({}, opts));
+        super(el, assign({
+            watch: true
+        }, opts));
         _Droppable_active.set(this, void 0);
         Droppables.push(this);
     }
@@ -1807,6 +1847,8 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mouseenter", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (e.target === droppable)
+                return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
                     droppable.classList.toggle(cls, true);
@@ -1820,6 +1862,8 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mouseleave", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (e.target === droppable)
+                return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
                     droppable.classList.toggle(cls, false);
@@ -1833,11 +1877,15 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mousemove", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (e.target === droppable)
+                return;
             opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
         });
         this.registerEvent(droppable, "mouseup", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (e.target === droppable)
+                return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
                     droppable.classList.toggle(cls, false);
@@ -1849,6 +1897,10 @@ class Droppable extends Uii {
     active(target) {
         let valid = true;
         const opts = this.opts;
+        if (opts.watch && this.eleString) {
+            let nodes = document.querySelectorAll(this.eleString);
+            this.ele = toArray(nodes);
+        }
         if (isString(opts.accepts)) {
             valid = !!target.dataset.dropType && test(opts.accepts, target.dataset.dropType);
         }
@@ -2703,7 +2755,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.0-beta.2";
+var version = "1.3.0-beta.3";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.0-beta.2
+ * uiik v1.3.0-beta.3
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
@@ -429,6 +429,7 @@
             this.enabled = true;
             _Uii_listeners.set(this, []);
             this.opts = opts || {};
+            this.opts.mouseButton = this.opts.mouseButton || 'left';
             if (is.isArrayLike(ele) && !is.isString(ele)) {
                 this.ele = collection.map(ele, (el) => {
                     let e = is.isString(el) ? document.querySelector(el) : el;
@@ -448,7 +449,9 @@
                     console.error('Invalid element "' + ele + '"');
                     return;
                 }
-                this.ele = is.isArrayLike(el) ? collection.toArray(el) : [el];
+                this.ele = is.isArrayLike(el)
+                    ? collection.toArray(el)
+                    : [el];
             }
         }
         destroy() {
@@ -462,11 +465,23 @@
             const threshold = opts.threshold || 0;
             const toLockPage = opts.lockPage || false;
             const uiiOptions = this.opts;
-            this.registerEvent(el, 'mousedown', (e) => {
+            this.registerEvent(el, "mousedown", (e) => {
+                if (uiiOptions.mouseButton) {
+                    switch (uiiOptions.mouseButton) {
+                        case "left":
+                            if (e.button != 0)
+                                return;
+                            break;
+                        case "right":
+                            if (e.button != 2)
+                                return;
+                            break;
+                    }
+                }
                 let t = e.target;
                 if (!t)
                     return;
-                const hasCursor = !is.isEmpty(object.get(uiiOptions, 'cursor.active'));
+                const hasCursor = !is.isEmpty(object.get(uiiOptions, "cursor.active"));
                 const currentStyle = el.style;
                 const currentCStyle = window.getComputedStyle(el);
                 const currentRect = el.getBoundingClientRect();
@@ -480,12 +495,23 @@
                 let onPointerMove;
                 let onPointerEnd;
                 const toBreak = !!onPointerDown({
-                    onPointerMove: (pm) => { onPointerMove = pm; },
-                    onPointerStart: (ps) => { onPointerStart = ps; },
-                    onPointerEnd: (pe) => { onPointerEnd = pe; },
+                    onPointerMove: (pm) => {
+                        onPointerMove = pm;
+                    },
+                    onPointerStart: (ps) => {
+                        onPointerStart = ps;
+                    },
+                    onPointerEnd: (pe) => {
+                        onPointerEnd = pe;
+                    },
                     ev: e,
-                    pointX: e.clientX, pointY: e.clientY, target: t,
-                    currentTarget: el, currentStyle, currentCStyle, currentRect
+                    pointX: e.clientX,
+                    pointY: e.clientY,
+                    target: t,
+                    currentTarget: el,
+                    currentStyle,
+                    currentCStyle,
+                    currentRect,
                 });
                 if (toBreak) {
                     e.preventDefault();
@@ -510,12 +536,21 @@
                             return false;
                         }
                     }
-                    onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+                    onPointerMove &&
+                        onPointerMove({
+                            ev,
+                            pointX: ev.clientX,
+                            pointY: ev.clientY,
+                            offX,
+                            offY,
+                            currentStyle,
+                            currentCStyle,
+                        });
                 };
                 const pointerEnd = (ev) => {
-                    document.removeEventListener('mousemove', pointerMove, false);
-                    document.removeEventListener('mouseup', pointerEnd, false);
-                    window.removeEventListener('blur', pointerEnd, false);
+                    document.removeEventListener("mousemove", pointerMove, false);
+                    document.removeEventListener("mouseup", pointerEnd, false);
+                    window.removeEventListener("blur", pointerEnd, false);
                     if (dragging) {
                         if (toLockPage) {
                             unlockPage();
@@ -1347,7 +1382,8 @@
                 scroll: true,
                 snapOptions: {
                     tolerance: 10,
-                }
+                },
+                self: true
             }, opts));
             _Draggable_instances.add(this);
             _Draggable_handleMap.set(this, new WeakMap());
@@ -1419,6 +1455,8 @@
                 if (handle && !handle.contains(t)) {
                     return true;
                 }
+                if (opts.self && dragDom !== t)
+                    return;
                 const onPointerDown = opts.onPointerDown;
                 if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                     return true;
@@ -1798,7 +1836,9 @@
     const CLASS_DROPPABLE = "uii-droppable";
     class Droppable extends Uii {
         constructor(el, opts) {
-            super(el, object.assign({}, opts));
+            super(el, object.assign({
+                watch: true
+            }, opts));
             _Droppable_active.set(this, void 0);
             Droppables.push(this);
         }
@@ -1806,6 +1846,8 @@
             this.registerEvent(droppable, "mouseenter", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (e.target === droppable)
+                    return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
                         droppable.classList.toggle(cls, true);
@@ -1819,6 +1861,8 @@
             this.registerEvent(droppable, "mouseleave", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (e.target === droppable)
+                    return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
                         droppable.classList.toggle(cls, false);
@@ -1832,11 +1876,15 @@
             this.registerEvent(droppable, "mousemove", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (e.target === droppable)
+                    return;
                 opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
             this.registerEvent(droppable, "mouseup", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (e.target === droppable)
+                    return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
                         droppable.classList.toggle(cls, false);
@@ -1848,6 +1896,10 @@
         active(target) {
             let valid = true;
             const opts = this.opts;
+            if (opts.watch && this.eleString) {
+                let nodes = document.querySelectorAll(this.eleString);
+                this.ele = collection.toArray(nodes);
+            }
             if (is.isString(opts.accepts)) {
                 valid = !!target.dataset.dropType && string.test(opts.accepts, target.dataset.dropType);
             }
@@ -2702,7 +2754,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.0-beta.2";
+    var version = "1.3.0-beta.3";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.3",
   "description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
   "main": "index.js",
   "module": "index.esm.js",

package/types.d.ts

@@ -1,4 +1,4 @@
-import { UiiTransform } from './transform';
+import { UiiTransform } from "./transform";
 export declare abstract class Uii {
     #private;
     protected ele: Array<HTMLElement>;
@@ -88,6 +88,8 @@ export type SplittableOptions = {
     }, event: MouseEvent) => void;
 };
 export type DraggableOptions = {
+    self?: boolean;
+    mouseButton?: 'all' | "left" | "right";
     containment?: boolean | HTMLElement | string;
     watch?: boolean | string;
     threshold?: number;
@@ -148,6 +150,7 @@ export type DraggableOptions = {
     }, event: MouseEvent) => void;
 };
 export type DroppableOptions = {
+    watch?: boolean;
     activeClass?: string;
     hoverClass?: string;
     accepts?: ((ele: Array<HTMLElement>, draggable: HTMLElement) => boolean) | string;
@@ -235,10 +238,10 @@ export type SortableOptions = {
     handle?: string;
     activeClass?: string;
     move?: {
-        to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | 'copy';
+        to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | "copy";
         from?: ((item: HTMLElement, from: HTMLElement, to: HTMLElement) => boolean) | boolean;
     };
-    spill?: 'remove' | 'revert';
+    spill?: "remove" | "revert";
     sort?: boolean;
     onActive?: (data: {
         item: HTMLElement;