uiik 1.3.0-alpha → 1.3.0-beta.1

package/index.esm.js

@@ -1,15 +1,15 @@
 /**
- * uiik v1.3.0-alpha
+ * uiik v1.3.0-beta.1
  * 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
  */
-import { isDefined, isArrayLike, isString, isElement, isEmpty, isArray, isNumber, isFunction, isBoolean, isUndefined } from 'myfx/is';
+import { isDefined, isString, isNumber, isArrayLike, isElement, isEmpty, isArray, isFunction, isBoolean, isUndefined } from 'myfx/is';
 import { find, map, toArray, each, reject, includes, some, flatMap, size } from 'myfx/collection';
 import { get, assign, merge } from 'myfx/object';
-import { split, test } from 'myfx/string';
+import { closest } from 'myfx/tree';
+import { lowerCase, split, test } from 'myfx/string';
 import { compact, findIndex } from 'myfx/array';
-import 'myfx';
 import { alphaId } from 'myfx/utils';
 
 /******************************************************************************
@@ -45,8 +45,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+/* eslint-disable max-len */
 const UtMap = new WeakMap();
-const EXP_MATRIX$1 = /matrix\((?<a>[\d-.]+)\s*,\s*(?<b>[\d-.]+)\s*,\s*(?<c>[\d-.]+)\s*,\s*(?<d>[\d-.]+)\s*,\s*(?<x>[\d-.]+)\s*,\s*(?<y>[\d-.]+)\)/gim;
 class UiiTransformer {
     constructor(el) {
         this.angle = 0;
@@ -55,7 +55,7 @@ class UiiTransformer {
         UtMap.set(el, this);
     }
     normalize(el) {
-        let { x, y } = normalize(el);
+        let { x, y } = normalize(el || this.el);
         this.x = x;
         this.y = y;
         return this;
@@ -73,10 +73,19 @@ class UiiTransformer {
         this.y = y;
         moveTo(this.el, this.x, this.y);
     }
+    rotateTo(deg, cx, cy) {
+        this.angle = deg;
+        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);
@@ -85,22 +94,28 @@ function normalize(el) {
         el.style.setProperty("margin", "0", "important");
     }
     else {
-        x = parseFloat(style.x || style.cx) || 0;
-        y = parseFloat(style.y || style.cy) || 0;
+        x =
+            parseFloat(get(el, "x.baseVal.value") || get(el, "cx.baseVal.value")) ||
+                0;
+        y =
+            parseFloat(get(el, "y.baseVal.value") || get(el, "cy.baseVal.value")) ||
+                0;
         el.removeAttribute("x");
         el.removeAttribute("y");
         el.removeAttribute("cx");
         el.removeAttribute("cy");
     }
-    EXP_MATRIX$1.lastIndex = 0;
-    const rs = EXP_MATRIX$1.exec(window.getComputedStyle(el).transform);
-    if (rs && rs.groups) {
-        x += parseFloat(rs.groups.x) || 0;
-        y += parseFloat(rs.groups.y) || 0;
-    }
+    //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)
@@ -108,12 +123,18 @@ function wrapper(el) {
     return new UiiTransformer(el);
 }
 function transformMove(transofrmStr, x, y, unit = false) {
-    return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""})` +
-        transofrmStr.replace(/translate\([^)]+?\)/, ""));
+    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") || "";
     }
@@ -141,7 +162,14 @@ function getTranslate(el) {
     }
     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));
     }
@@ -152,8 +180,15 @@ function moveTo(el, x, y) {
 }
 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));
     }
@@ -163,11 +198,13 @@ function moveBy(el, x, y) {
     }
 }
 function rotateTo(el, deg, cx, cy) {
+    //svg
     if (el instanceof SVGGraphicsElement) {
         let transformStr = el.getAttribute("transform") || "";
         let originPos = isDefined(cx) && isDefined(cy);
         let origin = "";
         if (originPos) {
+            //origin offset
             if (el.x instanceof SVGAnimatedLength) {
                 cx += el.x.animVal.value;
                 cy += el.y.animVal.value;
@@ -185,15 +222,30 @@ function rotateTo(el, deg, cx, cy) {
     else {
         let style = el.style;
         style.transform =
-            style.transform.replace(/rotate\([^)]+?\)/, "").replace(/rotateZ\([^)]+?\)/, "") +
+            style.transform
+                .replace(/rotate\([^)]+?\)/, "")
+                .replace(/rotateZ\([^)]+?\)/, "") +
                 " rotateZ(" +
                 deg +
                 "deg)";
     }
 }
 
+/* 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 };
@@ -203,7 +255,7 @@ function getBox(child, parent) {
             child.ownerSVGElement ||
             child.parentElement ||
             document.body;
-    const parentRect = parent.getBoundingClientRect();
+    const parentRect = parent.getBoundingClientRect(); //bcr包含padding，不包含borderWidth
     const parentStyle = window.getComputedStyle(parent);
     const parentBorderLeft = parseFloat(parentStyle.borderLeftWidth);
     const parentBorderTop = parseFloat(parentStyle.borderTopWidth);
@@ -216,6 +268,11 @@ function getBox(child, parent) {
     }
     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) {
@@ -227,6 +284,9 @@ function getPointOffset(e, pos) {
 function isSVGEl(el) {
     return el instanceof SVGElement;
 }
+/**
+ * 边缘检测最小内部边距
+ */
 const EDGE_THRESHOLD = 5;
 const DRAGGING_RULE = "body * { pointer-events: none; }";
 let lockSheet;
@@ -259,6 +319,10 @@ function restoreCursor() {
     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;
@@ -272,7 +336,23 @@ function getStyleXy(el) {
     }
     return { x, y };
 }
+/**
+ * 获取元素样式/属性中的w/h
+ * @param el
+ */
+function getStyleSize(el, cStyle) {
+    if (!cStyle)
+        cStyle = window.getComputedStyle(el);
+    const w = parseFloat(cStyle.width);
+    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*\)/;
+/**
+ * 获取matrix中的scale/angle
+ * @param elCStyle
+ * @returns
+ */
 function getMatrixInfo(elCStyle) {
     let a = 1, b = 0, x = 0, y = 0;
     let e = undefined, f = undefined;
@@ -307,6 +387,14 @@ function getMatrixInfo(elCStyle) {
     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();
@@ -328,6 +416,11 @@ function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
         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();
@@ -349,12 +442,21 @@ function getRectInContainer(el, container) {
         h: elRect.height / scale,
     };
 }
-function getCenterXy(el) {
+/**
+ * 获取指定元素的圆心坐标
+ * @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(" ");
-    const ox = parseFloat(centerPair[0]);
-    const oy = parseFloat(centerPair[1]);
+    ox = ox || parseFloat(centerPair[0]);
+    oy = oy || parseFloat(centerPair[1]);
+    //left & top
     const shadowDom = el.cloneNode();
     rotateTo(shadowDom, 0);
     const parentEl = el.parentElement;
@@ -366,9 +468,83 @@ function getCenterXy(el) {
         parentEl.removeChild(shadowDom);
     }
     return { sx: startX, sy: startY, x: startX + ox, y: startY + oy, ox, oy };
+}
+function getCenterXySVG(el, ox, oy) {
+    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);
+    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);
+    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 },
+        { x: w, y: 0 },
+        { x: 0, y: h },
+        { x: w, y: h },
+    ];
+    return map(originVertex, ({ x, y }) => {
+        const nx = (x - cx + sx) * Math.cos(radian) -
+            (y - cy + sy) * Math.sin(radian);
+        const ny = (x - cx + sx) * Math.sin(radian) +
+            (y - cy + sy) * Math.cos(radian);
+        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 (isString(ox)) {
+        //percent
+        originX = (parseFloat(ox) / 100) * w;
+    }
+    else if (isNumber(ox)) {
+        originX = ox;
+    }
+    if (isString(oy)) {
+        //percent
+        originY = (parseFloat(oy) / 100) * h;
+    }
+    else if (isNumber(oy)) {
+        originY = oy;
+    }
+    return { originX, originY };
 }
 
 var _Uii_listeners;
+/**
+ * A Base class for all Uii classes
+ */
 class Uii {
     constructor(ele, opts) {
         this.enabled = true;
@@ -396,12 +572,16 @@ class Uii {
             this.ele = isArrayLike(el) ? toArray(el) : [el];
         }
     }
+    /**
+     * 销毁uii对象，包括卸载事件、清空元素等
+     */
     destroy() {
         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;
@@ -411,7 +591,9 @@ class Uii {
             let t = e.target;
             if (!t)
                 return;
+            //uiik options
             const hasCursor = !isEmpty(get(uiiOptions, 'cursor.active'));
+            //提取通用信息
             const currentStyle = el.style;
             const currentCStyle = window.getComputedStyle(el);
             const currentRect = el.getBoundingClientRect();
@@ -424,7 +606,7 @@ class Uii {
             let onPointerStart;
             let onPointerMove;
             let onPointerEnd;
-            onPointerDown({
+            const toBreak = !!onPointerDown({
                 onPointerMove: (pm) => { onPointerMove = pm; },
                 onPointerStart: (ps) => { onPointerStart = ps; },
                 onPointerEnd: (pe) => { onPointerEnd = pe; },
@@ -432,6 +614,11 @@ class Uii {
                 pointX: e.clientX, pointY: e.clientY, target: t,
                 currentTarget: el, currentStyle, currentCStyle, currentRect
             });
+            if (toBreak) {
+                e.preventDefault();
+                return false;
+            }
+            //函数
             const pointerMove = (ev) => {
                 const offX = ev.clientX - originPosX;
                 const offY = ev.clientY - originPosY;
@@ -444,7 +631,7 @@ class Uii {
                         if (hasCursor) {
                             setCursor(uiiOptions.cursor.active);
                         }
-                        onPointerMove && onPointerStart({ ev });
+                        onPointerStart && onPointerStart({ ev });
                     }
                     else {
                         ev.preventDefault();
@@ -474,6 +661,13 @@ class Uii {
             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)
@@ -483,26 +677,52 @@ class Uii {
         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) {
         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();
@@ -522,6 +742,17 @@ function getRootEl(el, root) {
     }
     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, assign({
@@ -533,6 +764,7 @@ class Splittable extends Uii {
         }, opts));
         _Splittable_instances.add(this);
         each(this.ele, con => {
+            //detect container position
             const pos = window.getComputedStyle(con).position;
             if (pos === "static") {
                 con.style.position = "relative";
@@ -631,10 +863,11 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
     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;
+        let blockSize = 0; // 分割区size
         switch (dir) {
             case 'v':
                 originSize = dom1.offsetHeight;
@@ -650,9 +883,11 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
         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';
@@ -662,6 +897,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
         }
         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);
@@ -695,6 +931,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
             else if (ds1 < minSize1) {
                 ds1 = minSize1;
                 if (sticked == 'start' && sticky1) {
+                    // 重置状态
                     doSticky = true;
                     sticked = 'none';
                 }
@@ -710,6 +947,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
             else if (blockSize - ds1 - splitterSize < minSize2) {
                 ds1 = blockSize - minSize2 - splitterSize;
                 if (sticked == 'end' && sticky2) {
+                    // 重置状态
                     doSticky = true;
                     sticked = 'none';
                 }
@@ -721,7 +959,6 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                 }
                 else {
                     ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
-                    console.log(ghostNode.style.left);
                 }
             }
             else {
@@ -735,6 +972,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                 if (doSticky) {
                     onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
                 }
+                //update handle
                 if (dir === 'v') {
                     currentStyle.top = dom2.offsetTop - handleSize / 2 + 'px';
                 }
@@ -766,6 +1004,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                 if (updateEnd) {
                     dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
                 }
+                //update handle
                 if (dir === 'v') {
                     currentStyle.top = startPos + ds1 - handleSize / 2 + 'px';
                 }
@@ -781,15 +1020,30 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
         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, assign({
@@ -800,6 +1054,14 @@ class Resizable extends Uii {
             offset: 0,
         }, opts));
         each(this.ele, (el) => {
+            let tmp = el;
+            if (tmp._uiik_resizable) {
+                tmp._uiik_resizable.destroy();
+                return false;
+            }
+        });
+        each(this.ele, (el) => {
+            el._uiik_resizable = this;
             this.initHandle(el);
         });
     }
@@ -810,16 +1072,22 @@ class Resizable extends Uii {
         const onClone = opts.onClone;
         const uiik = this;
         this.addPointerDown(handle, ({ ev, onPointerStart, onPointerMove, onPointerEnd }) => {
+            //检测
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown && onPointerDown(ev) === false)
-                return;
+                return true;
+            let container = panel instanceof SVGGraphicsElement
+                ? closest(panel, (ele) => lowerCase(ele.tagName) === "svg", "parentNode")
+                : panel.parentElement;
+            let setOrigin = !(panel instanceof SVGGraphicsElement);
+            // 获取panel当前信息
             let matrixInfo = getMatrixInfo(panel);
-            const offset = getRectInContainer(panel, panel.parentElement);
-            const offsetParentRect = panel.parentElement.getBoundingClientRect();
-            const offsetParentCStyle = window.getComputedStyle(panel.parentElement);
-            const panelCStyle = window.getComputedStyle(panel);
-            const originW = parseFloat(panelCStyle.width);
-            const originH = parseFloat(panelCStyle.height);
+            const offset = getRectInContainer(panel, container);
+            const offsetParentRect = container.getBoundingClientRect();
+            const offsetParentCStyle = window.getComputedStyle(container);
+            const { w, h } = getStyleSize(panel);
+            const originW = w;
+            const originH = h;
             const originX = offset.x;
             const originY = offset.y;
             let changeW = false;
@@ -860,6 +1128,7 @@ class Resizable extends Uii {
                     toTransformOrigin = "0 0";
                     break;
             }
+            // boundary
             let minWidth;
             let minHeight;
             let maxWidth;
@@ -880,9 +1149,11 @@ class Resizable extends Uii {
                 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;
@@ -891,11 +1162,15 @@ class Resizable extends Uii {
             let transformer;
             let lastX = 0, lastY = 0;
             let originalTransformOrigin = "";
-            let originVertex;
             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;
@@ -925,22 +1200,21 @@ class Resizable extends Uii {
                 else {
                     transformer = wrapper(panel);
                 }
-                const { x, y, sx, sy } = getCenterXy(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 { x, y, sx, sy } = panel instanceof SVGGraphicsElement
+                    ? getCenterXySVG(panel, startOx, startOy)
+                    : getCenterXy(panel);
                 let centerX = x, centerY = y;
                 const deg = matrixInfo.angle * ONE_ANG;
-                originVertex = [
-                    { x: 0, y: 0 },
-                    { x: originW, y: 0 },
-                    { x: 0, y: originH },
-                    { x: originW, y: originH },
-                ];
-                currentVertex = vertexBeforeTransform = map(originVertex, ({ x, y }) => {
-                    const nx = (x - centerX + sx) * Math.cos(deg) -
-                        (y - centerY + sy) * Math.sin(deg);
-                    const ny = (x - centerX + sx) * Math.sin(deg) +
-                        (y - centerY + sy) * Math.cos(deg);
-                    return { x: centerX + nx, y: centerY + ny };
-                });
+                currentVertex =
+                    vertexBeforeTransform =
+                        calcVertex(originW, originH, centerX, centerY, sx, sy, deg);
+                //计算参考点及斜率
                 switch (dir) {
                     case "s":
                     case "e":
@@ -959,28 +1233,41 @@ class Resizable extends Uii {
                         refPoint = currentVertex[2];
                         break;
                 }
+                //水平斜率
                 k1 =
                     (currentVertex[1].y - refPoint.y) /
-                        (currentVertex[1].x - refPoint.x);
+                        (currentVertex[1].x - refPoint.x); //w
+                //change trans origin
                 style.transition = "none";
                 originalTransformOrigin = style.transformOrigin;
-                if (toTransformOrigin) {
-                    style.transformOrigin = toTransformOrigin;
+                if (setOrigin) {
+                    if (toTransformOrigin) {
+                        style.transformOrigin = toTransformOrigin;
+                    }
+                    else {
+                        style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.y}px`;
+                    }
                 }
