npm - uiik - Versions diffs - 1.3.5 → 1.3.7 - Mend

uiik 1.3.5 → 1.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/detector.d.ts CHANGED Viewed

@@ -12,4 +12,4 @@ export declare class CollisionDetector {
     getInclusions(): Array<HTMLElement>;
     getInclusions(x1: number, y1: number, x2: number, y2: number): Array<HTMLElement>;
 }
-export declare function newCollisionDetector(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection, opts?: CollisionDetectorOptions): CollisionDetector;
+export declare function newCollisionDetector(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection | NodeListOf<Element>, opts?: CollisionDetectorOptions): CollisionDetector;

package/draggable.d.ts CHANGED Viewed

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

package/droppable.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import { DroppableOptions, Uii } from "./types";
 export declare class Droppable extends Uii {
     #private;
-    constructor(el: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions);
+    constructor(el: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DroppableOptions);
     bindEvent(droppable: HTMLElement, opts: DroppableOptions): void;
     active(target: HTMLElement): void;
     deactive(target: HTMLElement): void;
 }
-export declare function newDroppable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions): Droppable;
+export declare function newDroppable(els: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DroppableOptions): Droppable;

package/index.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.5
+ * uiik v1.3.7
  * 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
@@ -984,7 +984,6 @@ class Resizable extends Uii {
         super(els, assign({
             handleSize: 8,
             minSize: 50,
-            dir: ["n", "s", "e", "w", "ne", "nw", "se", "sw"],
             ghost: false,
             offset: 0,
         }, opts));
@@ -1428,6 +1427,7 @@ class Resizable extends Uii {
                 }
                 lastX = x;
                 lastY = y;
+                console.log(lastX, lastY);
                 currentW = w;
                 currentH = h;
                 if (onResize && onResize.call) {
@@ -1456,11 +1456,12 @@ class Resizable extends Uii {
                 var _a, _b;
                 const { ev } = args;
                 if (ghost && ghostNode) {
-                    ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
-                        ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
                     panelStyle.left = ghostNode.style.left;
                     panelStyle.top = ghostNode.style.top;
-                    moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
+                    transform = wrapper(panel);
+                    transform.moveTo((lastX + sX), (lastY + sY));
+                    ((_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 (setOrigin)
@@ -1502,7 +1503,7 @@ class Resizable extends Uii {
             handles = handleStr(panel);
         }
         if (!handles) {
-            console.error('Can not find handles with "' + panel.outerHTML + '"');
+            console.error('Can not find handles in "' + panel.outerHTML + '"');
             return;
         }
         handles = isArrayLike(handles) ? handles : [handles];
@@ -1779,7 +1780,7 @@ class Draggable extends Uii {
                     let ghostParent = ghostTo ? (isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : dragDom.parentNode;
                     ghostParent === null || ghostParent === void 0 ? void 0 : ghostParent.appendChild(ghostNode);
                     transform = wrapper(ghostNode, opts.useTransform);
-                    onClone && onClone({ clone: ghostNode }, ev);
+                    onClone && onClone({ clone: ghostNode, draggable: dragDom }, ev);
                 }
                 else {
                     transform = wrapper(dragDom, opts.useTransform);
@@ -1790,9 +1791,11 @@ class Draggable extends Uii {
                 dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
                 onStart &&
                     onStart({ draggable: dragDom, x: startPointXy.x, y: startPointXy.y, transform }, ev);
-                const customEv = new Event("uii-dragactive", {
+                const customEv = new CustomEvent("uii-dragactive", {
                     bubbles: true,
+                    composed: true,
                     cancelable: false,
+                    detail: { target: dragDom }
                 });
                 dragDom.dispatchEvent(customEv);
             });
@@ -1987,9 +1990,13 @@ class Draggable extends Uii {
                             ? false
                             : true;
                 }
-                const customEv = new Event("uii-dragdeactive", {
+                const customEv = new CustomEvent("uii-dragdeactive", {
                     bubbles: true,
+                    composed: true,
                     cancelable: false,
+                    detail: {
+                        target: dragDom
+                    }
                 });
                 dragDom.dispatchEvent(customEv);
                 if (ghost) {
@@ -2152,13 +2159,15 @@ class Droppable extends Uii {
 }
 _Droppable_active = new WeakMap();
 document.addEventListener("uii-dragactive", (e) => {
+    let { target } = e.detail;
     each(Droppables, dpb => {
-        dpb.active(e.target);
+        dpb.active(target);
     });
 });
 document.addEventListener("uii-dragdeactive", (e) => {
+    let { target } = e.detail;
     each(Droppables, dpb => {
-        dpb.deactive(e.target);
+        dpb.deactive(target);
     });
 });
 function newDroppable(els, opts) {
@@ -2964,7 +2973,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
-var version = "1.3.5";
+var version = "1.3.7";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.5
+ * uiik v1.3.7
  * 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
@@ -981,7 +981,6 @@
             super(els, object.assign({
                 handleSize: 8,
                 minSize: 50,
-                dir: ["n", "s", "e", "w", "ne", "nw", "se", "sw"],
                 ghost: false,
                 offset: 0,
             }, opts));
@@ -1425,6 +1424,7 @@
                     }
                     lastX = x;
                     lastY = y;
+                    console.log(lastX, lastY);
                     currentW = w;
                     currentH = h;
                     if (onResize && onResize.call) {
@@ -1453,11 +1453,12 @@
                     var _a, _b;
                     const { ev } = args;
                     if (ghost && ghostNode) {
-                        ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
-                            ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
                         panelStyle.left = ghostNode.style.left;
                         panelStyle.top = ghostNode.style.top;
-                        moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
+                        transform = wrapper(panel);
+                        transform.moveTo((lastX + sX), (lastY + sY));
+                        ((_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 (setOrigin)
@@ -1499,7 +1500,7 @@
                 handles = handleStr(panel);
             }
             if (!handles) {
-                console.error('Can not find handles with "' + panel.outerHTML + '"');
+                console.error('Can not find handles in "' + panel.outerHTML + '"');
                 return;
             }
             handles = is.isArrayLike(handles) ? handles : [handles];
@@ -1776,7 +1777,7 @@
                         let ghostParent = ghostTo ? (is.isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : dragDom.parentNode;
                         ghostParent === null || ghostParent === void 0 ? void 0 : ghostParent.appendChild(ghostNode);
                         transform = wrapper(ghostNode, opts.useTransform);
-                        onClone && onClone({ clone: ghostNode }, ev);
+                        onClone && onClone({ clone: ghostNode, draggable: dragDom }, ev);
                     }
                     else {
                         transform = wrapper(dragDom, opts.useTransform);
@@ -1787,9 +1788,11 @@
                     dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
                     onStart &&
                         onStart({ draggable: dragDom, x: startPointXy.x, y: startPointXy.y, transform }, ev);
-                    const customEv = new Event("uii-dragactive", {
+                    const customEv = new CustomEvent("uii-dragactive", {
                         bubbles: true,
+                        composed: true,
                         cancelable: false,
+                        detail: { target: dragDom }
                     });
                     dragDom.dispatchEvent(customEv);
                 });
@@ -1984,9 +1987,13 @@
                                 ? false
                                 : true;
                     }
-                    const customEv = new Event("uii-dragdeactive", {
+                    const customEv = new CustomEvent("uii-dragdeactive", {
                         bubbles: true,
+                        composed: true,
                         cancelable: false,
+                        detail: {
+                            target: dragDom
+                        }
                     });
                     dragDom.dispatchEvent(customEv);
                     if (ghost) {
@@ -2149,13 +2156,15 @@
     }
     _Droppable_active = new WeakMap();
     document.addEventListener("uii-dragactive", (e) => {
+        let { target } = e.detail;
         collection.each(Droppables, dpb => {
-            dpb.active(e.target);
+            dpb.active(target);
         });
     });
     document.addEventListener("uii-dragdeactive", (e) => {
+        let { target } = e.detail;
         collection.each(Droppables, dpb => {
-            dpb.deactive(e.target);
+            dpb.deactive(target);
         });
     });
     function newDroppable(els, opts) {
@@ -2961,7 +2970,7 @@
         return new Sortable(container, opts);
     }
-    var version = "1.3.5";
+    var version = "1.3.7";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json CHANGED Viewed

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

package/types.d.ts CHANGED Viewed

@@ -21,10 +21,9 @@ export declare abstract class Uii {
     protected onOptionChanged(opts?: Record<string, any>): void;
 }
 export type ResizableOptions = {
-    handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
+    handle: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
     minSize?: number | Array<number>;
     maxSize?: number | Array<number>;
-    dir?: string[];
     aspectRatio?: number;
     ghost?: boolean | Function;
     ghostClass?: string;
@@ -143,6 +142,7 @@ export type DraggableOptions = {
     }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
         clone: HTMLElement | SVGGraphicsElement;
+        draggable: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => void;
     onSnap?: (data: {
         el: HTMLElement | SVGGraphicsElement;