uiik 1.3.7 → 1.4.0

package/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.7
+ * uiik v1.4.0
  * 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
@@ -7,11 +7,11 @@
 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 { 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.
@@ -978,6 +978,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 +1111,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 +1175,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 +1396,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 +1410,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 +1422,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,9 +1504,6 @@ class Resizable extends Uii {
                         }
                     }
                 }
-                handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                onEnd &&
-                    onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
             });
         }, {
             threshold: THRESHOLD,
@@ -1502,6 +1520,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;
@@ -2973,7 +3000,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.7";
+var version = "1.4.0";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.3.7
+ * uiik v1.4.0
  * 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'), 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';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -975,6 +975,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 +1108,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 +1172,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 +1393,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 +1407,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 +1419,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,9 +1501,6 @@
                             }
                         }
                     }
-                    handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                    onEnd &&
-                        onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
                 });
             }, {
                 threshold: THRESHOLD,
@@ -1499,6 +1517,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;
@@ -2970,7 +2997,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.7";
+    var version = "1.4.0";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

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

package/types.d.ts

@@ -25,7 +25,7 @@ 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;
@@ -34,6 +34,8 @@ export type ResizableOptions = {
         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 = {
@@ -97,7 +102,7 @@ export type DraggableOptions = {
     handle?: string;
     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";