uiik 1.3.0-beta.1 → 1.3.0-beta.2

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.3.0-beta.1
+ * uiik v1.3.0-beta.2
  * 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/tree'), require('myfx/string'), require('myfx/array'), require('myfx/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/tree', 'myfx/string', 'myfx/array', 'myfx/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.tree, global.string, global.array, global.utils));
-})(this, (function (exports, is, collection, object, tree, 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/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';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -43,9 +43,8 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    /* eslint-disable max-len */
     const UtMap = new WeakMap();
-    class UiiTransformer {
+    class UiiTransform {
         constructor(el) {
             this.angle = 0;
             this.el = el;
@@ -76,14 +75,9 @@
             rotateTo(this.el, deg, cx, cy);
         }
     }
-    /**
-     * 统一化处理，所有外边距都处理为translate
-     * @param el
-     */
     function normalize(el) {
         const style = window.getComputedStyle(el);
         let x = 0, y = 0;
-        //1. convert left/top (include margins)
         if (el instanceof HTMLElement) {
             x = (parseFloat(style.left) || 0) + (parseFloat(style.marginLeft) || 0);
             y = (parseFloat(style.top) || 0) + (parseFloat(style.marginTop) || 0);
@@ -103,36 +97,25 @@
             el.removeAttribute("cx");
             el.removeAttribute("cy");
         }
-        //2. merge transform
         const { x: tx, y: ty } = getTranslate(el);
         x += tx || 0;
         y += ty || 0;
         moveTo(el, x, y);
         return { x, y };
     }
-    /**
-     * 返回一个包装后的变形对象，可执行变形操作
-     * @param el
-     */
     function wrapper(el) {
         let ut = UtMap.get(el);
         if (ut)
             return ut.normalize(el);
-        return new UiiTransformer(el);
+        return new UiiTransform(el);
     }
     function transformMove(transofrmStr, x, y, unit = false) {
         return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""}) ` +
             transofrmStr.replace(/translate\([^)]+?\)/, "").trim());
     }
-    /**
-     * 获取元素当前transform中的位移数据
-     * @param el HTMLElement|SVGGraphicsElement
-     * @returns {x,y}
-     */
     function getTranslate(el) {
         let xVal = NaN, yVal = NaN;
         let transformStr = "";
-        //svg
         if (el instanceof SVGGraphicsElement) {
             transformStr = el.getAttribute("transform") || "";
         }
@@ -160,14 +143,7 @@
         }
         return { x: xVal, y: yVal };
     }
-    /**
-     * 自动检测HTML元素或SVG元素并设置对应移动属性
-     * @param el HTMLElement|SVGGraphicsElement
-     * @param x value of px
-     * @param y value of px
-     */
     function moveTo(el, x, y) {
-        //svg
         if (el instanceof SVGGraphicsElement) {
             el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x, y));
         }
@@ -178,15 +154,8 @@
     }
     const EXP_GET_TRANSLATE = /translate\(\s*(?<x>[\d.-]+)\D*,\s*(?<y>[\d.-]+)\D*\)/gim;
     const EXP_GET_TRANSLATE_XY = /translate(?<dir>X|Y)\(\s*(?<v>[\d.-]+)\D*\)/gim;
-    /**
-     * 自动检测HTML元素或SVG元素并设置对应移动属性
-     * @param el HTMLElement|SVGGraphicsElement
-     * @param x value of px
-     * @param y value of px
-     */
     function moveBy(el, x, y) {
         const xy = getTranslate(el);
-        //svg
         if (el instanceof SVGGraphicsElement) {
             el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", xy.x + x, xy.y + y));
         }
@@ -196,13 +165,11 @@
         }
     }
     function rotateTo(el, deg, cx, cy) {
-        //svg
         if (el instanceof SVGGraphicsElement) {
             let transformStr = el.getAttribute("transform") || "";
             let originPos = is.isDefined(cx) && is.isDefined(cy);
             let origin = "";
             if (originPos) {
-                //origin offset
                 if (el.x instanceof SVGAnimatedLength) {
                     cx += el.x.animVal.value;
                     cy += el.y.animVal.value;
@@ -229,21 +196,8 @@
         }
     }
 
-    /* eslint-disable max-len */
-    /**
-     * 一角度对应的弧度
-     */
     const ONE_ANG = Math.PI / 180;
-    /**
-     * 一弧度对应的角度
-     */
     const ONE_RAD = 180 / Math.PI;
-    /**
-     * 获取child相对于parent的位置信息。含border宽度
-     *
-     * todo
-     * @returns {x,y,w,h}
-     */
     function getBox(child, parent) {
         const rect = child.getBoundingClientRect();
         const rs = { x: 0, y: 0, w: rect.width, h: rect.height };
@@ -253,7 +207,7 @@
                 child.ownerSVGElement ||
                 child.parentElement ||
                 document.body;
-        const parentRect = parent.getBoundingClientRect(); //bcr包含padding，不包含borderWidth
+        const parentRect = parent.getBoundingClientRect();
         const parentStyle = window.getComputedStyle(parent);
         const parentBorderLeft = parseFloat(parentStyle.borderLeftWidth);
         const parentBorderTop = parseFloat(parentStyle.borderTopWidth);
@@ -266,11 +220,6 @@
         }
         return rs;
     }
-    /**
-     * 获取事件目标与点击点之间的偏移
-     * @param e
-     * @returns [offx,offy]
-     */
     function getPointOffset(e, pos) {
         let ox = e.offsetX || 0, oy = e.offsetY || 0;
         if (e.target instanceof SVGElement) {
@@ -282,9 +231,6 @@
     function isSVGEl(el) {
         return el instanceof SVGElement;
     }
-    /**
-     * 边缘检测最小内部边距
-     */
     const EDGE_THRESHOLD = 5;
     const DRAGGING_RULE = "body * { pointer-events: none; }";
     let lockSheet;
@@ -317,10 +263,6 @@
         document.body.style.cursor = cursor.body;
         document.documentElement.style.cursor = cursor.html;
     }
-    /**
-     * 获取元素样式/属性中的x/y
-     * @param el
-     */
     function getStyleXy(el) {
         const style = window.getComputedStyle(el);
         let x = 0, y = 0;
@@ -334,10 +276,6 @@
         }
         return { x, y };
     }
-    /**
-     * 获取元素样式/属性中的w/h
-     * @param el
-     */
     function getStyleSize(el, cStyle) {
         if (!cStyle)
             cStyle = window.getComputedStyle(el);
@@ -346,11 +284,6 @@
         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*\)/;
-    /**
-     * 获取matrix中的scale/angle
-     * @param elCStyle
-     * @returns
-     */
     function getMatrixInfo(elCStyle) {
         let a = 1, b = 0, x = 0, y = 0;
         let e = undefined, f = undefined;
@@ -385,14 +318,6 @@
         rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
         return rs;
     }
-    /**
-     * 获取当前鼠标相对于指定元素el的坐标
-     * @param event 点击事件
-     * @param el 元素
-     * @param elRect 元素的DOMRect
-     * @param elCStyle 元素的计算样式
-     * @returns
-     */
     function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
         if (!elRect) {
             elRect = el.getBoundingClientRect();
@@ -414,11 +339,6 @@
             el.scrollTop * scale;
         return { x: x / scale, y: y / scale };
     }
-    /**
-     * 获取元素el在容器container中的相对boundingBox
-     * @param el
-     * @param container
-     */
     function getRectInContainer(el, container) {
         const elRect = el.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
@@ -440,21 +360,12 @@
             h: elRect.height / scale,
         };
     }
-    /**
-     * 获取指定元素的圆心坐标
-     * @param el
-     * @param left
-     * @param top
-     * @returns
-     */
     function getCenterXy(el, ox, oy) {
         const cStyle = window.getComputedStyle(el);
-        //origin
         const center = cStyle.transformOrigin;
         const centerPair = center.split(" ");
         ox = ox || parseFloat(centerPair[0]);
         oy = oy || parseFloat(centerPair[1]);
-        //left & top
         const shadowDom = el.cloneNode();
         rotateTo(shadowDom, 0);
         const parentEl = el.parentElement;
@@ -471,12 +382,6 @@
         const { x, y } = getTranslate(el);
         return { sx: x, sy: y, x: x + ox, y: y + oy, ox, oy };
     }
-    /**
-     * 获取元素当前顶点
-     * @param el
-     * @param ox 相对于图形左上角的圆心偏移，支持数字/百分比，仅对SVG元素有效，对于非SVG元素使用transform-origin属性
-     * @param oy
-     */
     function getVertex(el, ox, oy) {
         const cStyle = window.getComputedStyle(el);
         const w = parseFloat(cStyle.width);
@@ -486,17 +391,6 @@
         const { angle } = getMatrixInfo(cStyle);
         return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
     }
-    /**
-     * 计算指定矩形旋转后的顶点坐标
-     * @param w 宽
-     * @param h 高
-     * @param cx 圆心
-     * @param cy
-     * @param sx
-     * @param sy
-     * @param radian 旋转角 弧度值
-     * @returns
-     */
     function calcVertex(w, h, cx, cy, sx, sy, radian) {
         let originVertex = [
             { x: 0, y: 0 },
@@ -512,25 +406,15 @@
             return { x: cx + nx, y: cy + ny };
         });
     }
-    /**
-     * 解析ox/y
-     * @param ox 如果不是number或string，originX为0
-     * @param oy 如果不是number或string，originY为0
-     * @param w
-     * @param h
-     * @returns {originX,originY}
-     */
     function parseOxy(ox, oy, w, h) {
         let originX = 0, originY = 0;
         if (is.isString(ox)) {
-            //percent
             originX = (parseFloat(ox) / 100) * w;
         }
         else if (is.isNumber(ox)) {
             originX = ox;
         }
         if (is.isString(oy)) {
-            //percent
             originY = (parseFloat(oy) / 100) * h;
         }
         else if (is.isNumber(oy)) {
@@ -540,9 +424,6 @@
     }
 
     var _Uii_listeners;
-    /**
-     * A Base class for all Uii classes
-     */
     class Uii {
         constructor(ele, opts) {
             this.enabled = true;
@@ -570,16 +451,12 @@
                 this.ele = is.isArrayLike(el) ? collection.toArray(el) : [el];
             }
         }
-        /**
-         * 销毁uii对象，包括卸载事件、清空元素等
-         */
         destroy() {
             collection.each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
                 ev[0].removeEventListener(ev[1], ev[2], ev[3]);
             });
             __classPrivateFieldSet(this, _Uii_listeners, [], "f");
         }
-        //通用指针事件处理接口
         addPointerDown(el, pointerDown, opts) {
             const onPointerDown = pointerDown;
             const threshold = opts.threshold || 0;
@@ -589,9 +466,7 @@
                 let t = e.target;
                 if (!t)
                     return;
-                //uiik options
                 const hasCursor = !is.isEmpty(object.get(uiiOptions, 'cursor.active'));
-                //提取通用信息
                 const currentStyle = el.style;
                 const currentCStyle = window.getComputedStyle(el);
                 const currentRect = el.getBoundingClientRect();
@@ -616,7 +491,6 @@
                     e.preventDefault();
                     return false;
                 }
-                //函数
                 const pointerMove = (ev) => {
                     const offX = ev.clientX - originPosX;
                     const offY = ev.clientY - originPosY;
@@ -659,13 +533,6 @@
                 return false;
             }, true);
         }
-        /**
-         * 注册事件，以便在{@link destroy}方法中卸载
-         * @param el dom元素
-         * @param event 事件名
-         * @param hook 回调函数
-         * @param useCapture 默认false
-         */
         registerEvent(el, event, hook, useCapture = false) {
             const wrapper = ((ev) => {
                 if (!this.enabled)
@@ -675,52 +542,26 @@
             el.addEventListener(event, wrapper, useCapture);
             __classPrivateFieldGet(this, _Uii_listeners, "f").push([el, event, wrapper, useCapture]);
         }
-        /**
-         * 禁用uii实例，禁用后的dom不会响应事件
-         */
         disable() {
             this.enabled = false;
         }
-        /**
-         * 启用uii实例
-         */
         enable() {
             this.enabled = true;
         }
-        /**
-         * 获取uii实例选项对象
-         */
         getOptions() {
             return this.opts;
         }
-        /**
-         * 获取指定名称的选项值
-         * @param name
-         * @returns
-         */
         getOption(name) {
             return this.opts[name];
         }
-        /**
-         * 设置多个选项值。触发`onOptionChanged`
-         * @param options
-         */
         setOptions(options) {
             object.assign(this.opts, options);
             this.onOptionChanged(this.opts);
         }
-        /**
-         * 设置指定name的选项值。触发`onOptionChanged`
-         * @param name
-         * @param value
-         */
         setOption(name, value) {
             this.opts[name] = value;
             this.onOptionChanged(this.opts);
         }
-        /**
-         * @internal
-         */
         onOptionChanged(opts) { }
     }
     _Uii_listeners = new WeakMap();
@@ -740,17 +581,6 @@
         }
         return rs;
     }
-    /**
-     * 用于表示一个或多个分割器的定义
-     * > 可用CSS接口
-     * - .uii-splittable
-     * - .uii-splittable-handle
-     * - .uii-splittable-handle-ghost
-     * - .uii-splittable-handle-active
-     * - .uii-splittable-v
-     * - .uii-splittable-h
-     * @public
-     */
     class Splittable extends Uii {
         constructor(container, opts) {
             super(container, object.assign({
@@ -762,7 +592,6 @@
             }, opts));
             _Splittable_instances.add(this);
             collection.each(this.ele, con => {
-                //detect container position
                 const pos = window.getComputedStyle(con).position;
                 if (pos === "static") {
                     con.style.position = "relative";
@@ -861,11 +690,10 @@
         const updateStart = !oneSideMode || oneSideMode === 'start';
         const updateEnd = !oneSideMode || oneSideMode === 'end';
         this.addPointerDown(handle, ({ currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
-            // 1. 获取原始高度/宽度;设置宽度/高度
             let originSize = 0;
             let originSize1 = 0;
             let splitterSize = 1;
-            let blockSize = 0; // 分割区size
+            let blockSize = 0;
             switch (dir) {
                 case 'v':
                     originSize = dom1.offsetHeight;
@@ -881,11 +709,9 @@
             blockSize = splitterSize + originSize + originSize1;
             const dom1Style = dom1.style;
             const dom2Style = dom2.style;
-            //ghost
             const ghost = opts.ghost;
             const ghostClass = opts.ghostClass;
             let ghostNode = null;
-            // 初始化sticked位置
             let sticked = 'none';
             if (originSize < minSize1 / 2) {
                 sticked = 'start';
@@ -895,7 +721,6 @@
             }
             let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
             let ds1, anotherSize;
-            //bind events
             onPointerStart(function (args) {
                 const { ev } = args;
                 currentTarget.classList.add(CLASS_SPLITTABLE_HANDLE_ACTIVE);
@@ -929,7 +754,6 @@
                 else if (ds1 < minSize1) {
                     ds1 = minSize1;
                     if (sticked == 'start' && sticky1) {
-                        // 重置状态
                         doSticky = true;
                         sticked = 'none';
                     }
@@ -945,7 +769,6 @@
                 else if (blockSize - ds1 - splitterSize < minSize2) {
                     ds1 = blockSize - minSize2 - splitterSize;
                     if (sticked == 'end' && sticky2) {
-                        // 重置状态
                         doSticky = true;
                         sticked = 'none';
                     }
@@ -970,7 +793,6 @@
                     if (doSticky) {
                         onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
                     }
-                    //update handle
                     if (dir === 'v') {
                         currentStyle.top = dom2.offsetTop - handleSize / 2 + 'px';
                     }
@@ -1002,7 +824,6 @@
                     if (updateEnd) {
                         dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
                     }
-                    //update handle
                     if (dir === 'v') {
                         currentStyle.top = startPos + ds1 - handleSize / 2 + 'px';
                     }
@@ -1018,30 +839,15 @@
             lockPage: true
         });
     };
-    /**
-     * Add one or more splittors into the container
-     * @param container css selector or html element
-     * @param opts SplittableOptions
-     * @returns
-     */
     function newSplittable(container, opts) {
         return new Splittable(container, opts);
     }
 
-    /* eslint-disable max-len */
     const THRESHOLD$3 = 2;
     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 EXP_DIR = new RegExp(CLASS_RESIZABLE_HANDLE_DIR + "(?<dir>[nesw]+)");
-    /**
-     * 用于表示一个或多个可改变尺寸元素的定义
-     * > 可用CSS接口
-     * - .uii-resizable-handle
-     * - .uii-resizable-handle-[n/s/e/w/ne/nw/se/sw]
-     * - .uii-resizable-handle-active
-     * @public
-     */
     class Resizable extends Uii {
         constructor(els, opts) {
             super(els, object.assign({
@@ -1070,15 +876,13 @@
             const onClone = opts.onClone;
             const uiik = this;
             this.addPointerDown(handle, ({ ev, onPointerStart, onPointerMove, onPointerEnd }) => {
-                //检测
                 const onPointerDown = opts.onPointerDown;
                 if (onPointerDown && onPointerDown(ev) === false)
                     return true;
                 let container = panel instanceof SVGGraphicsElement
-                    ? tree.closest(panel, (ele) => string.lowerCase(ele.tagName) === "svg", "parentNode")
+                    ? panel.ownerSVGElement
                     : panel.parentElement;
                 let setOrigin = !(panel instanceof SVGGraphicsElement);
-                // 获取panel当前信息
                 let matrixInfo = getMatrixInfo(panel);
                 const offset = getRectInContainer(panel, container);
                 const offsetParentRect = container.getBoundingClientRect();
@@ -1126,7 +930,6 @@
                         toTransformOrigin = "0 0";
                         break;
                 }
-                // boundary
                 let minWidth;
                 let minHeight;
                 let maxWidth;
@@ -1147,28 +950,24 @@
                     maxWidth = opts.maxSize;
                     maxHeight = opts.maxSize;
                 }
-                //ghost
                 const ghost = opts.ghost;
                 const ghostClass = opts.ghostClass;
                 let ghostNode = null;
-                //aspectRatio
                 const aspectRatio = opts.aspectRatio;
                 const panelStyle = panel.style;
                 let style = panelStyle;
                 let currentW = originW;
                 let currentH = originH;
-                let transformer;
+                let transform;
                 let lastX = 0, lastY = 0;
                 let originalTransformOrigin = "";
                 let vertexBeforeTransform;
                 let currentVertex;
                 let refPoint;
-                //slope
                 let k1;
                 let startOx = 0;
                 let startOy = 0;
                 let sX = 0, sY = 0;
-                //bind events
                 onPointerStart(function (args) {
                     var _a;
                     const { ev } = args;
@@ -1190,20 +989,20 @@
                                         ghostClass;
                             }
                             (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
-                            transformer = wrapper(ghostNode);
+                            transform = wrapper(ghostNode);
                             onClone && onClone({ clone: ghostNode }, ev);
                         }
                         style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
                     }
                     else {
-                        transformer = wrapper(panel);
+                        transform = wrapper(panel);
                     }
                     const cStyle = window.getComputedStyle(panel);
                     const w = parseFloat(cStyle.width);
                     const h = parseFloat(cStyle.height);
-                    const { originX, originY } = parseOxy(opts.ox, opts.oy, w, h);
-                    startOx = originX;
-                    startOy = originY;
+                    const oxy = parseOxy(opts.ox, opts.oy, w, h);
+                    startOx = oxy.originX;
+                    startOy = oxy.originY;
                     const { x, y, sx, sy } = panel instanceof SVGGraphicsElement
                         ? getCenterXySVG(panel, startOx, startOy)
                         : getCenterXy(panel);
@@ -1212,7 +1011,6 @@
                     currentVertex =
                         vertexBeforeTransform =
                             calcVertex(originW, originH, centerX, centerY, sx, sy, deg);
-                    //计算参考点及斜率
                     switch (dir) {
                         case "s":
                         case "e":
@@ -1231,11 +1029,9 @@
                             refPoint = currentVertex[2];
                             break;
                     }
-                    //水平斜率
                     k1 =
                         (currentVertex[1].y - refPoint.y) /
-                            (currentVertex[1].x - refPoint.x); //w
-                    //change trans origin
+                            (currentVertex[1].x - refPoint.x);
                     style.transition = "none";
                     originalTransformOrigin = style.transformOrigin;
                     if (setOrigin) {
@@ -1243,29 +1039,24 @@
                             style.transformOrigin = toTransformOrigin;
                         }
                         else {
-                            style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.y}px`;
+                            style.transformOrigin = `${centerX - transform.x}px ${centerY - transform.y}px`;
                         }
                     }
                     if (panel instanceof SVGGraphicsElement) {
                         sX = matrixInfo.x - currentVertex[0].x;
                         sY = matrixInfo.y - currentVertex[0].y;
                     }
-                    onStart && onStart.call(uiik, { w: originW, h: originH }, ev);
+                    onStart && onStart.call(uiik, { w: originW, h: originH, transform }, ev);
                 });
                 onPointerMove((args) => {
                     const { ev } = args;
-                    //获取当前位置坐标
                     const currentXy = getPointInContainer(ev, container, offsetParentRect, offsetParentCStyle);
                     let newX = currentXy.x;
                     let newY = currentXy.y;
-                    ////////////////////////////////////////// 计算边长
-                    //1. calc angle
                     let angle = Math.atan2(newY - refPoint.y, newX - refPoint.x) * ONE_RAD -
                         matrixInfo.angle;
-                    //2. hypotenuse length
                     let hyLen = Math.sqrt((newX - refPoint.x) * (newX - refPoint.x) +
                         (newY - refPoint.y) * (newY - refPoint.y));
-                    //3. h&v projection length
                     let pl1 = Math.abs(k1 === Infinity
                         ? newY - refPoint.y
                         : hyLen * Math.cos(angle * ONE_ANG));
@@ -1291,7 +1082,6 @@
                             angl =
                                 Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
                             let plh;
-                            //1&2 quad
                             if (angl === 90) {
                                 h = newY - currentVertex[2].y;
                                 x = currentVertex[2].x;
@@ -1313,7 +1103,6 @@
                             angl =
                                 Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
                             let plw;
-                            //1&4 quad
                             if (angl === 0) {
                                 w = newX - currentVertex[1].x;
                                 x = newX;
@@ -1333,7 +1122,6 @@
                         case "nw":
                             w = pl1;
                             h = pl2;
-                            //获取顺时针旋转后的直角坐标
                             x = newX;
                             y = newY;
                             if (matrixInfo.angle === 180) {
@@ -1347,7 +1135,6 @@
                             angl =
                                 Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
                             let plw1;
-                            //1&4 quad
                             if (angl === 0) {
                                 x = newX;
                                 y = currentVertex[0].y;
@@ -1374,7 +1161,6 @@
                                 y = currentVertex[0].y;
                             }
                             else if (currentVertex[1].x > currentVertex[0].x) {
-                                //1&2 quad
                                 plne = h * Math.cos((180 - angl) * ONE_ANG);
                                 x = currentVertex[2].x - plne;
                                 y = currentVertex[2].y - Math.sqrt(h * h - plne * plne);
@@ -1387,6 +1173,7 @@
                             break;
                     }
                     if (changeW) {
+                        console.log(minWidth, 'xxxxxx', w);
                         if (minWidth && w < minWidth)
                             w = minWidth;
                         if (maxWidth && w > maxWidth)
@@ -1415,17 +1202,17 @@
                     }
                     else {
                         if (changeW) {
-                            resize(transformer, style, w);
+                            resize(transform, style, w);
                         }
                         if (changeH) {
-                            resize(transformer, style, undefined, h);
+                            resize(transform, style, undefined, h);
                         }
                     }
                     if (changeY) {
-                        transformer.moveToY(y + sY);
+                        transform.moveToY(y + sY);
                     }
                     if (changeX) {
-                        transformer.moveToX(x + sX);
+                        transform.moveToX(x + sX);
                     }
                     lastX = x;
                     lastY = y;
@@ -1446,6 +1233,7 @@
                             sx: sx,
                             sy: sy,
                             deg: matrixInfo.angle,
+                            transform
                         }, ev);
                     }
                 });
