uiik 1.3.0-beta.3 → 1.3.0-beta.4

package/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.0-beta.3
+ * uiik v1.3.0-beta.4
  * 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
@@ -9,6 +9,7 @@ import { find, map, toArray, each, reject, includes, some, flatMap, size } from
 import { get, assign, merge } from 'myfx/object';
 import { split, test } from 'myfx/string';
 import { compact, findIndex } from 'myfx/array';
+import { closest } from 'myfx/tree';
 import { alphaId } from 'myfx/utils';
 
 /******************************************************************************
@@ -284,41 +285,59 @@ function getStyleSize(el, cStyle) {
     const h = parseFloat(cStyle.height);
     return { w, h };
 }
-const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
-function getMatrixInfo(elCStyle) {
-    let a = 1, b = 0, x = 0, y = 0;
-    let e = undefined, f = undefined;
-    if (elCStyle instanceof SVGGraphicsElement) {
-        const transMatrix = elCStyle.transform.animVal[0];
-        if (transMatrix) {
-            e = transMatrix.matrix.e;
-            f = transMatrix.matrix.f;
+const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<e>[\d.-]+)\s*,\s*(?<f>[\d.-]+)\s*\)/;
+function getMatrixInfo(el, recur = false) {
+    const rs = _getMatrixInfo(el);
+    if (recur) {
+        let p = el.parentElement;
+        while (p && p.tagName !== "BODY") {
+            let prs = _getMatrixInfo(p);
+            rs.scale *= prs.scale;
+            p = p.parentElement;
         }
-        elCStyle = window.getComputedStyle(elCStyle);
     }
-    else {
-        if (elCStyle instanceof HTMLElement) {
-            elCStyle = window.getComputedStyle(elCStyle);
-        }
-    }
-    const matched = elCStyle.transform.match(EXP_MATRIX);
-    if (matched && matched.groups) {
-        a = parseFloat(matched.groups.a);
-        b = parseFloat(matched.groups.b);
-        parseFloat(matched.groups.c);
-        parseFloat(matched.groups.d);
-        x = parseFloat(matched.groups.x);
-        y = parseFloat(matched.groups.y);
+    return rs;
+}
+function _getMatrixInfo(el) {
+    const rs = { scale: 1, angle: 0, x: 0, y: 0 };
+    let a = 1, b = 0;
+    let elCStyle;
+    if (el instanceof SVGGraphicsElement || el instanceof HTMLElement) {
+        elCStyle = window.getComputedStyle(el);
     }
-    if (e && f) {
-        x = e;
-        y = f;
+    let matrix = _getMatrix(elCStyle.transform);
+    if (matrix) {
+        a = matrix.a;
+        b = matrix.b;
+        matrix.c;
+        matrix.d;
+        rs.x = matrix.e;
+        rs.y = matrix.f;
     }
-    const rs = { scale: 1, angle: 0, x, y };
     rs.scale = Math.sqrt(a * a + b * b);
     rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
     return rs;
 }
+function _getMatrix(transform) {
+    let matrix = null;
+    if (window.WebKitCSSMatrix) {
+        matrix = new WebKitCSSMatrix(transform);
+    }
+    else {
+        const matched = transform.match(EXP_MATRIX);
+        if (matched && matched.groups) {
+            matrix = {
+                a: parseFloat(matched.groups.a),
+                b: parseFloat(matched.groups.b),
+                c: parseFloat(matched.groups.c),
+                d: parseFloat(matched.groups.d),
+                e: parseFloat(matched.groups.e),
+                f: parseFloat(matched.groups.f),
+            };
+        }
+    }
+    return matrix;
+}
 function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
     if (!elRect) {
         elRect = el.getBoundingClientRect();
@@ -327,7 +346,7 @@ function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
         elCStyle = window.getComputedStyle(el);
     }
     if (!matrixInfo) {
-        matrixInfo = getMatrixInfo(elCStyle);
+        matrixInfo = getMatrixInfo(el, true);
     }
     const scale = matrixInfo.scale;
     let x = event.clientX -
@@ -344,7 +363,7 @@ function getRectInContainer(el, container) {
     const elRect = el.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
     const elCStyle = window.getComputedStyle(container);
-    const matrixInfo = getMatrixInfo(elCStyle);
+    const matrixInfo = getMatrixInfo(container);
     const scale = matrixInfo.scale;
     let x = elRect.x -
         containerRect.x -
@@ -389,7 +408,7 @@ function getVertex(el, ox, oy) {
     const h = parseFloat(cStyle.height);
     const { originX, originY } = parseOxy(ox, oy, w, h);
     const { x, y, sx, sy } = el instanceof SVGGraphicsElement ? getCenterXySVG(el, originX, originY) : getCenterXy(el);
-    const { angle } = getMatrixInfo(cStyle);
+    const { angle } = getMatrixInfo(el);
     return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
 }
 function calcVertex(w, h, cx, cy, sx, sy, radian) {
@@ -1209,7 +1228,6 @@ class Resizable extends Uii {
                         break;
                 }
                 if (changeW) {
-                    console.log(minWidth, 'xxxxxx', w);
                     if (minWidth && w < minWidth)
                         w = minWidth;
                     if (maxWidth && w > maxWidth)
@@ -1384,7 +1402,7 @@ class Draggable extends Uii {
             snapOptions: {
                 tolerance: 10,
             },
-            self: true
+            self: false
         }, opts));
         _Draggable_instances.add(this);
         _Draggable_handleMap.set(this, new WeakMap());
@@ -1448,7 +1466,7 @@ class Draggable extends Uii {
                 draggableList = bindTarget.querySelectorAll(eleString);
                 initStyle(draggableList);
             }
-            let findRs = find(draggableList, el => el.contains(t));
+            let findRs = closest(t, node => includes(draggableList, node), 'parentNode');
             if (!findRs)
                 return true;
             const dragDom = findRs;
@@ -1457,7 +1475,7 @@ class Draggable extends Uii {
                 return true;
             }
             if (opts.self && dragDom !== t)
-                return;
+                return true;
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                 return true;
@@ -1472,11 +1490,8 @@ class Draggable extends Uii {
             const offsetXy = getPointInContainer(ev, dragDom);
             let offsetPointX = offsetXy.x;
             let offsetPointY = offsetXy.y;
-            const matrixInfo = getMatrixInfo(dragDom);
+            const matrixInfo = getMatrixInfo(dragDom, true);
             const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
-            const matrixInfoParent = getMatrixInfo(offsetParent);
-            offsetPointX = offsetPointX / (matrixInfo.scale * matrixInfoParent.scale);
-            offsetPointY = offsetPointY / (matrixInfo.scale * matrixInfoParent.scale);
             if (matrixInfo.angle != 0) {
                 offsetPointX = currentXy.x - matrixInfo.x;
                 offsetPointY = currentXy.y - matrixInfo.y;
@@ -1847,7 +1862,7 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mouseenter", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
-            if (e.target === droppable)
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
                 return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
@@ -1862,7 +1877,7 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mouseleave", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
-            if (e.target === droppable)
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
                 return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
@@ -1877,14 +1892,14 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mousemove", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
-            if (e.target === droppable)
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === 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)
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
                 return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
@@ -2227,7 +2242,7 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
         if (onPointerDown && onPointerDown(ev) === false)
             return true;
         let originPos = "";
-        let matrixInfo = getMatrixInfo(currentCStyle);
+        let matrixInfo = getMatrixInfo(currentTarget);
         const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
         let hitPosX = startxy.x;
         let hitPosY = startxy.y;
@@ -2755,7 +2770,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.0-beta.3";
+var version = "1.3.0-beta.4";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.3.0-beta.3
+ * uiik v1.3.0-beta.4
  * 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
  */
 (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/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/string', 'myfx/array', 'myfx/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.string, global.array, global.utils));