-                else {
-                    style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.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);
             });
             onPointerMove((args) => {
                 const { ev } = args;
-                const currentXy = getPointInContainer(ev, panel.parentElement, offsetParentRect, offsetParentCStyle);
+                //获取当前位置坐标
+                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));
@@ -1006,6 +1293,7 @@ class Resizable extends Uii {
                         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;
@@ -1027,6 +1315,7 @@ class Resizable extends Uii {
                         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;
@@ -1046,6 +1335,7 @@ class Resizable extends Uii {
                     case "nw":
                         w = pl1;
                         h = pl2;
+                        //获取顺时针旋转后的直角坐标
                         x = newX;
                         y = newY;
                         if (matrixInfo.angle === 180) {
@@ -1059,6 +1349,7 @@ class Resizable extends Uii {
                         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;
@@ -1085,6 +1376,7 @@ class Resizable extends Uii {
                             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);
@@ -1125,24 +1417,39 @@ class Resizable extends Uii {
                 }
                 else {
                     if (changeW) {
-                        style.width = w + "px";
+                        resize(transformer, style, w);
                     }
                     if (changeH) {
-                        style.height = h + "px";
+                        resize(transformer, style, undefined, h);
                     }
                 }
                 if (changeY) {
-                    transformer.moveToY(y);
+                    transformer.moveToY(y + sY);
                 }
                 if (changeX) {
-                    transformer.moveToX(x);
+                    transformer.moveToX(x + sX);
                 }
                 lastX = x;
                 lastY = y;
                 currentW = w;
                 currentH = h;
-                onResize &&
-                    onResize.call(uiik, { w, h, ow: w - originW, oh: h - originH }, ev);
+                if (onResize && onResize.call) {
+                    const { x, y, sx, sy } = panel instanceof SVGGraphicsElement
+                        ? getCenterXySVG(panel, startOx, startOy)
+                        : getCenterXy(panel);
+                    onResize.call(uiik, {
+                        w,
+                        h,
+                        ow: w - originW,
+                        oh: h - originH,
+                        target: panel,
+                        cx: x,
+                        cy: y,
+                        sx: sx,
+                        sy: sy,
+                        deg: matrixInfo.angle,
+                    }, ev);
+                }
             });
             onPointerEnd((args) => {
                 var _a, _b;
@@ -1153,25 +1460,38 @@ class Resizable extends Uii {
                     panelStyle.left = ghostNode.style.left;
                     panelStyle.top = ghostNode.style.top;
                     moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
-                    panelStyle.width = ghostNode.style.width;
-                    panelStyle.height = ghostNode.style.height;
+                    resize(transformer, panelStyle, parseFloat(ghostNode.style.width), parseFloat(ghostNode.style.height));
+                    // panelStyle.width = ghostNode.style.width;
+                    // panelStyle.height = ghostNode.style.height;
                 }
                 panel.style.transformOrigin = originalTransformOrigin;
-                const { x, y, sx, sy } = getCenterXy(panel);
+                const { x, y, sx, sy, ox, oy } = panel instanceof SVGGraphicsElement
+                    ? getCenterXySVG(panel, startOx, startOy)
+                    : getCenterXy(panel);
                 let centerX = x, centerY = y;
                 const deg = matrixInfo.angle * ONE_ANG;
-                const currentVertex = map(originVertex, ({ x, y }) => {
-                    const nx = (x - centerX + sx) * Math.cos(deg) -
-                        (y - centerY + sy) * Math.sin(deg);
-                    const ny = (x - centerX + sx) * Math.sin(deg) +
-                        (y - centerY + sy) * Math.cos(deg);
-                    return { x: centerX + nx, y: centerY + ny };
-                });
-                if (changeX || changeY) {
-                    transformer.moveTo(transformer.x - (currentVertex[0].x - lastX), transformer.y - (currentVertex[0].y - lastY));
+                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);
+                        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));
+                    }
                 }
                 else {
-                    transformer.moveTo(transformer.x - (currentVertex[0].x - vertexBeforeTransform[0].x), transformer.y - (currentVertex[0].y - vertexBeforeTransform[0].y));
+                    if (changeX || changeY) {
+                        transformer.moveTo(transformer.x - (currentVertex[0].x - lastX), transformer.y - (currentVertex[0].y - lastY));
+                    }
+                    else {
+                        transformer.moveTo(transformer.x -
+                            (currentVertex[0].x - vertexBeforeTransform[0].x), transformer.y -
+                            (currentVertex[0].y - vertexBeforeTransform[0].y));
+                    }
                 }
                 handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
                 onEnd && onEnd.call(uiik, { w: currentW, h: currentH }, ev);
@@ -1197,6 +1517,7 @@ class Resizable extends Uii {
         }
         handles = isArrayLike(handles) ? handles : [handles];
         each(handles, (h) => {
+            //get dir from handle
             const className = h.getAttribute("class") || "";
             const matchRs = className.match(EXP_DIR);
             let dir = "se";
@@ -1211,6 +1532,27 @@ class Resizable extends Uii {
         });
     }
 }