@@ -1458,9 +1246,7 @@
                         panelStyle.left = ghostNode.style.left;
                         panelStyle.top = ghostNode.style.top;
                         moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
-                        resize(transformer, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
-                        // panelStyle.width = ghostNode.style.width;
-                        // panelStyle.height = ghostNode.style.height;
+                        resize(transform, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
                     }
                     panel.style.transformOrigin = originalTransformOrigin;
                     const { x, y, sx, sy, ox, oy } = panel instanceof SVGGraphicsElement
@@ -1469,30 +1255,27 @@
                     let centerX = x, centerY = y;
                     const deg = matrixInfo.angle * ONE_ANG;
                     const currentVertex = calcVertex(currentW, currentH, centerX, centerY, sx, sy, deg);
-                    //修正偏移
                     if (panel instanceof SVGGraphicsElement) {
-                        //更新rotate圆心
                         if (matrixInfo.angle != 0) {
-                            const { originX, originY } = parseOxy(opts.ox, opts.oy, currentW, currentH);
-                            rotateTo(transformer.el, matrixInfo.angle, originX, originY);
-                            let { x, y, sx, sy } = getCenterXySVG(panel, originX, originY);
+                            const oxy = parseOxy(opts.ox, opts.oy, currentW, currentH);
+                            rotateTo(transform.el, matrixInfo.angle, oxy.originX, originY);
+                            let { x, y, sx, sy } = getCenterXySVG(panel, oxy.originX, originY);
                             let currentVertex2 = calcVertex(currentW, currentH, x, y, sx, sy, deg);
-                            //复原translate
-                            transformer.moveTo(transformer.x - (currentVertex2[0].x - currentVertex[0].x), transformer.y - (currentVertex2[0].y - currentVertex[0].y));
+                            transform.moveTo(transform.x - (currentVertex2[0].x - currentVertex[0].x), transform.y - (currentVertex2[0].y - currentVertex[0].y));
                         }
                     }
                     else {
                         if (changeX || changeY) {
-                            transformer.moveTo(transformer.x - (currentVertex[0].x - lastX), transformer.y - (currentVertex[0].y - lastY));
+                            transform.moveTo(transform.x - (currentVertex[0].x - lastX), transform.y - (currentVertex[0].y - lastY));
                         }
                         else {
-                            transformer.moveTo(transformer.x -
-                                (currentVertex[0].x - vertexBeforeTransform[0].x), transformer.y -
+                            transform.moveTo(transform.x -
+                                (currentVertex[0].x - vertexBeforeTransform[0].x), transform.y -
                                 (currentVertex[0].y - vertexBeforeTransform[0].y));
                         }
                     }
                     handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
-                    onEnd && onEnd.call(uiik, { w: currentW, h: currentH }, ev);
+                    onEnd && onEnd.call(uiik, { w: currentW, h: currentH, transform }, ev);
                 });
             }, {
                 threshold: THRESHOLD$3,
@@ -1515,7 +1298,6 @@
             }
             handles = is.isArrayLike(handles) ? handles : [handles];
             collection.each(handles, (h) => {
-                //get dir from handle
                 const className = h.getAttribute("class") || "";
                 const matchRs = className.match(EXP_DIR);
                 let dir = "se";
@@ -1530,13 +1312,12 @@
             });
         }
     }
