uiik 1.3.2 → 1.3.3

package/index.esm.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.3.2
+ * uiik v1.3.3
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
- * c) 2021-2024 @holyhigh2 may be freely distributed under the MIT license
+ * c) 2021-2025 @holyhigh2 may be freely distributed under the MIT license
  */
-import { isDefined, isNumber, isNaN, isString, isArrayLike, isElement, isEmpty, isArray, isFunction, isBoolean, isUndefined } from 'myfx/is';
 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 { split, test } from 'myfx/string';
 import { compact, findIndex } from 'myfx/array';
+import { split, test } from 'myfx/string';
 import { closest } from 'myfx/tree';
 import { alphaId } from 'myfx/utils';
 
@@ -486,6 +486,13 @@ function parseOxy(ox, oy, w, h, el) {
 function normalizeVector(x, y) {
     let len = Math.sqrt(x * x + y * y);
     return { x: x / len, y: y / len };
+}
+function isVisible(el) {
+    let rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+        return false;
+    }
+    return true;
 }
 
 var _Uii_listeners;
@@ -693,7 +700,7 @@ class Splittable extends Uii {
         _Splittable_instances.add(this);
         each(this.ele, con => {
             const pos = window.getComputedStyle(con).position;
-            if (pos === "static") {
+            if (pos === "static" || isBlank(pos)) {
                 con.style.position = "relative";
             }
             con.classList.toggle(CLASS_SPLITTABLE, true);
@@ -766,7 +773,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
     });
     return dir;
 }, _Splittable_bindHandle = function _Splittable_bindHandle(minSizeAry, stickyAry, opts, dir, dom1, dom2, handle) {
-    var _a;
+    var _a, _b;
     const handleSize = opts.handleSize;
     if (!handle) {
         handle = document.createElement('div');
@@ -774,6 +781,12 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
         if (!opts.inside) {
             initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
         }
+        if (!isVisible(dom2)) {
+            (_a = dom2.parentElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', () => {
+                initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
+                handle.style.left = initPos - handleSize / 2 + 'px';
+            }, { once: true });
+        }
         const sensorHCss = `width:${handleSize}px;height:100%;top:0;left:${initPos - handleSize / 2}px;z-index:9;`;
         const sensorVCss = `height:${handleSize}px;width:100%;left:0;top:${initPos - handleSize / 2}px;z-index:9;`;
         handle.style.cssText =
@@ -781,7 +794,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
         if (opts.inside) {
             dom2.appendChild(handle);
         }
-        (_a = dom2.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(handle, dom2);
+        (_b = dom2.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(handle, dom2);
     }
     handle.style.cursor = dir === 'v' ? 's-resize' : 'e-resize';
     handle.dataset.cursor = handle.style.cursor;
@@ -2934,7 +2947,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.2";
+var version = "1.3.3";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"
@@ -2967,4 +2980,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, 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, 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.2
+ * uiik v1.3.3
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
- * c) 2021-2024 @holyhigh2 may be freely distributed under the MIT license
+ * 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/is'), require('myfx/collection'), require('myfx/object'), require('myfx/string'), require('myfx/array'), require('myfx/tree'), require('myfx/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/string', 'myfx/array', 'myfx/tree', 'myfx/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.string, global.array, global.tree, global.utils));
-})(this, (function (exports, is, collection, object, string, array, tree, utils) { 'use strict';
+    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')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'myfx/collection', 'myfx/is', 'myfx/object', '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.array, global.string, global.tree, global.utils));
+})(this, (function (exports, collection, is, object, array, string, tree, utils) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -484,6 +484,13 @@
     function normalizeVector(x, y) {
         let len = Math.sqrt(x * x + y * y);
         return { x: x / len, y: y / len };
+    }
+    function isVisible(el) {
+        let rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) {
+            return false;
+        }
+        return true;
     }
 
     var _Uii_listeners;
@@ -691,7 +698,7 @@
             _Splittable_instances.add(this);
             collection.each(this.ele, con => {
                 const pos = window.getComputedStyle(con).position;
-                if (pos === "static") {
+                if (pos === "static" || is.isBlank(pos)) {
                     con.style.position = "relative";
                 }
                 con.classList.toggle(CLASS_SPLITTABLE, true);
@@ -764,7 +771,7 @@
         });
         return dir;
     }, _Splittable_bindHandle = function _Splittable_bindHandle(minSizeAry, stickyAry, opts, dir, dom1, dom2, handle) {
-        var _a;
+        var _a, _b;
         const handleSize = opts.handleSize;
         if (!handle) {
             handle = document.createElement('div');
@@ -772,6 +779,12 @@
             if (!opts.inside) {
                 initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
             }
+            if (!isVisible(dom2)) {
+                (_a = dom2.parentElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', () => {
+                    initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
+                    handle.style.left = initPos - handleSize / 2 + 'px';
+                }, { once: true });
+            }
             const sensorHCss = `width:${handleSize}px;height:100%;top:0;left:${initPos - handleSize / 2}px;z-index:9;`;
             const sensorVCss = `height:${handleSize}px;width:100%;left:0;top:${initPos - handleSize / 2}px;z-index:9;`;
             handle.style.cssText =
@@ -779,7 +792,7 @@
             if (opts.inside) {
                 dom2.appendChild(handle);
             }
-            (_a = dom2.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(handle, dom2);
+            (_b = dom2.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(handle, dom2);
         }
         handle.style.cursor = dir === 'v' ? 's-resize' : 'e-resize';
         handle.dataset.cursor = handle.style.cursor;
@@ -2932,7 +2945,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.2";
+    var version = "1.3.3";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"
@@ -2996,6 +3009,7 @@
     exports.getTranslate = getTranslate;
     exports.getVertex = getVertex;
     exports.isSVGEl = isSVGEl;
+    exports.isVisible = isVisible;
     exports.lockPage = lockPage;
     exports.moveBy = moveBy;
     exports.moveTo = moveTo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "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.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",

package/utils.d.ts

@@ -89,3 +89,4 @@ export declare function normalizeVector(x: number, y: number): {
     x: number;
     y: number;
 };
+export declare function isVisible(el: Element): boolean;