+function resize(transformer, style, w, h) {
+    //svg
+    if (transformer.el instanceof SVGGraphicsElement) {
+        if (isDefined(w))
+            transformer.el.setAttribute("width", w + "");
+        if (isDefined(h))
+            transformer.el.setAttribute("height", h + "");
+    }
+    else {
+        if (isDefined(w))
+            style.width = w + "px";
+        if (isDefined(h))
+            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);
 }
@@ -1221,6 +1563,17 @@ const CLASS_DRAGGABLE = "uii-draggable";
 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, assign({
@@ -1248,6 +1601,7 @@ class Draggable extends Uii {
             });
         }
         this.onOptionChanged(this.opts);
+        //put into group
         if (this.opts.group) {
             if (!DRAGGER_GROUPS[this.opts.group]) {
                 DRAGGER_GROUPS[this.opts.group] = [];
@@ -1255,6 +1609,7 @@ class Draggable extends Uii {
             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 (isBoolean(this.opts.containment)) {
                 __classPrivateFieldSet(this, _Draggable_container, isEmpty(this.ele) ? null : this.ele[0].parentElement, "f");
@@ -1291,27 +1646,32 @@ class Draggable extends Uii {
             var _a;
             let t = ev.target;
             if (!t)
-                return;
+                return true;
+            //refresh draggableList
             if (opts.watch && eleString) {
                 draggableList = bindTarget.querySelectorAll(eleString);
                 initStyle(draggableList);
             }
+            //find drag dom & handle
             let findRs = find(draggableList, el => el.contains(t));
             if (!findRs)
-                return;
+                return true;
             const dragDom = findRs;
             let handle = handleMap.get(dragDom);
             if (handle && !handle.contains(t)) {
-                return;
+                return true;
             }
+            //检测
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
-                return;
+                return true;
             const filter = opts.filter;
+            //check filter
             if (filter) {
                 if (some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
-                    return;
+                    return true;
             }
+            //用于计算鼠标移动时当前位置
             const offsetParent = dragDom instanceof HTMLElement ? dragDom.offsetParent || document.body : dragDom.ownerSVGElement;
             const offsetParentRect = offsetParent.getBoundingClientRect();
             const offsetParentCStyle = window.getComputedStyle(offsetParent);
@@ -1363,7 +1723,9 @@ class Draggable extends Uii {
             let lastSnapDirY = "", lastSnapDirX = "";
             let lastSnapping = "";
             if (snapOn) {
+                //获取拖动元素所在容器内的可吸附对象
                 snappable = map((container || document).querySelectorAll(snapOn), (el) => {
+                    //计算相对容器xy
                     const { x, y, w, h } = getRectInContainer(el, offsetParent);
                     return {
                         x1: x,
@@ -1377,6 +1739,7 @@ class Draggable extends Uii {
             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;
@@ -1399,6 +1762,7 @@ class Draggable extends Uii {
             let toRight = false;
             let toBottom = false;
             let endX = 0, endY = 0;
+            //bind events
             onPointerStart(function (args) {
                 var _a;
                 const { ev } = args;
@@ -1425,11 +1789,13 @@ class Draggable extends Uii {
                 else {
                     transformer = wrapper(dragDom);
                 }
+                //apply classes
                 dragDom.classList.add(...compact(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
                 const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
                 dragDom.dispatchEvent(customEv);
             });
@@ -1438,6 +1804,7 @@ class Draggable extends Uii {
                 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;
@@ -1474,8 +1841,9 @@ class Draggable extends Uii {
                         }
                     }
                 }
-                let x = newX - offsetPointX + 0;
-                let y = newY - offsetPointY + 0;
+                let x = newX - offsetPointX;
+                let y = newY - offsetPointY;
+                //grid
                 if (isNumber(gridX) && isNumber(gridY)) {
                     x = ((x / gridX) >> 0) * gridX;
                     y = ((y / gridY) >> 0) * gridY;
@@ -1501,24 +1869,29 @@ class Draggable extends Uii {
                     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") {
                         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";
                             }
@@ -1532,18 +1905,22 @@ class Draggable extends Uii {
                     if (!direction || direction === "h") {
                         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";
                             }
@@ -1563,6 +1940,7 @@ class Draggable extends Uii {
                         }
                         if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
                             setTimeout(() => {
+                                //emit after relocate
                                 onSnap({
                                     el: copyNode || dragDom,
                                     targetH: targetX,
@@ -1615,6 +1993,7 @@ class Draggable extends Uii {
                         timer = null;
                     }
                 }
+                //restore classes
                 dragDom.classList.remove(...compact(split(classes, ' ')));
                 currentStyle.zIndex = originalZIndex;
                 dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
@@ -1622,6 +2001,7 @@ class Draggable extends Uii {
                 if (onEnd) {
                     moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY }, ev) === false ? false : true;
                 }
+                //notify
                 const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
                 dragDom.dispatchEvent(customEv);
                 if (ghost) {
@@ -1636,6 +2016,9 @@ class Draggable extends Uii {
             lockPage: true
         });
     }
+    /**
+     * @internal
+     */
     onOptionChanged(opts) {
         const droppable = opts.droppable;
         if (!isFunction(droppable)) {
@@ -1661,7 +2044,7 @@ _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Dra
         el.classList.toggle(CLASS_DRAGGABLE, true);
         const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
         ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
-        if (isDefined(this.opts.cursor)) {
+        if (!isUndefined(this.opts.cursor)) {
             el.style.cursor = this.opts.cursor.default || 'move';
             if (isDefined(this.opts.cursor.over)) {
                 el.dataset.cursorOver = this.opts.cursor.over;
@@ -1670,6 +2053,12 @@ _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Dra
         }
     });
 };
+/**
+ * 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);
 }
@@ -1677,13 +2066,23 @@ function newDraggable(els, opts) {
 var _Droppable_active;
 const Droppables = [];
 const CLASS_DROPPABLE = "uii-droppable";
+/**
+ * 用于表示一个或多个可响应拖动元素的定义
+ * > 可用CSS接口
+ * - .uii-droppable
+ * @public
+ */
 class Droppable extends Uii {
     constructor(el, opts) {
         super(el, 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;
@@ -1697,6 +2096,7 @@ class Droppable extends Uii {
             }
             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;
@@ -1710,11 +2110,13 @@ class Droppable extends Uii {
             }
             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;
@@ -1726,9 +2128,13 @@ class Droppable extends Uii {
             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 (isString(opts.accepts)) {
             valid = !!target.dataset.dropType && test(opts.accepts, target.dataset.dropType);
         }
@@ -1746,12 +2152,16 @@ class Droppable extends Uii {
             });
         }
         opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
+        //bind events
         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;
@@ -1765,10 +2175,12 @@ class Droppable extends Uii {
             });
         }
         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) => {
     each(Droppables, dpb => {
         dpb.active(e.target);
@@ -1779,18 +2191,41 @@ document.addEventListener("uii-dragdeactive", (e) => {
         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);
         each(this.ele, (el) => {
+            let tmp = el;
+            if (tmp._uiik_rotatable) {
+                tmp._uiik_rotatable.destroy();
+                return false;
+            }
+        });
+        each(this.ele, (el) => {
+            el._uiik_rotatable = this;
             initHandle(this, el, this.opts);
         });
     }
@@ -1822,29 +2257,56 @@ function bindHandle(uiik, handle, el, opts) {
     const onEnd = opts.onEnd;
     let deg = 0;
     uiik.addPointerDown(handle, ({ onPointerStart, onPointerMove, onPointerEnd }) => {
-        const { x, y, ox, oy } = getCenterXy(el);
-        let centerX = x, centerY = y;
+        let centerX = 0, centerY = 0;
+        let startOx = 0;
+        let startOy = 0;
         let startDeg = 0;
+        let container;
+        //bind events
         onPointerStart(function (args) {
             const { ev } = args;
-            const currentXy = getPointInContainer(ev, el.parentElement);
+            const { w, h } = getStyleSize(el);
+            const { originX, originY } = parseOxy(opts.ox, opts.oy, w, h);
+            startOx = originX;
+            startOy = originY;
+            const { x, y, ox, oy } = el instanceof SVGGraphicsElement
+                ? getCenterXySVG(el, startOx, startOy)
+                : getCenterXy(el, startOx, startOy);
+            (centerX = x), (centerY = y);
+            (startOx = ox), (startOy = oy);
+            container =
+                el instanceof SVGGraphicsElement
+                    ? closest(el, (ele) => lowerCase(ele.tagName) === "svg", "parentNode")
+                    : el.parentElement;
+            const currentXy = getPointInContainer(ev, container);
             startDeg =
-                Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD + 90;
+                Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
+                    90;
             if (startDeg < 0)
                 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);
         });
         onPointerMove((args) => {
             const { ev } = args;
-            const currentXy = getPointInContainer(ev, el.parentElement);
+            const currentXy = getPointInContainer(ev, container);
             deg =
                 Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
-                    90 - startDeg;
-            onRotate && onRotate({ deg, cx: centerX, cy: centerY }, ev);
-            rotateTo(el, deg, ox, oy);
+                    90 -
+                    startDeg;
+            onRotate &&
+                onRotate({
+                    deg,
+                    cx: centerX,
+                    cy: centerY,
+                    target: el,
+                    ox: startOx,
+                    oy: startOy,
+                }, ev);
+            rotateTo(el, deg, startOx, startOy);
         });
         onPointerEnd((args) => {
             const { ev } = args;
@@ -1856,6 +2318,12 @@ function bindHandle(uiik, handle, el, opts) {
         lockPage: true,
     });
 }
+/**
+ * Make els rotatable
+ * @param els selector string / html element
+ * @param opts
+ * @returns
+ */
 function newRotatable(els, opts) {
     return new Rotatable(els, opts);
 }
@@ -1876,6 +2344,7 @@ class CollisionDetector {
         }
         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 = {
@@ -1884,8 +2353,12 @@ class CollisionDetector {
             x2: rect.x + rect.width,
             y2: rect.y + rect.height,
         };
+        //targets data
         this.update();
     }
+    /**
+     * update targets data if them changed
+     */
     update() {
         let targets;
         if (isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
@@ -1950,6 +2423,14 @@ class CollisionDetector {
     }
 }
 _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);
 }
@@ -1959,6 +2440,14 @@ const CLASS_SELECTOR = "uii-selector";
 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, assign({
@@ -1969,6 +2458,7 @@ class Selectable extends Uii {
         _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");
@@ -1986,14 +2476,21 @@ class Selectable extends Uii {
         }
         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();
     }
@@ -2011,17 +2508,19 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
         const filter = opts.filter;
         const selectingClassAry = compact(split(opts.selectingClass, " "));
         const selectedClassAry = compact(split(opts.selectedClass, " "));
+        //check filter
         if (filter) {
             if (isFunction(filter)) {
                 if (filter(target))
-                    return;
+                    return true;
             }
             else if (some(con.querySelectorAll(filter), (el) => el.contains(target)))
-                return;
+                return true;
         }
+        //检测
         const onPointerDown = opts.onPointerDown;
         if (onPointerDown && onPointerDown(ev) === false)
-            return;
+            return true;
         let originPos = "";
         let matrixInfo = getMatrixInfo(currentCStyle);
         const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
@@ -2036,14 +2535,18 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
         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
             each(__classPrivateFieldGet(that, _Selectable__lastSelected, "f"), t => {
                 target.classList.toggle(CLASS_SELECTED, false);
             });
@@ -2052,11 +2555,13 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
         });
         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;
@@ -2109,6 +2614,7 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
             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);
             }
@@ -2143,6 +2649,7 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
                     timer = null;
                 }
             }
+            //restore container position
             if (originPos) {
                 con.style.position = originPos;
             }
@@ -2165,6 +2672,12 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
         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);
 }
@@ -2176,6 +2689,14 @@ const CLASS_SORTABLE_GHOST = "uii-sortable-ghost";
 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, merge({
@@ -2196,6 +2717,7 @@ class Sortable extends Uii {
             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] = [];
@@ -2203,10 +2725,16 @@ class Sortable extends Uii {
             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 = isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+        //验证移入策略
         const activableContainers = flatMap(toContainers, (el) => {
             const valid = acceptFn(draggingItem, fromContainer, el);
             return valid ? el : [];
@@ -2226,6 +2754,9 @@ class Sortable extends Uii {
         toOpts.onActive &&
             toOpts.onActive({ item: draggingItem, from: fromContainer });
     }
+    /**
+     * @internal
+     */
     deactive(draggingItem, fromContainer, toContainers, opts) {
         each(toContainers, (el) => {
             el.removeAttribute(ATTR_SORTABLE_ACTIVE);
@@ -2241,6 +2772,9 @@ class Sortable extends Uii {
         opts.onDeactive &&
             opts.onDeactive({ item: draggingItem, from: fromContainer });
     }
+    /**
+     * @internal
+     */
     onOptionChanged() { }
 }
 _Sortable_removeListenItems = new WeakMap();
@@ -2252,6 +2786,7 @@ function bindContainer(registerEvent, container, opts) {
         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
@@ -2319,6 +2854,7 @@ function bindContainer(registerEvent, container, opts) {
                     if (sort) {
                         removeListenItems = listenItems(opts, con, toCopy ? draggingItem : copy, filteredItems, i);
                     }
+                    //active
                     if (moveMode && group && SORTABLE_GROUPS[group]) {
                         each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
                             const filtered = reject(ele, (el) => el === container);
@@ -2354,6 +2890,7 @@ function bindContainer(registerEvent, container, opts) {
                 DraggingData = null;
                 if (removeListenItems)
                     removeListenItems();
+                //deactive
                 if (group && SORTABLE_GROUPS[group]) {
                     each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
                         const filtered = reject(ele, (el) => el === container);
@@ -2392,6 +2929,7 @@ function bindContainer(registerEvent, container, opts) {
             }
         }
     });
+    //总是先触发容器enter，之后才是itementer
     registerEvent(container, "mouseenter", (e) => {
         var _a;
         if (!DraggingData)
@@ -2428,6 +2966,7 @@ function bindContainer(registerEvent, container, opts) {
         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 = isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
             valid = acceptFn(DraggingData.item, DraggingData.fromContainer, container);
@@ -2436,6 +2975,7 @@ function bindContainer(registerEvent, container, opts) {
             if (container.contains(draggingItem)) {
                 return;
             }
+            //此处检测移出策略
             const moveTo = DraggingData.moveTo;
             if (moveTo === "copy") {
                 draggingItem = DraggingData.copy;
@@ -2479,6 +3019,7 @@ function bindContainer(registerEvent, container, opts) {
     });
 }
 function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
+    //sorting listener
     const listener = (e) => {
         const ct = e.currentTarget;
         if (ct.style.transform) {
@@ -2540,6 +3081,7 @@ function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
         item.addEventListener("mouseenter", listener);
     });
     return () => {
+        //解绑enter事件
         each(items, (item, i) => {
             if (item === draggingItem)
                 return;
@@ -2547,16 +3089,23 @@ function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
         });
     };
 }
+/**
+ * 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-alpha";
+var version = "1.3.0-beta.1";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"
 };
 
+// welcome info
 const welcome = globalThis.welcome;
 if (!welcome) {
     const ssAry = [];
@@ -2584,4 +3133,4 @@ var index = {
     newSortable
 };
 
-export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, Uii, UiiTransformer, VERSION, index as default, getBox, getCenterXy, getMatrixInfo, getPointInContainer, getPointOffset, getRectInContainer, getStyleXy, getTranslate, isSVGEl, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, restoreCursor, rotateTo, saveCursor, setCursor, unlockPage, wrapper };
+export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, Uii, UiiTransformer, VERSION, calcVertex, index as default, getBox, getCenterXy, getCenterXySVG, getMatrixInfo, getPointInContainer, getPointOffset, getRectInContainer, getStyleSize, getStyleXy, getTranslate, getVertex, isSVGEl, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, parseOxy, restoreCursor, rotateTo, saveCursor, setCursor, unlockPage, wrapper };