-    function resize(transformer, style, w, h) {
-        //svg
-        if (transformer.el instanceof SVGGraphicsElement) {
+    function resize(transform, style, w, h) {
+        if (transform.el instanceof SVGGraphicsElement) {
             if (is.isDefined(w))
-                transformer.el.setAttribute("width", w + "");
+                transform.el.setAttribute("width", w + "");
             if (is.isDefined(h))
-                transformer.el.setAttribute("height", h + "");
+                transform.el.setAttribute("height", h + "");
         }
         else {
             if (is.isDefined(w))
@@ -1545,12 +1326,6 @@
                 style.height = h + "px";
         }
     }
-    /**
-     * Make els resizable
-     * @param els selector string / html element
-     * @param opts
-     * @returns
-     */
     function newResizable(els, opts) {
         return new Resizable(els, opts);
     }
@@ -1561,17 +1336,6 @@
     const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
     const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
     const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
-    /**
-     * 用于表示一个或多个可拖动元素的定义
-     * 每个拖动元素可以有独立handle，也可以公用一个handle
-     * 可拖动元素拖动时自动剔除left/top/x/y/cx/cy属性，而使用transform:translate替代
-     * > 可用CSS接口
-     * - .uii-draggable
-     * - .uii-draggable-handle
-     * - .uii-draggable-active
-     * - .uii-draggable-ghost
-     * @public
-     */
     class Draggable extends Uii {
         constructor(els, opts) {
             super(els, object.assign({
@@ -1599,7 +1363,6 @@
                 });
             }
             this.onOptionChanged(this.opts);
-            //put into group
             if (this.opts.group) {
                 if (!DRAGGER_GROUPS[this.opts.group]) {
                     DRAGGER_GROUPS[this.opts.group] = [];
@@ -1607,7 +1370,6 @@
                 DRAGGER_GROUPS[this.opts.group].push(...this.ele);
             }
             __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).call(this, this.ele);
-            //containment
             if (this.opts.containment) {
                 if (is.isBoolean(this.opts.containment)) {
                     __classPrivateFieldSet(this, _Draggable_container, is.isEmpty(this.ele) ? null : this.ele[0].parentElement, "f");
@@ -1645,12 +1407,10 @@
                 let t = ev.target;
                 if (!t)
                     return true;
-                //refresh draggableList
                 if (opts.watch && eleString) {
                     draggableList = bindTarget.querySelectorAll(eleString);
                     initStyle(draggableList);
                 }
-                //find drag dom & handle
                 let findRs = collection.find(draggableList, el => el.contains(t));
                 if (!findRs)
                     return true;
@@ -1659,17 +1419,14 @@
                 if (handle && !handle.contains(t)) {
                     return true;
                 }
-                //检测
                 const onPointerDown = opts.onPointerDown;
                 if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                     return true;
                 const filter = opts.filter;
-                //check filter
                 if (filter) {
                     if (collection.some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
                         return true;
                 }
-                //用于计算鼠标移动时当前位置
                 const offsetParent = dragDom instanceof HTMLElement ? dragDom.offsetParent || document.body : dragDom.ownerSVGElement;
                 const offsetParentRect = offsetParent.getBoundingClientRect();
                 const offsetParentCStyle = window.getComputedStyle(offsetParent);
@@ -1678,6 +1435,9 @@
                 let offsetPointY = offsetXy.y;
                 const matrixInfo = getMatrixInfo(dragDom);
                 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;
@@ -1721,9 +1481,7 @@
                 let lastSnapDirY = "", lastSnapDirX = "";
                 let lastSnapping = "";
                 if (snapOn) {
-                    //获取拖动元素所在容器内的可吸附对象
                     snappable = collection.map((container || document).querySelectorAll(snapOn), (el) => {
-                        //计算相对容器xy
                         const { x, y, w, h } = getRectInContainer(el, offsetParent);
                         return {
                             x1: x,
@@ -1737,7 +1495,6 @@
                 const dragDomRect = dragDom.getBoundingClientRect();
                 const originW = dragDomRect.width + parseFloat(currentCStyle.borderLeftWidth) + parseFloat(currentCStyle.borderRightWidth);
                 const originH = dragDomRect.height + parseFloat(currentCStyle.borderTopWidth) + parseFloat(currentCStyle.borderBottomWidth);
-                // boundary
                 let minX = 0;
                 let minY = 0;
                 let maxX = 0;
@@ -1753,14 +1510,13 @@
                 if (maxY < 0)
                     maxY = 0;
                 let copyNode;
-                let transformer;
+                let transform;
                 let timer = null;
                 let toLeft = false;
                 let toTop = false;
                 let toRight = false;
                 let toBottom = false;
                 let endX = 0, endY = 0;
-                //bind events
                 onPointerStart(function (args) {
                     var _a;
                     const { ev } = args;
@@ -1781,19 +1537,17 @@
                         copyNode.classList.add(...array.compact(string.split(classes, ' ')));
                         copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
                         (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
-                        transformer = wrapper(copyNode);
+                        transform = wrapper(copyNode);
                         onClone && onClone({ clone: copyNode }, ev);
                     }
                     else {
-                        transformer = wrapper(dragDom);
+                        transform = wrapper(dragDom);
                     }
-                    //apply classes
                     dragDom.classList.add(...array.compact(string.split(classes, ' ')));
                     if (!copyNode)
                         dragDom.style.zIndex = zIndex + '';
                     dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
-                    onStart && onStart({ draggable: dragDom, x: currentXy.x, y: currentXy.y }, ev);
-                    //notify
+                    onStart && onStart({ draggable: dragDom, x: currentXy.x, y: currentXy.y, transform }, ev);
                     const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
                     dragDom.dispatchEvent(customEv);
                 });
@@ -1802,7 +1556,6 @@
                     const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
                     let newX = currentXy.x;
                     let newY = currentXy.y;
-                    //edge detect
                     if (scroll) {
                         const lX = pointX - offsetParentRect.x;
                         const lY = pointY - offsetParentRect.y;
@@ -1841,7 +1594,6 @@
                     }
                     let x = newX - offsetPointX;
                     let y = newY - offsetPointY;
-                    //grid
                     if (is.isNumber(gridX) && is.isNumber(gridY)) {
                         x = ((x / gridX) >> 0) * gridX;
                         y = ((y / gridY) >> 0) * gridY;
@@ -1867,29 +1619,24 @@
                         const currPageY1 = y;
                         const currPageX2 = currPageX1 + originW;
                         const currPageY2 = currPageY1 + originH;
-                        //check snappable
                         let snapX = NaN, snapY = NaN;
                         let targetX, targetY;
                         let snapDirX, snapDirY;
                         if (!direction || direction === "v") {
                             collection.each(snappable, (data) => {
                                 if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
-                                    //top parallel
                                     snapY = data.y1;
                                     snapDirY = "t2t";
                                 }
                                 else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
-                                    //b2t
                                     snapY = data.y2;
                                     snapDirY = "t2b";
                                 }
                                 else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
-                                    //t2b
                                     snapY = data.y1 - originH;
                                     snapDirY = "b2t";
                                 }
                                 else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
-                                    //bottom parallel
                                     snapY = data.y2 - originH;
                                     snapDirY = "b2b";
                                 }
@@ -1903,22 +1650,18 @@
                         if (!direction || direction === "h") {
                             collection.each(snappable, (data) => {
                                 if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
-                                    //left parallel
                                     snapX = data.x1;
                                     snapDirX = "l2l";
                                 }
                                 else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
-                                    //r2l
                                     snapX = data.x2;
                                     snapDirX = "l2r";
                                 }
                                 else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
-                                    //l2r
                                     snapX = data.x1 - originW;
                                     snapDirX = "r2l";
                                 }
                                 else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
-                                    //right parallel
                                     snapX = data.x2 - originW;
                                     snapDirX = "r2r";
                                 }
@@ -1938,7 +1681,6 @@
                             }
                             if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
                                 setTimeout(() => {
-                                    //emit after relocate
                                     onSnap({
                                         el: copyNode || dragDom,
                                         targetH: targetX,
@@ -1961,7 +1703,8 @@
                             ox: offX,
                             oy: offY,
                             x: x,
-                            y: y
+                            y: y,
+                            transform
                         }, ev) === false) {
                             canDrag = false;
                             endX = x;
@@ -1970,13 +1713,13 @@
                     }
                     if (canDrag) {
                         if (direction === "v") {
-                            transformer.moveToY(y);
+                            transform.moveToY(y);
                         }
                         else if (direction === "h") {
-                            transformer.moveToX(x);
+                            transform.moveToX(x);
                         }
                         else {
-                            transformer.moveTo(x, y);
+                            transform.moveTo(x, y);
                         }
                         endX = x;
                         endY = y;
@@ -1991,21 +1734,19 @@
                             timer = null;
                         }
                     }
-                    //restore classes
                     dragDom.classList.remove(...array.compact(string.split(classes, ' ')));
                     currentStyle.zIndex = originalZIndex;
                     dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
                     let moveToGhost = true;
                     if (onEnd) {
-                        moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY }, ev) === false ? false : true;
+                        moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY, transform }, ev) === false ? false : true;
                     }
-                    //notify
                     const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
                     dragDom.dispatchEvent(customEv);
                     if (ghost) {
                         ((_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.contains(copyNode)) && ((_b = dragDom.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(copyNode));
                         if (moveToGhost !== false) {
-                            wrapper(dragDom).moveTo(transformer.x, transformer.y);
+                            wrapper(dragDom).moveTo(transform.x, transform.y);
                         }
                     }
                 });
@@ -2014,9 +1755,6 @@
                 lockPage: true
             });
         }
-        /**
-         * @internal
-         */
         onOptionChanged(opts) {
             const droppable = opts.droppable;
             if (!is.isFunction(droppable)) {
@@ -2051,12 +1789,6 @@
             }
         });
     };