-})(this, (function (exports, is, collection, object, string, array, utils) { 'use strict';
+    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';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -283,41 +283,59 @@
         const h = parseFloat(cStyle.height);
         return { w, h };
     }
-    const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
-    function getMatrixInfo(elCStyle) {
-        let a = 1, b = 0, x = 0, y = 0;
-        let e = undefined, f = undefined;
-        if (elCStyle instanceof SVGGraphicsElement) {
-            const transMatrix = elCStyle.transform.animVal[0];
-            if (transMatrix) {
-                e = transMatrix.matrix.e;
-                f = transMatrix.matrix.f;
+    const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<e>[\d.-]+)\s*,\s*(?<f>[\d.-]+)\s*\)/;
+    function getMatrixInfo(el, recur = false) {
+        const rs = _getMatrixInfo(el);
+        if (recur) {
+            let p = el.parentElement;
+            while (p && p.tagName !== "BODY") {
+                let prs = _getMatrixInfo(p);
+                rs.scale *= prs.scale;
+                p = p.parentElement;
             }
-            elCStyle = window.getComputedStyle(elCStyle);
         }
-        else {
-            if (elCStyle instanceof HTMLElement) {
-                elCStyle = window.getComputedStyle(elCStyle);
-            }
-        }
-        const matched = elCStyle.transform.match(EXP_MATRIX);
-        if (matched && matched.groups) {
-            a = parseFloat(matched.groups.a);
-            b = parseFloat(matched.groups.b);
-            parseFloat(matched.groups.c);
-            parseFloat(matched.groups.d);
-            x = parseFloat(matched.groups.x);
-            y = parseFloat(matched.groups.y);
+        return rs;
+    }
+    function _getMatrixInfo(el) {
+        const rs = { scale: 1, angle: 0, x: 0, y: 0 };
+        let a = 1, b = 0;
+        let elCStyle;
+        if (el instanceof SVGGraphicsElement || el instanceof HTMLElement) {
+            elCStyle = window.getComputedStyle(el);
         }
-        if (e && f) {
-            x = e;
-            y = f;
+        let matrix = _getMatrix(elCStyle.transform);
+        if (matrix) {
+            a = matrix.a;
+            b = matrix.b;
+            matrix.c;
+            matrix.d;
+            rs.x = matrix.e;
+            rs.y = matrix.f;
         }
-        const rs = { scale: 1, angle: 0, x, y };
         rs.scale = Math.sqrt(a * a + b * b);
         rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
         return rs;
     }
+    function _getMatrix(transform) {
+        let matrix = null;
+        if (window.WebKitCSSMatrix) {
+            matrix = new WebKitCSSMatrix(transform);
+        }
+        else {
+            const matched = transform.match(EXP_MATRIX);
+            if (matched && matched.groups) {
+                matrix = {
+                    a: parseFloat(matched.groups.a),
+                    b: parseFloat(matched.groups.b),
+                    c: parseFloat(matched.groups.c),
+                    d: parseFloat(matched.groups.d),
+                    e: parseFloat(matched.groups.e),
+                    f: parseFloat(matched.groups.f),
+                };
+            }
+        }
+        return matrix;
+    }
     function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
         if (!elRect) {
             elRect = el.getBoundingClientRect();
@@ -326,7 +344,7 @@
             elCStyle = window.getComputedStyle(el);
         }
         if (!matrixInfo) {
-            matrixInfo = getMatrixInfo(elCStyle);
+            matrixInfo = getMatrixInfo(el, true);
         }
         const scale = matrixInfo.scale;
         let x = event.clientX -
@@ -343,7 +361,7 @@
         const elRect = el.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
         const elCStyle = window.getComputedStyle(container);
-        const matrixInfo = getMatrixInfo(elCStyle);
+        const matrixInfo = getMatrixInfo(container);
         const scale = matrixInfo.scale;
         let x = elRect.x -
             containerRect.x -
@@ -388,7 +406,7 @@
         const h = parseFloat(cStyle.height);
         const { originX, originY } = parseOxy(ox, oy, w, h);
         const { x, y, sx, sy } = el instanceof SVGGraphicsElement ? getCenterXySVG(el, originX, originY) : getCenterXy(el);
-        const { angle } = getMatrixInfo(cStyle);
+        const { angle } = getMatrixInfo(el);
         return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
     }
     function calcVertex(w, h, cx, cy, sx, sy, radian) {
@@ -1208,7 +1226,6 @@
                             break;
                     }
                     if (changeW) {
-                        console.log(minWidth, 'xxxxxx', w);
                         if (minWidth && w < minWidth)
                             w = minWidth;
                         if (maxWidth && w > maxWidth)
@@ -1383,7 +1400,7 @@
                 snapOptions: {
                     tolerance: 10,
                 },
-                self: true
+                self: false
             }, opts));
             _Draggable_instances.add(this);
             _Draggable_handleMap.set(this, new WeakMap());
@@ -1447,7 +1464,7 @@
                     draggableList = bindTarget.querySelectorAll(eleString);
                     initStyle(draggableList);
                 }
-                let findRs = collection.find(draggableList, el => el.contains(t));
+                let findRs = tree.closest(t, node => collection.includes(draggableList, node), 'parentNode');
                 if (!findRs)
                     return true;
                 const dragDom = findRs;
@@ -1456,7 +1473,7 @@
                     return true;
                 }
                 if (opts.self && dragDom !== t)
