leafer-ui 1.0.0-rc.6 → 1.0.0-rc.7

package/dist/web.js

@@ -2,7 +2,11 @@ var LeaferUI = (function (exports) {
     'use strict';
 
     const Platform = {
-        imageSuffix: 'leaf'
+        image: {
+            maxCacheSize: 2560 * 1600,
+            maxPatternSize: 4096 * 2160,
+            suffix: 'leaf'
+        }
     };
 
     const Creator = {};
@@ -27,6 +31,7 @@ var LeaferUI = (function (exports) {
     };
     const I$2 = IncrementId;
 
+    const { round, pow: pow$1, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
             if (value < min)
@@ -35,20 +40,18 @@ var LeaferUI = (function (exports) {
                 value = max;
             return value;
         },
-        fourNumber(num) {
-            let one, two, three, four;
+        fourNumber(num, maxValue) {
+            let data;
             if (num instanceof Array) {
                 switch (num.length) {
                     case 4:
-                        return num;
+                        data = num;
+                        break;
                     case 2:
-                        one = three = num[0];
-                        two = four = num[1];
+                        data = [num[0], num[1], num[0], num[1]];
                         break;
                     case 3:
-                        one = num[0];
-                        two = four = num[1];
-                        three = num[2];
+                        data = [num[0], num[1], num[2], num[1]];
                         break;
                     case 1:
                         num = num[0];
@@ -57,7 +60,13 @@ var LeaferUI = (function (exports) {
                         num = 0;
                 }
             }
-            return one === undefined ? [num, num, num, num] : [one, two, three, four];
+            if (!data)
+                data = [num, num, num, num];
+            if (maxValue)
+                for (let i = 0; i < 4; i++)
+                    if (data[i] > maxValue)
+                        data[i] = maxValue;
+            return data;
         },
         formatRotation(rotation, unsign) {
             rotation %= 360;
@@ -73,29 +82,37 @@ var LeaferUI = (function (exports) {
             }
             return rotation;
         },
-        getGapRotation(rotation, gap) {
+        getGapRotation(addRotation, gap, oldRotation = 0) {
+            let rotation = addRotation + oldRotation;
             if (gap > 1) {
                 const r = Math.abs(rotation % gap);
                 if (r < 1 || r > gap - 1)
                     rotation = Math.round(rotation / gap) * gap;
             }
-            return rotation;
+            return rotation - oldRotation;
         },
-        formatSkew(skew) {
-            return MathHelper.within(skew, -90, 90);
+        float(num, maxLength) {
+            const a = maxLength ? pow$1(10, maxLength) : 1000000000000;
+            num = round(num * a) / a;
+            return num === -0 ? 0 : num;
         }
     };
-    const OneRadian = Math.PI / 180;
-    const PI2 = Math.PI * 2;
-    const PI_2 = Math.PI / 2;
+    const OneRadian = PI$4 / 180;
+    const PI2 = PI$4 * 2;
+    const PI_2 = PI$4 / 2;
 
-    const { sin: sin$6, cos: cos$6, acos, atan, sqrt: sqrt$3, PI: PI$3 } = Math;
-    const tempPoint$1 = {};
+    const { sin: sin$5, cos: cos$5, acos, sqrt: sqrt$3 } = Math;
+    const { float } = MathHelper;
+    const tempPoint$2 = {};
     function get$5() {
         return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
     }
+    function getWorld() {
+        return Object.assign(Object.assign({}, get$5()), { x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
+    }
     const MatrixHelper = {
         defaultMatrix: get$5(),
+        defaultWorld: getWorld(),
         tempMatrix: {},
         set(t, a = 1, b = 0, c = 0, d = 1, e = 0, f = 0) {
             t.a = a;
@@ -106,6 +123,7 @@ var LeaferUI = (function (exports) {
             t.f = f;
         },
         get: get$5,
+        getWorld,
         copy(t, matrix) {
             t.a = matrix.a;
             t.b = matrix.b;
@@ -122,115 +140,163 @@ var LeaferUI = (function (exports) {
             t.e += t.a * x + t.c * y;
             t.f += t.b * x + t.d * y;
         },
-        scale(t, x, y = x) {
-            t.a *= x;
-            t.b *= x;
-            t.c *= y;
-            t.d *= y;
-        },
-        scaleOfOuter(t, origin, x, y = x) {
-            M$6.toInnerPoint(t, origin, tempPoint$1);
-            M$6.scaleOfInner(t, tempPoint$1, x, y);
-        },
-        scaleOfInner(t, origin, x, y = x) {
-            M$6.translateInner(t, origin.x, origin.y);
-            M$6.scale(t, x, y);
-            M$6.translateInner(t, -origin.x, -origin.y);
-        },
-        rotate(t, angle) {
-            angle *= OneRadian;
-            const cosR = cos$6(angle);
-            const sinR = sin$6(angle);
-            const { a, b, c, d } = t;
-            t.a = (a * cosR) - (b * sinR);
-            t.b = (a * sinR) + (b * cosR);
-            t.c = (c * cosR) - (d * sinR);
-            t.d = (c * sinR) + (d * cosR);
+        scale(t, scaleX, scaleY = scaleX) {
+            t.a *= scaleX;
+            t.b *= scaleX;
+            t.c *= scaleY;
+            t.d *= scaleY;
         },
-        rotateOfOuter(t, origin, angle) {
-            M$6.toInnerPoint(t, origin, tempPoint$1);
-            M$6.rotateOfInner(t, tempPoint$1, angle);
+        scaleOfOuter(t, origin, scaleX, scaleY) {
+            M$7.toInnerPoint(t, origin, tempPoint$2);
+            M$7.scaleOfInner(t, tempPoint$2, scaleX, scaleY);
         },
-        rotateOfInner(t, origin, angle) {
-            M$6.translateInner(t, origin.x, origin.y);
-            M$6.rotate(t, angle);
-            M$6.translateInner(t, -origin.x, -origin.y);
+        scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
+            M$7.translateInner(t, origin.x, origin.y);
+            M$7.scale(t, scaleX, scaleY);
+            M$7.translateInner(t, -origin.x, -origin.y);
         },
-        skew(t, x, y) {
+        rotate(t, rotation) {
+            const { a, b, c, d } = t;
+            rotation *= OneRadian;
+            const cosR = cos$5(rotation);
+            const sinR = sin$5(rotation);
+            t.a = a * cosR - b * sinR;
+            t.b = a * sinR + b * cosR;
+            t.c = c * cosR - d * sinR;
+            t.d = c * sinR + d * cosR;
+        },
+        rotateOfOuter(t, origin, rotation) {
+            M$7.toInnerPoint(t, origin, tempPoint$2);
+            M$7.rotateOfInner(t, tempPoint$2, rotation);
+        },
+        rotateOfInner(t, origin, rotation) {
+            M$7.translateInner(t, origin.x, origin.y);
+            M$7.rotate(t, rotation);
+            M$7.translateInner(t, -origin.x, -origin.y);
+        },
+        skew(t, skewX, skewY) {
             const { a, b, c, d } = t;
-            if (y) {
-                y *= OneRadian;
-                t.a = a + c * y;
-                t.b = b + d * y;
+            if (skewY) {
+                skewY *= OneRadian;
+                t.a = a + c * skewY;
+                t.b = b + d * skewY;
             }
-            if (x) {
-                x *= OneRadian;
-                t.c = c + a * x;
-                t.d = d + b * x;
+            if (skewX) {
+                skewX *= OneRadian;
+                t.c = c + a * skewX;
+                t.d = d + b * skewX;
             }
         },
-        skewOfOuter(t, origin, x, y) {
-            M$6.toInnerPoint(t, origin, tempPoint$1);
-            M$6.skewOfInner(t, tempPoint$1, x, y);
+        skewOfOuter(t, origin, skewX, skewY) {
+            M$7.toInnerPoint(t, origin, tempPoint$2);
+            M$7.skewOfInner(t, tempPoint$2, skewX, skewY);
         },
-        skewOfInner(t, origin, x, y) {
-            M$6.translateInner(t, origin.x, origin.y);
-            M$6.skew(t, x, y);
-            M$6.translateInner(t, -origin.x, -origin.y);
+        skewOfInner(t, origin, skewX, skewY = 0) {
+            M$7.translateInner(t, origin.x, origin.y);
+            M$7.skew(t, skewX, skewY);
+            M$7.translateInner(t, -origin.x, -origin.y);
         },
-        multiply(t, matrix) {
+        multiply(t, child) {
             const { a, b, c, d, e, f } = t;
-            t.a = matrix.a * a + matrix.b * c;
-            t.b = matrix.a * b + matrix.b * d;
-            t.c = matrix.c * a + matrix.d * c;
-            t.d = matrix.c * b + matrix.d * d;
-            t.e = matrix.e * a + matrix.f * c + e;
-            t.f = matrix.e * b + matrix.f * d + f;
-        },
-        preMultiply(t, matrix) {
-            const { a, b, c, d, e, f } = t;
-            if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) {
-                t.a = (a * matrix.a) + (b * matrix.c);
-                t.b = (a * matrix.b) + (b * matrix.d);
-                t.c = (c * matrix.a) + (d * matrix.c);
-                t.d = (c * matrix.b) + (d * matrix.d);
+            t.a = child.a * a + child.b * c;
+            t.b = child.a * b + child.b * d;
+            t.c = child.c * a + child.d * c;
+            t.d = child.c * b + child.d * d;
+            t.e = child.e * a + child.f * c + e;
+            t.f = child.e * b + child.f * d + f;
+        },
+        multiplyParent(t, parent, to, abcdChanged, childLayout) {
+            const { e, f } = t;
+            to || (to = t);
+            if (abcdChanged === undefined)
+                abcdChanged = t.a !== 1 || t.b || t.c || t.d !== 1;
+            if (abcdChanged) {
+                const { a, b, c, d } = t;
+                to.a = a * parent.a + b * parent.c;
+                to.b = a * parent.b + b * parent.d;
+                to.c = c * parent.a + d * parent.c;
+                to.d = c * parent.b + d * parent.d;
+                if (childLayout)
+                    M$7.multiplyParentLayout(to, parent, childLayout);
+            }
+            else {
+                to.a = parent.a;
+                to.b = parent.b;
+                to.c = parent.c;
+                to.d = parent.d;
+                if (childLayout)
+                    M$7.multiplyParentLayout(to, parent);
+            }
+            to.e = e * parent.a + f * parent.c + parent.e;
+            to.f = e * parent.b + f * parent.d + parent.f;
+        },
+        multiplyParentLayout(t, parent, child) {
+            if (child) {
+                t.scaleX = parent.scaleX * child.scaleX;
+                t.scaleY = parent.scaleY * child.scaleY;
+                t.rotation = parent.rotation + child.rotation;
+                t.skewX = parent.skewX + child.skewX;
+                t.skewY = parent.skewY + child.skewY;
+            }
+            else {
+                t.scaleX = parent.scaleX;
+                t.scaleY = parent.scaleY;
+                t.rotation = parent.rotation;
+                t.skewX = parent.skewX;
+                t.skewY = parent.skewY;
             }
-            t.e = (e * matrix.a) + (f * matrix.c) + matrix.e;
-            t.f = (e * matrix.b) + (f * matrix.d) + matrix.f;
         },
-        divide(t, matrix) {
-            M$6.preMultiply(t, M$6.tempInvert(matrix));
+        divide(t, child) {
+            M$7.multiply(t, M$7.tempInvert(child));
+        },
+        divideParent(t, parent) {
+            M$7.multiplyParent(t, M$7.tempInvert(parent));
         },
         tempInvert(t) {
-            const { tempMatrix: temp } = M$6;
-            M$6.copy(temp, t);
-            M$6.invert(temp);
-            return temp;
+            const { tempMatrix } = M$7;
+            M$7.copy(tempMatrix, t);
+            M$7.invert(tempMatrix);
+            return tempMatrix;
         },
         invert(t) {
             const { a, b, c, d, e, f } = t;
-            const s = 1 / (a * d - b * c);
-            t.a = d * s;
-            t.b = -b * s;
-            t.c = -c * s;
-            t.d = a * s;
-            t.e = -(e * d - f * c) * s;
-            t.f = -(f * a - e * b) * s;
+            if (!b && !c) {
+                if (a === 1 && d === 1) {
+                    t.e = -e;
+                    t.f = -f;
+                }
+                else {
+                    const s = 1 / (a * d);
+                    t.a = d * s;
+                    t.d = a * s;
+                    t.e = -e * d * s;
+                    t.f = -f * a * s;
+                }
+            }
+            else {
+                const s = 1 / (a * d - b * c);
+                t.a = d * s;
+                t.b = -b * s;
+                t.c = -c * s;
+                t.d = a * s;
+                t.e = -(e * d - f * c) * s;
+                t.f = -(f * a - e * b) * s;
+            }
         },
         toOuterPoint(t, inner, to, distance) {
             const { x, y } = inner;
             to || (to = inner);
-            to.x = (x * t.a) + (y * t.c);
-            to.y = (x * t.b) + (y * t.d);
+            to.x = x * t.a + y * t.c;
+            to.y = x * t.b + y * t.d;
             if (!distance) {
                 to.x += t.e;
                 to.y += t.f;
             }
         },
         toInnerPoint(t, outer, to, distance) {
-            const { x, y } = outer;
             const { a, b, c, d } = t;
             const s = 1 / (a * d - b * c);
+            const { x, y } = outer;
             to || (to = outer);
             to.x = (x * d - y * c) * s;
             to.y = (y * a - x * b) * s;
@@ -240,40 +306,84 @@ var LeaferUI = (function (exports) {
                 to.y -= (f * a - e * b) * s;
             }
         },
-        decompose(t) {
-            const { a, b, c, d } = t;
-            let scaleX = a, scaleY = d, rotation = 0, skewX = 0, skewY = 0;
+        setLayout(t, layout, origin, bcChanged) {
+            const { x, y, scaleX, scaleY } = layout;
+            if (bcChanged === undefined)
+                bcChanged = layout.rotation || layout.skewX || layout.skewY;
+            if (bcChanged) {
+                const { rotation, skewX, skewY } = layout;
+                const r = rotation * OneRadian;
+                const cosR = cos$5(r);
+                const sinR = sin$5(r);
+                if (skewX || skewY) {
+                    const sx = skewX * OneRadian;
+                    const sy = skewY * OneRadian;
+                    t.a = (cosR + sy * -sinR) * scaleX;
+                    t.b = (sinR + sy * cosR) * scaleX;
+                    t.c = (-sinR + sx * cosR) * scaleY;
+                    t.d = (cosR + sx * sinR) * scaleY;
+                }
+                else {
+                    t.a = cosR * scaleX;
+                    t.b = sinR * scaleX;
+                    t.c = -sinR * scaleY;
+                    t.d = cosR * scaleY;
+                }
+            }
+            else {
+                t.a = scaleX;
+                t.b = 0;
+                t.c = 0;
+                t.d = scaleY;
+            }
+            t.e = x;
+            t.f = y;
+            if (origin)
+                M$7.translateInner(t, -origin.x, -origin.y);
+        },
+        getLayout(t, origin, firstSkewY) {
+            const { a, b, c, d, e, f } = t;
+            let x = e, y = f, scaleX, scaleY, rotation, skewX, skewY;
             if (b || c) {
                 const s = a * d - b * c;
-                const k = a * c + b * d;
-                if (b) {
-                    const ab = a * a + b * b;
-                    scaleX = sqrt$3(ab);
+                if (c && !firstSkewY) {
+                    scaleX = sqrt$3(a * a + b * b);
                     scaleY = s / scaleX;
-                    const r = a / scaleX;
-                    rotation = b > 0 ? acos(r) : -acos(r);
-                    skewX = atan(k / ab) / OneRadian;
+                    const cosR = a / scaleX;
+                    rotation = b > 0 ? acos(cosR) : -acos(cosR);
                 }
                 else {
-                    const cd = c * c + d * d;
-                    scaleY = sqrt$3(cd);
+                    scaleY = sqrt$3(c * c + d * d);
                     scaleX = s / scaleY;
-                    const r = c / scaleY;
-                    rotation = PI$3 / 2 - (d > 0 ? acos(-r) : -acos(r));
-                    skewY = atan(k / cd) / OneRadian;
+                    const cosR = c / scaleY;
+                    rotation = PI_2 - (d > 0 ? acos(-cosR) : -acos(cosR));
                 }
-                rotation /= OneRadian;
+                const cosR = cos$5(rotation);
+                const sinR = sin$5(rotation);
+                scaleX = float(scaleX), scaleY = float(scaleY);
+                skewX = float((c / scaleY + sinR) / cosR / OneRadian);
+                skewY = float((b / scaleX - sinR) / cosR / OneRadian);
+                rotation = float(rotation / OneRadian);
+            }
+            else {
+                scaleX = a;
+                scaleY = d;
+                rotation = skewX = skewY = 0;
+            }
+            if (origin) {
+                x += origin.x * a + origin.y * c;
+                y += origin.x * b + origin.y * d;
             }
-            return { x: t.e, y: t.f, scaleX, scaleY, rotation, skewX, skewY };
+            return { x, y, scaleX, scaleY, rotation, skewX, skewY };
         },
         reset(t) {
-            M$6.set(t);
+            M$7.set(t);
         }
     };
-    const M$6 = MatrixHelper;
+    const M$7 = MatrixHelper;
 
     const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$2 } = MatrixHelper;
-    const { sin: sin$5, cos: cos$5, abs: abs$1, sqrt: sqrt$2, atan2: atan2$2 } = Math;
+    const { sin: sin$4, cos: cos$4, abs: abs$3, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
     const PointHelper = {
         defaultPoint: { x: 0, y: 0 },
         tempPoint: {},
@@ -294,32 +404,33 @@ var LeaferUI = (function (exports) {
             t.x += x;
             t.y += y;
         },
-        rotate(t, rotation, center) {
-            if (!center)
-                center = P$5.defaultPoint;
-            const cosR = cos$5(rotation * OneRadian);
-            const sinR = sin$5(rotation * OneRadian);
-            const rx = t.x - center.x;
-            const ry = t.y - center.y;
-            t.x = center.x + rx * cosR - ry * sinR;
-            t.y = center.y + rx * sinR + ry * cosR;
+        rotate(t, rotation, origin) {
+            if (!origin)
+                origin = P$6.defaultPoint;
+            rotation *= OneRadian;
+            const cosR = cos$4(rotation);
+            const sinR = sin$4(rotation);
+            const rx = t.x - origin.x;
+            const ry = t.y - origin.y;
+            t.x = origin.x + rx * cosR - ry * sinR;
+            t.y = origin.y + rx * sinR + ry * cosR;
         },
         tempToInnerOf(t, matrix) {
-            const { tempPoint: temp } = P$5;
-            P$5.copy(temp, t);
+            const { tempPoint: temp } = P$6;
+            P$6.copy(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
-            const { tempPoint: temp } = P$5;
-            P$5.copy(temp, t);
+            const { tempPoint: temp } = P$6;
+            P$6.copy(temp, t);
             toOuterPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
-            const { tempRadiusPoint: temp } = P$5;
-            P$5.copy(temp, t);
-            P$5.toInnerRadiusPointOf(t, matrix, temp);
+            const { tempRadiusPoint: temp } = P$6;
+            P$6.copy(temp, t);
+            P$6.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
         toInnerRadiusPointOf(t, matrix, to) {
@@ -337,53 +448,78 @@ var LeaferUI = (function (exports) {
         getCenter(t, to) {
             return { x: t.x + (to.x - t.x) / 2, y: t.y + (to.y - t.y) / 2 };
         },
+        getCenterX(x1, x2) {
+            return x1 + (x2 - x1) / 2;
+        },
+        getCenterY(y1, y2) {
+            return y1 + (y2 - y1) / 2;
+        },
         getDistance(t, point) {
-            const x = abs$1(point.x - t.x);
-            const y = abs$1(point.y - t.y);
+            return P$6.getDistanceFrom(t.x, t.y, point.x, point.y);
+        },
+        getDistanceFrom(x1, y1, x2, y2) {
+            const x = abs$3(x2 - x1);
+            const y = abs$3(y2 - y1);
             return sqrt$2(x * x + y * y);
         },
+        getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
+            return min$1(P$6.getDistanceFrom(x1, y1, x2, y2), P$6.getDistanceFrom(x2, y2, x3, y3));
+        },
         getAngle(t, to) {
-            return P$5.getAtan2(t, to) / OneRadian;
+            return P$6.getAtan2(t, to) / OneRadian;
         },
-        getChangeAngle(t, orign, to, toOrigin) {
+        getRotation(t, origin, to, toOrigin) {
             if (!toOrigin)
-                toOrigin = orign;
-            let fromAngle = P$5.getAngle(t, orign);
-            let toAngle = P$5.getAngle(to, toOrigin);
-            const angle = toAngle - fromAngle;
-            return angle < -180 ? angle + 360 : angle;
+                toOrigin = origin;
+            return P$6.getRadianFrom(t.x, t.y, origin.x, origin.y, to.x, to.y, toOrigin.x, toOrigin.y) / OneRadian;
+        },
+        getRadianFrom(fromX, fromY, originX, originY, toX, toY, toOriginX, toOriginY) {
+            if (toOriginX === undefined)
+                toOriginX = originX, toOriginY = originY;
+            let fromAngle = atan2$2(fromY - originY, fromX - originX);
+            let toAngle = atan2$2(toY - toOriginY, toX - toOriginX);
+            const radian = toAngle - fromAngle;
+            return radian < -PI$3 ? radian + PI2 : radian;
         },
         getAtan2(t, to) {
             return atan2$2(to.y - t.y, to.x - t.x);
         },
         getDistancePoint(t, to, distance) {
-            const r = P$5.getAtan2(t, to);
-            return { x: t.x + cos$5(r) * distance, y: t.y + sin$5(r) * distance };
+            const r = P$6.getAtan2(t, to);
+            return { x: t.x + cos$4(r) * distance, y: t.y + sin$4(r) * distance };
         },
         reset(t) {
-            P$5.reset(t);
+            P$6.reset(t);
         }
     };
-    const P$5 = PointHelper;
+    const P$6 = PointHelper;
 
     class Point {
         constructor(x, y) {
-            typeof x === 'object' ? PointHelper.copy(this, x) : PointHelper.set(this, x, y);
+            this.set(x, y);
         }
         set(x, y) {
-            PointHelper.set(this, x, y);
-        }
-        copy(point) {
-            PointHelper.copy(this, point);
+            typeof x === 'object' ? PointHelper.copy(this, x) : PointHelper.set(this, x, y);
             return this;
         }
+        get() {
+            const { x, y } = this;
+            return { x, y };
+        }
         clone() {
             return new Point(this);
         }
-        rotate(angle, center) {
-            PointHelper.rotate(this, angle, center);
+        rotate(rotation, origin) {
+            PointHelper.rotate(this, rotation, origin);
+            return this;
+        }
+        rotateOf(origin, rotation) {
+            PointHelper.rotate(this, rotation, origin);
             return this;
         }
+        getRotation(origin, to, toOrigin) {
+            return PointHelper.getRotation(this, origin, to, toOrigin);
+        }
         toInnerOf(matrix, to) {
             PointHelper.toInnerOf(this, matrix, to);
             return this;
@@ -393,11 +529,14 @@ var LeaferUI = (function (exports) {
             return this;
         }
         getCenter(to) {
-            return PointHelper.getCenter(this, to);
+            return new Point(PointHelper.getCenter(this, to));
         }
         getDistance(to) {
             return PointHelper.getDistance(this, to);
         }
+        getDistancePoint(to, distance) {
+            return new Point(PointHelper.getDistancePoint(this, to, distance));
+        }
         getAngle(to) {
             return PointHelper.getAngle(this, to);
         }
@@ -406,20 +545,22 @@ var LeaferUI = (function (exports) {
         }
         reset() {
             PointHelper.reset(this);
+            return this;
         }
     }
 
     class Matrix {
         constructor(a, b, c, d, e, f) {
-            typeof a === 'object' ? MatrixHelper.copy(this, a) : MatrixHelper.set(this, a, b, c, d, e, f);
+            this.set(a, b, c, d, e, f);
         }
         set(a, b, c, d, e, f) {
-            MatrixHelper.set(this, a, b, c, d, e, f);
-        }
-        copy(matrix) {
-            MatrixHelper.copy(this, matrix);
+            typeof a === 'object' ? MatrixHelper.copy(this, a) : MatrixHelper.set(this, a, b, c, d, e, f);
             return this;
         }
+        get() {
+            const { a, b, c, d, e, f } = this;
+            return { a, b, c, d, e, f };
+        }
         clone() {
             return new Matrix(this);
         }
@@ -467,16 +608,20 @@ var LeaferUI = (function (exports) {
             MatrixHelper.skewOfInner(this, origin, x, y);
             return this;
         }
-        multiply(matrix) {
-            MatrixHelper.multiply(this, matrix);
+        multiply(child) {
+            MatrixHelper.multiply(this, child);
             return this;
         }
-        preMultiply(matrix) {
-            MatrixHelper.preMultiply(this, matrix);
+        multiplyParent(parent) {
+            MatrixHelper.multiplyParent(this, parent);
             return this;
         }
-        divide(matrix) {
-            MatrixHelper.divide(this, matrix);
+        divide(child) {
+            MatrixHelper.divide(this, child);
+            return this;
+        }
+        divideParent(parent) {
+            MatrixHelper.divideParent(this, parent);
             return this;
         }
         invert() {
@@ -489,8 +634,12 @@ var LeaferUI = (function (exports) {
         toInnerPoint(outer, to, distance) {
             MatrixHelper.toInnerPoint(this, outer, to, distance);
         }
-        decompose() {
-            return MatrixHelper.decompose(this);
+        setLayout(data, origin) {
+            MatrixHelper.setLayout(this, data, origin);
+            return this;
+        }
+        getLayout(origin, firstSkewY) {
+            return MatrixHelper.getLayout(this, origin, firstSkewY);
         }
         reset() {
             MatrixHelper.reset(this);
@@ -519,7 +668,7 @@ var LeaferUI = (function (exports) {
             t.maxX = pb.maxX;
             t.maxY = pb.maxY;
         },
-        add(t, pb) {
+        addPointBounds(t, pb) {
             t.minX = pb.minX < t.minX ? pb.minX : t.minX;
             t.minY = pb.minY < t.minY ? pb.minY : t.minY;
             t.maxX = pb.maxX > t.maxX ? pb.maxX : t.maxX;
@@ -534,11 +683,11 @@ var LeaferUI = (function (exports) {
     };
     const { addPoint: addPoint$3 } = TwoPointBoundsHelper;
 
-    const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$4 } = TwoPointBoundsHelper;
+    const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$3 } = TwoPointBoundsHelper;
     const { toOuterPoint: toOuterPoint$1 } = MatrixHelper;
     let right, bottom, boundsRight, boundsBottom;
     const point = {};
-    const toPoint = {};
+    const toPoint$1 = {};
     const BoundsHelper = {
         tempBounds: {},
         set(t, x = 0, y = 0, width = 0, height = 0) {
@@ -558,12 +707,10 @@ var LeaferUI = (function (exports) {
                 spreadY = spreadX;
             B.set(t, bounds.x - spreadX, bounds.y - spreadY, bounds.width + spreadX * 2, bounds.height + spreadY * 2);
         },
-        right(t) {
-            return t.x + t.width;
-        },
-        bottom(t) {
-            return t.y + t.height;
-        },
+        minX(t) { return t.width > 0 ? t.x : t.x + t.width; },
+        minY(t) { return t.height > 0 ? t.y : t.y + t.height; },
+        maxX(t) { return t.width > 0 ? t.x + t.width : t.x; },
+        maxY(t) { return t.height > 0 ? t.y + t.height : t.y; },
         move(t, x, y) {
             t.x += x;
             t.y += y;
@@ -581,8 +728,8 @@ var LeaferUI = (function (exports) {
                 copy$7(to, t);
             }
             if (parent) {
-                to.offsetX = -(B.right(parent) - t.x);
-                to.offsetY = -(B.bottom(parent) - t.y);
+                to.offsetX = -(B.maxX(parent) - t.x);
+                to.offsetY = -(B.maxY(parent) - t.y);
             }
             else {
                 to.offsetX = t.x + t.width;
@@ -638,18 +785,18 @@ var LeaferUI = (function (exports) {
             else {
                 point.x = t.x;
                 point.y = t.y;
-                toOuterPoint$1(matrix, point, toPoint);
-                setPoint$2(tempPointBounds$1, toPoint.x, toPoint.y);
+                toOuterPoint$1(matrix, point, toPoint$1);
+                setPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
                 point.x = t.x + t.width;
-                toOuterPoint$1(matrix, point, toPoint);
-                addPoint$2(tempPointBounds$1, toPoint.x, toPoint.y);
+                toOuterPoint$1(matrix, point, toPoint$1);
+                addPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
                 point.y = t.y + t.height;
-                toOuterPoint$1(matrix, point, toPoint);
-                addPoint$2(tempPointBounds$1, toPoint.x, toPoint.y);
+                toOuterPoint$1(matrix, point, toPoint$1);
+                addPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
                 point.x = t.x;
-                toOuterPoint$1(matrix, point, toPoint);
-                addPoint$2(tempPointBounds$1, toPoint.x, toPoint.y);
-                toBounds$4(tempPointBounds$1, to);
+                toOuterPoint$1(matrix, point, toPoint$1);
+                addPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+                toBounds$3(tempPointBounds$1, to);
             }
         },
         getFitMatrix(t, put) {
@@ -693,18 +840,18 @@ var LeaferUI = (function (exports) {
             t.height = bottom - t.y;
         },
         addList(t, list) {
-            B.setByListWithHandle(t, list, undefined, true);
+            B.setListWithFn(t, list, undefined, true);
         },
-        setByList(t, list, addMode = false) {
-            B.setByListWithHandle(t, list, undefined, addMode);
+        setList(t, list, addMode = false) {
+            B.setListWithFn(t, list, undefined, addMode);
         },
-        addListWithHandle(t, list, boundsDataHandle) {
-            B.setByListWithHandle(t, list, boundsDataHandle, true);
+        addListWithFn(t, list, boundsDataFn) {
+            B.setListWithFn(t, list, boundsDataFn, true);
         },
-        setByListWithHandle(t, list, boundsDataHandle, addMode = false) {
+        setListWithFn(t, list, boundsDataFn, addMode = false) {
             let bounds, first = true;
             for (let i = 0, len = list.length; i < len; i++) {
-                bounds = boundsDataHandle ? boundsDataHandle(list[i]) : list[i];
+                bounds = boundsDataFn ? boundsDataFn(list[i]) : list[i];
                 if (bounds && (bounds.width || bounds.height)) {
                     if (first) {
                         first = false;
@@ -712,18 +859,25 @@ var LeaferUI = (function (exports) {
                             copy$7(t, bounds);
                     }
                     else {
-                        add$2(t, bounds);
+                        add$1(t, bounds);
                     }
                 }
             }
             if (first)
                 B.reset(t);
         },
-        setByPoints(t, points) {
-            points.forEach((point, index) => {
-                index === 0 ? setPoint$2(tempPointBounds$1, point.x, point.y) : addPoint$2(tempPointBounds$1, point.x, point.y);
-            });
-            toBounds$4(tempPointBounds$1, t);
+        setPoints(t, points) {
+            points.forEach((point, index) => index === 0 ? setPoint$2(tempPointBounds$1, point.x, point.y) : addPoint$2(tempPointBounds$1, point.x, point.y));
+            toBounds$3(tempPointBounds$1, t);
+        },
+        getPoints(t) {
+            const { x, y, width, height } = t;
+            return [
+                { x, y },
+                { x: x + width, y },
+                { x: x + width, y: y + height },
+                { x, y: y + height }
+            ];
         },
         hitRadiusPoint(t, point, pointMatrix) {
             if (pointMatrix)
@@ -775,19 +929,24 @@ var LeaferUI = (function (exports) {
         }
     };
     const B = BoundsHelper;
-    const { add: add$2, copy: copy$7 } = B;
+    const { add: add$1, copy: copy$7 } = B;
 
     class Bounds {
+        get minX() { return BoundsHelper.minX(this); }
+        get minY() { return BoundsHelper.minY(this); }
+        get maxX() { return BoundsHelper.maxX(this); }
+        get maxY() { return BoundsHelper.maxY(this); }
         constructor(x, y, width, height) {
-            typeof x === 'object' ? BoundsHelper.copy(this, x) : BoundsHelper.set(this, x, y, width, height);
+            this.set(x, y, width, height);
         }
         set(x, y, width, height) {
-            BoundsHelper.set(this, x, y, width, height);
-        }
-        copy(bounds) {
-            BoundsHelper.copy(this, bounds);
+            typeof x === 'object' ? BoundsHelper.copy(this, x) : BoundsHelper.set(this, x, y, width, height);
             return this;
         }
+        get() {
+            const { x, y, width, height } = this;
+            return { x, y, width, height };
+        }
         clone() {
             return new Bounds(this);
         }
@@ -823,25 +982,28 @@ var LeaferUI = (function (exports) {
             return this;
         }
         addList(boundsList) {
-            BoundsHelper.setByList(this, boundsList, true);
+            BoundsHelper.setList(this, boundsList, true);
             return this;
         }
-        setByList(boundsList, addMode) {
-            BoundsHelper.setByList(this, boundsList, addMode);
+        setList(boundsList) {
+            BoundsHelper.setList(this, boundsList);
             return this;
         }
-        addListWithHandle(list, boundsDataHandle) {
-            BoundsHelper.setByListWithHandle(this, list, boundsDataHandle, true);
+        addListWithFn(list, boundsDataFn) {
+            BoundsHelper.setListWithFn(this, list, boundsDataFn, true);
             return this;
         }
-        setByListWithHandle(list, boundsDataHandle, addMode) {
-            BoundsHelper.setByListWithHandle(this, list, boundsDataHandle, addMode);
+        setListWithFn(list, boundsDataFn) {
+            BoundsHelper.setListWithFn(this, list, boundsDataFn);
             return this;
         }
-        setByPoints(points) {
-            BoundsHelper.setByPoints(this, points);
+        setPoints(points) {
+            BoundsHelper.setPoints(this, points);
             return this;
         }
+        getPoints() {
+            return BoundsHelper.getPoints(this);
+        }
         hitPoint(point, pointMatrix) {
             return BoundsHelper.hitPoint(this, point, pointMatrix);
         }
@@ -894,20 +1056,25 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    class TwoPointBounds {
-        constructor(x, y) {
-            TwoPointBoundsHelper.setPoint(this, x, y);
-        }
-        addPoint(x, y) {
-            TwoPointBoundsHelper.addPoint(this, x, y);
-        }
-        addBounds(x, y, width, height) {
-            TwoPointBoundsHelper.addBounds(this, x, y, width, height);
-        }
-        add(pb) {
-            TwoPointBoundsHelper.add(this, pb);
+    const center = { x: 0.5, y: 0.5 };
+    const AroundHelper = {
+        center,
+        tempPoint: {},
+        toPoint(around, bounds, to, onlySize) {
+            to || (to = {});
+            switch (around) {
+                case 'center':
+                    around = center;
+                    break;
+            }
+            to.x = around.x * bounds.width;
+            to.y = around.y * bounds.height;
+            if (!onlySize) {
+                to.x += bounds.x;
+                to.y += bounds.y;
+            }
         }
-    }
+    };
 
     const StringNumberMap = {
         '0': 1,
@@ -948,18 +1115,21 @@ var LeaferUI = (function (exports) {
             this.excludeList = name;
         }
         log(...messages) {
-            if (D$4.enable) {
-                if (D$4.filterList.length && D$4.filterList.every(name => name !== this.name))
+            if (D$5.enable) {
+                if (D$5.filterList.length && D$5.filterList.every(name => name !== this.name))
                     return;
-                if (D$4.excludeList.length && D$4.excludeList.some(name => name === this.name))
+                if (D$5.excludeList.length && D$5.excludeList.some(name => name === this.name))
                     return;
                 console.log('%c' + this.name, 'color:#21ae62', ...messages);
             }
         }
-        warn(...messages) {
-            if (D$4.enable)
+        tip(...messages) {
+            if (D$5.enable)
                 console.warn(this.name, ...messages);
         }
+        warn(...messages) {
+            console.warn(this.name, ...messages);
+        }
         repeat(name, ...messages) {
             if (!this.repeatMap[name]) {
                 this.warn('repeat:' + name, ...messages);
@@ -977,46 +1147,43 @@ var LeaferUI = (function (exports) {
     }
     Debug.filterList = [];
     Debug.excludeList = [];
-    const D$4 = Debug;
-
-    const debug$f = Debug.get('RunTime');
-    class Run {
-        static start(name, microsecond) {
+    const D$5 = Debug;
+
+    const debug$g = Debug.get('RunTime');
+    const Run = {
+        currentId: 0,
+        currentName: '',
+        idMap: {},
+        nameMap: {},
+        nameToIdMap: {},
+        start(name, microsecond) {
             const id = IncrementId.create(IncrementId.RUNTIME);
             R.currentId = R.idMap[id] = microsecond ? performance.now() : Date.now();
             R.currentName = R.nameMap[id] = name;
             R.nameToIdMap[name] = id;
             return id;
-        }
-        static end(id, microsecond) {
-            const time = R.idMap[id];
-            const name = R.nameMap[id];
+        },
+        end(id, microsecond) {
+            const time = R.idMap[id], name = R.nameMap[id];
+            const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
             R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-            if (microsecond) {
-                debug$f.log(name, performance.now() - time, 'µs');
-            }
-            else {
-                debug$f.log(name, Date.now() - time, 'ms');
-            }
-        }
-        static endOfName(name, microsecond) {
+            debug$g.log(name, duration, 'ms');
+        },
+        endOfName(name, microsecond) {
             const id = R.nameToIdMap[name];
             if (id !== undefined)
                 R.end(id, microsecond);
         }
-    }
-    Run.idMap = {};
-    Run.nameMap = {};
-    Run.nameToIdMap = {};
+    };
     const R = Run;
 
-    const debug$e = Debug.get('UICreator');
+    const debug$f = Debug.get('UICreator');
     const UICreator = {
         list: {},
         register(UI) {
             const { __tag: tag } = UI.prototype;
             if (list$2[tag]) {
-                debug$e.repeat(tag);
+                debug$f.repeat(tag);
             }
             else {
                 list$2[tag] = UI;
@@ -1038,7 +1205,7 @@ var LeaferUI = (function (exports) {
     };
     const { list: list$2 } = UICreator;
 
-    const debug$d = Debug.get('EventCreator');
+    const debug$e = Debug.get('EventCreator');
     const EventCreator = {
         nameList: {},
         register(Event) {
@@ -1046,7 +1213,7 @@ var LeaferUI = (function (exports) {
             Object.keys(Event).forEach(key => {
                 name = Event[key];
                 if (typeof name === 'string')
-                    nameList[name] ? debug$d.repeat(name) : nameList[name] = Event;
+                    nameList[name] ? debug$e.repeat(name) : nameList[name] = Event;
             });
         },
         changeName(oldName, newName) {
@@ -1120,7 +1287,7 @@ var LeaferUI = (function (exports) {
         constructor(item) {
             this.reset();
             if (item)
-                item instanceof Array ? this.pushList(item) : this.push(item);
+                item instanceof Array ? this.addList(item) : this.add(item);
         }
         has(leaf) {
             return leaf && this.keys[leaf.innerId] !== undefined;
@@ -1132,36 +1299,34 @@ var LeaferUI = (function (exports) {
             const index = this.keys[leaf.innerId];
             return index === undefined ? -1 : index;
         }
-        pushList(list) {
-            list.forEach(leaf => { this.push(leaf); });
-        }
-        unshift(leaf) {
-            const { keys } = this;
-            if (keys[leaf.innerId] === undefined) {
-                this.list.unshift(leaf);
-                Object.keys(keys).forEach(innerId => {
-                    if (keys[innerId] !== undefined)
-                        keys[innerId]++;
-                });
-                keys[leaf.innerId] = 0;
-            }
-        }
-        push(leaf) {
+        add(leaf) {
             const { list, keys } = this;
             if (keys[leaf.innerId] === undefined) {
                 list.push(leaf);
                 keys[leaf.innerId] = list.length - 1;
             }
         }
-        sort(reverse) {
-            const { list } = this;
-            if (reverse) {
-                list.sort((a, b) => b.__level - a.__level);
-            }
-            else {
-                list.sort((a, b) => a.__level - b.__level);
+        addAt(leaf, index = 0) {
+            const { keys } = this;
+            if (keys[leaf.innerId] === undefined) {
+                const { list } = this;
+                for (let i = index, len = list.length; i < len; i++)
+                    keys[list[i].innerId]++;
+                if (index === 0) {
+                    list.unshift(leaf);
+                }
+                else {
+                    if (index > list.length)
+                        index = list.length;
+                    list.splice(index, 0, leaf);
+                }
+                keys[leaf.innerId] = index;
             }
         }
+        addList(list) {
+            for (let i = 0; i < list.length; i++)
+                this.add(list[i]);
+        }
         remove(leaf) {
             const { list } = this;
             let findIndex;
@@ -1177,20 +1342,36 @@ var LeaferUI = (function (exports) {
             if (findIndex !== undefined)
                 list.splice(findIndex, 1);
         }
+        sort(reverse) {
+            const { list } = this;
+            if (reverse) {
+                list.sort((a, b) => b.__level - a.__level);
+            }
+            else {
+                list.sort((a, b) => a.__level - b.__level);
+            }
+        }
         forEach(itemCallback) {
             this.list.forEach(itemCallback);
         }
         clone() {
             const list = new LeafList();
-            this.list.forEach(item => { list.push(item); });
+            list.list = [...this.list];
+            list.keys = Object.assign({}, this.keys);
             return list;
         }
+        update() {
+            this.keys = {};
+            const { list, keys } = this;
+            for (let i = 0, len = list.length; i < len; i++)
+                keys[list[i].innerId] = i;
+        }
         reset() {
             this.list = [];
             this.keys = {};
         }
         destroy() {
-            this.list = null;
+            this.reset();
         }
     }
 
@@ -1200,7 +1381,7 @@ var LeaferUI = (function (exports) {
             this._length = 0;
             this.reset();
             if (item)
-                item instanceof Array ? this.pushList(item) : this.push(item);
+                item instanceof Array ? this.addList(item) : this.add(item);
         }
         has(leaf) {
             return this.keys[leaf.innerId] !== undefined;
@@ -1217,10 +1398,10 @@ var LeaferUI = (function (exports) {
                 levels.sort((a, b) => a - b);
             }
         }
-        pushList(list) {
-            list.forEach(leaf => { this.push(leaf); });
+        addList(list) {
+            list.forEach(leaf => { this.add(leaf); });
         }
-        push(leaf) {
+        add(leaf) {
             const { keys, levelMap } = this;
             if (!keys[leaf.innerId]) {
                 keys[leaf.innerId] = 1;
@@ -1261,11 +1442,11 @@ var LeaferUI = (function (exports) {
             this.imageTypeList = new LeafList();
         }
         getImageType(leaf, size) {
-            this.imageTypeList.push(leaf);
+            this.imageTypeList.add(leaf);
             return Creator.hitCanvas(size);
         }
         getPathType(leaf) {
-            this.pathTypeList.push(leaf);
+            this.pathTypeList.add(leaf);
             return Creator.hitCanvas();
         }
         clearImageType() {
@@ -1335,6 +1516,17 @@ var LeaferUI = (function (exports) {
             }
             return this[name];
         }
+        __getData() {
+            const data = { tag: this.__leaf.tag }, { __input } = this;
+            let inputValue;
+            for (let key in this) {
+                if (key[0] !== '_') {
+                    inputValue = __input ? __input[key] : undefined;
+                    data[key] = (inputValue === undefined) ? this[key] : inputValue;
+                }
+            }
+            return data;
+        }
         __setInput(name, value) {
             this.__input || (this.__input = {});
             this.__input[name] = value;
@@ -1351,21 +1543,15 @@ var LeaferUI = (function (exports) {
             if (this.__input && this.__input[name] !== undefined)
                 this.__input[name] = undefined;
         }
-        __getInputData(options) {
+        __getInputData() {
             const data = { tag: this.__leaf.tag }, { __input } = this;
-            if (options) {
-                for (let key in this) {
-                    if (key[0] !== '_')
-                        data[key] = this[key];
-                }
-            }
-            else {
-                let realKey, value;
-                for (let key in this) {
-                    realKey = key.substring(1);
-                    if (this[realKey] !== undefined) {
-                        value = __input ? __input[realKey] : undefined;
-                        data[realKey] = value === undefined ? this[key] : value;
+            let value, inputValue;
+            for (let key in this) {
+                if (key[0] !== '_') {
+                    value = this['_' + key];
+                    if (value !== undefined) {
+                        inputValue = __input ? __input[key] : undefined;
+                        data[key] = (inputValue === undefined) ? value : inputValue;
                     }
                 }
             }
@@ -1456,11 +1642,10 @@ var LeaferUI = (function (exports) {
         return (target, key) => {
             if (!realName)
                 realName = key;
-            const property = {
+            Object.defineProperty(target, key, {
                 get() { return this.context[realName]; },
                 set(value) { this.context[realName] = value; }
-            };
-            Object.defineProperty(target, key, property);
+            });
         };
     }
     const contextMethodNameList = [];
@@ -1738,7 +1923,7 @@ var LeaferUI = (function (exports) {
 
     const temp = new Bounds();
     const minSize = { width: 1, height: 1, pixelRatio: 1 };
-    const debug$c = Debug.get('LeaferCanvasBase');
+    const debug$d = Debug.get('LeaferCanvasBase');
     const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
     class LeaferCanvasBase extends Canvas {
         get pixelWidth() { return this.width * this.pixelRatio; }
@@ -1771,7 +1956,7 @@ var LeaferUI = (function (exports) {
                     canvas.recycle();
                     resolve(blob);
                 }).catch((e) => {
-                    debug$c.error(e);
+                    debug$d.error(e);
                     resolve(null);
                 });
             });
@@ -1789,7 +1974,7 @@ var LeaferUI = (function (exports) {
                     canvas.recycle();
                     resolve(true);
                 }).catch((e) => {
-                    debug$c.error(e);
+                    debug$d.error(e);
                     resolve(false);
                 });
             });
@@ -1940,7 +2125,7 @@ var LeaferUI = (function (exports) {
             if (blendMode)
                 this.blendMode = blendMode;
             this.fillStyle = color;
-            temp.copy(bounds).scale(this.pixelRatio);
+            temp.set(bounds).scale(this.pixelRatio);
             this.fillRect(temp.x, temp.y, temp.width, temp.height);
             if (blendMode)
                 this.blendMode = 'source-over';
@@ -1949,20 +2134,20 @@ var LeaferUI = (function (exports) {
             if (blendMode)
                 this.blendMode = blendMode;
             this.strokeStyle = color;
-            temp.copy(bounds).scale(this.pixelRatio);
+            temp.set(bounds).scale(this.pixelRatio);
             this.strokeRect(temp.x, temp.y, temp.width, temp.height);
             if (blendMode)
                 this.blendMode = 'source-over';
         }
         clearWorld(bounds, ceilPixel) {
-            temp.copy(bounds).scale(this.pixelRatio);
+            temp.set(bounds).scale(this.pixelRatio);
             if (ceilPixel)
                 temp.ceil();
             this.clearRect(temp.x, temp.y, temp.width, temp.height);
         }
         clipWorld(bounds, ceilPixel) {
             this.beginPath();
-            temp.copy(bounds).scale(this.pixelRatio);
+            temp.set(bounds).scale(this.pixelRatio);
             if (ceilPixel)
                 temp.ceil();
             this.rect(temp.x, temp.y, temp.width, temp.height);
@@ -1975,13 +2160,15 @@ var LeaferUI = (function (exports) {
         isSameSize(size) {
             return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio;
         }
-        getSameCanvas(useSameWorldTransform) {
+        getSameCanvas(useSameWorldTransform, useSameSmooth) {
             const { width, height, pixelRatio } = this;
             const options = { width, height, pixelRatio };
             const canvas = this.manager ? this.manager.get(options) : Creator.canvas(options);
             canvas.save();
             if (useSameWorldTransform)
                 canvas.useWorldTransform(Object.assign({}, this.worldTransform));
+            if (useSameSmooth)
+                canvas.smooth = this.smooth;
             return canvas;
         }
         getBiggerCanvas(addWidth, addHeight) {
@@ -2072,44 +2259,37 @@ var LeaferUI = (function (exports) {
         a: 90,
     };
     const NeedConvertToCurveCommandMap = Object.assign(Object.assign({}, NeedConvertToCanvasCommandMap), CanvasCommandOnlyMap);
-    const P$4 = PathCommandMap;
+    const P$5 = PathCommandMap;
     const PathNumberCommandMap = {};
-    for (let key in P$4) {
-        PathNumberCommandMap[P$4[key]] = key;
+    for (let key in P$5) {
+        PathNumberCommandMap[P$5[key]] = key;
     }
     const PathNumberCommandLengthMap = {};
-    for (let key in P$4) {
-        PathNumberCommandLengthMap[P$4[key]] = PathCommandLengthMap[key];
+    for (let key in P$5) {
+        PathNumberCommandLengthMap[P$5[key]] = PathCommandLengthMap[key];
     }
 
     const RectHelper = {
         drawRoundRect(drawer, x, y, width, height, cornerRadius) {
-            let [topLeft, topRight, bottomRight, bottomLeft] = MathHelper.fourNumber(cornerRadius);
-            const max = Math.min(width / 2, height / 2);
-            if (topLeft > max)
-                topLeft = max;
-            if (topRight > max)
-                topRight = max;
-            if (bottomRight > max)
-                bottomRight = max;
-            if (bottomLeft > max)
-                bottomLeft = max;
-            topLeft ? drawer.moveTo(x + topLeft, y) : drawer.moveTo(x, y);
-            topRight ? drawer.arcTo(x + width, y, x + width, y + height, topRight) : drawer.lineTo(x + width, y);
-            bottomRight ? drawer.arcTo(x + width, y + height, x, y + height, bottomRight) : drawer.lineTo(x + width, y + height);
-            bottomLeft ? drawer.arcTo(x, y + height, x, y, bottomLeft) : drawer.lineTo(x, y + height);
-            topLeft ? drawer.arcTo(x, y, x + width, y, topLeft) : drawer.lineTo(x, y);
+            const data = MathHelper.fourNumber(cornerRadius, Math.min(width / 2, height / 2));
+            const right = x + width;
+            const bottom = y + height;
+            data[0] ? drawer.moveTo(x + data[0], y) : drawer.moveTo(x, y);
+            data[1] ? drawer.arcTo(right, y, right, bottom, data[1]) : drawer.lineTo(right, y);
+            data[2] ? drawer.arcTo(right, bottom, x, bottom, data[2]) : drawer.lineTo(right, bottom);
+            data[3] ? drawer.arcTo(x, bottom, x, y, data[3]) : drawer.lineTo(x, bottom);
+            data[0] ? drawer.arcTo(x, y, right, y, data[0]) : drawer.lineTo(x, y);
         }
     };
 
-    const { sin: sin$4, cos: cos$4, atan2: atan2$1, ceil, abs, PI: PI$2, sqrt: sqrt$1, pow } = Math;
+    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil, abs: abs$2, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$1, addPoint: addPoint$1 } = TwoPointBoundsHelper;
     const { set: set$2 } = PointHelper;
-    const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
-    const tempPoint = {};
+    const { M: M$6, L: L$7, C: C$6, Q: Q$5, Z: Z$6 } = PathCommandMap;
+    const tempPoint$1 = {};
     const BezierHelper = {
         points(data, points, curve, close) {
-            data.push(M$5, points[0], points[1]);
+            data.push(M$6, points[0], points[1]);
             if (curve && points.length > 5) {
                 let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
                 let ba, cb, d, len = points.length;
@@ -2136,24 +2316,24 @@ var LeaferUI = (function (exports) {
                     c1Y = bY - ba * cY;
                     if (i === 2) {
                         if (!close)
-                            data.push(Q$4, c1X, c1Y, bX, bY);
+                            data.push(Q$5, c1X, c1Y, bX, bY);
                     }
                     else {
-                        data.push(C$5, c2X, c2Y, c1X, c1Y, bX, bY);
+                        data.push(C$6, c2X, c2Y, c1X, c1Y, bX, bY);
                     }
                     c2X = bX + cb * cX;
                     c2Y = bY + cb * cY;
                 }
                 if (!close)
-                    data.push(Q$4, c2X, c2Y, points[len - 2], points[len - 1]);
+                    data.push(Q$5, c2X, c2Y, points[len - 2], points[len - 1]);
             }
             else {
                 for (let i = 2, len = points.length; i < len; i += 2) {
-                    data.push(L$6, points[i], points[i + 1]);
+                    data.push(L$7, points[i], points[i + 1]);
                 }
             }
             if (close)
-                data.push(Z$5);
+                data.push(Z$6);
         },
         rect(data, x, y, width, height) {
             PathHelper.creator.path = data;
@@ -2174,9 +2354,9 @@ var LeaferUI = (function (exports) {
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0)
                 totalRadian += PI2;
-            if (totalRadian === PI$2 || (abs(BAx + BAy) < 1.e-12) || (abs(CBx + CBy) < 1.e-12)) {
+            if (totalRadian === PI$2 || (abs$2(BAx + BAy) < 1.e-12) || (abs$2(CBx + CBy) < 1.e-12)) {
                 if (data)
-                    data.push(L$6, x1, y1);
+                    data.push(L$7, x1, y1);
                 if (setPointBounds) {
                     setPoint$1(setPointBounds, fromX, fromY);
                     addPoint$1(setPointBounds, x1, y1);
@@ -2189,9 +2369,9 @@ var LeaferUI = (function (exports) {
             }
             const anticlockwise = BAx * CBy - CBx * BAy < 0;
             const sign = anticlockwise ? -1 : 1;
-            const c = radius / cos$4(totalRadian / 2);
-            const centerX = x1 + c * cos$4(startRadian + totalRadian / 2 + PI_2 * sign);
-            const centerY = y1 + c * sin$4(startRadian + totalRadian / 2 + PI_2 * sign);
+            const c = radius / cos$3(totalRadian / 2);
+            const centerX = x1 + c * cos$3(startRadian + totalRadian / 2 + PI_2 * sign);
+            const centerY = y1 + c * sin$3(startRadian + totalRadian / 2 + PI_2 * sign);
             startRadian -= PI_2 * sign;
             endRadian -= PI_2 * sign;
             return ellipse$6(data, centerX, centerY, radius, radius, 0, startRadian / OneRadian, endRadian / OneRadian, anticlockwise, setPointBounds, setEndPoint, setStartPoint);
@@ -2201,8 +2381,8 @@ var LeaferUI = (function (exports) {
         },
         ellipse(data, cx, cy, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise, setPointBounds, setEndPoint, setStartPoint) {
             const rotationRadian = rotation * OneRadian;
-            const rotationSin = sin$4(rotationRadian);
-            const rotationCos = cos$4(rotationRadian);
+            const rotationSin = sin$3(rotationRadian);
+            const rotationCos = cos$3(rotationRadian);
             let startRadian = startAngle * OneRadian;
             let endRadian = endAngle * OneRadian;
             if (startRadian > PI$2)
@@ -2216,27 +2396,27 @@ var LeaferUI = (function (exports) {
                 totalRadian -= PI2;
             if (anticlockwise)
                 totalRadian -= PI2;
-            const parts = ceil(abs(totalRadian / PI_2));
+            const parts = ceil(abs$2(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
-            const partRadian4Sin = sin$4(partRadian / 4);
-            const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$4(partRadian / 2);
+            const partRadian4Sin = sin$3(partRadian / 4);
+            const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
             endRadian = startRadian + partRadian;
-            let startCos = cos$4(startRadian);
-            let startSin = sin$4(startRadian);
+            let startCos = cos$3(startRadian);
+            let startSin = sin$3(startRadian);
             let endCos, endSin;
             let x, y, x1, y1, x2, y2;
             let startX = x = rotationCos * radiusX * startCos - rotationSin * radiusY * startSin;
             let startY = y = rotationSin * radiusX * startCos + rotationCos * radiusY * startSin;
             let fromX = cx + x, fromY = cy + y;
             if (data)
-                data.push(L$6, fromX, fromY);
+                data.push(L$7, fromX, fromY);
             if (setPointBounds)
                 setPoint$1(setPointBounds, fromX, fromY);
             if (setStartPoint)
                 set$2(setStartPoint, fromX, fromY);
             for (let i = 0; i < parts; i++) {
-                endCos = cos$4(endRadian);
-                endSin = sin$4(endRadian);
+                endCos = cos$3(endRadian);
+                endSin = sin$3(endRadian);
                 x = rotationCos * radiusX * endCos - rotationSin * radiusY * endSin;
                 y = rotationSin * radiusX * endCos + rotationCos * radiusY * endSin;
                 x1 = cx + startX - control * (rotationCos * radiusX * startSin + rotationSin * radiusY * startCos);
@@ -2244,7 +2424,7 @@ var LeaferUI = (function (exports) {
                 x2 = cx + x + control * (rotationCos * radiusX * endSin + rotationSin * radiusY * endCos);
                 y2 = cy + y + control * (rotationSin * radiusX * endSin - rotationCos * radiusY * endCos);
                 if (data)
-                    data.push(C$5, x1, y1, x2, y2, cx + x, cy + y);
+                    data.push(C$6, x1, y1, x2, y2, cx + x, cy + y);
                 if (setPointBounds)
                     toTwoPointBounds$1(cx + startX, cy + startY, x1, y1, x2, y2, cx + x, cy + y, setPointBounds, true);
                 startX = x;
@@ -2258,7 +2438,7 @@ var LeaferUI = (function (exports) {
                 set$2(setEndPoint, cx + x, cy + y);
         },
         quadraticCurveTo(data, fromX, fromY, x1, y1, toX, toY) {
-            data.push(C$5, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY);
+            data.push(C$6, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY);
         },
         toTwoPointBoundsByQuadraticCurve(fromX, fromY, x1, y1, toX, toY, pointBounds, addMode) {
             toTwoPointBounds$1(fromX, fromY, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY, pointBounds, addMode);
@@ -2296,8 +2476,8 @@ var LeaferUI = (function (exports) {
             addMode ? addPoint$1(pointBounds, fromX, fromY) : setPoint$1(pointBounds, fromX, fromY);
             addPoint$1(pointBounds, toX, toY);
             for (let i = 0, len = tList.length; i < len; i++) {
-                getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint);
-                addPoint$1(pointBounds, tempPoint.x, tempPoint.y);
+                getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$1);
+                addPoint$1(pointBounds, tempPoint$1.x, tempPoint$1.y);
             }
         },
         getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, setPoint) {
@@ -2313,15 +2493,15 @@ var LeaferUI = (function (exports) {
     };
     const { getPointAndSet, toTwoPointBounds: toTwoPointBounds$1, ellipse: ellipse$6 } = BezierHelper;
 
-    const { sin: sin$3, cos: cos$3, sqrt, atan2 } = Math;
+    const { sin: sin$2, cos: cos$2, sqrt, atan2 } = Math;
     const { ellipse: ellipse$5 } = BezierHelper;
     const EllipseHelper = {
         ellipticalArc(data, fromX, fromY, radiusX, radiusY, rotation, largeFlag, sweepFlag, toX, toY, curveMode) {
             const halfX = (toX - fromX) / 2;
             const halfY = (toY - fromY) / 2;
             const rotationRadian = rotation * OneRadian;
-            const rotationSin = sin$3(rotationRadian);
-            const rotationCos = cos$3(rotationRadian);
+            const rotationSin = sin$2(rotationRadian);
+            const rotationCos = cos$2(rotationRadian);
             const px = -rotationCos * halfX - rotationSin * halfY;
             const py = -rotationCos * halfY + rotationSin * halfX;
             const rxSquare = radiusX * radiusX;
@@ -2366,10 +2546,10 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$3, O: O$3, P: P$3, U: U$4 } = PathCommandMap;
-    const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$2, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
+    const { M: M$5, m, L: L$6, l, H, h, V, v, C: C$5, c, S, s, Q: Q$4, q, T, t, A, a, Z: Z$5, z, N: N$4, D: D$4, X: X$4, G: G$4, F: F$4, O: O$4, P: P$4, U: U$4 } = PathCommandMap;
+    const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
     const { ellipticalArc } = EllipseHelper;
-    const debug$b = Debug.get('PathConvert');
+    const debug$c = Debug.get('PathConvert');
     const setEndPoint$1 = {};
     const PathConvert = {
         current: { dot: 0 },
@@ -2454,33 +2634,33 @@ var LeaferUI = (function (exports) {
                     case m:
                         old[i + 1] += x;
                         old[i + 2] += y;
-                    case M$4:
+                    case M$5:
                         x = old[i + 1];
                         y = old[i + 2];
-                        data.push(M$4, x, y);
+                        data.push(M$5, x, y);
                         i += 3;
                         break;
                     case h:
                         old[i + 1] += x;
                     case H:
                         x = old[i + 1];
-                        data.push(L$5, x, y);
+                        data.push(L$6, x, y);
                         i += 2;
                         break;
                     case v:
                         old[i + 1] += y;
                     case V:
                         y = old[i + 1];
-                        data.push(L$5, x, y);
+                        data.push(L$6, x, y);
                         i += 2;
                         break;
                     case l:
                         old[i + 1] += x;
                         old[i + 2] += y;
-                    case L$5:
+                    case L$6:
                         x = old[i + 1];
                         y = old[i + 2];
-                        data.push(L$5, x, y);
+                        data.push(L$6, x, y);
                         i += 3;
                         break;
                     case s:
@@ -2490,14 +2670,14 @@ var LeaferUI = (function (exports) {
                         old[i + 4] += y;
                         command = S;
                     case S:
-                        smooth = (lastCommand === C$4) || (lastCommand === S);
+                        smooth = (lastCommand === C$5) || (lastCommand === S);
                         x1 = smooth ? (x * 2 - controlX) : old[i + 1];
                         y1 = smooth ? (y * 2 - controlY) : old[i + 2];
                         controlX = old[i + 1];
                         controlY = old[i + 2];
                         x = old[i + 3];
                         y = old[i + 4];
-                        data.push(C$4, x1, y1, controlX, controlY, x, y);
+                        data.push(C$5, x1, y1, controlX, controlY, x, y);
                         i += 5;
                         break;
                     case c:
@@ -2507,13 +2687,13 @@ var LeaferUI = (function (exports) {
                         old[i + 4] += y;
                         old[i + 5] += x;
                         old[i + 6] += y;
-                        command = C$4;
-                    case C$4:
+                        command = C$5;
+                    case C$5:
                         controlX = old[i + 3];
                         controlY = old[i + 4];
                         x = old[i + 5];
                         y = old[i + 6];
-                        data.push(C$4, old[i + 1], old[i + 2], controlX, controlY, x, y);
+                        data.push(C$5, old[i + 1], old[i + 2], controlX, controlY, x, y);
                         i += 7;
                         break;
                     case t:
@@ -2521,10 +2701,10 @@ var LeaferUI = (function (exports) {
                         old[i + 2] += y;
                         command = T;
                     case T:
-                        smooth = (lastCommand === Q$3) || (lastCommand === T);
+                        smooth = (lastCommand === Q$4) || (lastCommand === T);
                         controlX = smooth ? (x * 2 - controlX) : old[i + 1];
                         controlY = smooth ? (y * 2 - controlY) : old[i + 2];
-                        curveMode ? quadraticCurveTo$1(data, x, y, controlX, controlY, old[i + 1], old[i + 2]) : data.push(Q$3, controlX, controlY, old[i + 1], old[i + 2]);
+                        curveMode ? quadraticCurveTo$1(data, x, y, controlX, controlY, old[i + 1], old[i + 2]) : data.push(Q$4, controlX, controlY, old[i + 1], old[i + 2]);
                         x = old[i + 1];
                         y = old[i + 2];
                         i += 3;
@@ -2534,11 +2714,11 @@ var LeaferUI = (function (exports) {
                         old[i + 2] += y;
                         old[i + 3] += x;
                         old[i + 4] += y;
-                        command = Q$3;
-                    case Q$3:
+                        command = Q$4;
+                    case Q$4:
                         controlX = old[i + 1];
                         controlY = old[i + 2];
-                        curveMode ? quadraticCurveTo$1(data, x, y, controlX, controlY, old[i + 3], old[i + 4]) : data.push(Q$3, controlX, controlY, old[i + 3], old[i + 4]);
+                        curveMode ? quadraticCurveTo$1(data, x, y, controlX, controlY, old[i + 3], old[i + 4]) : data.push(Q$4, controlX, controlY, old[i + 3], old[i + 4]);
                         x = old[i + 3];
                         y = old[i + 4];
                         i += 5;
@@ -2553,60 +2733,60 @@ var LeaferUI = (function (exports) {
                         i += 8;
                         break;
                     case z:
-                    case Z$4:
-                        data.push(Z$4);
+                    case Z$5:
+                        data.push(Z$5);
                         i++;
                         break;
-                    case N$3:
+                    case N$4:
                         x = old[i + 1];
                         y = old[i + 2];
                         curveMode ? rect$2(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
                         i += 5;
                         break;
-                    case D$3:
+                    case D$4:
                         x = old[i + 1];
                         y = old[i + 2];
                         curveMode ? roundRect$2(data, x, y, old[i + 3], old[i + 4], [old[i + 5], old[i + 6], old[i + 7], old[i + 8]]) : copyData(data, old, i, 9);
                         i += 9;
                         break;
-                    case X$3:
+                    case X$4:
                         x = old[i + 1];
                         y = old[i + 2];
                         curveMode ? roundRect$2(data, x, y, old[i + 3], old[i + 4], old[i + 5]) : copyData(data, old, i, 6);
                         i += 6;
                         break;
-                    case G$3:
+                    case G$4:
                         ellipse$4(curveMode ? data : copyData(data, old, i, 9), old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], old[i + 7], old[i + 8], null, setEndPoint$1);
                         x = setEndPoint$1.x;
                         y = setEndPoint$1.y;
                         i += 9;
                         break;
-                    case F$3:
+                    case F$4:
                         curveMode ? ellipse$4(data, old[i + 1], old[i + 2], old[i + 3], old[i + 4], 0, 0, 360, false) : copyData(data, old, i, 5);
                         x = old[i + 1] + old[i + 3];
                         y = old[i + 2];
                         i += 5;
                         break;
-                    case O$3:
+                    case O$4:
                         arc$3(curveMode ? data : copyData(data, old, i, 7), old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], null, setEndPoint$1);
                         x = setEndPoint$1.x;
                         y = setEndPoint$1.y;
                         i += 7;
                         break;
-                    case P$3:
+                    case P$4:
                         curveMode ? arc$3(data, old[i + 1], old[i + 2], old[i + 3], 0, 360, false) : copyData(data, old, i, 4);
                         x = old[i + 1] + old[i + 3];
                         y = old[i + 2];
                         i += 4;
                         break;
                     case U$4:
-                        arcTo$2(curveMode ? data : copyData(data, old, i, 6), x, y, old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], null, setEndPoint$1);
+                        arcTo$3(curveMode ? data : copyData(data, old, i, 6), x, y, old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], null, setEndPoint$1);
                         x = setEndPoint$1.x;
                         y = setEndPoint$1.y;
                         i += 6;
                         break;
                     default:
-                        debug$b.error(`command: ${command} [index:${i}]`, old);
+                        debug$c.error(`command: ${command} [index:${i}]`, old);
                         return data;
                 }
                 lastCommand = command;
@@ -2630,68 +2810,76 @@ var LeaferUI = (function (exports) {
     };
     const { current, pushData, copyData } = PathConvert;
 
-    const { M: M$3, L: L$4, C: C$3, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$2, O: O$2, P: P$2, U: U$3 } = PathCommandMap;
+    const { M: M$4, L: L$5, C: C$4, Q: Q$3, Z: Z$4, N: N$3, D: D$3, X: X$3, G: G$3, F: F$3, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
+    const { getMinDistanceFrom, getRadianFrom } = PointHelper;
+    const { tan, min, abs: abs$1 } = Math;
     const startPoint = {};
     const PathCommandDataHelper = {
         beginPath(data) {
             data.length = 0;
         },
         moveTo(data, x, y) {
-            data.push(M$3, x, y);
+            data.push(M$4, x, y);
         },
         lineTo(data, x, y) {
-            data.push(L$4, x, y);
+            data.push(L$5, x, y);
         },
         bezierCurveTo(data, x1, y1, x2, y2, x, y) {
-            data.push(C$3, x1, y1, x2, y2, x, y);
+            data.push(C$4, x1, y1, x2, y2, x, y);
         },
         quadraticCurveTo(data, x1, y1, x, y) {
-            data.push(Q$2, x1, y1, x, y);
+            data.push(Q$3, x1, y1, x, y);
         },
         closePath(data) {
-            data.push(Z$3);
+            data.push(Z$4);
         },
         rect(data, x, y, width, height) {
-            data.push(N$2, x, y, width, height);
+            data.push(N$3, x, y, width, height);
         },
         roundRect(data, x, y, width, height, cornerRadius) {
             if (typeof cornerRadius === 'number') {
-                data.push(X$2, x, y, width, height, cornerRadius);
+                data.push(X$3, x, y, width, height, cornerRadius);
             }
             else {
                 const fourCorners = MathHelper.fourNumber(cornerRadius);
                 if (fourCorners) {
-                    data.push(D$2, x, y, width, height, ...fourCorners);
+                    data.push(D$3, x, y, width, height, ...fourCorners);
                 }
                 else {
-                    data.push(N$2, x, y, width, height);
+                    data.push(N$3, x, y, width, height);
                 }
             }
         },
         ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
             if (rotation === undefined) {
-                data.push(F$2, x, y, radiusX, radiusY);
+                data.push(F$3, x, y, radiusX, radiusY);
             }
             else {
                 if (startAngle === undefined)
                     startAngle = 0;
                 if (endAngle === undefined)
                     endAngle = 360;
-                data.push(G$2, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ? 1 : 0);
+                data.push(G$3, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ? 1 : 0);
             }
         },
         arc(data, x, y, radius, startAngle, endAngle, anticlockwise) {
             if (startAngle === undefined) {
-                data.push(P$2, x, y, radius);
+                data.push(P$3, x, y, radius);
             }
             else {
                 if (endAngle === undefined)
                     endAngle = 360;
-                data.push(O$2, x, y, radius, startAngle, endAngle, anticlockwise ? 1 : 0);
+                data.push(O$3, x, y, radius, startAngle, endAngle, anticlockwise ? 1 : 0);
             }
         },
-        arcTo(data, x1, y1, x2, y2, radius) {
-            data.push(U$3, x1, y1, x2, y2, radius);
+        arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
+            if (lastX !== undefined) {
+                const maxRadius = tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2) * (getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / 2);
+                data.push(U$3, x1, y1, x2, y2, min(radius, abs$1(maxRadius)));
+            }
+            else {
+                data.push(U$3, x1, y1, x2, y2, radius);
+            }
         },
         drawEllipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
             if (rotation === undefined)
@@ -2701,7 +2889,7 @@ var LeaferUI = (function (exports) {
             if (endAngle === undefined)
                 endAngle = 360;
             BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise, null, null, startPoint);
-            data.push(M$3, startPoint.x, startPoint.y);
+            data.push(M$4, startPoint.x, startPoint.y);
             ellipse$3(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
         },
         drawArc(data, x, y, radius, startAngle, endAngle, anticlockwise) {
@@ -2710,7 +2898,7 @@ var LeaferUI = (function (exports) {
             if (endAngle === undefined)
                 endAngle = 360;
             BezierHelper.arc(null, x, y, radius, startAngle, endAngle, anticlockwise, null, null, startPoint);
-            data.push(M$3, startPoint.x, startPoint.y);
+            data.push(M$4, startPoint.x, startPoint.y);
             arc$2(data, x, y, radius, startAngle, endAngle, anticlockwise);
         },
         drawPoints(data, points, curve, close) {
@@ -2719,7 +2907,7 @@ var LeaferUI = (function (exports) {
     };
     const { ellipse: ellipse$3, arc: arc$2 } = PathCommandDataHelper;
 
-    const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$1, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
+    const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
     class PathCreator {
         constructor(path) {
             if (path) {
@@ -2770,7 +2958,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
         arcTo(x1, y1, x2, y2, radius) {
-            arcTo$1(this.path, x1, y1, x2, y2, radius);
+            arcTo$2(this.path, x1, y1, x2, y2, radius);
             return this;
         }
         drawEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
@@ -2787,8 +2975,8 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$1, O: O$1, P: P$1, U: U$2 } = PathCommandMap;
-    const debug$a = Debug.get('PathDrawer');
+    const { M: M$3, L: L$4, C: C$3, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$2, O: O$2, P: P$2, U: U$2 } = PathCommandMap;
+    const debug$b = Debug.get('PathDrawer');
     const PathDrawer = {
         drawPathByData(drawer, data) {
             if (!data)
@@ -2798,51 +2986,51 @@ var LeaferUI = (function (exports) {
             while (i < len) {
                 command = data[i];
                 switch (command) {
-                    case M$2:
+                    case M$3:
                         drawer.moveTo(data[i + 1], data[i + 2]);
                         i += 3;
                         break;
-                    case L$3:
+                    case L$4:
                         drawer.lineTo(data[i + 1], data[i + 2]);
                         i += 3;
                         break;
-                    case C$2:
+                    case C$3:
                         drawer.bezierCurveTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6]);
                         i += 7;
                         break;
-                    case Q$1:
+                    case Q$2:
                         drawer.quadraticCurveTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4]);
                         i += 5;
                         break;
-                    case Z$2:
+                    case Z$3:
                         drawer.closePath();
                         i += 1;
                         break;
-                    case N$1:
+                    case N$2:
                         drawer.rect(data[i + 1], data[i + 2], data[i + 3], data[i + 4]);
                         i += 5;
                         break;
-                    case D$1:
+                    case D$2:
                         drawer.roundRect(data[i + 1], data[i + 2], data[i + 3], data[i + 4], [data[i + 5], data[i + 6], data[i + 7], data[i + 8]]);
                         i += 9;
                         break;
-                    case X$1:
+                    case X$2:
                         drawer.roundRect(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5]);
                         i += 6;
                         break;
-                    case G$1:
+                    case G$2:
                         drawer.ellipse(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5] * OneRadian, data[i + 6] * OneRadian, data[i + 7] * OneRadian, data[i + 8]);
                         i += 9;
                         break;
-                    case F$1:
+                    case F$2:
                         drawer.ellipse(data[i + 1], data[i + 2], data[i + 3], data[i + 4], 0, 0, PI2, false);
                         i += 5;
                         break;
-                    case O$1:
+                    case O$2:
                         drawer.arc(data[i + 1], data[i + 2], data[i + 3], data[i + 4] * OneRadian, data[i + 5] * OneRadian, data[i + 6]);
                         i += 7;
                         break;
-                    case P$1:
+                    case P$2:
                         drawer.arc(data[i + 1], data[i + 2], data[i + 3], 0, PI2, false);
                         i += 4;
                         break;
@@ -2851,17 +3039,97 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$a.error(`command: ${command} [index:${i}]`, data);
+                        debug$b.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
         }
     };
 
-    const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F, O, P, U: U$1 } = PathCommandMap;
-    const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo, arc, ellipse: ellipse$1 } = BezierHelper;
-    const { add: add$1, copy: copy$6, addPoint, setPoint, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-    const debug$9 = Debug.get('PathBounds');
+    const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$1, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
+    const PathScaler = {
+        scale(data, scaleX, scaleY) {
+            if (!data)
+                return;
+            let command;
+            let i = 0, len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M$2:
+                        scalePoints(data, scaleX, scaleY, i, 1);
+                        i += 3;
+                        break;
+                    case L$3:
+                        scalePoints(data, scaleX, scaleY, i, 1);
+                        i += 3;
+                        break;
+                    case C$2:
+                        scalePoints(data, scaleX, scaleY, i, 3);
+                        i += 7;
+                        break;
+                    case Q$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 5;
+                        break;
+                    case Z$2:
+                        i += 1;
+                        break;
+                    case N$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 5;
+                        break;
+                    case D$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 9;
+                        break;
+                    case X$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 6;
+                        break;
+                    case G$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        console.log('G');
+                        i += 9;
+                        break;
+                    case F$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 5;
+                        break;
+                    case O$1:
+                        data[i] = G$1;
+                        data.splice(i + 4, 0, data[i + 3], 0);
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 7 + 2;
+                        len += 2;
+                        break;
+                    case P$1:
+                        data[i] = F$1;
+                        data.splice(i + 4, 0, data[i + 3]);
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 4 + 1;
+                        len += 1;
+                        break;
+                    case U$1:
+                        scalePoints(data, scaleX, scaleY, i, 2);
+                        i += 6;
+                        break;
+                }
+            }
+        },
+        scalePoints(data, scaleX, scaleY, start, pointCount) {
+            for (let i = pointCount ? start + 1 : 0, end = pointCount ? i + pointCount * 2 : data.length; i < end; i += 2) {
+                data[i] *= scaleX;
+                data[i + 1] *= scaleY;
+            }
+        }
+    };
+    const { scalePoints } = PathScaler;
+
+    const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F, O, P, U } = PathCommandMap;
+    const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
+    const { addPointBounds, copy: copy$6, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
+    const debug$a = Debug.get('PathBounds');
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
     const setPointBounds = {};
@@ -2869,7 +3137,7 @@ var LeaferUI = (function (exports) {
     const PathBounds = {
         toBounds(data, setBounds) {
             PathBounds.toTwoPointBounds(data, setPointBounds);
-            toBounds$3(setPointBounds, setBounds);
+            toBounds$2(setPointBounds, setBounds);
         },
         toTwoPointBounds(data, setPointBounds) {
             if (!data || !data.length)
@@ -2899,7 +3167,7 @@ var LeaferUI = (function (exports) {
                         toX = data[i + 5];
                         toY = data[i + 6];
                         toTwoPointBounds(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY, tempPointBounds);
-                        add$1(setPointBounds, tempPointBounds);
+                        addPointBounds(setPointBounds, tempPointBounds);
                         x = toX;
                         y = toY;
                         i += 7;
@@ -2910,7 +3178,7 @@ var LeaferUI = (function (exports) {
                         toX = data[i + 3];
                         toY = data[i + 4];
                         toTwoPointBoundsByQuadraticCurve(x, y, x1, y1, toX, toY, tempPointBounds);
-                        add$1(setPointBounds, tempPointBounds);
+                        addPointBounds(setPointBounds, tempPointBounds);
                         x = toX;
                         y = toY;
                         i += 5;
@@ -2933,7 +3201,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case G:
                         ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : add$1(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 9;
@@ -2949,7 +3217,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case O:
                         arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : add$1(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 7;
@@ -2962,39 +3230,41 @@ var LeaferUI = (function (exports) {
                         x += radius;
                         i += 4;
                         break;
-                    case U$1:
-                        arcTo(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : add$1(setPointBounds, tempPointBounds);
+                    case U:
+                        arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
+                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 6;
                         break;
                     default:
-                        debug$9.error(`command: ${command} [index:${i}]`, data);
+                        debug$a.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
         }
     };
 
-    const { M, L: L$1, C, Z, U } = PathCommandMap;
+    const { M, L: L$1, C, Z } = PathCommandMap;
+    const { getCenterX, getCenterY } = PointHelper;
+    const { arcTo } = PathCommandDataHelper;
     const PathCorner = {
         smooth(data, cornerRadius, _cornerSmoothing) {
             let command;
-            let i = 0, x = 0, y = 0, startX, startY = 0, centerX = 0, centerY = 0;
+            let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
             const len = data.length;
             const smooth = [];
             while (i < len) {
                 command = data[i];
                 switch (command) {
                     case M:
-                        startX = data[i + 1];
-                        startY = data[i + 2];
+                        startX = lastX = data[i + 1];
+                        startY = lastY = data[i + 2];
                         i += 3;
                         if (data[i] === L$1) {
-                            centerX = startX + (data[i + 1] - startX) / 2;
-                            centerY = startY + (data[i + 2] - startY) / 2;
-                            smooth.push(M, centerX, centerY);
+                            secondX = data[i + 1];
+                            secondY = data[i + 2];
+                            smooth.push(M, getCenterX(startX, secondX), getCenterY(startY, secondY));
                         }
                         else {
                             smooth.push(M, startX, startY);
@@ -3006,21 +3276,23 @@ var LeaferUI = (function (exports) {
                         i += 3;
                         switch (data[i]) {
                             case L$1:
-                                smooth.push(U, x, y, data[i + 1], data[i + 2], cornerRadius);
+                                arcTo(smooth, x, y, data[i + 1], data[i + 2], cornerRadius, lastX, lastY);
                                 break;
                             case Z:
-                                smooth.push(U, x, y, startX, startY, cornerRadius);
+                                arcTo(smooth, x, y, startX, startY, cornerRadius, lastX, lastY);
                                 break;
                             default:
                                 smooth.push(L$1, x, y);
                         }
+                        lastX = x;
+                        lastY = y;
                         break;
                     case C:
                         smooth.push(C, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6]);
                         i += 7;
                         break;
                     case Z:
-                        smooth.push(U, startX, startY, centerX, centerY, cornerRadius);
+                        arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
                         smooth.push(Z);
                         i += 1;
                         break;
@@ -3051,7 +3323,7 @@ var LeaferUI = (function (exports) {
         roundRect(drawer);
     }
 
-    const debug$8 = Debug.get('TaskProcessor');
+    const debug$9 = Debug.get('TaskProcessor');
     class TaskItem {
         constructor(task) {
             this.parallel = true;
@@ -3066,7 +3338,7 @@ var LeaferUI = (function (exports) {
                         yield this.task();
                 }
                 catch (error) {
-                    debug$8.error(error);
+                    debug$9.error(error);
                 }
             });
         }
@@ -3304,7 +3576,7 @@ var LeaferUI = (function (exports) {
         recycledList: [],
         tasker: new TaskProcessor(),
         patternTasker: new TaskProcessor(),
-        get isComplete() { return I$1.tasker.isComplete && I$1.patternTasker.isComplete; },
+        get isComplete() { return I$1.tasker.isComplete; },
         get(config) {
             let image = I$1.map[config.url];
             if (!image) {
@@ -3635,16 +3907,6 @@ var LeaferUI = (function (exports) {
         return Object.getOwnPropertyNames(object);
     }
 
-    function aliasType(name) {
-        return (target, key) => {
-            defineKey(target, key, {
-                get() { return this.__getAttr(name); },
-                set(value) {
-                    this.__setAttr(name, value);
-                }
-            });
-        };
-    }
     function defineLeafAttr(target, key, defaultValue, mergeDescriptor) {
         const defaultDescriptor = {
             get() { return this.__getAttr(key); },
@@ -3670,6 +3932,17 @@ var LeaferUI = (function (exports) {
             });
         };
     }
+    function autoLayoutType(defaultValue) {
+        return (target, key) => {
+            defineLeafAttr(target, key, defaultValue, {
+                set(value) {
+                    this.__setAttr(key, value);
+                    this.__layout.matrixChanged || this.__layout.matrixChange();
+                    this.__hasAutoLayout = !!value;
+                }
+            });
+        };
+    }
     function scaleType(defaultValue) {
         return (target, key) => {
             defineLeafAttr(target, key, defaultValue, {
@@ -3696,7 +3969,7 @@ var LeaferUI = (function (exports) {
                 set(value) {
                     this.__setAttr(key, value);
                     this.__layout.boxChanged || this.__layout.boxChange();
-                    if (this.__.around)
+                    if (this.__hasAutoLayout)
                         this.__layout.matrixChanged || this.__layout.matrixChange();
                 }
             });
@@ -3818,9 +4091,6 @@ var LeaferUI = (function (exports) {
     function getSetMethodName(key) {
         return 'set' + key.charAt(0).toUpperCase() + key.slice(1);
     }
-    function setDefaultValue(target, key, defaultValue) {
-        defineDataProcessor(target.prototype, key, defaultValue);
-    }
     function defineDataProcessor(target, key, defaultValue) {
         const data = target.__DataProcessor.prototype;
         const computedKey = '_' + key;
@@ -3851,7 +4121,11 @@ var LeaferUI = (function (exports) {
                 return v === undefined ? (this.__naturalHeight || defaultValue) : v;
             };
         }
-        const descriptor = getDescriptor(data, key);
+        let descriptor, find = data;
+        while (!descriptor && find) {
+            descriptor = getDescriptor(find, key);
+            find = find.__proto__;
+        }
         if (descriptor && descriptor.set)
             property.set = descriptor.set;
         if (data[setMethodName]) {
@@ -3861,7 +4135,7 @@ var LeaferUI = (function (exports) {
         Object.defineProperty(data, key, property);
     }
 
-    const debug$7 = new Debug('rewrite');
+    const debug$8 = new Debug('rewrite');
     const list$1 = [];
     const excludeNames = ['destroy', 'constructor'];
     function rewrite(method) {
@@ -3878,7 +4152,7 @@ var LeaferUI = (function (exports) {
         if (list$1.length) {
             list$1.forEach(item => {
                 if (error)
-                    debug$7.error(item.name, '需在Class上装饰@rewriteAble()');
+                    debug$8.error(item.name, '需在Class上装饰@rewriteAble()');
                 item.run();
             });
             list$1.length = 0;
@@ -4121,17 +4395,43 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter } = MatrixHelper;
-    const matrix = {};
+    const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$1, divideParent, getLayout } = MatrixHelper;
+    const matrix$1 = {};
     const LeafHelper = {
-        updateAllWorldMatrix(leaf) {
-            leaf.__updateWorldMatrix();
+        updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
+            if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
+                waitAutoLayout = true;
+            updateMatrix$2(leaf, checkAutoLayout, waitAutoLayout);
             if (leaf.isBranch) {
                 const { children } = leaf;
                 for (let i = 0, len = children.length; i < len; i++) {
-                    updateAllWorldMatrix$2(children[i]);
+                    updateAllMatrix$3(children[i], checkAutoLayout, waitAutoLayout);
+                }
+            }
+        },
+        updateMatrix(leaf, checkAutoLayout, waitAutoLayout) {
+            const layout = leaf.__layout;
+            if (checkAutoLayout) {
+                if (waitAutoLayout) {
+                    layout.waitAutoLayout = true;
+                    if (leaf.__hasAutoLayout)
+                        layout.matrixChanged = false;
                 }
             }
+            else if (layout.waitAutoLayout) {
+                layout.waitAutoLayout = false;
+            }
+            if (layout.matrixChanged)
+                leaf.__updateLocalMatrix();
+            if (!layout.waitAutoLayout)
+                leaf.__updateWorldMatrix();
+        },
+        updateBounds(leaf) {
+            const layout = leaf.__layout;
+            if (layout.boundsChanged)
+                leaf.__updateLocalBounds();
+            if (!layout.waitAutoLayout)
+                leaf.__updateWorldBounds();
         },
         updateAllWorldOpacity(leaf) {
             leaf.__updateWorldOpacity();
@@ -4173,62 +4473,78 @@ var LeaferUI = (function (exports) {
             t.x += x;
             t.y += y;
         },
-        zoomOfWorld(t, origin, scaleX, scaleY) {
-            this.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY);
+        zoomOfWorld(t, origin, scaleX, scaleY, resize) {
+            this.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
         },
-        zoomOfLocal(t, origin, scaleX, scaleY = scaleX) {
-            copy$5(matrix, t.__local);
-            scaleOfOuter$3(matrix, origin, scaleX, scaleY);
-            moveByMatrix(t, matrix);
-            t.scaleX *= scaleX;
-            t.scaleY *= scaleY;
+        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
+            copy$5(matrix$1, t.__localMatrix);
+            scaleOfOuter$3(matrix$1, origin, scaleX, scaleY);
+            moveByMatrix(t, matrix$1);
+            t.scaleResize(scaleX, scaleY, resize !== true);
         },
         rotateOfWorld(t, origin, angle) {
             this.rotateOfLocal(t, getTempLocal(t, origin), angle);
         },
         rotateOfLocal(t, origin, angle) {
-            copy$5(matrix, t.__local);
-            rotateOfOuter$3(matrix, origin, angle);
-            moveByMatrix(t, matrix);
+            copy$5(matrix$1, t.__localMatrix);
+            rotateOfOuter$3(matrix$1, origin, angle);
+            moveByMatrix(t, matrix$1);
             t.rotation = MathHelper.formatRotation(t.rotation + angle);
         },
-        skewOfWorld(t, origin, skewX, skewY) {
-            this.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY);
+        skewOfWorld(t, origin, skewX, skewY, resize) {
+            this.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
+        },
+        skewOfLocal(t, origin, skewX, skewY = 0, resize) {
+            copy$5(matrix$1, t.__localMatrix);
+            skewOfOuter(matrix$1, origin, skewX, skewY);
+            L.setTransform(t, matrix$1, resize);
+        },
+        transform(t, transform, resize) {
+            copy$5(matrix$1, t.localTransform);
+            multiplyParent$1(matrix$1, transform);
+            L.setTransform(t, matrix$1, resize);
         },
-        skewOfLocal(t, origin, skewX, skewY) {
-            copy$5(matrix, t.__local);
-            skewOfOuter(matrix, origin, skewX, skewY);
-            moveByMatrix(t, matrix);
-            t.skewX = MathHelper.formatSkew(t.skewX + skewX);
-            t.skewY = MathHelper.formatSkew(t.skewY + skewY);
+        setTransform(t, transform, resize) {
+            const layout = getLayout(transform);
+            if (resize) {
+                t.scaleResize(layout.scaleX / t.scaleX, layout.scaleY / t.scaleY, resize !== true);
+                delete layout.scaleX;
+                delete layout.scaleY;
+            }
+            t.set(layout);
         },
-        drop(t, parent) {
-            const position = { x: t.x, y: t.y };
-            t.localToWorld(position);
-            parent.worldToInner(position);
-            t.set(position);
-            parent.add(t);
+        drop(t, parent, index, resize) {
+            copy$5(matrix$1, t.worldTransform);
+            divideParent(matrix$1, parent.worldTransform);
+            t.setTransform(matrix$1, resize);
+            parent.add(t, index);
         },
-        hasParent(t, parent) {
+        hasParent(p, parent) {
             if (!parent)
                 return false;
-            let p = t;
             while (p) {
                 if (parent === p)
                     return true;
                 p = p.parent;
             }
-            return false;
+        },
+        hasParentAutoLayout(p) {
+            while (p.parent) {
+                p = p.parent;
+                if (p.__hasAutoLayout)
+                    return true;
+            }
         }
     };
     const L = LeafHelper;
-    const { updateAllWorldMatrix: updateAllWorldMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
+    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
     function moveByMatrix(t, matrix) {
-        t.x += matrix.e - t.__local.e;
-        t.y += matrix.f - t.__local.f;
+        const { e, f } = t.__localMatrix;
+        t.x += matrix.e - e;
+        t.y += matrix.f - f;
     }
     function getTempLocal(t, world) {
-        t.__layout.checkUpdate();
+        t.__layout.update();
         return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
     }
 
@@ -4237,18 +4553,18 @@ var LeaferUI = (function (exports) {
             return target.__world;
         },
         localBoxBounds(target) {
-            return target.__.isEraser ? null : target.__local;
+            return target.__.isEraser ? null : (target.__local || target.__);
         },
-        localEventBounds(target) {
+        localStrokeBounds(target) {
             return target.__.isEraser ? null : target.__layout.localStrokeBounds;
         },
         localRenderBounds(target) {
             return target.__.isEraser ? null : target.__layout.localRenderBounds;
         },
         maskLocalBoxBounds(target) {
-            return target.__.isMask ? target.__local : null;
+            return target.__.isMask ? target.__localBounds : null;
         },
-        maskLocalEventBounds(target) {
+        maskLocalStrokeBounds(target) {
             return target.__.isMask ? target.__layout.localStrokeBounds : null;
         },
         maskLocalRenderBounds(target) {
@@ -4256,11 +4572,12 @@ var LeaferUI = (function (exports) {
         }
     };
 
+    const { updateBounds: updateBounds$2 } = LeafHelper;
     const BranchHelper = {
         sort(a, b) {
             return (a.__.zIndex === b.__.zIndex) ? (a.__tempNumber - b.__tempNumber) : (a.__.zIndex - b.__.zIndex);
         },
-        pushAllChildBranch(branch, pushList) {
+        pushAllChildBranch(branch, leafList) {
             branch.__tempNumber = 1;
             if (branch.__.__childBranchNumber) {
                 const { children } = branch;
@@ -4268,18 +4585,18 @@ var LeaferUI = (function (exports) {
                     branch = children[i];
                     if (branch.isBranch) {
                         branch.__tempNumber = 1;
-                        pushList.push(branch);
-                        pushAllChildBranch$1(branch, pushList);
+                        leafList.add(branch);
+                        pushAllChildBranch$1(branch, leafList);
                     }
                 }
             }
         },
-        pushAllParent(leaf, pushList) {
-            const { keys } = pushList;
+        pushAllParent(leaf, leafList) {
+            const { keys } = leafList;
             if (keys) {
                 while (leaf.parent) {
                     if (keys[leaf.parent.innerId] === undefined) {
-                        pushList.push(leaf.parent);
+                        leafList.add(leaf.parent);
                         leaf = leaf.parent;
                     }
                     else {
@@ -4289,7 +4606,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 while (leaf.parent) {
-                    pushList.push(leaf.parent);
+                    leafList.add(leaf.parent);
                     leaf = leaf.parent;
                 }
             }
@@ -4303,21 +4620,29 @@ var LeaferUI = (function (exports) {
                 }
             }
             for (let i = start, len = pushList.length; i < len; i++) {
-                pushAllBranchStack$1(pushList[i], pushList);
+                pushAllBranchStack(pushList[i], pushList);
             }
         },
-        updateWorldBoundsByBranchStack(branchStack) {
-            let branch;
+        updateBounds(branch, exclude) {
+            const branchStack = [branch];
+            pushAllBranchStack(branch, branchStack);
+            updateBoundsByBranchStack(branchStack, exclude);
+        },
+        updateBoundsByBranchStack(branchStack, exclude) {
+            let branch, children;
             for (let i = branchStack.length - 1; i > -1; i--) {
                 branch = branchStack[i];
-                for (let j = 0, len = branch.children.length; j < len; j++) {
-                    branch.children[j].__updateWorldBounds();
+                children = branch.children;
+                for (let j = 0, len = children.length; j < len; j++) {
+                    updateBounds$2(children[j]);
                 }
+                if (exclude && exclude === branch)
+                    continue;
+                updateBounds$2(branch);
             }
-            branch.__updateWorldBounds();
         }
     };
-    const { pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack: pushAllBranchStack$1 } = BranchHelper;
+    const { pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack, updateBoundsByBranchStack } = BranchHelper;
 
     const WaitHelper = {
         run(wait) {
@@ -4385,7 +4710,7 @@ var LeaferUI = (function (exports) {
             const { list } = path;
             for (let i = 0, len = list.length; i < len; i++) {
                 if (list[i].hasEvent(type))
-                    find.push(list[i]);
+                    find.add(list[i]);
             }
             return find;
         }
@@ -4402,7 +4727,8 @@ var LeaferUI = (function (exports) {
             this.dragData = getDragEventData(data, data, data);
         }
         getList() {
-            return this.dragging ? (exports.DragEvent.list || this.interaction.selector.list || this.dragableList || emptyList) : emptyList;
+            const { proxy } = this.interaction.selector;
+            return this.dragging && (!proxy || !proxy.list.length) ? (exports.DragEvent.list || this.dragableList || emptyList) : emptyList;
         }
         checkDrag(data, canDrag) {
             const { interaction } = this;
@@ -4413,8 +4739,7 @@ var LeaferUI = (function (exports) {
             }
             const { dragData } = this;
             if (!this.moving) {
-                const moveOnDragEmpty = interaction.config.move.dragEmpty && downData.target.isLeafer;
-                this.moving = (PointerButton.middle(data) || interaction.moveMode || moveOnDragEmpty) && canDrag;
+                this.moving = (PointerButton.middle(data) || interaction.moveMode) && canDrag;
                 if (this.moving)
                     interaction.emit(exports.MoveEvent.START, dragData);
             }
@@ -4449,7 +4774,7 @@ var LeaferUI = (function (exports) {
             let leaf;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                if (leaf.__.draggable && leaf.__.hitSelf) {
+                if ((leaf.__.draggable || leaf.__.editable) && leaf.__.hitSelf) {
                     this.dragableList = new LeafList(leaf);
                     break;
                 }
@@ -4460,9 +4785,7 @@ var LeaferUI = (function (exports) {
             const list = this.getList();
             if (list.length && running) {
                 const { moveX, moveY } = this.dragData;
-                list.forEach(leaf => {
-                    LeafHelper.moveWorld(leaf, moveX, moveY);
-                });
+                list.forEach(leaf => LeafHelper.moveWorld(leaf, moveX, moveY));
             }
         }
         dragOverOrOut(data) {
@@ -4540,8 +4863,8 @@ var LeaferUI = (function (exports) {
                 return;
             const bounds = interaction.shrinkCanvasBounds;
             const { x, y } = bounds;
-            const right = BoundsHelper.right(bounds);
-            const bottom = BoundsHelper.bottom(bounds);
+            const right = BoundsHelper.maxX(bounds);
+            const bottom = BoundsHelper.maxY(bounds);
             const moveX = data.x < x ? autoDistance : (right < data.x ? -autoDistance : 0);
             const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0);
             let totalX = 0, totalY = 0;
@@ -4565,6 +4888,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    const debug$7 = Debug.get('emit');
     function emit$1(type, data, path, excludePath) {
         if (!path && !data.path)
             return;
@@ -4577,24 +4901,29 @@ var LeaferUI = (function (exports) {
             path = data.path;
         }
         data.target = path.indexAt(0);
-        for (let i = path.length - 1; i > -1; i--) {
-            leaf = path.list[i];
-            if (emitEvent(leaf, type, data, true, excludePath))
-                return;
-            if (leaf.isApp)
-                emitAppChildren(leaf, type, data, true, excludePath);
-        }
-        for (let i = 0, len = path.length; i < len; i++) {
-            leaf = path.list[i];
-            if (leaf.isApp)
-                emitAppChildren(leaf, type, data, false, excludePath);
-            if (emitEvent(leaf, type, data, false, excludePath))
-                return;
-        }
-    }
-    const allowTypes = ['move', 'zoom', 'rotate', 'key'];
-    function emitAppChildren(leaf, type, data, capture, excludePath) {
-        if (allowTypes.some(name => type.startsWith(name)) && leaf.__.hitChildren && !exclude(leaf, excludePath)) {
+        try {
+            for (let i = path.length - 1; i > -1; i--) {
+                leaf = path.list[i];
+                if (emitEvent(leaf, type, data, true, excludePath))
+                    return;
+                if (leaf.isApp)
+                    emitAppChildren(leaf, type, data, true, excludePath);
+            }
+            for (let i = 0, len = path.length; i < len; i++) {
+                leaf = path.list[i];
+                if (leaf.isApp)
+                    emitAppChildren(leaf, type, data, false, excludePath);
+                if (emitEvent(leaf, type, data, false, excludePath))
+                    return;
+            }
+        }
+        catch (e) {
+            debug$7.error(e);
+        }
+    }
+    const allowTypes = ['move', 'zoom', 'rotate', 'key'];
+    function emitAppChildren(leaf, type, data, capture, excludePath) {
+        if (allowTypes.some(name => type.startsWith(name)) && leaf.__.hitChildren && !exclude(leaf, excludePath)) {
             let child;
             for (let i = 0, len = leaf.children.length; i < len; i++) {
                 child = leaf.children[i];
@@ -4629,39 +4958,42 @@ var LeaferUI = (function (exports) {
             const lastDistance = PointHelper.getDistance(a.from, b.from);
             const distance = PointHelper.getDistance(a.to, b.to);
             const scale = distance / lastDistance;
-            const angle = PointHelper.getChangeAngle(a.from, b.from, a.to, b.to);
+            const angle = PointHelper.getRotation(a.from, b.from, a.to, b.to);
             return { move, scale, angle, center };
         }
     };
 
+    const config = {
+        wheel: {
+            zoomMode: false,
+            zoomSpeed: 0.5,
+            moveSpeed: 0.5,
+            rotateSpeed: 0.5,
+            delta: Platform.os === 'Windows' ? { x: 150 / 4, y: 150 / 4 } : { x: 80 / 4, y: 8.0 },
+            preventDefault: true
+        },
+        pointer: {
+            hitRadius: 5,
+            through: false,
+            tapTime: 120,
+            longPressTime: 800,
+            transformTime: 500,
+            dragHover: true,
+            dragDistance: 2,
+            swipeDistance: 20,
+            ignoreMove: false
+        },
+        cursor: {}
+    };
+
     const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1 } = InteractionHelper;
     class InteractionBase {
         get dragging() { return this.dragger.dragging; }
-        get moveMode() { return (Keyboard.isHoldSpaceKey() && this.config.move.holdSpaceKey) || (this.downData && PointerButton.middle(this.downData)); }
+        get isDragEmpty() { return this.config.move.dragEmpty && (this.hoverData && this.hoverData.path.list[0].isLeafer) && (!this.downData || this.downData.path.list[0].isLeafer); }
+        get moveMode() { return this.config.move.drag || (this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey()) || (this.downData && PointerButton.middle(this.downData)) || this.isDragEmpty; }
         get hitRadius() { return this.config.pointer.hitRadius; }
         constructor(target, canvas, selector, userConfig) {
-            this.config = {
-                wheel: {
-                    zoomMode: false,
-                    zoomSpeed: 0.5,
-                    moveSpeed: 0.5,
-                    rotateSpeed: 0.5,
-                    delta: Platform.os === 'Windows' ? { x: 150 / 4, y: 150 / 4 } : { x: 80 / 4, y: 8.0 },
-                    preventDefault: true
-                },
-                pointer: {
-                    hitRadius: 5,
-                    through: false,
-                    tapTime: 120,
-                    longPressTime: 800,
-                    transformTime: 500,
-                    dragHover: true,
-                    dragDistance: 2,
-                    swipeDistance: 20,
-                    ignoreMove: false
-                },
-                cursor: {}
-            };
+            this.config = config;
             this.tapCount = 0;
             this.downKeyMap = {};
             this.target = target;
@@ -4687,10 +5019,10 @@ var LeaferUI = (function (exports) {
             if (!data)
                 return;
             PointerButton.defaultLeft(data);
-            this.emit(exports.PointerEvent.BEFORE_DOWN, data, this.defaultPath);
             this.updateDownData(data);
             if (useDefaultPath)
                 data.path = this.defaultPath;
+            this.emit(exports.PointerEvent.BEFORE_DOWN, data);
             this.emit(exports.PointerEvent.DOWN, data);
             this.downTime = Date.now();
             this.dragger.setDragData(data);
@@ -4721,7 +5053,8 @@ var LeaferUI = (function (exports) {
                 const canDrag = PointHelper.getDistance(this.downData, data) > this.config.pointer.dragDistance;
                 if (this.waitTap && canDrag)
                     this.pointerWaitCancel();
-                this.dragger.checkDrag(data, canDrag);
+                if (!PointerButton.right(this.downData))
+                    this.dragger.checkDrag(data, canDrag);
             }
             if (this.dragger.moving || this.config.pointer.ignoreMove)
                 return;
@@ -4741,8 +5074,8 @@ var LeaferUI = (function (exports) {
             if (!this.downData)
                 return;
             PointerButton.defaultLeft(data);
-            this.emit(exports.PointerEvent.BEFORE_UP, data, this.defaultPath);
             this.findPath(data);
+            this.emit(exports.PointerEvent.BEFORE_UP, data);
             this.emit(exports.PointerEvent.UP, data);
             this.emit(exports.PointerEvent.UP, this.downData, undefined, data.path);
             this.touchLeave(data);
@@ -5002,20 +5335,27 @@ var LeaferUI = (function (exports) {
     }
     Cursor.custom = {};
 
-    const { toOuterOf: toOuterOf$1 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, getPoints } = BoundsHelper;
     class LeafLayout {
+        get a() { return 1; }
+        get b() { return 0; }
+        get c() { return 0; }
+        get d() { return 1; }
+        get e() { return this.leaf.__.x; }
+        get f() { return this.leaf.__.y; }
         constructor(leaf) {
             this.leaf = leaf;
             this.renderBounds = this.strokeBounds = this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
-            this.localRenderBounds = this.localStrokeBounds = leaf.__local;
+            if (leaf.__local)
+                this.localRenderBounds = this.localStrokeBounds = leaf.__local;
             this.boxChange();
             this.matrixChange();
         }
-        checkUpdate(force) {
+        update() {
             const { leafer } = this.leaf;
             if (leafer) {
                 if (leafer.ready) {
-                    if ((Platform.realtimeLayout || force) && leafer.watcher.changed)
+                    if (leafer.watcher.changed)
                         leafer.layouter.layout();
                 }
                 else {
@@ -5024,59 +5364,141 @@ var LeaferUI = (function (exports) {
             }
             else {
                 let root = this.leaf;
-                while (root.parent) {
+                while (root.parent && !root.parent.leafer) {
                     root = root.parent;
                 }
                 Platform.layout(root);
             }
         }
-        getTransform(locationType) {
-            this.checkUpdate();
-            return locationType === 'world' ? this.leaf.__world : this.leaf.__local;
-        }
-        getBounds(type, locationType) {
-            this.checkUpdate();
-            if (locationType === 'world') {
-                switch (type) {
-                    case 'render':
-                        return this.leaf.__world;
-                    case 'content':
-                        if (this.contentBounds)
-                            return this.getWorldContentBounds();
-                    case 'margin':
-                    case 'box':
-                        return this.getWorldBoxBounds();
-                    case 'margin':
-                    case 'stroke':
-                        return this.getWorldStrokeBounds();
-                }
-            }
-            else if (locationType === 'inner') {
-                switch (type) {
-                    case 'render':
-                        return this.renderBounds;
-                    case 'content':
-                        if (this.contentBounds)
-                            return this.contentBounds;
-                    case 'margin':
-                    case 'box':
-                        return this.boxBounds;
-                    case 'stroke':
-                        return this.strokeBounds;
-                }
-            }
-            else {
-                switch (type) {
-                    case 'render':
+        getTransform(relative = 'world') {
+            this.update();
+            switch (relative) {
+                case 'world':
+                    return this.leaf.__world;
+                case 'local':
+                    return this.leaf.__localMatrix;
+                case 'inner':
+                    return MatrixHelper.defaultMatrix;
+                default:
+                    return new Matrix(this.leaf.__world).divideParent(relative.__world);
+            }
+        }
+        getBounds(type, relative = 'world') {
+            this.update();
+            switch (relative) {
+                case 'world':
+                    return this.getWorldBounds(type);
+                case 'local':
+                    return this.getLocalBounds(type);
+                case 'inner':
+                    return this.getInnerBounds(type);
+                default:
+                    return new Bounds(this.getInnerBounds(type)).toOuterOf(this.getTransform(relative));
+            }
+        }
+        getInnerBounds(type = 'box') {
+            switch (type) {
+                case 'render':
+                    return this.renderBounds;
+                case 'content':
+                    if (this.contentBounds)
+                        return this.contentBounds;
+                case 'margin':
+                case 'box':
+                    return this.boxBounds;
+                case 'stroke':
+                    return this.strokeBounds;
+            }
+        }
+        getLocalBounds(type = 'box') {
+            switch (type) {
+                case 'render':
+                    if (this.localRenderBounds)
                         return this.localRenderBounds;
-                    case 'margin':
-                    case 'content':
-                    case 'box':
-                        return this.leaf.__local;
-                    case 'stroke':
+                case 'stroke':
+                    if (this.localStrokeBounds)
                         return this.localStrokeBounds;
-                }
+                case 'margin':
+                case 'content':
+                case 'box':
+                    return this.leaf.__localBounds;
+            }
+        }
+        getWorldBounds(type = 'box') {
+            switch (type) {
+                case 'render':
+                    return this.leaf.__world;
+                case 'content':
+                    if (this.contentBounds)
+                        return this.getWorldContentBounds();
+                case 'margin':
+                case 'box':
+                    return this.getWorldBoxBounds();
+                case 'margin':
+                case 'stroke':
+                    return this.getWorldStrokeBounds();
+            }
+        }
+        getLayoutBounds(type, relative = 'world', unscale) {
+            const { leaf } = this;
+            let point, layout;
+            let bounds = this.getInnerBounds(type);
+            switch (relative) {
+                case 'world':
+                    point = leaf.getWorldPoint(bounds);
+                    layout = leaf.__world;
+                    break;
+                case 'local':
+                    point = leaf.getLocalPointByInner(bounds);
+                    layout = leaf.__;
+                    break;
+                case 'inner':
+                    point = bounds;
+                    layout = MatrixHelper.defaultWorld;
+                    break;
+                default:
+                    point = leaf.getWorldPoint(bounds, relative);
+                    layout = leaf.__world;
+            }
+            let { scaleX, scaleY, rotation, skewX, skewY } = layout;
+            let { width, height } = bounds;
+            if (typeof relative === 'object') {
+                const r = relative.__world;
+                scaleX /= r.scaleX;
+                scaleY /= r.scaleY;
+                rotation -= r.rotation;
+                skewX -= r.skewX;
+                skewY -= r.skewY;
+            }
+            if (unscale) {
+                const uScaleX = scaleX < 0 ? -scaleX : scaleX;
+                const uScaleY = scaleY < 0 ? -scaleY : scaleY;
+                scaleX /= uScaleX;
+                scaleY /= uScaleY;
+                width *= uScaleX;
+                height *= uScaleY;
+            }
+            return { x: point.x, y: point.y, scaleX, scaleY, rotation, skewX, skewY, width, height };
+        }
+        getLayoutPoints(type, relative = 'world') {
+            const { leaf } = this;
+            const points = getPoints(this.getInnerBounds(type));
+            let relativeLeaf;
+            switch (relative) {
+                case 'world':
+                    relativeLeaf = null;
+                    break;
+                case 'local':
+                    relativeLeaf = leaf.parent;
+                    break;
+                case 'inner':
+                    break;
+                default:
+                    relativeLeaf = relative;
             }
+            if (relativeLeaf !== undefined)
+                points.forEach(point => leaf.innerToWorld(point, null, false, relativeLeaf));
+            return points;
         }
         getWorldContentBounds() {
             this._worldContentBounds || (this._worldContentBounds = {});
@@ -5096,7 +5518,7 @@ var LeaferUI = (function (exports) {
         spreadStrokeCancel() {
             const same = this.renderBounds === this.strokeBounds;
             this.strokeBounds = this.boxBounds;
-            this.localStrokeBounds = this.leaf.__local;
+            this.localStrokeBounds = this.leaf.__localBounds;
             if (same)
                 this.spreadRenderCancel();
         }
@@ -5223,13 +5645,13 @@ var LeaferUI = (function (exports) {
             if (bind)
                 listener = listener.bind(bind);
             this.on(type, listener, options);
-            return { type, listener, options };
+            return { type, current: this, listener, options };
         },
         off_(id) {
             if (!id)
                 return;
             const list = id instanceof Array ? id : [id];
-            list.forEach(item => this.off(item.type, item.listener, item.options));
+            list.forEach(item => item.current.off(item.type, item.listener, item.options));
             list.length = 0;
         },
         once(type, listener, capture) {
@@ -5295,7 +5717,7 @@ var LeaferUI = (function (exports) {
                 const oldValue = this.__.__getInput(name);
                 if (typeof newValue === 'object' || oldValue !== newValue) {
                     this.__[name] = newValue;
-                    if (this.proxyData)
+                    if (this.__proxyData)
                         this.setProxyAttr(name, newValue);
                     const { CHANGE } = PropertyEvent;
                     const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
@@ -5306,191 +5728,121 @@ var LeaferUI = (function (exports) {
             }
             else {
                 this.__[name] = newValue;
-                if (this.proxyData)
+                if (this.__proxyData)
                     this.setProxyAttr(name, newValue);
             }
         },
         __getAttr(name) {
-            if (this.proxyData)
+            if (this.__proxyData)
                 return this.getProxyAttr(name);
             return this.__.__get(name);
-        },
-        setProxyAttr(name, newValue) {
-            if (this.proxyData[name] !== newValue)
-                this.proxyData[name] = newValue;
-        },
-        getProxyAttr(name) {
-            return this.proxyData[name];
         }
     };
 
-    const { sin: sin$2, cos: cos$2 } = Math;
-    const defaultWorld = Object.assign(Object.assign({}, MatrixHelper.defaultMatrix), { scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
-    const defaultCenter = { x: 0.5, y: 0.5 };
+    const { setLayout, multiplyParent, translateInner, defaultWorld } = MatrixHelper;
+    const { toPoint, tempPoint } = AroundHelper;
     const LeafMatrix = {
         __updateWorldMatrix() {
-            const pw = this.parent ? this.parent.__world : defaultWorld;
-            const r = this.__local;
-            const w = this.__world;
-            if (this.__layout.matrixChanged)
-                this.__updateLocalMatrix();
-            if (this.__layout.affectScaleOrRotation) {
-                w.a = r.a * pw.a + r.b * pw.c;
-                w.b = r.a * pw.b + r.b * pw.d;
-                w.c = r.c * pw.a + r.d * pw.c;
-                w.d = r.c * pw.b + r.d * pw.d;
-                w.e = r.e * pw.a + r.f * pw.c + pw.e;
-                w.f = r.e * pw.b + r.f * pw.d + pw.f;
-                const data = this.__;
-                w.scaleX = pw.scaleX * data.scaleX;
-                w.scaleY = pw.scaleY * data.scaleY;
-                w.rotation = pw.rotation + data.rotation;
-                w.skewX = pw.skewX + data.skewX;
-                w.skewY = pw.skewY + data.skewY;
-            }
-            else {
-                w.a = pw.a;
-                w.b = pw.b;
-                w.c = pw.c;
-                w.d = pw.d;
-                w.e = r.e * pw.a + r.f * pw.c + pw.e;
-                w.f = r.e * pw.b + r.f * pw.d + pw.f;
-                w.scaleX = pw.scaleX;
-                w.scaleY = pw.scaleY;
-                w.rotation = pw.rotation;
-                w.skewX = pw.skewX;
-                w.skewY = pw.skewY;
-            }
+            multiplyParent(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__);
         },
         __updateLocalMatrix() {
-            const r = this.__local;
-            const layout = this.__layout;
-            if (layout.affectScaleOrRotation) {
-                const { scaleX, scaleY } = this.__;
-                if (layout.affectRotation) {
+            if (this.__local) {
+                const layout = this.__layout, local = this.__local, data = this.__;
+                if (layout.affectScaleOrRotation) {
                     if (layout.scaleChanged || layout.rotationChanged) {
-                        let { rotation, skewX, skewY } = this.__;
-                        if (rotation || skewX || skewY) {
-                            rotation *= OneRadian;
-                            if (skewX)
-                                skewX *= OneRadian;
-                            if (skewY)
-                                skewY *= OneRadian;
-                            r.a = scaleX * cos$2(rotation + skewY);
-                            r.b = scaleX * sin$2(rotation + skewY);
-                            r.c = scaleY * -sin$2(rotation - skewX);
-                            r.d = scaleY * cos$2(rotation - skewX);
-                        }
-                        else {
-                            r.a = scaleX;
-                            r.b = 0;
-                            r.c = 0;
-                            r.d = scaleY;
-                            layout.affectRotation = false;
-                        }
-                        layout.scaleChanged = false;
-                        layout.rotationChanged = false;
-                    }
-                }
-                else {
-                    if (layout.scaleChanged) {
-                        r.a = scaleX;
-                        r.d = scaleY;
-                        layout.scaleChanged = false;
+                        setLayout(local, data, null, layout.affectRotation);
+                        layout.scaleChanged = layout.rotationChanged = false;
                     }
                 }
-            }
-            const { x, y, around } = this.__;
-            r.e = x;
-            r.f = y;
-            if (around) {
-                const { width, height } = this.__;
-                if (width && height) {
-                    const origin = (around === 'center') ? defaultCenter : around;
-                    const offsetX = width * origin.x, offsetY = height * origin.y;
-                    r.e -= offsetX * r.a + offsetY * r.c;
-                    r.f -= offsetX * r.b + offsetY * r.d;
+                local.e = data.x;
+                local.f = data.y;
+                if (data.around) {
+                    toPoint(data.around, layout.boxBounds, tempPoint);
+                    translateInner(local, -tempPoint.x, -tempPoint.y);
                 }
             }
             this.__layout.matrixChanged = false;
         }
     };
 
+    const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2, hasParentAutoLayout } = LeafHelper;
+    const { updateBounds: updateBounds$1 } = BranchHelper;
     const { toOuterOf, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
     const LeafBounds = {
         __updateWorldBounds() {
-            var _a;
-            if (this.__layout.boundsChanged) {
-                let resize;
-                const layout = this.__layout;
-                if (layout.boxChanged) {
-                    this.__updatePath();
-                    this.__updateRenderPath();
-                    this.__updateBoxBounds();
-                    layout.boxChanged = false;
-                    resize = true;
-                }
-                if (layout.localBoxChanged) {
+            toOuterOf(this.__layout.renderBounds, this.__world, this.__world);
+            if (this.__layout.resized) {
+                this.__onUpdateSize();
+                this.__layout.resized = false;
+            }
+        },
+        __updateLocalBounds() {
+            const layout = this.__layout;
+            if (layout.boxChanged) {
+                this.__updatePath();
+                this.__updateRenderPath();
+                this.__updateBoxBounds();
+                layout.boxChanged = false;
+                layout.resized = true;
+            }
+            if (layout.localBoxChanged) {
+                if (this.__local)
                     this.__updateLocalBoxBounds();
-                    layout.localBoxChanged = false;
-                    if (layout.strokeSpread)
-                        layout.strokeChanged = true;
-                    if (layout.renderSpread)
-                        layout.renderChanged = true;
-                    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.__layout.boxChange();
-                }
-                if (layout.strokeChanged) {
-                    layout.strokeSpread = this.__updateStrokeSpread();
-                    if (layout.strokeSpread) {
-                        if (layout.strokeBounds === layout.boxBounds) {
-                            layout.spreadStroke();
-                        }
-                        this.__updateStrokeBounds();
-                        this.__updateLocalStrokeBounds();
-                    }
-                    else {
-                        layout.spreadStrokeCancel();
-                    }
-                    layout.strokeChanged = false;
-                    if (layout.renderSpread)
-                        layout.renderChanged = true;
-                    if (this.parent)
-                        this.parent.__layout.strokeChange();
-                    resize || (resize = true);
-                }
-                if (layout.renderChanged) {
-                    layout.renderSpread = this.__updateRenderSpread();
-                    if (layout.renderSpread) {
-                        if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) {
-                            layout.spreadRender();
-                        }
-                        this.__updateRenderBounds();
-                        this.__updateLocalRenderBounds();
+                layout.localBoxChanged = false;
+                if (layout.strokeSpread)
+                    layout.strokeChanged = true;
+                if (layout.renderSpread)
+                    layout.renderChanged = true;
+                if (this.parent)
+                    this.parent.__layout.boxChange();
+            }
+            if (layout.strokeChanged) {
+                layout.strokeSpread = this.__updateStrokeSpread();
+                if (layout.strokeSpread) {
+                    if (layout.strokeBounds === layout.boxBounds) {
+                        layout.spreadStroke();
                     }
-                    else {
-                        layout.spreadRenderCancel();
+                    this.__updateStrokeBounds();
+                    this.__updateLocalStrokeBounds();
+                }
+                else {
+                    layout.spreadStrokeCancel();
+                }
+                layout.strokeChanged = false;
+                if (layout.renderSpread)
+                    layout.renderChanged = true;
+                if (this.parent)
+                    this.parent.__layout.strokeChange();
+                layout.resized = true;
+            }
+            if (layout.renderChanged) {
+                layout.renderSpread = this.__updateRenderSpread();
+                if (layout.renderSpread) {
+                    if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) {
+                        layout.spreadRender();
                     }
-                    layout.renderChanged = false;
-                    if (this.parent)
-                        this.parent.__layout.renderChange();
+                    this.__updateRenderBounds();
+                    this.__updateLocalRenderBounds();
                 }
-                layout.boundsChanged = false;
-                toOuterOf(this.__layout.renderBounds, this.__world, this.__world);
-                if (resize)
-                    this.__onUpdateSize();
-            }
-            else {
-                toOuterOf(this.__layout.renderBounds, this.__world, this.__world);
+                else {
+                    layout.spreadRenderCancel();
+                }
+                layout.renderChanged = false;
+                if (this.parent)
+                    this.parent.__layout.renderChange();
             }
+            layout.boundsChanged = false;
         },
         __updateLocalBoxBounds() {
+            if (this.__hasAutoLayout)
+                this.__updateAutoLayout();
             toOuterOf(this.__layout.boxBounds, this.__local, this.__local);
         },
         __updateLocalStrokeBounds() {
-            toOuterOf(this.__layout.strokeBounds, this.__local, this.__layout.localStrokeBounds);
+            toOuterOf(this.__layout.strokeBounds, this.__localMatrix, this.__layout.localStrokeBounds);
         },
         __updateLocalRenderBounds() {
-            toOuterOf(this.__layout.renderBounds, this.__local, this.__layout.localRenderBounds);
+            toOuterOf(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
         },
         __updateBoxBounds() {
             const b = this.__layout.boxBounds;
@@ -5500,14 +5852,27 @@ var LeaferUI = (function (exports) {
             b.width = width;
             b.height = height;
         },
+        __updateAutoLayout() {
+            this.__layout.matrixChanged = true;
+            if (this.isBranch) {
+                if (this.leafer)
+                    this.leafer.layouter.addExtra(this);
+                if (hasParentAutoLayout(this)) {
+                    updateMatrix$1(this);
+                }
+                else {
+                    updateAllMatrix$2(this);
+                    updateBounds$1(this, this);
+                }
+            }
+            else {
+                updateMatrix$1(this);
+            }
+        },
         __updateNaturalSize() {
             const { __: data, __layout: layout } = this;
             data.__naturalWidth = layout.boxBounds.width;
             data.__naturalHeight = layout.boxBounds.height;
-            if (this.around) {
-                layout.matrixChanged = true;
-                this.__updateWorldMatrix();
-            }
         },
         __updateStrokeBounds() {
             copyAndSpread$1(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread);
@@ -5550,7 +5915,7 @@ var LeaferUI = (function (exports) {
                     const tempCanvas = canvas.getSameCanvas(true);
                     this.__draw(tempCanvas, options);
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
-                    if (this.__hasMirror || options.matrix) {
+                    if (this.__worldFlipped || options.matrix) {
                         canvas.copyWorldByReset(tempCanvas, null, null, blendMode);
                     }
                     else {
@@ -5628,7 +5993,7 @@ var LeaferUI = (function (exports) {
                     this.__renderBranch(tempCanvas, options);
                     canvas.opacity = this.__worldOpacity;
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
-                    if (this.__hasMirror || options.matrix) {
+                    if (this.__worldFlipped || options.matrix) {
                         canvas.copyWorld(tempCanvas, null, null, blendMode);
                     }
                     else {
@@ -5646,8 +6011,8 @@ var LeaferUI = (function (exports) {
             const { children } = this;
             if (this.__hasMask && children.length > 1) {
                 let mask;
-                const maskCanvas = canvas.getSameCanvas();
-                const contentCanvas = canvas.getSameCanvas();
+                const maskCanvas = canvas.getSameCanvas(false, true);
+                const contentCanvas = canvas.getSameCanvas(false, true);
                 for (let i = 0, len = children.length; i < len; i++) {
                     child = children[i];
                     if (child.isMask) {
@@ -5681,7 +6046,7 @@ var LeaferUI = (function (exports) {
     const { LEAF, create } = IncrementId;
     const { toInnerPoint, toOuterPoint } = MatrixHelper;
     const { tempToOuterOf, copy: copy$3 } = PointHelper;
-    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal } = LeafHelper;
+    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, transform, setTransform, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
         set tag(_value) { }
@@ -5689,15 +6054,16 @@ var LeaferUI = (function (exports) {
         get innerName() { return this.__.name || this.tag + this.innerId; }
         get __DataProcessor() { return LeafData; }
         get __LayoutProcessor() { return LeafLayout; }
+        get __localMatrix() { return this.__local || this.__layout; }
+        get __localBounds() { return this.__local || this.__; }
         get worldTransform() { return this.__layout.getTransform('world'); }
         get localTransform() { return this.__layout.getTransform('local'); }
         get boxBounds() { return this.getBounds('box', 'inner'); }
         get worldBoxBounds() { return this.getBounds('box'); }
         get worldStrokeBounds() { return this.getBounds('stroke'); }
         get worldRenderBounds() { return this.getBounds('render'); }
-        get worldOpacity() { this.__layout.checkUpdate(); return this.__worldOpacity; }
-        get resizeable() { return true; }
-        get __hasMirror() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
+        get worldOpacity() { this.__layout.update(); return this.__worldOpacity; }
+        get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
         get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
         constructor(data) {
@@ -5706,20 +6072,15 @@ var LeaferUI = (function (exports) {
         }
         reset(data) {
             this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 };
-            this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
+            if (data !== null)
+                this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
             this.__worldOpacity = 1;
             this.__ = new this.__DataProcessor(this);
             this.__layout = new this.__LayoutProcessor(this);
             if (this.__level)
                 this.resetCustom();
-            if (data) {
-                if (data.children) {
-                    this.set(data);
-                }
-                else {
-                    Object.assign(this, data);
-                }
-            }
+            if (data)
+                data.children ? this.set(data) : Object.assign(this, data);
         }
         resetCustom() {
             this.__hasMask = this.__hasEraser = null;
@@ -5756,7 +6117,7 @@ var LeaferUI = (function (exports) {
             }
         }
         set(_data) { }
-        get(_options) { return undefined; }
+        get() { return undefined; }
         toJSON() {
             return this.__.__getInputData();
         }
@@ -5767,8 +6128,8 @@ var LeaferUI = (function (exports) {
         __getAttr(_attrName) { return undefined; }
         setProxyAttr(_attrName, _newValue) { }
         getProxyAttr(_attrName) { return undefined; }
-        find(_condition) { return undefined; }
-        findOne(_condition) { return undefined; }
+        find(_condition, _options) { return undefined; }
+        findOne(_condition, _options) { return undefined; }
         forceUpdate(attrName) {
             if (attrName === undefined)
                 attrName = 'width';
@@ -5778,15 +6139,20 @@ var LeaferUI = (function (exports) {
             this.__[attrName] = value === undefined ? null : undefined;
             this[attrName] = value;
         }
+        updateLayout() {
+            this.__layout.update();
+        }
         __updateWorldMatrix() { }
         __updateLocalMatrix() { }
         __updateWorldBounds() { }
+        __updateLocalBounds() { }
         __updateLocalBoxBounds() { }
         __updateLocalStrokeBounds() { }
         __updateLocalRenderBounds() { }
         __updateBoxBounds() { }
         __updateStrokeBounds() { }
         __updateRenderBounds() { }
+        __updateAutoLayout() { }
         __updateNaturalSize() { }
         __updateStrokeSpread() { return 0; }
         __updateRenderSpread() { return 0; }
@@ -5796,15 +6162,21 @@ var LeaferUI = (function (exports) {
         __renderMask(_canvas, _content, _mask, _recycle) { }
         __removeMask(_child) { }
         getWorld(attrName) {
-            this.__layout.checkUpdate();
+            this.__layout.update();
             if (attrName === 'x')
                 return this.__world.e;
             if (attrName === 'y')
                 return this.__world.f;
             return this.__world[attrName];
         }
-        getBounds(type, locationType = 'world') {
-            return this.__layout.getBounds(type, locationType);
+        getBounds(type, relative) {
+            return this.__layout.getBounds(type, relative);
+        }
+        getLayoutBounds(type, relative, unscale) {
+            return this.__layout.getLayoutBounds(type, relative, unscale);
+        }
+        getLayoutPoints(type, relative) {
+            return this.__layout.getLayoutPoints(type, relative);
         }
         worldToLocal(world, to, distance, relative) {
             if (this.parent) {
@@ -5862,17 +6234,43 @@ var LeaferUI = (function (exports) {
             this.localToWorld(local, point, distance, relative);
             return point;
         }
+        setTransform(matrix, resize) {
+            setTransform(this, matrix, resize);
+        }
+        transform(matrix, resize) {
+            transform(this, matrix, resize);
+        }
         move(x, y) {
             moveLocal(this, x, y);
         }
-        scaleOf(origin, x, y) {
-            zoomOfLocal(this, tempToOuterOf(origin, this.localTransform), x, y);
+        scaleOf(origin, scaleX, scaleY, resize) {
+            zoomOfLocal(this, tempToOuterOf(origin, this.localTransform), scaleX, scaleY, resize);
         }
-        rotateOf(origin, angle) {
-            rotateOfLocal(this, tempToOuterOf(origin, this.localTransform), angle);
+        rotateOf(origin, rotation) {
+            rotateOfLocal(this, tempToOuterOf(origin, this.localTransform), rotation);
+        }
+        skewOf(origin, skewX, skewY, resize) {
+            skewOfLocal(this, tempToOuterOf(origin, this.localTransform), skewX, skewY, resize);
+        }
+        scaleResize(scaleX, scaleY = scaleX, noResize) {
+            const data = this;
+            if (noResize) {
+                data.scaleX *= scaleX;
+                data.scaleY *= scaleY;
+            }
+            else {
+                if (scaleX < 0)
+                    data.scaleX *= -1, scaleX = -scaleX;
+                if (scaleY < 0)
+                    data.scaleY *= -1, scaleY = -scaleY;
+                this.__scaleResize(scaleX, scaleY);
+            }
         }
-        skewOf(origin, x, y) {
-            skewOfLocal(this, tempToOuterOf(origin, this.localTransform), x, y);
+        __scaleResize(scaleX, scaleY) {
+            if (scaleX !== 1)
+                this.width *= scaleX;
+            if (scaleY !== 1)
+                this.height *= scaleY;
         }
         __hitWorld(_point) { return true; }
         __hit(_local) { return true; }
@@ -5894,6 +6292,9 @@ var LeaferUI = (function (exports) {
             if (this.parent)
                 this.parent.remove(this, destroy);
         }
+        dropTo(parent, index, resize) {
+            drop(this, parent, index, resize);
+        }
         on(_type, _listener, _options) { }
         off(_type, _listener, _options) { }
         on_(_type, _listener, _bind, _options) { return undefined; }
@@ -5902,6 +6303,14 @@ var LeaferUI = (function (exports) {
         emit(_type, _event, _capture) { }
         emitEvent(_event, _capture) { }
         hasEvent(_type, _capture) { return false; }
+        static changeAttr(attrName, defaultValue) {
+            defineDataProcessor(this.prototype, attrName, defaultValue);
+        }
+        static addAttr(attrName, defaultValue, fn) {
+            if (!fn)
+                fn = boundsType;
+            fn(defaultValue)(this.prototype, attrName);
+        }
         destroy() {
             if (!this.destroyed) {
                 if (this.parent)
@@ -5924,9 +6333,9 @@ var LeaferUI = (function (exports) {
         useModule(LeafRender)
     ], exports.Leaf);
 
-    const { setByListWithHandle: setByListWithHandle$1 } = BoundsHelper;
+    const { setListWithFn } = BoundsHelper;
     const { sort } = BranchHelper;
-    const { localBoxBounds, localEventBounds, localRenderBounds, maskLocalBoxBounds, maskLocalEventBounds, maskLocalRenderBounds } = LeafBoundsHelper;
+    const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
     exports.Branch = class Branch extends exports.Leaf {
         constructor() {
             super();
@@ -5950,13 +6359,13 @@ var LeaferUI = (function (exports) {
             return 0;
         }
         __updateBoxBounds() {
-            setByListWithHandle$1(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
+            setListWithFn(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
         }
         __updateStrokeBounds() {
-            setByListWithHandle$1(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalEventBounds : localEventBounds);
+            setListWithFn(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
         }
         __updateRenderBounds() {
-            setByListWithHandle$1(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
+            setListWithFn(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
         }
         __updateSortChildren() {
             let affectSort;
@@ -6102,7 +6511,7 @@ var LeaferUI = (function (exports) {
             if (this.hasRemove) {
                 const updatedList = new LeafList();
                 this.__updatedList.list.forEach(item => { if (item.leafer)
-                    updatedList.push(item); });
+                    updatedList.add(item); });
                 return updatedList;
             }
             else {
@@ -6137,7 +6546,7 @@ var LeaferUI = (function (exports) {
                 this.target.emit(RenderEvent.REQUEST);
         }
         __onAttrChange(event) {
-            this.__updatedList.push(event.target);
+            this.__updatedList.add(event.target);
             this.update();
         }
         __onChildEvent(event) {
@@ -6147,12 +6556,12 @@ var LeaferUI = (function (exports) {
             }
             else {
                 this.hasRemove = true;
-                this.__updatedList.push(event.parent);
+                this.__updatedList.add(event.parent);
             }
             this.update();
         }
         __pushChild(child) {
-            this.__updatedList.push(child);
+            this.__updatedList.add(child);
             if (child.isBranch)
                 this.__loopChildren(child);
         }
@@ -6191,7 +6600,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { updateAllWorldMatrix: updateAllWorldMatrix$1, updateAllWorldOpacity } = LeafHelper;
+    const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
     const { pushAllChildBranch, pushAllParent } = BranchHelper;
     function updateMatrix(updateList, levelList) {
         let layout;
@@ -6199,14 +6608,14 @@ var LeaferUI = (function (exports) {
             layout = leaf.__layout;
             if (levelList.without(leaf) && !layout.proxyZoom) {
                 if (layout.matrixChanged) {
-                    updateAllWorldMatrix$1(leaf);
-                    levelList.push(leaf);
+                    updateAllMatrix$1(leaf, true);
+                    levelList.add(leaf);
                     if (leaf.isBranch)
                         pushAllChildBranch(leaf, levelList);
                     pushAllParent(leaf, levelList);
                 }
                 else if (layout.boundsChanged) {
-                    levelList.push(leaf);
+                    levelList.add(leaf);
                     if (leaf.isBranch)
                         leaf.__tempNumber = 0;
                     pushAllParent(leaf, levelList);
@@ -6215,20 +6624,21 @@ var LeaferUI = (function (exports) {
         });
     }
     function updateBounds(boundsList) {
-        let itemList, branch;
+        let list, branch, children;
         boundsList.sort(true);
         boundsList.levels.forEach(level => {
-            itemList = boundsList.levelMap[level];
-            for (let i = 0, len = itemList.length; i < len; i++) {
-                branch = itemList[i];
+            list = boundsList.levelMap[level];
+            for (let i = 0, len = list.length; i < len; i++) {
+                branch = list[i];
                 if (branch.isBranch && branch.__tempNumber) {
-                    for (let j = 0, jLen = branch.children.length; j < jLen; j++) {
-                        if (!branch.children[j].isBranch) {
-                            branch.children[j].__updateWorldBounds();
+                    children = branch.children;
+                    for (let j = 0, jLen = children.length; j < jLen; j++) {
+                        if (!children[j].isBranch) {
+                            updateOneBounds(children[j]);
                         }
                     }
                 }
-                branch.__updateWorldBounds();
+                updateOneBounds(branch);
             }
         });
     }
@@ -6241,7 +6651,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { worldBounds } = LeafBoundsHelper;
-    const { setByListWithHandle } = BoundsHelper;
+    const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
     class LayoutBlockData {
         constructor(list) {
             this.updatedBounds = new Bounds();
@@ -6252,14 +6662,20 @@ var LeaferUI = (function (exports) {
             this.updatedList = list;
         }
         setBefore() {
-            setByListWithHandle(this.beforeBounds, this.updatedList.list, worldBounds);
+            this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
         }
         setAfter() {
-            setByListWithHandle(this.afterBounds, this.updatedList.list, worldBounds);
-            this.updatedBounds.setByList([this.beforeBounds, this.afterBounds]);
+            const { list } = this.updatedList;
+            if (list.some(leaf => leaf.noBounds)) {
+                this.afterBounds.set(bigBounds);
+            }
+            else {
+                this.afterBounds.setListWithFn(list, worldBounds);
+            }
+            this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
         }
         merge(data) {
-            this.updatedList.pushList(data.updatedList.list);
+            this.updatedList.addList(data.updatedList.list);
             this.beforeBounds.add(data.beforeBounds);
             this.afterBounds.add(data.afterBounds);
             this.updatedBounds.add(data.updatedBounds);
@@ -6269,8 +6685,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { updateAllWorldMatrix, updateAllChange } = LeafHelper;
-    const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
+    const { updateAllMatrix, updateAllChange } = LeafHelper;
     const debug$5 = Debug.get('Layouter');
     class Layouter {
         constructor(target, userConfig) {
@@ -6347,12 +6762,15 @@ var LeaferUI = (function (exports) {
             const { target, __updatedList: updateList } = this;
             const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
             const blocks = this.getBlocks(updateList);
-            blocks.forEach(item => { item.setBefore(); });
+            blocks.forEach(item => item.setBefore());
             target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
+            this.extraBlock = null;
             updateList.sort();
             updateMatrix(updateList, this.__levelList);
             updateBounds(this.__levelList);
             updateChange(updateList);
+            if (this.extraBlock)
+                blocks.push(this.extraBlock);
             blocks.forEach(item => item.setAfter());
             target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
             target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
@@ -6375,17 +6793,20 @@ var LeaferUI = (function (exports) {
             Run.end(t);
         }
         static fullLayout(target) {
-            updateAllWorldMatrix(target);
+            updateAllMatrix(target, true);
             if (target.isBranch) {
-                const branchStack = [target];
-                pushAllBranchStack(target, branchStack);
-                updateWorldBoundsByBranchStack(branchStack);
+                BranchHelper.updateBounds(target);
             }
             else {
-                target.__updateWorldBounds();
+                LeafHelper.updateBounds(target);
             }
             updateAllChange(target);
         }
+        addExtra(leaf) {
+            const block = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+            block.updatedList.add(leaf);
+            block.beforeBounds.add(leaf.__world);
+        }
         createBlock(data) {
             return new LayoutBlockData(data);
         }
@@ -6413,8 +6834,7 @@ var LeaferUI = (function (exports) {
             if (this.target) {
                 this.stop();
                 this.__removeListenEvents();
-                this.target = null;
-                this.config = null;
+                this.target = this.config = null;
             }
         }
     }
@@ -6525,7 +6945,7 @@ var LeaferUI = (function (exports) {
             const { canvas } = this;
             const bounds = block.getIntersect(canvas.bounds);
             const includes = block.includes(this.target.__world);
-            const realBounds = new Bounds().copy(bounds);
+            const realBounds = new Bounds(bounds);
             canvas.save();
             if (includes && !Debug.showRepaint) {
                 canvas.clear();
@@ -6575,7 +6995,7 @@ var LeaferUI = (function (exports) {
             const { updateBlocks: list } = this;
             if (list) {
                 const bounds = new Bounds();
-                bounds.setByList(list);
+                bounds.setList(list);
                 list.length = 0;
                 list.push(bounds);
             }
@@ -6615,7 +7035,7 @@ var LeaferUI = (function (exports) {
                             empty = (!leaf.__world.width || !leaf.__world.height);
                             if (empty) {
                                 if (!leaf.isLeafer)
-                                    debug$4.warn(leaf.innerName, ': empty');
+                                    debug$4.tip(leaf.innerName, ': empty');
                                 empty = (!leaf.isBranch || leaf.isBranchLeaf);
                             }
                             return empty;
@@ -6649,6 +7069,14 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    var AnswerType;
+    (function (AnswerType) {
+        AnswerType[AnswerType["No"] = 0] = "No";
+        AnswerType[AnswerType["Yes"] = 1] = "Yes";
+        AnswerType[AnswerType["NoAndSkip"] = 2] = "NoAndSkip";
+        AnswerType[AnswerType["YesAndSkip"] = 3] = "YesAndSkip";
+    })(AnswerType || (AnswerType = {}));
+
     const { hitRadiusPoint } = BoundsHelper;
     class Pather {
         constructor(target, selector) {
@@ -6693,10 +7121,10 @@ var LeaferUI = (function (exports) {
         getPath(leaf) {
             const path = new LeafList();
             while (leaf) {
-                path.push(leaf);
+                path.add(leaf);
                 leaf = leaf.parent;
             }
-            path.push(this.target);
+            path.add(this.target);
             return path;
         }
         getHitablePath(leaf) {
@@ -6706,7 +7134,7 @@ var LeaferUI = (function (exports) {
                 item = path.list[i];
                 if (!item.__.hittable)
                     break;
-                hittablePath.unshift(item);
+                hittablePath.addAt(item, 0);
                 if (!item.__.hitChildren)
                     break;
             }
@@ -6725,7 +7153,7 @@ var LeaferUI = (function (exports) {
                     leaf = path.list[j];
                     if (nextPath && nextPath.has(leaf))
                         break;
-                    throughPath.push(leaf);
+                    throughPath.add(leaf);
                 }
             }
             return throughPath;
@@ -6767,14 +7195,15 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    const { Yes, NoAndSkip, YesAndSkip } = AnswerType;
     class Selector {
         constructor(target, userConfig) {
             this.config = {};
             this.innerIdMap = {};
             this.idMap = {};
             this.methods = {
-                id: (leaf, name) => leaf.id === name ? this.idMap[name] = leaf : 0,
-                innerId: (leaf, innerId) => leaf.innerId === innerId ? this.innerIdMap[innerId] = leaf : 0,
+                id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
+                innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
                 className: (leaf, name) => leaf.className === name ? 1 : 0,
                 tag: (leaf, name) => leaf.__tag === name ? 1 : 0
             };
@@ -6784,11 +7213,6 @@ var LeaferUI = (function (exports) {
             this.pather = new Pather(target, this);
             this.__listenEvents();
         }
-        getByPoint(hitPoint, hitRadius, options) {
-            if (Platform.name === 'node')
-                this.target.emit(LayoutEvent.CHECK_UPDATE);
-            return this.pather.getByPoint(hitPoint, hitRadius, options);
-        }
         getBy(condition, branch, one, options) {
             switch (typeof condition) {
                 case 'number':
@@ -6808,6 +7232,11 @@ var LeaferUI = (function (exports) {
                     return this.getByMethod(condition, branch, one, options);
             }
         }
+        getByPoint(hitPoint, hitRadius, options) {
+            if (Platform.name === 'node')
+                this.target.emit(LayoutEvent.CHECK_UPDATE);
+            return this.pather.getByPoint(hitPoint, hitRadius, options);
+        }
         getByInnerId(innerId, branch) {
             const cache = this.innerIdMap[innerId];
             if (cache)
@@ -6834,10 +7263,11 @@ var LeaferUI = (function (exports) {
             return list || this.findLeaf;
         }
         eachFind(children, method, list, options) {
-            let child;
+            let child, result;
             for (let i = 0, len = children.length; i < len; i++) {
                 child = children[i];
-                if (method(child, options)) {
+                result = method(child, options);
+                if (result === Yes || result === YesAndSkip) {
                     if (list) {
                         list.push(child);
                     }
@@ -6846,7 +7276,7 @@ var LeaferUI = (function (exports) {
                         return;
                     }
                 }
-                if (child.isBranch)
+                if (child.isBranch && result < NoAndSkip)
                     this.eachFind(child.children, method, list, options);
             }
         }
@@ -7417,8 +7847,8 @@ var LeaferUI = (function (exports) {
                     img.crossOrigin = 'anonymous';
                     img.onload = () => { resolve(img); };
                     img.onerror = (e) => { reject(e); };
-                    if (!src.startsWith('data:') && Platform.imageSuffix)
-                        src += (src.includes("?") ? "&" : "?") + Platform.imageSuffix;
+                    if (!src.startsWith('data:') && Platform.image.suffix)
+                        src += (src.includes("?") ? "&" : "?") + Platform.image.suffix;
                     img.src = src;
                 });
             }
@@ -7434,8 +7864,7 @@ var LeaferUI = (function (exports) {
     Platform.name = 'web';
     Platform.isMobile = 'ontouchstart' in window;
     Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-    Platform.devicePixelRatio = devicePixelRatio;
-    Platform.realtimeLayout = true;
+    Platform.devicePixelRatio = Math.max(1, devicePixelRatio);
     const { userAgent } = navigator;
     if (userAgent.indexOf("Firefox") > -1) {
         Platform.conicGradientRotate90 = true;
@@ -7465,7 +7894,7 @@ var LeaferUI = (function (exports) {
         if (leafer.isApp)
             return;
         leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.zoomLayer, e.moveX, e.moveY); }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
-            const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.config.zoom;
+            const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.app.config.zoom;
             let { scale } = e;
             if (scale * Math.abs(scaleX) < min)
                 scale = min / scaleX;
@@ -7512,6 +7941,9 @@ var LeaferUI = (function (exports) {
     const emptyPaint = {};
     const debug$1 = Debug.get('UIData');
     class UIData extends LeafData {
+        get __autoWidth() { return !this._width; }
+        get __autoHeight() { return !this._height; }
+        get __autoBounds() { return !this._width && !this._height; }
         setVisible(value) {
             if (this.__leaf.leafer)
                 this.__leaf.leafer.watcher.hasVisible = true;
@@ -7688,6 +8120,9 @@ var LeaferUI = (function (exports) {
     class ImageData extends RectData {
     }
 
+    class CanvasData extends RectData {
+    }
+
     function effectType(defaultValue) {
         return (target, key) => {
             defineLeafAttr(target, key, defaultValue, {
@@ -7898,6 +8333,7 @@ var LeaferUI = (function (exports) {
 
     var UI_1;
     exports.UI = UI_1 = class UI extends exports.Leaf {
+        get app() { return this.leafer && this.leafer.app; }
         set scale(value) {
             if (typeof value === 'number') {
                 this.scaleX = this.scaleY = value;
@@ -7911,22 +8347,25 @@ var LeaferUI = (function (exports) {
             const { scaleX, scaleY } = this;
             return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
         }
+        constructor(data) {
+            super(data);
+        }
         reset(_data) { }
         set(data) {
             Object.assign(this, data);
         }
-        get(options) {
-            return this.__.__getInputData(options);
+        get() {
+            return this.__.__getInputData();
         }
-        getProxyData() { return undefined; }
-        find(condition) {
-            return this.leafer ? this.leafer.selector.getBy(condition, this) : [];
+        createProxyData() { return undefined; }
+        find(condition, options) {
+            return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
         }
-        findOne(condition) {
-            return this.leafer ? this.leafer.selector.getBy(condition, this, true) : null;
+        findOne(condition, options) {
+            return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
         }
         getPath(curve) {
-            const path = this.__.path;
+            const { path } = this.__;
             if (!path)
                 return [];
             return curve ? PathConvert.toCanvasData(path, true) : path;
@@ -7958,6 +8397,15 @@ var LeaferUI = (function (exports) {
             this.__drawPathByData(canvas, this.__.path);
         }
         __drawPathByData(_drawer, _data) { }
+        __drawPathByBox(drawer) {
+            const { x, y, width, height } = this.__layout.boxBounds;
+            if (this.__.cornerRadius) {
+                drawer.roundRect(x, y, width, height, this.__.cornerRadius);
+            }
+            else {
+                drawer.rect(x, y, width, height);
+            }
+        }
         export(filename, options) {
             return Export$1.export(this, filename, options);
         }
@@ -7999,12 +8447,12 @@ var LeaferUI = (function (exports) {
     __decorate([
         eraserType(false)
     ], exports.UI.prototype, "isEraser", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.UI.prototype, "locked", void 0);
     __decorate([
         sortType(0)
     ], exports.UI.prototype, "zIndex", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "locked", void 0);
     __decorate([
         positionType(0)
     ], exports.UI.prototype, "x", void 0);
@@ -8033,11 +8481,17 @@ var LeaferUI = (function (exports) {
         rotationType(0)
     ], exports.UI.prototype, "skewY", void 0);
     __decorate([
-        positionType()
+        autoLayoutType()
     ], exports.UI.prototype, "around", void 0);
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "draggable", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.UI.prototype, "editable", void 0);
+    __decorate([
+        dataType('size')
+    ], exports.UI.prototype, "editSize", void 0);
     __decorate([
         hitType(true)
     ], exports.UI.prototype, "hittable", void 0);
@@ -8090,7 +8544,7 @@ var LeaferUI = (function (exports) {
         strokeType(10)
     ], exports.UI.prototype, "miterLimit", void 0);
     __decorate([
-        pathType()
+        pathType(0)
     ], exports.UI.prototype, "cornerRadius", void 0);
     __decorate([
         pathType()
@@ -8123,9 +8577,9 @@ var LeaferUI = (function (exports) {
         rewriteAble()
     ], exports.UI);
 
+    const matrix = MatrixHelper.get();
     exports.Group = class Group extends exports.UI {
         get __tag() { return 'Group'; }
-        get resizeable() { return false; }
         set mask(child) {
             if (this.__hasMask)
                 this.__removeMask();
@@ -8173,6 +8627,14 @@ var LeaferUI = (function (exports) {
             data.children = this.children.map(child => child.toJSON());
             return data;
         }
+        __scaleResize(scaleX, scaleY) {
+            const { children } = this;
+            for (let i = 0; i < children.length; i++) {
+                matrix.a = scaleX;
+                matrix.d = scaleY;
+                children[i].transform(matrix, true);
+            }
+        }
         addAt(child, index) {
             this.add(child, index);
         }
@@ -8200,21 +8662,17 @@ var LeaferUI = (function (exports) {
         constructor(data) {
             super(data);
         }
-        __drawPathByData(drawer, _data) {
-            const { width, height, cornerRadius } = this.__;
-            if (cornerRadius) {
-                drawer.roundRect(0, 0, width, height, cornerRadius);
-            }
-            else {
-                drawer.rect(0, 0, width, height);
-            }
-        }
+        __drawPathByData(_drawer, _data) { }
     };
     __decorate([
         dataProcessor(RectData)
     ], exports.Rect.prototype, "__", void 0);
+    __decorate([
+        rewrite(exports.UI.prototype.__drawPathByBox)
+    ], exports.Rect.prototype, "__drawPathByData", null);
     exports.Rect = __decorate([
         useModule(RectRender),
+        rewriteAble(),
         registerUI()
     ], exports.Rect);
 
@@ -8224,12 +8682,20 @@ var LeaferUI = (function (exports) {
     const { copy: copy$2, add } = BoundsHelper;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
-        get resizeable() { return true; }
         constructor(data) {
             super(data);
             this.isBranchLeaf = true;
             this.__layout.renderChanged || this.__layout.renderChange();
         }
+        __scaleResize(scaleX, scaleY) {
+            if (this.__.__autoBounds && this.children.length) {
+                super.__scaleResize(scaleX, scaleY);
+            }
+            else {
+                this.width *= scaleX;
+                this.height *= scaleY;
+            }
+        }
         __updateStrokeSpread() { return 0; }
         __updateRectRenderSpread() { return 0; }
         __updateRenderSpread() {
@@ -8239,7 +8705,15 @@ var LeaferUI = (function (exports) {
                 width = this.__.__drawAfterFill ? 0 : 1;
             return width;
         }
-        __updateBoxBounds() { }
+        __updateRectBoxBounds() { }
+        __updateBoxBounds() {
+            if (this.__.__autoBounds && this.children.length) {
+                super.__updateBoxBounds();
+            }
+            else {
+                this.__updateRectBoxBounds();
+            }
+        }
         __updateStrokeBounds() { }
         __updateRenderBounds() {
             this.__updateRectRenderBounds();
@@ -8291,7 +8765,7 @@ var LeaferUI = (function (exports) {
     ], exports.Box.prototype, "__updateRectRenderSpread", null);
     __decorate([
         rewrite(rect.__updateBoxBounds)
-    ], exports.Box.prototype, "__updateBoxBounds", null);
+    ], exports.Box.prototype, "__updateRectBoxBounds", null);
     __decorate([
         rewrite(rect.__updateStrokeBounds)
     ], exports.Box.prototype, "__updateStrokeBounds", null);
@@ -8319,6 +8793,7 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Frame'; }
         constructor(data) {
             super(data);
+            this.isFrame = true;
             if (!this.__.fill)
                 this.__.fill = '#FFFFFF';
         }
@@ -8359,7 +8834,7 @@ var LeaferUI = (function (exports) {
                     ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
                 }
                 if (Platform.ellipseToCurve)
-                    this.__.path = PathConvert.toCanvasData(path, true);
+                    this.__.path = this.getPath(true);
             }
             else {
                 if (startAngle || endAngle) {
@@ -8389,47 +8864,118 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Ellipse);
 
-    const { sin: sin$1, cos: cos$1, PI: PI$1 } = Math;
-    const { moveTo: moveTo$2, lineTo: lineTo$2, closePath: closePath$1, drawPoints: drawPoints$1 } = PathCommandDataHelper;
-    const { toBounds: toBounds$2 } = PathBounds;
-    exports.Polygon = class Polygon extends exports.UI {
-        get __tag() { return 'Polygon'; }
-        get resizeable() { return !this.points; }
+    const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = PathCommandDataHelper;
+    const { rotate: rotate$1, getAngle: getAngle$2, getDistance: getDistance$2, defaultPoint } = PointHelper;
+    const { toBounds: toBounds$1 } = PathBounds;
+    exports.Line = class Line extends exports.UI {
+        get __tag() { return 'Line'; }
+        get toPoint() {
+            const { width, rotation } = this.__;
+            const to = { x: 0, y: 0 };
+            if (width)
+                to.x = width;
+            if (rotation)
+                rotate$1(to, rotation);
+            return to;
+        }
+        set toPoint(value) {
+            this.width = getDistance$2(defaultPoint, value);
+            this.rotation = getAngle$2(defaultPoint, value);
+            if (this.height)
+                this.height = 0;
+        }
         constructor(data) {
             super(data);
         }
         __updatePath() {
             const path = this.__.path = [];
             if (this.__.points) {
-                drawPoints$1(path, this.__.points, false, true);
+                drawPoints$1(path, this.__.points, false);
             }
             else {
-                const { width, height, sides } = this.__;
-                const rx = width / 2, ry = height / 2;
-                moveTo$2(path, rx, 0);
-                for (let i = 1; i < sides; i++) {
-                    lineTo$2(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
-                }
+                moveTo$2(path, 0, 0);
+                lineTo$2(path, this.width, 0);
             }
-            closePath$1(path);
         }
         __updateRenderPath() {
             if (this.__.points && this.__.curve) {
-                drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, true);
+                drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, this.__tag !== 'Line');
             }
             else {
                 super.__updateRenderPath();
             }
         }
         __updateBoxBounds() {
-            if (this.__.points) {
-                toBounds$2(this.__.__pathForRender, this.__layout.boxBounds);
-                this.__updateNaturalSize();
+            if (this.points) {
+                toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
             }
             else {
                 super.__updateBoxBounds();
             }
         }
+        __scaleResize(scaleX, scaleY) {
+            if (this.points) {
+                PathScaler.scalePoints(this.__.points, scaleX, scaleY);
+                this.points = this.__.points;
+            }
+            else {
+                if (this.__tag === 'Line') {
+                    const point = this.toPoint;
+                    point.x *= scaleX;
+                    point.y *= scaleY;
+                    this.toPoint = point;
+                }
+                else {
+                    super.__scaleResize(scaleX, scaleY);
+                }
+            }
+        }
+    };
+    __decorate([
+        dataProcessor(LineData)
+    ], exports.Line.prototype, "__", void 0);
+    __decorate([
+        affectStrokeBoundsType('center')
+    ], exports.Line.prototype, "strokeAlign", void 0);
+    __decorate([
+        boundsType(0)
+    ], exports.Line.prototype, "height", void 0);
+    __decorate([
+        pathType()
+    ], exports.Line.prototype, "points", void 0);
+    __decorate([
+        pathType(0)
+    ], exports.Line.prototype, "curve", void 0);
+    exports.Line = __decorate([
+        registerUI()
+    ], exports.Line);
+
+    const { sin: sin$1, cos: cos$1, PI: PI$1 } = Math;
+    const { moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath$1, drawPoints } = PathCommandDataHelper;
+    const line = exports.Line.prototype;
+    exports.Polygon = class Polygon extends exports.UI {
+        get __tag() { return 'Polygon'; }
+        constructor(data) {
+            super(data);
+        }
+        __updatePath() {
+            const path = this.__.path = [];
+            if (this.__.points) {
+                drawPoints(path, this.__.points, false, true);
+            }
+            else {
+                const { width, height, sides } = this.__;
+                const rx = width / 2, ry = height / 2;
+                moveTo$1(path, rx, 0);
+                for (let i = 1; i < sides; i++) {
+                    lineTo$1(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
+                }
+            }
+            closePath$1(path);
+        }
+        __updateRenderPath() { }
+        __updateBoxBounds() { }
+        __scaleResize(_scaleX, _scaleY) { }
     };
     __decorate([
         dataProcessor(PolygonData)
@@ -8443,12 +8989,22 @@ var LeaferUI = (function (exports) {
     __decorate([
         pathType(0)
     ], exports.Polygon.prototype, "curve", void 0);
+    __decorate([
+        rewrite(line.__updateRenderPath)
+    ], exports.Polygon.prototype, "__updateRenderPath", null);
+    __decorate([
+        rewrite(line.__updateBoxBounds)
+    ], exports.Polygon.prototype, "__updateBoxBounds", null);
+    __decorate([
+        rewrite(line.__scaleResize)
+    ], exports.Polygon.prototype, "__scaleResize", null);
     exports.Polygon = __decorate([
+        rewriteAble(),
         registerUI()
     ], exports.Polygon);
 
     const { sin, cos, PI } = Math;
-    const { moveTo: moveTo$1, lineTo: lineTo$1, closePath } = PathCommandDataHelper;
+    const { moveTo, lineTo, closePath } = PathCommandDataHelper;
     exports.Star = class Star extends exports.UI {
         get __tag() { return 'Star'; }
         constructor(data) {
@@ -8458,9 +9014,9 @@ var LeaferUI = (function (exports) {
             const { width, height, corners, innerRadius } = this.__;
             const rx = width / 2, ry = height / 2;
             const path = this.__.path = [];
-            moveTo$1(path, rx, 0);
+            moveTo(path, rx, 0);
             for (let i = 1; i < corners * 2; i++) {
-                lineTo$1(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / corners));
+                lineTo(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / corners));
             }
             closePath(path);
         }
@@ -8478,77 +9034,6 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Star);
 
-    const { moveTo, lineTo, drawPoints } = PathCommandDataHelper;
-    const { rotate: rotate$1, getAngle: getAngle$2, getDistance: getDistance$2, defaultPoint } = PointHelper;
-    const { toBounds: toBounds$1 } = PathBounds;
-    exports.Line = class Line extends exports.UI {
-        get __tag() { return 'Line'; }
-        get resizeable() { return !this.points; }
-        get toPoint() {
-            const { width, rotation } = this.__;
-            const to = { x: 0, y: 0 };
-            if (width)
-                to.x = width;
-            if (rotation)
-                rotate$1(to, rotation);
-            return to;
-        }
-        set toPoint(value) {
-            this.width = getDistance$2(defaultPoint, value);
-            this.rotation = getAngle$2(defaultPoint, value);
-            if (this.height)
-                this.height = 0;
-        }
-        constructor(data) {
-            super(data);
-        }
-        __updatePath() {
-            const path = this.__.path = [];
-            if (this.__.points) {
-                drawPoints(path, this.__.points, false);
-            }
-            else {
-                moveTo(path, 0, 0);
-                lineTo(path, this.width, 0);
-            }
-        }
-        __updateRenderPath() {
-            if (this.__.points && this.__.curve) {
-                drawPoints(this.__.__pathForRender = [], this.__.points, this.__.curve, false);
-            }
-            else {
-                super.__updateRenderPath();
-            }
-        }
-        __updateBoxBounds() {
-            if (this.points) {
-                toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
-                this.__updateNaturalSize();
-            }
-            else {
-                super.__updateBoxBounds();
-            }
-        }
-    };
-    __decorate([
-        dataProcessor(LineData)
-    ], exports.Line.prototype, "__", void 0);
-    __decorate([
-        affectStrokeBoundsType('center')
-    ], exports.Line.prototype, "strokeAlign", void 0);
-    __decorate([
-        boundsType(0)
-    ], exports.Line.prototype, "height", void 0);
-    __decorate([
-        pathType()
-    ], exports.Line.prototype, "points", void 0);
-    __decorate([
-        pathType(0)
-    ], exports.Line.prototype, "curve", void 0);
-    exports.Line = __decorate([
-        registerUI()
-    ], exports.Line);
-
     exports.Image = class Image extends exports.Rect {
         get __tag() { return 'Image'; }
         get ready() { return this.image ? this.image.ready : false; }
@@ -8599,7 +9084,7 @@ var LeaferUI = (function (exports) {
             this.__.__drawAfterFill = true;
         }
         draw(ui, offset, scale, rotation) {
-            ui.__layout.checkUpdate();
+            ui.__layout.update();
             const matrix = new Matrix(ui.__world);
             matrix.invert();
             const m = new Matrix();
@@ -8609,7 +9094,7 @@ var LeaferUI = (function (exports) {
                 typeof scale === 'number' ? m.scale(scale) : m.scale(scale.x, scale.y);
             if (rotation)
                 m.rotate(rotation);
-            matrix.preMultiply(m);
+            matrix.multiplyParent(m);
             ui.__render(this.canvas, { matrix });
             this.paint();
         }
@@ -8669,11 +9154,11 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Canvas);
 
-    const { copyAndSpread, includes, spread, setByList } = BoundsHelper;
+    const { copyAndSpread, includes, spread, setList } = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() { return 'Text'; }
         get textDrawData() {
-            this.__layout.checkUpdate();
+            this.__layout.update();
             return this.__.__textDrawData;
         }
         constructor(data) {
@@ -8704,33 +9189,45 @@ var LeaferUI = (function (exports) {
             const data = this.__;
             const layout = this.__layout;
             const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow } = data;
-            const width = data.__getInput('width');
-            const height = data.__getInput('height');
+            const autoWidth = data.__autoWidth;
+            const autoHeight = data.__autoHeight;
             data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
             data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
             data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
             data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
-            data.__clipText = textOverflow !== 'show' && (width || height);
+            data.__clipText = textOverflow !== 'show' && !data.__autoBounds;
             this.__updateTextDrawData();
             const { bounds } = data.__textDrawData;
             const b = layout.boxBounds;
             if (data.__lineHeight < fontSize)
                 spread(bounds, fontSize / 2);
-            if (width && height) {
-                super.__updateBoxBounds();
+            if (autoWidth || autoHeight) {
+                b.x = autoWidth ? bounds.x : 0;
+                b.y = autoHeight ? bounds.y : 0;
+                b.width = autoWidth ? bounds.width : data.width;
+                b.height = autoHeight ? bounds.height : data.height;
+                const { padding } = data;
+                if (padding) {
+                    const [top, right, bottom, left] = MathHelper.fourNumber(padding);
+                    if (autoWidth) {
+                        b.x -= left;
+                        b.width += (right + left);
+                    }
+                    if (autoHeight) {
+                        b.y -= top;
+                        b.height += (bottom + top);
+                    }
+                }
+                this.__updateNaturalSize();
             }
             else {
-                b.x = width ? 0 : bounds.x;
-                b.y = height ? 0 : bounds.y;
-                b.width = width ? width : bounds.width;
-                b.height = height ? height : bounds.height;
-                this.__updateNaturalSize();
+                super.__updateBoxBounds();
             }
             const contentBounds = includes(b, bounds) ? b : bounds;
             if (contentBounds !== layout.contentBounds) {
                 layout.contentBounds = contentBounds;
                 layout.renderChanged = true;
-                setByList(data.__textBoxBounds = {}, [b, bounds]);
+                setList(data.__textBoxBounds = {}, [b, bounds]);
             }
             else {
                 data.__textBoxBounds = contentBounds;
@@ -8758,6 +9255,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.Text.prototype, "padding", void 0);
+    __decorate([
+        surfaceType('#000000')
+    ], exports.Text.prototype, "fill", void 0);
     __decorate([
         affectStrokeBoundsType('outside')
     ], exports.Text.prototype, "strokeAlign", void 0);
@@ -8816,13 +9316,15 @@ var LeaferUI = (function (exports) {
     const { toBounds } = PathBounds;
     exports.Path = class Path extends exports.UI {
         get __tag() { return 'Path'; }
-        get resizeable() { return false; }
         constructor(data) {
             super(data);
         }
+        __scaleResize(scaleX, scaleY) {
+            PathScaler.scale(this.__.path, scaleX, scaleY);
+            this.path = this.__.path;
+        }
         __updateBoxBounds() {
             toBounds(this.__.path, this.__layout.boxBounds);
-            this.__updateNaturalSize();
         }
     };
     __decorate([
@@ -8891,6 +9393,7 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
         get app() { return this.parent || this; }
+        get layoutLocked() { return !this.layouter.running; }
         get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
         constructor(userConfig, data) {
             super(data);
@@ -8983,13 +9486,18 @@ var LeaferUI = (function (exports) {
                 this.emitLeafer(LeaferEvent.STOP);
             }
         }
+        unlockLayout() {
+            this.layouter.start();
+            this.updateLayout();
+        }
+        lockLayout() {
+            this.updateLayout();
+            this.layouter.stop();
+        }
         resize(size) {
             const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs);
             Object.keys(data).forEach(key => this[key] = data[key]);
         }
-        forceLayout() {
-            this.__layout.checkUpdate(true);
-        }
         forceFullRender() {
             this.renderer.addBlock(this.canvas.bounds);
             if (this.viewReady)
@@ -9135,7 +9643,7 @@ var LeaferUI = (function (exports) {
             }
         }
         __checkUpdateLayout() {
-            this.__layout.checkUpdate();
+            this.__layout.update();
         }
         emitLeafer(type) {
             this.emitEvent(new LeaferEvent(type, this));
@@ -9195,6 +9703,22 @@ var LeaferUI = (function (exports) {
     exports.App = class App extends exports.Leafer {
         get __tag() { return 'App'; }
         get isApp() { return true; }
+        constructor(userConfig, data) {
+            super(userConfig, data);
+            if (userConfig) {
+                const { ground, tree, sky, editor } = userConfig;
+                if (ground)
+                    this.ground = this.addLeafer(ground);
+                if (tree || editor)
+                    this.tree = this.addLeafer(tree);
+                if (sky || editor)
+                    this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
+                if (editor) {
+                    this.editor = Creator.editor(editor);
+                    this.sky.add(this.editor);
+                }
+            }
+        }
         __setApp() {
             const { canvas } = this;
             const { realCanvas, view } = this.config;
@@ -9211,12 +9735,20 @@ var LeaferUI = (function (exports) {
         }
         start() {
             super.start();
-            this.children.forEach(leafer => { leafer.start(); });
+            this.children.forEach(leafer => leafer.start());
         }
         stop() {
-            this.children.forEach(leafer => { leafer.stop(); });
+            this.children.forEach(leafer => leafer.stop());
             super.stop();
         }
+        unlockLayout() {
+            super.unlockLayout();
+            this.children.forEach(leafer => leafer.unlockLayout());
+        }
+        lockLayout() {
+            super.lockLayout();
+            this.children.forEach(leafer => leafer.lockLayout());
+        }
         addLeafer(merge) {
             const leafer = new exports.Leafer(merge);
             this.add(leafer);
@@ -9235,7 +9767,7 @@ var LeaferUI = (function (exports) {
         }
         __onPropertyChange() {
             if (Debug.showHitView)
-                this.children.forEach(leafer => { leafer.forceUpdate('surface'); });
+                this.children.forEach(leafer => leafer.forceUpdate('surface'));
         }
         __onCreated() {
             this.created = this.children.every(child => child.created);
@@ -9257,14 +9789,14 @@ var LeaferUI = (function (exports) {
                 this.renderer.update();
         }
         __render(canvas, _options) {
-            this.children.forEach(leafer => { canvas.copyWorld(leafer.canvas); });
+            this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
         }
         __onResize(event) {
-            this.children.forEach(leafer => { leafer.resize(event); });
+            this.children.forEach(leafer => leafer.resize(event));
             super.__onResize(event);
         }
         __checkUpdateLayout() {
-            this.children.forEach(leafer => { leafer.__layout.checkUpdate(); });
+            this.children.forEach(leafer => leafer.__layout.update());
         }
         __getChildConfig(userConfig) {
             let config = Object.assign({}, this.config);
@@ -9289,7 +9821,7 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.App);
 
-    const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper$1, rotate } = MatrixHelper;
+    const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
     function fillOrFitMode(data, mode, box, width, height, rotation) {
         const transform = get$4();
         const swap = rotation && rotation !== 180;
@@ -9299,7 +9831,7 @@ var LeaferUI = (function (exports) {
         const x = box.x + (box.width - width * scale) / 2;
         const y = box.y + (box.height - height * scale) / 2;
         translate$1(transform, x, y);
-        scaleHelper$1(transform, scale);
+        scaleHelper(transform, scale);
         if (rotation)
             rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
         data.scaleX = data.scaleY = scale;
@@ -9311,7 +9843,7 @@ var LeaferUI = (function (exports) {
         if (offset)
             translate$1(transform, offset.x, offset.y);
         if (scale) {
-            typeof scale === 'number' ? scaleHelper$1(transform, scale) : scaleHelper$1(transform, scale.x, scale.y);
+            typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y);
             data.scaleX = transform.a;
             data.scaleY = transform.d;
         }
@@ -9424,6 +9956,10 @@ var LeaferUI = (function (exports) {
             d.__naturalWidth = image.width;
             d.__naturalHeight = image.height;
             if (!d.__getInput('width') || !d.__getInput('height')) {
+                if (ui.__proxyData) {
+                    ui.setProxyAttr('width', ui.__.width);
+                    ui.setProxyAttr('height', ui.__.height);
+                }
                 ui.forceUpdate('width');
                 return false;
             }
@@ -9435,22 +9971,19 @@ var LeaferUI = (function (exports) {
             data.target.emitEvent(new ImageEvent(type, data));
     }
 
-    const { get: get$2, scale: scaleHelper, copy: copy$1 } = MatrixHelper;
+    const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
     function createPattern(ui, paint, pixelRatio) {
         let { scaleX, scaleY } = ui.__world;
         const id = scaleX + '-' + scaleY;
         if (paint.patternId !== id && !ui.destroyed) {
-            paint.patternId = id;
             scaleX = Math.abs(scaleX);
             scaleY = Math.abs(scaleY);
             const { image, data } = paint;
-            const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096);
-            const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096);
-            let scale, matrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
+            let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
             if (sx) {
-                matrix = get$2();
-                copy$1(matrix, transform);
-                scaleHelper(matrix, 1 / sx, 1 / sy);
+                imageMatrix = get$2();
+                copy$1(imageMatrix, transform);
+                scale(imageMatrix, 1 / sx, 1 / sy);
                 scaleX *= sx;
                 scaleY *= sy;
             }
@@ -9458,38 +9991,49 @@ var LeaferUI = (function (exports) {
             scaleY *= pixelRatio;
             width *= scaleX;
             height *= scaleY;
-            if (width > maxWidth || height > maxHeight) {
-                scale = Math.max(width / maxWidth, height / maxHeight);
+            const size = width * height;
+            if (paint.data.mode !== 'repeat') {
+                if (size > Platform.image.maxCacheSize)
+                    return false;
+            }
+            let maxSize = Platform.image.maxPatternSize;
+            if (!image.isSVG) {
+                const imageSize = image.width * image.height;
+                if (maxSize > imageSize)
+                    maxSize = imageSize;
             }
-            if (scale) {
-                scaleX /= scale;
-                scaleY /= scale;
-                width /= scale;
-                height /= scale;
+            if (size > maxSize)
+                imageScale = Math.sqrt(size / maxSize);
+            if (imageScale) {
+                scaleX /= imageScale;
+                scaleY /= imageScale;
+                width /= imageScale;
+                height /= imageScale;
             }
             if (sx) {
                 scaleX /= sx;
                 scaleY /= sy;
             }
             if (transform || scaleX !== 1 || scaleY !== 1) {
-                if (!matrix) {
-                    matrix = get$2();
+                if (!imageMatrix) {
+                    imageMatrix = get$2();
                     if (transform)
-                        copy$1(matrix, transform);
+                        copy$1(imageMatrix, transform);
                 }
-                scaleHelper(matrix, 1 / scaleX, 1 / scaleY);
+                scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const style = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
+            const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
             try {
                 if (paint.transform)
                     paint.transform = null;
-                if (matrix)
-                    style.setTransform ? style.setTransform(matrix) : paint.transform = matrix;
+                if (imageMatrix)
+                    pattern.setTransform ? pattern.setTransform(imageMatrix) : paint.transform = imageMatrix;
             }
             catch (_a) {
-                paint.transform = matrix;
+                paint.transform = imageMatrix;
             }
-            paint.style = style;
+            paint.style = pattern;
+            paint.patternId = id;
             return true;
         }
         else {
@@ -9497,18 +10041,24 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    const { abs } = Math;
     function checkImage(ui, canvas, paint, allowPaint) {
         const { scaleX, scaleY } = ui.__world;
         if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
             return false;
         }
         else {
+            const { data } = paint;
             if (allowPaint) {
-                if (paint.image.isSVG && paint.data.mode !== 'repeat') {
-                    let { width, height } = paint.data;
-                    width *= scaleX * canvas.pixelRatio;
-                    height *= scaleY * canvas.pixelRatio;
-                    allowPaint = width > 4096 || height > 4096;
+                if (data.mode !== 'repeat') {
+                    let { width, height } = data;
+                    width *= abs(scaleX) * canvas.pixelRatio;
+                    height *= abs(scaleY) * canvas.pixelRatio;
+                    if (data.scaleX) {
+                        width *= data.scaleX;
+                        height *= data.scaleY;
+                    }
+                    allowPaint = width * height > Platform.image.maxCacheSize;
                 }
                 else {
                     allowPaint = false;
@@ -9517,7 +10067,6 @@ var LeaferUI = (function (exports) {
             if (allowPaint) {
                 canvas.save();
                 canvas.clip();
-                const { data } = paint;
                 if (paint.blendMode)
                     canvas.blendMode = paint.blendMode;
                 if (data.opacity)
@@ -9529,7 +10078,7 @@ var LeaferUI = (function (exports) {
                 return true;
             }
             else {
-                if (!paint.style) {
+                if (!paint.style || Export$1.running) {
                     createPattern(ui, paint, canvas.pixelRatio);
                 }
                 else {
@@ -9548,7 +10097,7 @@ var LeaferUI = (function (exports) {
     }
 
     function recycleImage(attrName, data) {
-        const paints = (attrName === 'fill' ? data._fill : data._stroke);
+        const paints = data['_' + attrName];
         if (paints instanceof Array) {
             let image, recycleMap, input, url;
             for (let i = 0, len = paints.length; i < len; i++) {
@@ -9652,7 +10201,7 @@ var LeaferUI = (function (exports) {
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
-        if (ui.__hasMirror || renderOptions.matrix) {
+        if (ui.__worldFlipped || renderOptions.matrix) {
             canvas.copyWorldByReset(out);
         }
         else {
@@ -9725,7 +10274,7 @@ var LeaferUI = (function (exports) {
                     out.stroke();
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(ui.__layout.renderBounds);
-                    if (ui.__hasMirror || renderOptions.matrix) {
+                    if (ui.__worldFlipped || renderOptions.matrix) {
                         canvas.copyWorldByReset(out);
                     }
                     else {
@@ -9765,7 +10314,7 @@ var LeaferUI = (function (exports) {
                     drawStrokesStyle(strokes, false, ui, out);
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(renderBounds);
-                    if (ui.__hasMirror || renderOptions.matrix) {
+                    if (ui.__worldFlipped || renderOptions.matrix) {
                         canvas.copyWorldByReset(out);
                     }
                     else {
@@ -9989,7 +10538,7 @@ var LeaferUI = (function (exports) {
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
             }
-            if (ui.__hasMirror || renderOptions.matrix) {
+            if (ui.__worldFlipped || renderOptions.matrix) {
                 current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
             }
             else {
@@ -10053,7 +10602,7 @@ var LeaferUI = (function (exports) {
                 copyBounds = bounds;
             }
             other.fillWorld(copyBounds, item.color, 'source-in');
-            if (ui.__hasMirror || renderOptions.matrix) {
+            if (ui.__worldFlipped || renderOptions.matrix) {
                 current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
             }
             else {
@@ -10551,6 +11100,7 @@ var LeaferUI = (function (exports) {
 
     const Export = {
         export(leaf, filename, options) {
+            Export.running = true;
             return addTask((success) => new Promise((resolve) => {
                 const { leafer } = leaf;
                 if (leafer) {
@@ -10588,6 +11138,7 @@ var LeaferUI = (function (exports) {
                         }
                         success({ data });
                         resolve();
+                        Export.running = false;
                         if (unreal)
                             canvas.recycle();
                     }));
@@ -10595,6 +11146,7 @@ var LeaferUI = (function (exports) {
                 else {
                     success({ data: false });
                     resolve();
+                    Export.running = false;
                 }
             }));
         }
@@ -10618,12 +11170,15 @@ var LeaferUI = (function (exports) {
 
     exports.Animate = Animate;
     exports.AnimateEvent = AnimateEvent;
+    exports.AroundHelper = AroundHelper;
     exports.AutoBounds = AutoBounds;
     exports.BezierHelper = BezierHelper;
     exports.Bounds = Bounds;
     exports.BoundsHelper = BoundsHelper;
+    exports.BoxData = BoxData;
     exports.BranchHelper = BranchHelper;
     exports.BranchRender = BranchRender;
+    exports.CanvasData = CanvasData;
     exports.CanvasManager = CanvasManager;
     exports.ChildEvent = ChildEvent;
     exports.ColorConvert = ColorConvert$1;
@@ -10632,12 +11187,16 @@ var LeaferUI = (function (exports) {
     exports.DataHelper = DataHelper;
     exports.Debug = Debug;
     exports.Effect = Effect;
+    exports.EllipseData = EllipseData;
     exports.EllipseHelper = EllipseHelper;
     exports.Event = Event;
     exports.EventCreator = EventCreator;
     exports.Export = Export$1;
     exports.FileHelper = FileHelper;
+    exports.FrameData = FrameData;
+    exports.GroupData = GroupData;
     exports.HitCanvasManager = HitCanvasManager;
+    exports.ImageData = ImageData;
     exports.ImageEvent = ImageEvent;
     exports.ImageManager = ImageManager;
     exports.IncrementId = IncrementId;
@@ -10662,9 +11221,11 @@ var LeaferUI = (function (exports) {
     exports.LeafRender = LeafRender;
     exports.LeaferCanvas = LeaferCanvas;
     exports.LeaferCanvasBase = LeaferCanvasBase;
+    exports.LeaferData = LeaferData;
     exports.LeaferEvent = LeaferEvent;
     exports.LeaferImage = LeaferImage;
     exports.LeaferTypeCreator = LeaferTypeCreator;
+    exports.LineData = LineData;
     exports.MathHelper = MathHelper;
     exports.Matrix = Matrix;
     exports.MatrixHelper = MatrixHelper;
@@ -10680,16 +11241,21 @@ var LeaferUI = (function (exports) {
     exports.PathConvert = PathConvert;
     exports.PathCorner = PathCorner;
     exports.PathCreator = PathCreator;
+    exports.PathData = PathData;
     exports.PathDrawer = PathDrawer;
     exports.PathHelper = PathHelper;
     exports.PathNumberCommandLengthMap = PathNumberCommandLengthMap;
     exports.PathNumberCommandMap = PathNumberCommandMap;
+    exports.PathScaler = PathScaler;
+    exports.PenData = PenData;
     exports.Platform = Platform;
     exports.PluginManager = PluginManager;
     exports.Point = Point;
     exports.PointHelper = PointHelper;
     exports.PointerButton = PointerButton;
+    exports.PolygonData = PolygonData;
     exports.PropertyEvent = PropertyEvent;
+    exports.RectData = RectData;
     exports.RectHelper = RectHelper;
     exports.RectRender = RectRender;
     exports.RenderEvent = RenderEvent;
@@ -10697,23 +11263,26 @@ var LeaferUI = (function (exports) {
     exports.ResizeEvent = ResizeEvent;
     exports.Run = Run;
     exports.Selector = Selector;
+    exports.StarData = StarData;
     exports.StringNumberMap = StringNumberMap;
     exports.TaskItem = TaskItem;
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert$1;
-    exports.TwoPointBounds = TwoPointBounds;
+    exports.TextData = TextData;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;
     exports.UIBounds = UIBounds;
     exports.UICreator = UICreator;
+    exports.UIData = UIData;
     exports.UIEvent = UIEvent;
     exports.UIHit = UIHit;
     exports.UIRender = UIRender;
+    exports.UnitConvert = UnitConvert;
     exports.WaitHelper = WaitHelper;
     exports.WatchEvent = WatchEvent;
     exports.Watcher = Watcher;
     exports.affectRenderBoundsType = affectRenderBoundsType;
     exports.affectStrokeBoundsType = affectStrokeBoundsType;
-    exports.aliasType = aliasType;
+    exports.autoLayoutType = autoLayoutType;
     exports.boundsType = boundsType;
     exports.canvasPatch = canvasPatch;
     exports.canvasSizeAttrs = canvasSizeAttrs;
@@ -10739,7 +11308,6 @@ var LeaferUI = (function (exports) {
     exports.rewriteAble = rewriteAble;
     exports.rotationType = rotationType;
     exports.scaleType = scaleType;
-    exports.setDefaultValue = setDefaultValue;
     exports.sortType = sortType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;