-    /**
-     * create a draggable pattern for one or more elements with opts
-     * @param els selector string / html element
-     * @param opts
-     * @returns Draggable instance
-     */
     function newDraggable(els, opts) {
         return new Draggable(els, opts);
     }
@@ -2064,23 +1796,13 @@
     var _Droppable_active;
     const Droppables = [];
     const CLASS_DROPPABLE = "uii-droppable";
-    /**
-     * 用于表示一个或多个可响应拖动元素的定义
-     * > 可用CSS接口
-     * - .uii-droppable
-     * @public
-     */
     class Droppable extends Uii {
         constructor(el, opts) {
             super(el, object.assign({}, opts));
             _Droppable_active.set(this, void 0);
             Droppables.push(this);
         }
-        /**
-         * @internal
-         */
         bindEvent(droppable, opts) {
-            //dragenter
             this.registerEvent(droppable, "mouseenter", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
@@ -2094,7 +1816,6 @@
                 }
                 opts.onEnter && opts.onEnter({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
-            //dragleave
             this.registerEvent(droppable, "mouseleave", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
@@ -2108,13 +1829,11 @@
                 }
                 opts.onLeave && opts.onLeave({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
-            //dragover
             this.registerEvent(droppable, "mousemove", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
                 opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
-            //drop
             this.registerEvent(droppable, "mouseup", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
@@ -2126,13 +1845,9 @@
                 opts.onDrop && opts.onDrop({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
         }
-        /**
-         * @internal
-         */
         active(target) {
             let valid = true;
             const opts = this.opts;
-            //check accepts
             if (is.isString(opts.accepts)) {
                 valid = !!target.dataset.dropType && string.test(opts.accepts, target.dataset.dropType);
             }
@@ -2150,16 +1865,12 @@
                 });
             }
             opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
-            //bind events
             collection.each(this.ele, (el) => {
                 el.classList.toggle(CLASS_DROPPABLE, true);
                 el.style.pointerEvents = 'initial';
                 this.bindEvent(el, opts);
             });
         }
-        /**
-         * @internal
-         */
         deactive(target) {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
@@ -2173,12 +1884,10 @@
                 });
             }
             opts.onDeactive && opts.onDeactive({ draggable: target, droppables: this.ele });
-            //unbind events
             this.destroy();
         }
     }
     _Droppable_active = new WeakMap();
-    //uii-drag active
     document.addEventListener("uii-dragactive", (e) => {
         collection.each(Droppables, dpb => {
             dpb.active(e.target);
@@ -2189,29 +1898,14 @@
             dpb.deactive(e.target);
         });
     });
-    /**
-     * Enable els to response to draggable objects
-     * @param els selector string / html element
-     * @param opts
-     * @returns
-     */
     function newDroppable(els, opts) {
         return new Droppable(els, opts);
     }
 
-    /* eslint-disable max-len */
     const THRESHOLD$2 = 2;
     const CLASS_ROTATABLE = "uii-rotatable";
     const CLASS_ROTATABLE_HANDLE = "uii-rotatable-handle";
     const CLASS_ROTATABLE_ACTIVE = "uii-rotatable-active";
-    /**
-     * 用于表示一个或多个可旋转元素的定义
-     * > 可用CSS接口
-     * - .uii-rotatable
-     * - .uii-rotatable-handle
-     * - .uii-rotatable-active
-     * @public
-     */
     class Rotatable extends Uii {
         constructor(els, opts) {
             super(els, opts);
@@ -2260,7 +1954,6 @@
             let startOy = 0;
             let startDeg = 0;
             let container;
-            //bind events
             onPointerStart(function (args) {
                 const { ev } = args;
                 const { w, h } = getStyleSize(el);
@@ -2274,8 +1967,7 @@
                 (startOx = ox), (startOy = oy);
                 container =
                     el instanceof SVGGraphicsElement
-                        ? tree.closest(el, (ele) => string.lowerCase(ele.tagName) === "svg", "parentNode")
-                        : el.parentElement;
+                        ? el.ownerSVGElement : el.parentElement;
                 const currentXy = getPointInContainer(ev, container);
                 startDeg =
                     Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
@@ -2284,7 +1976,6 @@
                     startDeg = 360 + startDeg;
                 let matrixInfo = getMatrixInfo(el);
                 startDeg -= matrixInfo.angle;
-                //apply classes
                 el.classList.toggle(CLASS_ROTATABLE_ACTIVE, true);
                 onStart && onStart({ deg, cx: centerX, cy: centerY }, ev);
             });
@@ -2316,12 +2007,6 @@
             lockPage: true,
         });
     }
-    /**
-     * Make els rotatable
-     * @param els selector string / html element
-     * @param opts
-     * @returns
-     */
     function newRotatable(els, opts) {
         return new Rotatable(els, opts);
     }
@@ -2342,7 +2027,6 @@
             }
             const ele = domEl;
             this.el = domEl;
