uiik 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## [1.3.4] - 2025/8/24
+### 修复
+- Sortable filter数据后spill表现异常
 
 ## [1.3.2] - 2024/4/6
 ### 修复

package/index.esm.js

@@ -1,16 +1,17 @@
 /**
- * uiik v1.3.2
+ * uiik v1.3.4
  * 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';
+import { filter, last } from 'myfx';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -486,6 +487,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 +701,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 +774,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 +782,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 +795,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;
@@ -2627,6 +2641,8 @@ class Sortable extends Uii {
     onOptionChanged() { }
 }
 _Sortable_removeListenItems = new WeakMap();
+const NextNodeMap = new Map();
+const FilteredNodeMap = new Map();
 let DraggingData = null;
 function bindContainer(registerEvent, container, opts) {
     registerEvent(container, "mousedown", (e) => {
@@ -2661,6 +2677,8 @@ function bindContainer(registerEvent, container, opts) {
         let dragging = false;
         let ghostNode = null;
         let removeListenItems = null;
+        NextNodeMap.set(draggingItem, draggingItem.nextElementSibling);
+        FilteredNodeMap.set(con, filteredItems);
         const dragListener = (ev) => {
             const newX = ev.clientX;
             const newY = ev.clientY;
@@ -2770,7 +2788,7 @@ function bindContainer(registerEvent, container, opts) {
             }
             else if (DraggingData.spill === 'revert') {
                 (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
-                const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                const nextSibling = NextNodeMap.get(DraggingData.item);
                 DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
             }
         }
@@ -2850,12 +2868,17 @@ function bindContainer(registerEvent, container, opts) {
             else {
                 if (draggingItem.parentElement)
                     draggingItem.parentElement.removeChild(draggingItem);
+                const list = filter(FilteredNodeMap.get(container), x => x !== draggingItem);
                 if (dir[0] === "t") {
-                    container.insertBefore(draggingItem, container.children[0]);
+                    container.insertBefore(draggingItem, list[0]);
                 }
                 else {
-                    container.appendChild(draggingItem);
-                    container.children.length - 1;
+                    if (list.length !== container.children.length) {
+                        last(list).after(draggingItem);
+                    }
+                    else {
+                        container.appendChild(draggingItem);
+                    }
                 }
             }
         }
@@ -2934,7 +2957,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.2";
+var version = "1.3.4";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"
@@ -2967,4 +2990,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.4
  * 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'), 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';
 
     /******************************************************************************
     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;
@@ -2625,6 +2638,8 @@
         onOptionChanged() { }
     }
     _Sortable_removeListenItems = new WeakMap();
+    const NextNodeMap = new Map();
+    const FilteredNodeMap = new Map();
     let DraggingData = null;
     function bindContainer(registerEvent, container, opts) {
         registerEvent(container, "mousedown", (e) => {
@@ -2659,6 +2674,8 @@
             let dragging = false;
             let ghostNode = null;
             let removeListenItems = null;
+            NextNodeMap.set(draggingItem, draggingItem.nextElementSibling);
+            FilteredNodeMap.set(con, filteredItems);
             const dragListener = (ev) => {
                 const newX = ev.clientX;
                 const newY = ev.clientY;
@@ -2768,7 +2785,7 @@
                 }
                 else if (DraggingData.spill === 'revert') {
                     (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
-                    const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                    const nextSibling = NextNodeMap.get(DraggingData.item);
                     DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
                 }
             }
@@ -2848,12 +2865,17 @@
                 else {
                     if (draggingItem.parentElement)
                         draggingItem.parentElement.removeChild(draggingItem);
+                    const list = myfx.filter(FilteredNodeMap.get(container), x => x !== draggingItem);
                     if (dir[0] === "t") {
-                        container.insertBefore(draggingItem, container.children[0]);
+                        container.insertBefore(draggingItem, list[0]);
                     }
                     else {
-                        container.appendChild(draggingItem);
-                        container.children.length - 1;
+                        if (list.length !== container.children.length) {
+                            myfx.last(list).after(draggingItem);
+                        }
+                        else {
+                            container.appendChild(draggingItem);
+                        }
                     }
                 }
             }
@@ -2932,7 +2954,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.2";
+    var version = "1.3.4";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"
@@ -2996,6 +3018,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.4",
   "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;