-                    return;
+                    return true;
                 const onPointerDown = opts.onPointerDown;
                 if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                     return true;
@@ -1471,11 +1488,8 @@
                 const offsetXy = getPointInContainer(ev, dragDom);
                 let offsetPointX = offsetXy.x;
                 let offsetPointY = offsetXy.y;
-                const matrixInfo = getMatrixInfo(dragDom);
+                const matrixInfo = getMatrixInfo(dragDom, true);
                 const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
-                const matrixInfoParent = getMatrixInfo(offsetParent);
-                offsetPointX = offsetPointX / (matrixInfo.scale * matrixInfoParent.scale);
-                offsetPointY = offsetPointY / (matrixInfo.scale * matrixInfoParent.scale);
                 if (matrixInfo.angle != 0) {
                     offsetPointX = currentXy.x - matrixInfo.x;
                     offsetPointY = currentXy.y - matrixInfo.y;
@@ -1846,7 +1860,7 @@
             this.registerEvent(droppable, "mouseenter", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
-                if (e.target === droppable)
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
                     return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
@@ -1861,7 +1875,7 @@
             this.registerEvent(droppable, "mouseleave", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
-                if (e.target === droppable)
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
                     return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
@@ -1876,14 +1890,14 @@
             this.registerEvent(droppable, "mousemove", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
-                if (e.target === droppable)
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === 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)
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
                     return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
@@ -2226,7 +2240,7 @@
             if (onPointerDown && onPointerDown(ev) === false)
                 return true;
             let originPos = "";
-            let matrixInfo = getMatrixInfo(currentCStyle);
+            let matrixInfo = getMatrixInfo(currentTarget);
             const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
             let hitPosX = startxy.x;
             let hitPosY = startxy.y;
@@ -2754,7 +2768,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.0-beta.3";
+    var version = "1.3.0-beta.4";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

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

package/utils.d.ts

@@ -26,7 +26,7 @@ export declare function getStyleSize(el: HTMLElement | SVGGraphicsElement, cStyl
     w: number;
     h: number;
 };
-export declare function getMatrixInfo(elCStyle: CSSStyleDeclaration | HTMLElement | SVGGraphicsElement): {
+export declare function getMatrixInfo(el: HTMLElement | SVGGraphicsElement, recur?: boolean): {
     scale: number;
     angle: number;
     x: number;