-            //el data
             const offset = getBox(ele, this.opts.container);
             const rect = { x: offset.x, y: offset.y, width: ele.offsetWidth, height: ele.offsetHeight };
             this.elData = {
@@ -2351,12 +2035,8 @@
                 x2: rect.x + rect.width,
                 y2: rect.y + rect.height,
             };
-            //targets data
             this.update();
         }
-        /**
-         * update targets data if them changed
-         */
         update() {
             let targets;
             if (is.isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
@@ -2421,14 +2101,6 @@
         }
     }
     _CollisionDetector__targets = new WeakMap();
-    /**
-     * create a detector for the el and return
-     * @param el element to be detected
-     * @param targets
-     * @param opts CollisionDetectorOptions
-     * @param opts.container a root element of targets
-     * @returns
-     */
     function newCollisionDetector(el, targets, opts) {
         return new CollisionDetector(el, targets, opts);
     }
@@ -2438,14 +2110,6 @@
     const CLASS_SELECTING = "uii-selecting";
     const CLASS_SELECTED = "uii-selected";
     const THRESHOLD$1 = 2;
-    /**
-     * 用于表示一个元素选择器的定义
-     * > 可用CSS接口
-     * - .uii-selector
-     * - .uii-selecting
-     * - .uii-selected
-     * @public
-     */
     class Selectable extends Uii {
         constructor(container, opts) {
             super(container, object.assign({
@@ -2456,7 +2120,6 @@
             _Selectable__detector.set(this, void 0);
             _Selectable__lastSelected.set(this, void 0);
             const domEl = this.ele[0];
-            //create selector
             let selector = document.createElement("div");
             if (domEl instanceof SVGElement) {
                 selector = document.createElementNS('http://www.w3.org/2000/svg', "rect");
@@ -2474,21 +2137,14 @@
             }
             selector.style.display = 'none';
             domEl.appendChild(selector);
-            //create detector
             __classPrivateFieldSet(this, _Selectable__detector, newCollisionDetector(selector, this.opts.targets, {
                 container: domEl,
             }), "f");
             __classPrivateFieldGet(this, _Selectable_instances, "m", _Selectable_bindEvent).call(this, selector, domEl);
         }
-        /**
-         *  更新targets
-         */
         updateTargets() {
             __classPrivateFieldGet(this, _Selectable__detector, "f").update();
         }
-        /**
-         * @internal
-         */
         onOptionChanged() {
             this.updateTargets();
         }
@@ -2506,7 +2162,6 @@
             const filter = opts.filter;
             const selectingClassAry = array.compact(string.split(opts.selectingClass, " "));
             const selectedClassAry = array.compact(string.split(opts.selectedClass, " "));
-            //check filter
             if (filter) {
                 if (is.isFunction(filter)) {
                     if (filter(target))
@@ -2515,7 +2170,6 @@
                 else if (collection.some(con.querySelectorAll(filter), (el) => el.contains(target)))
                     return true;
             }
-            //检测
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown && onPointerDown(ev) === false)
                 return true;
@@ -2533,18 +2187,14 @@
             let toTop = false;
             let toRight = false;
             let toBottom = false;
-            //bind events
             onPointerStart(function (args) {
                 const { ev } = args;
-                //update targets count & positions
                 __classPrivateFieldGet(that, _Selectable__detector, "f").update();
-                //detect container position
                 const pos = currentCStyle.position;
                 if (pos === "static") {
                     originPos = con.style.position;
                     con.style.position = "relative";
                 }
-                //clear _lastSelected
                 collection.each(__classPrivateFieldGet(that, _Selectable__lastSelected, "f"), t => {
                     target.classList.toggle(CLASS_SELECTED, false);
                 });
@@ -2553,13 +2203,11 @@
             });
             onPointerMove((args) => {
                 const { ev } = args;
-                //获取当前位置坐标
                 const currentXy = getPointInContainer(ev, currentTarget, currentRect, currentCStyle, matrixInfo);
                 let pointX = currentXy.x;
                 let pointY = currentXy.y;
                 let offX = pointX - hitPosX;
                 let offY = pointY - hitPosY;
-                //edge detect
                 if (scroll) {
                     const ltX = ev.clientX - currentRect.x;
                     const ltY = ev.clientY - currentRect.y;
@@ -2612,7 +2260,6 @@
                 style.width = w + "px";
                 style.height = h + "px";
                 style.transform = `translate3d(${x}px,${y}px,0)`;
-                //detect collision
                 if (mode === "overlap") {
                     selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getOverlaps(x1, y1, x1 + w, y1 + h);
                 }
@@ -2647,7 +2294,6 @@
                         timer = null;
                     }
                 }
-                //restore container position
                 if (originPos) {
                     con.style.position = originPos;
                 }
@@ -2670,12 +2316,6 @@
             lockPage: true
         });
     };
-    /**
-     * Add a selector into the container
-     * @param container css selector or html element
-     * @param opts
-     * @returns
-     */
     function newSelectable(container, opts) {
         return new Selectable(container, opts);
     }
@@ -2687,14 +2327,6 @@
     const CLASS_SORTABLE_ACTIVE = "uii-sortable-active";
     const ATTR_SORTABLE_ACTIVE = "uii-sortable-active";
     const THRESHOLD = 2;
-    /**
-     * 用于表示一类排序容器的定义
-     * > 可用CSS接口
-     * - .uii-sortable-container
-     * - .uii-sortable-ghost
-     * - .uii-sortable-active
-     * @public
-     */
     class Sortable extends Uii {
         constructor(container, opts) {
             super(container, object.merge({
@@ -2715,7 +2347,6 @@
                 el.style.pointerEvents = "initial";
                 bindContainer(this.registerEvent.bind(this), el, this.opts);
             });
-            //put into group
             if (this.opts.group) {
                 if (!SORTABLE_GROUPS[this.opts.group]) {
                     SORTABLE_GROUPS[this.opts.group] = [];
@@ -2723,16 +2354,10 @@
                 SORTABLE_GROUPS[this.opts.group].push([this, this.ele]);
             }
         }
-        /**
-         * 调用active表示移出策略肯定是true | 'copy'
-         * @internal
-         */
         active(draggingItem, fromContainer, toContainers, toOpts) {
             var _a;
-            //check move
             const moveFrom = (_a = toOpts.move) === null || _a === void 0 ? void 0 : _a.from;
             const acceptFn = is.isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
-            //验证移入策略
             const activableContainers = collection.flatMap(toContainers, (el) => {
                 const valid = acceptFn(draggingItem, fromContainer, el);
                 return valid ? el : [];
@@ -2752,9 +2377,6 @@
             toOpts.onActive &&
                 toOpts.onActive({ item: draggingItem, from: fromContainer });
         }
-        /**
-         * @internal
-         */
         deactive(draggingItem, fromContainer, toContainers, opts) {
             collection.each(toContainers, (el) => {
                 el.removeAttribute(ATTR_SORTABLE_ACTIVE);
@@ -2770,9 +2392,6 @@
             opts.onDeactive &&
                 opts.onDeactive({ item: draggingItem, from: fromContainer });
         }
-        /**
-         * @internal
-         */
         onOptionChanged() { }
     }
     _Sortable_removeListenItems = new WeakMap();
@@ -2784,7 +2403,6 @@
             let t = e.target;
             if (t === con)
                 return;
-            // filter & handle
             const filterStr = opts.filter ? `:not(${opts.filter})` : "";
             const filteredItems = con.querySelectorAll(":scope > *" + filterStr);
             const handles = opts.handle
@@ -2852,7 +2470,6 @@
                         if (sort) {
                             removeListenItems = listenItems(opts, con, toCopy ? draggingItem : copy, filteredItems, i);
                         }
-                        //active
                         if (moveMode && group && SORTABLE_GROUPS[group]) {
                             collection.each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
                                 const filtered = collection.reject(ele, (el) => el === container);
@@ -2888,7 +2505,6 @@
                     DraggingData = null;
                     if (removeListenItems)
                         removeListenItems();
-                    //deactive
                     if (group && SORTABLE_GROUPS[group]) {
                         collection.each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
                             const filtered = collection.reject(ele, (el) => el === container);
@@ -2927,7 +2543,6 @@
                 }
             }
         });
-        //总是先触发容器enter，之后才是itementer
         registerEvent(container, "mouseenter", (e) => {
             var _a;
             if (!DraggingData)
@@ -2964,7 +2579,6 @@
             DraggingData.toContainer = container;
             if (container.getAttribute(ATTR_SORTABLE_ACTIVE)) {
                 let valid = true;
-                //check move
                 const moveFrom = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.from;
                 const acceptFn = is.isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
                 valid = acceptFn(DraggingData.item, DraggingData.fromContainer, container);
@@ -2973,7 +2587,6 @@
                 if (container.contains(draggingItem)) {
                     return;
                 }
-                //此处检测移出策略
                 const moveTo = DraggingData.moveTo;
                 if (moveTo === "copy") {
                     draggingItem = DraggingData.copy;
@@ -3017,7 +2630,6 @@
         });
     }
     function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
-        //sorting listener
         const listener = (e) => {
             const ct = e.currentTarget;
             if (ct.style.transform) {
@@ -3079,7 +2691,6 @@
             item.addEventListener("mouseenter", listener);
         });
         return () => {
-            //解绑enter事件
             collection.each(items, (item, i) => {
                 if (item === draggingItem)
                     return;
@@ -3087,23 +2698,16 @@
             });
         };
     }
-    /**
-     * make elements within the container sortable
-     * @param container css selector or html element（array)
-     * @param opts
-     * @returns
-     */
     function newSortable(container, opts) {
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.0-beta.1";
+    var version = "1.3.0-beta.2";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"
     };
 
-    // welcome info
     const welcome = globalThis.welcome;
     if (!welcome) {
         const ssAry = [];
@@ -3144,7 +2748,7 @@
     exports.Sortable = Sortable;
     exports.Splittable = Splittable;
     exports.Uii = Uii;
-    exports.UiiTransformer = UiiTransformer;
+    exports.UiiTransform = UiiTransform;
     exports.VERSION = VERSION;
     exports.calcVertex = calcVertex;
     exports["default"] = index;