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

package/dist/web.module.js

@@ -1,5 +1,9 @@
 const Platform = {
-    imageSuffix: 'leaf'
+    image: {
+        maxCacheSize: 2560 * 1600,
+        maxPatternSize: 4096 * 2160,
+        suffix: 'leaf'
+    }
 };
 
 const Creator = {};
@@ -24,6 +28,7 @@ const IncrementId = {
 };
 const I$2 = IncrementId;
 
+const { round, pow: pow$1, PI: PI$4 } = Math;
 const MathHelper = {
     within(value, min, max) {
         if (value < min)
@@ -32,20 +37,18 @@ const MathHelper = {
             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];
@@ -54,7 +57,13 @@ const MathHelper = {
                     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;
@@ -70,29 +79,37 @@ const MathHelper = {
         }
         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;
@@ -103,6 +120,7 @@ const MatrixHelper = {
         t.f = f;
     },
     get: get$5,
+    getWorld,
     copy(t, matrix) {
         t.a = matrix.a;
         t.b = matrix.b;
@@ -119,115 +137,163 @@ const MatrixHelper = {
         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;
@@ -237,40 +303,84 @@ const MatrixHelper = {
             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: {},
@@ -291,32 +401,33 @@ const PointHelper = {
         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) {
@@ -334,53 +445,78 @@ const PointHelper = {
     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;
@@ -390,11 +526,14 @@ class Point {
         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);
     }
@@ -403,20 +542,22 @@ class Point {
     }
     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);
     }
@@ -464,16 +605,20 @@ class Matrix {
         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() {
@@ -486,8 +631,12 @@ class Matrix {
     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);
@@ -516,7 +665,7 @@ const TwoPointBoundsHelper = {
         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;
@@ -531,11 +680,11 @@ const TwoPointBoundsHelper = {
 };
 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) {
@@ -555,12 +704,10 @@ const BoundsHelper = {
             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;
@@ -578,8 +725,8 @@ const BoundsHelper = {
             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;
@@ -635,18 +782,18 @@ const BoundsHelper = {
         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) {
@@ -690,18 +837,18 @@ const BoundsHelper = {
         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;
@@ -709,18 +856,25 @@ const BoundsHelper = {
                         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)
@@ -772,19 +926,24 @@ const BoundsHelper = {
     }
 };
 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);
     }
@@ -820,25 +979,28 @@ class Bounds {
         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);
     }
@@ -891,20 +1053,25 @@ class AutoBounds {
     }
 }
 
-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,
@@ -945,18 +1112,21 @@ class Debug {
         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);
@@ -974,46 +1144,43 @@ class Debug {
 }
 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;
@@ -1035,7 +1202,7 @@ const UICreator = {
 };
 const { list: list$2 } = UICreator;
 
-const debug$d = Debug.get('EventCreator');
+const debug$e = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1043,7 +1210,7 @@ const EventCreator = {
         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) {
@@ -1117,7 +1284,7 @@ class LeafList {
     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;
@@ -1129,36 +1296,34 @@ class LeafList {
         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;
@@ -1174,20 +1339,36 @@ class LeafList {
         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();
     }
 }
 
@@ -1197,7 +1378,7 @@ class LeafLevelList {
         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;
@@ -1214,10 +1395,10 @@ class LeafLevelList {
             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;
@@ -1258,11 +1439,11 @@ class HitCanvasManager extends CanvasManager {
         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() {
@@ -1332,6 +1513,17 @@ class LeafData {
         }
         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;
@@ -1348,21 +1540,15 @@ class LeafData {
         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;
                 }
             }
         }
@@ -1453,11 +1639,10 @@ function contextAttr(realName) {
     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 = [];
@@ -1735,7 +1920,7 @@ __decorate([
 
 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$1 {
     get pixelWidth() { return this.width * this.pixelRatio; }
@@ -1768,7 +1953,7 @@ class LeaferCanvasBase extends Canvas$1 {
                 canvas.recycle();
                 resolve(blob);
             }).catch((e) => {
-                debug$c.error(e);
+                debug$d.error(e);
                 resolve(null);
             });
         });
@@ -1786,7 +1971,7 @@ class LeaferCanvasBase extends Canvas$1 {
                 canvas.recycle();
                 resolve(true);
             }).catch((e) => {
-                debug$c.error(e);
+                debug$d.error(e);
                 resolve(false);
             });
         });
@@ -1937,7 +2122,7 @@ class LeaferCanvasBase extends Canvas$1 {
         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';
@@ -1946,20 +2131,20 @@ class LeaferCanvasBase extends Canvas$1 {
         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);
@@ -1972,13 +2157,15 @@ class LeaferCanvasBase extends Canvas$1 {
     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) {
@@ -2069,44 +2256,37 @@ const NeedConvertToCanvasCommandMap = {
     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;
@@ -2133,24 +2313,24 @@ const BezierHelper = {
                 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;
@@ -2171,9 +2351,9 @@ const BezierHelper = {
         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);
@@ -2186,9 +2366,9 @@ const BezierHelper = {
         }
         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);
@@ -2198,8 +2378,8 @@ const BezierHelper = {
     },
     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)
@@ -2213,27 +2393,27 @@ const BezierHelper = {
             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);
@@ -2241,7 +2421,7 @@ const BezierHelper = {
             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;
@@ -2255,7 +2435,7 @@ const BezierHelper = {
             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);
@@ -2293,8 +2473,8 @@ const BezierHelper = {
         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) {
@@ -2310,15 +2490,15 @@ const BezierHelper = {
 };
 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;
@@ -2363,10 +2543,10 @@ const EllipseHelper = {
     }
 };
 
-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 },
@@ -2451,33 +2631,33 @@ const PathConvert = {
                 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:
@@ -2487,14 +2667,14 @@ const PathConvert = {
                     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:
@@ -2504,13 +2684,13 @@ const PathConvert = {
                     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:
@@ -2518,10 +2698,10 @@ const PathConvert = {
                     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;
@@ -2531,11 +2711,11 @@ const PathConvert = {
                     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;
@@ -2550,60 +2730,60 @@ const PathConvert = {
                     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;
@@ -2627,68 +2807,76 @@ const PathConvert = {
 };
 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)
@@ -2698,7 +2886,7 @@ const PathCommandDataHelper = {
         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) {
@@ -2707,7 +2895,7 @@ const PathCommandDataHelper = {
         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) {
@@ -2716,7 +2904,7 @@ const PathCommandDataHelper = {
 };
 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) {
@@ -2767,7 +2955,7 @@ class PathCreator {
         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) {
@@ -2784,8 +2972,8 @@ class PathCreator {
     }
 }
 
-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)
@@ -2795,51 +2983,51 @@ const PathDrawer = {
         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;
@@ -2848,17 +3036,97 @@ const PathDrawer = {
                     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 = {};
@@ -2866,7 +3134,7 @@ const setEndPoint = {};
 const PathBounds = {
     toBounds(data, setBounds) {
         PathBounds.toTwoPointBounds(data, setPointBounds);
-        toBounds$3(setPointBounds, setBounds);
+        toBounds$2(setPointBounds, setBounds);
     },
     toTwoPointBounds(data, setPointBounds) {
         if (!data || !data.length)
@@ -2896,7 +3164,7 @@ const PathBounds = {
                     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;
@@ -2907,7 +3175,7 @@ const PathBounds = {
                     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;
@@ -2930,7 +3198,7 @@ const PathBounds = {
                     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;
@@ -2946,7 +3214,7 @@ const PathBounds = {
                     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;
@@ -2959,39 +3227,41 @@ const PathBounds = {
                     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);
@@ -3003,21 +3273,23 @@ const PathCorner = {
                     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;
@@ -3048,7 +3320,7 @@ function canvasPatch(drawer) {
     roundRect(drawer);
 }
 
-const debug$8 = Debug.get('TaskProcessor');
+const debug$9 = Debug.get('TaskProcessor');
 class TaskItem {
     constructor(task) {
         this.parallel = true;
@@ -3063,7 +3335,7 @@ class TaskItem {
                     yield this.task();
             }
             catch (error) {
-                debug$8.error(error);
+                debug$9.error(error);
             }
         });
     }
@@ -3301,7 +3573,7 @@ const ImageManager = {
     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) {
@@ -3632,16 +3904,6 @@ function getNames(object) {
     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); },
@@ -3667,6 +3929,17 @@ function positionType(defaultValue) {
         });
     };
 }
+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, {
@@ -3693,7 +3966,7 @@ function boundsType(defaultValue) {
             set(value) {
                 this.__setAttr(key, value);
                 this.__layout.boxChanged || this.__layout.boxChange();
-                if (this.__.around)
+                if (this.__hasAutoLayout)
                     this.__layout.matrixChanged || this.__layout.matrixChange();
             }
         });
@@ -3815,9 +4088,6 @@ function layoutProcessor(processor) {
 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;
@@ -3848,7 +4118,11 @@ function defineDataProcessor(target, key, defaultValue) {
             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]) {
@@ -3858,7 +4132,7 @@ function defineDataProcessor(target, key, defaultValue) {
     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) {
@@ -3875,7 +4149,7 @@ function doRewrite(error) {
     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;
@@ -4118,17 +4392,43 @@ class Transformer {
     }
 }
 
-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();
@@ -4170,62 +4470,78 @@ const LeafHelper = {
         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;
 }
 
@@ -4234,18 +4550,18 @@ const LeafBoundsHelper = {
         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) {
@@ -4253,11 +4569,12 @@ const LeafBoundsHelper = {
     }
 };
 
+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;
@@ -4265,18 +4582,18 @@ const BranchHelper = {
                 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 {
@@ -4286,7 +4603,7 @@ const BranchHelper = {
         }
         else {
             while (leaf.parent) {
-                pushList.push(leaf.parent);
+                leafList.add(leaf.parent);
                 leaf = leaf.parent;
             }
         }
@@ -4300,21 +4617,29 @@ const BranchHelper = {
             }
         }
         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) {
@@ -4382,7 +4707,7 @@ const InteractionHelper = {
         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;
     }
@@ -4399,7 +4724,8 @@ class Dragger {
         this.dragData = getDragEventData(data, data, data);
     }
     getList() {
-        return this.dragging ? (DragEvent.list || this.interaction.selector.list || this.dragableList || emptyList) : emptyList;
+        const { proxy } = this.interaction.selector;
+        return this.dragging && (!proxy || !proxy.list.length) ? (DragEvent.list || this.dragableList || emptyList) : emptyList;
     }
     checkDrag(data, canDrag) {
         const { interaction } = this;
@@ -4410,8 +4736,7 @@ class Dragger {
         }
         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(MoveEvent.START, dragData);
         }
@@ -4446,7 +4771,7 @@ class Dragger {
         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;
             }
@@ -4457,9 +4782,7 @@ class Dragger {
         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) {
@@ -4537,8 +4860,8 @@ class Dragger {
             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;
@@ -4562,6 +4885,7 @@ class Dragger {
     }
 }
 
+const debug$7 = Debug.get('emit');
 function emit$1(type, data, path, excludePath) {
     if (!path && !data.path)
         return;
@@ -4574,24 +4898,29 @@ function emit$1(type, data, path, excludePath) {
         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];
@@ -4626,39 +4955,42 @@ const MultiTouchHelper = {
         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;
@@ -4684,10 +5016,10 @@ class InteractionBase {
         if (!data)
             return;
         PointerButton.defaultLeft(data);
-        this.emit(PointerEvent.BEFORE_DOWN, data, this.defaultPath);
         this.updateDownData(data);
         if (useDefaultPath)
             data.path = this.defaultPath;
+        this.emit(PointerEvent.BEFORE_DOWN, data);
         this.emit(PointerEvent.DOWN, data);
         this.downTime = Date.now();
         this.dragger.setDragData(data);
@@ -4718,7 +5050,8 @@ class InteractionBase {
             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;
@@ -4738,8 +5071,8 @@ class InteractionBase {
         if (!this.downData)
             return;
         PointerButton.defaultLeft(data);
-        this.emit(PointerEvent.BEFORE_UP, data, this.defaultPath);
         this.findPath(data);
+        this.emit(PointerEvent.BEFORE_UP, data);
         this.emit(PointerEvent.UP, data);
         this.emit(PointerEvent.UP, this.downData, undefined, data.path);
         this.touchLeave(data);
@@ -4999,20 +5332,27 @@ class Cursor {
 }
 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 {
@@ -5021,59 +5361,141 @@ class LeafLayout {
         }
         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 = {});
@@ -5093,7 +5515,7 @@ class LeafLayout {
     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();
     }
@@ -5220,13 +5642,13 @@ const LeafEventer = {
         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) {
@@ -5292,7 +5714,7 @@ const LeafDataProxy = {
             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);
@@ -5303,191 +5725,121 @@ const LeafDataProxy = {
         }
         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;
@@ -5497,14 +5849,27 @@ const LeafBounds = {
         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);
@@ -5547,7 +5912,7 @@ const LeafRender = {
                 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 {
@@ -5625,7 +5990,7 @@ const BranchRender = {
                 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 {
@@ -5643,8 +6008,8 @@ const BranchRender = {
         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) {
@@ -5678,7 +6043,7 @@ const BranchRender = {
 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;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
     set tag(_value) { }
@@ -5686,15 +6051,16 @@ let Leaf = class Leaf {
     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) {
@@ -5703,20 +6069,15 @@ let Leaf = class Leaf {
     }
     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;
@@ -5753,7 +6114,7 @@ let Leaf = class Leaf {
         }
     }
     set(_data) { }
-    get(_options) { return undefined; }
+    get() { return undefined; }
     toJSON() {
         return this.__.__getInputData();
     }
@@ -5764,8 +6125,8 @@ let Leaf = class Leaf {
     __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';
@@ -5775,15 +6136,20 @@ let Leaf = class Leaf {
         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; }
@@ -5793,15 +6159,21 @@ let Leaf = class Leaf {
     __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) {
@@ -5859,17 +6231,43 @@ let Leaf = class Leaf {
         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; }
@@ -5891,6 +6289,9 @@ let Leaf = class Leaf {
         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; }
@@ -5899,6 +6300,14 @@ let Leaf = class Leaf {
     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)
@@ -5921,9 +6330,9 @@ Leaf = __decorate([
     useModule(LeafRender)
 ], 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;
 let Branch = class Branch extends Leaf {
     constructor() {
         super();
@@ -5947,13 +6356,13 @@ let Branch = class Branch extends Leaf {
         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;
@@ -6099,7 +6508,7 @@ class Watcher {
         if (this.hasRemove) {
             const updatedList = new LeafList();
             this.__updatedList.list.forEach(item => { if (item.leafer)
-                updatedList.push(item); });
+                updatedList.add(item); });
             return updatedList;
         }
         else {
@@ -6134,7 +6543,7 @@ class Watcher {
             this.target.emit(RenderEvent.REQUEST);
     }
     __onAttrChange(event) {
-        this.__updatedList.push(event.target);
+        this.__updatedList.add(event.target);
         this.update();
     }
     __onChildEvent(event) {
@@ -6144,12 +6553,12 @@ class Watcher {
         }
         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);
     }
@@ -6188,7 +6597,7 @@ class Watcher {
     }
 }
 
-const { updateAllWorldMatrix: updateAllWorldMatrix$1, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
@@ -6196,14 +6605,14 @@ function updateMatrix(updateList, levelList) {
         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);
@@ -6212,20 +6621,21 @@ function updateMatrix(updateList, levelList) {
     });
 }
 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);
         }
     });
 }
@@ -6238,7 +6648,7 @@ function updateChange(updateList) {
 }
 
 const { worldBounds } = LeafBoundsHelper;
-const { setByListWithHandle } = BoundsHelper;
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new Bounds();
@@ -6249,14 +6659,20 @@ class LayoutBlockData {
         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);
@@ -6266,8 +6682,7 @@ class LayoutBlockData {
     }
 }
 
-const { updateAllWorldMatrix, updateAllChange } = LeafHelper;
-const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
+const { updateAllMatrix, updateAllChange } = LeafHelper;
 const debug$5 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
@@ -6344,12 +6759,15 @@ class Layouter {
         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));
@@ -6372,17 +6790,20 @@ class Layouter {
         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);
     }
@@ -6410,8 +6831,7 @@ class Layouter {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.config = null;
+            this.target = this.config = null;
         }
     }
 }
@@ -6522,7 +6942,7 @@ class Renderer {
         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();
@@ -6572,7 +6992,7 @@ class Renderer {
         const { updateBlocks: list } = this;
         if (list) {
             const bounds = new Bounds();
-            bounds.setByList(list);
+            bounds.setList(list);
             list.length = 0;
             list.push(bounds);
         }
@@ -6612,7 +7032,7 @@ class Renderer {
                         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;
@@ -6646,6 +7066,14 @@ class Renderer {
     }
 }
 
+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) {
@@ -6690,10 +7118,10 @@ class Pather {
     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) {
@@ -6703,7 +7131,7 @@ class Pather {
             item = path.list[i];
             if (!item.__.hittable)
                 break;
-            hittablePath.unshift(item);
+            hittablePath.addAt(item, 0);
             if (!item.__.hitChildren)
                 break;
         }
@@ -6722,7 +7150,7 @@ class Pather {
                 leaf = path.list[j];
                 if (nextPath && nextPath.has(leaf))
                     break;
-                throughPath.push(leaf);
+                throughPath.add(leaf);
             }
         }
         return throughPath;
@@ -6764,14 +7192,15 @@ class Pather {
     }
 }
 
+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
         };
@@ -6781,11 +7210,6 @@ class Selector {
         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':
@@ -6805,6 +7229,11 @@ class Selector {
                 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)
@@ -6831,10 +7260,11 @@ class Selector {
         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);
                 }
@@ -6843,7 +7273,7 @@ class Selector {
                     return;
                 }
             }
-            if (child.isBranch)
+            if (child.isBranch && result < NoAndSkip)
                 this.eachFind(child.children, method, list, options);
         }
     }
@@ -7414,8 +7844,8 @@ function useCanvas(_canvasType, _power) {
                 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;
             });
         }
@@ -7431,8 +7861,7 @@ function useCanvas(_canvasType, _power) {
 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;
@@ -7462,7 +7891,7 @@ function design(leafer) {
     if (leafer.isApp)
         return;
     leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.zoomLayer, e.moveX, e.moveY); }), leafer.on_(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;
@@ -7509,6 +7938,9 @@ const Export$1 = {};
 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;
@@ -7685,6 +8117,9 @@ class TextData extends UIData {
 class ImageData extends RectData {
 }
 
+class CanvasData extends RectData {
+}
+
 function effectType(defaultValue) {
     return (target, key) => {
         defineLeafAttr(target, key, defaultValue, {
@@ -7895,6 +8330,7 @@ const RectRender = {
 
 var UI_1;
 let UI = UI_1 = class UI extends Leaf {
+    get app() { return this.leafer && this.leafer.app; }
     set scale(value) {
         if (typeof value === 'number') {
             this.scaleX = this.scaleY = value;
@@ -7908,22 +8344,25 @@ let UI = UI_1 = class UI extends Leaf {
         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;
@@ -7955,6 +8394,15 @@ let UI = UI_1 = class UI extends Leaf {
         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);
     }
@@ -7996,12 +8444,12 @@ __decorate([
 __decorate([
     eraserType(false)
 ], UI.prototype, "isEraser", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "locked", void 0);
 __decorate([
     sortType(0)
 ], UI.prototype, "zIndex", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "locked", void 0);
 __decorate([
     positionType(0)
 ], UI.prototype, "x", void 0);
@@ -8030,11 +8478,17 @@ __decorate([
     rotationType(0)
 ], UI.prototype, "skewY", void 0);
 __decorate([
-    positionType()
+    autoLayoutType()
 ], UI.prototype, "around", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "draggable", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "editable", void 0);
+__decorate([
+    dataType('size')
+], UI.prototype, "editSize", void 0);
 __decorate([
     hitType(true)
 ], UI.prototype, "hittable", void 0);
@@ -8087,7 +8541,7 @@ __decorate([
     strokeType(10)
 ], UI.prototype, "miterLimit", void 0);
 __decorate([
-    pathType()
+    pathType(0)
 ], UI.prototype, "cornerRadius", void 0);
 __decorate([
     pathType()
@@ -8120,9 +8574,9 @@ UI = UI_1 = __decorate([
     rewriteAble()
 ], UI);
 
+const matrix = MatrixHelper.get();
 let Group = class Group extends UI {
     get __tag() { return 'Group'; }
-    get resizeable() { return false; }
     set mask(child) {
         if (this.__hasMask)
             this.__removeMask();
@@ -8170,6 +8624,14 @@ let Group = class Group extends UI {
         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);
     }
@@ -8197,21 +8659,17 @@ let Rect = class Rect extends UI {
     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)
 ], Rect.prototype, "__", void 0);
+__decorate([
+    rewrite(UI.prototype.__drawPathByBox)
+], Rect.prototype, "__drawPathByData", null);
 Rect = __decorate([
     useModule(RectRender),
+    rewriteAble(),
     registerUI()
 ], Rect);
 
@@ -8221,12 +8679,20 @@ const bounds$1 = {};
 const { copy: copy$2, add } = BoundsHelper;
 let Box = class Box extends 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() {
@@ -8236,7 +8702,15 @@ let Box = class Box extends Group {
             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();
@@ -8288,7 +8762,7 @@ __decorate([
 ], Box.prototype, "__updateRectRenderSpread", null);
 __decorate([
     rewrite(rect.__updateBoxBounds)
-], Box.prototype, "__updateBoxBounds", null);
+], Box.prototype, "__updateRectBoxBounds", null);
 __decorate([
     rewrite(rect.__updateStrokeBounds)
 ], Box.prototype, "__updateStrokeBounds", null);
@@ -8316,6 +8790,7 @@ let Frame = class Frame extends Box {
     get __tag() { return 'Frame'; }
     constructor(data) {
         super(data);
+        this.isFrame = true;
         if (!this.__.fill)
             this.__.fill = '#FFFFFF';
     }
@@ -8356,7 +8831,7 @@ let Ellipse = class Ellipse extends UI {
                 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) {
@@ -8386,47 +8861,118 @@ Ellipse = __decorate([
     registerUI()
 ], 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;
-let Polygon = class Polygon extends 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;
+let Line = class Line extends 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)
+], Line.prototype, "__", void 0);
+__decorate([
+    affectStrokeBoundsType('center')
+], Line.prototype, "strokeAlign", void 0);
+__decorate([
+    boundsType(0)
+], Line.prototype, "height", void 0);
+__decorate([
+    pathType()
+], Line.prototype, "points", void 0);
+__decorate([
+    pathType(0)
+], Line.prototype, "curve", void 0);
+Line = __decorate([
+    registerUI()
+], 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 = Line.prototype;
+let Polygon = class Polygon extends 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)
@@ -8440,12 +8986,22 @@ __decorate([
 __decorate([
     pathType(0)
 ], Polygon.prototype, "curve", void 0);
+__decorate([
+    rewrite(line.__updateRenderPath)
+], Polygon.prototype, "__updateRenderPath", null);
+__decorate([
+    rewrite(line.__updateBoxBounds)
+], Polygon.prototype, "__updateBoxBounds", null);
+__decorate([
+    rewrite(line.__scaleResize)
+], Polygon.prototype, "__scaleResize", null);
 Polygon = __decorate([
+    rewriteAble(),
     registerUI()
 ], Polygon);
 
 const { sin, cos, PI } = Math;
-const { moveTo: moveTo$1, lineTo: lineTo$1, closePath } = PathCommandDataHelper;
+const { moveTo, lineTo, closePath } = PathCommandDataHelper;
 let Star = class Star extends UI {
     get __tag() { return 'Star'; }
     constructor(data) {
@@ -8455,9 +9011,9 @@ let Star = class Star extends UI {
         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);
     }
@@ -8475,77 +9031,6 @@ Star = __decorate([
     registerUI()
 ], Star);
 
-const { moveTo, lineTo, drawPoints } = PathCommandDataHelper;
-const { rotate: rotate$1, getAngle: getAngle$2, getDistance: getDistance$2, defaultPoint } = PointHelper;
-const { toBounds: toBounds$1 } = PathBounds;
-let Line = class Line extends 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)
-], Line.prototype, "__", void 0);
-__decorate([
-    affectStrokeBoundsType('center')
-], Line.prototype, "strokeAlign", void 0);
-__decorate([
-    boundsType(0)
-], Line.prototype, "height", void 0);
-__decorate([
-    pathType()
-], Line.prototype, "points", void 0);
-__decorate([
-    pathType(0)
-], Line.prototype, "curve", void 0);
-Line = __decorate([
-    registerUI()
-], Line);
-
 let Image$1 = class Image extends Rect {
     get __tag() { return 'Image'; }
     get ready() { return this.image ? this.image.ready : false; }
@@ -8596,7 +9081,7 @@ let Canvas = class Canvas extends Rect {
         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();
@@ -8606,7 +9091,7 @@ let Canvas = class Canvas extends Rect {
             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();
     }
@@ -8666,11 +9151,11 @@ Canvas = __decorate([
     registerUI()
 ], Canvas);
 
-const { copyAndSpread, includes, spread, setByList } = BoundsHelper;
+const { copyAndSpread, includes, spread, setList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
     get textDrawData() {
-        this.__layout.checkUpdate();
+        this.__layout.update();
         return this.__.__textDrawData;
     }
     constructor(data) {
@@ -8701,33 +9186,45 @@ let Text = class Text extends UI {
         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;
@@ -8755,6 +9252,9 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "padding", void 0);
+__decorate([
+    surfaceType('#000000')
+], Text.prototype, "fill", void 0);
 __decorate([
     affectStrokeBoundsType('outside')
 ], Text.prototype, "strokeAlign", void 0);
@@ -8813,13 +9313,15 @@ Text = __decorate([
 const { toBounds } = PathBounds;
 let Path = class Path extends 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([
@@ -8888,6 +9390,7 @@ let Leafer = class Leafer extends Group {
     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);
@@ -8980,13 +9483,18 @@ let Leafer = class Leafer extends Group {
             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)
@@ -9132,7 +9640,7 @@ let Leafer = class Leafer extends Group {
         }
     }
     __checkUpdateLayout() {
-        this.__layout.checkUpdate();
+        this.__layout.update();
     }
     emitLeafer(type) {
         this.emitEvent(new LeaferEvent(type, this));
@@ -9192,6 +9700,22 @@ Leafer = __decorate([
 let App = class App extends 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;
@@ -9208,12 +9732,20 @@ let App = class App extends Leafer {
     }
     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 Leafer(merge);
         this.add(leafer);
@@ -9232,7 +9764,7 @@ let App = class App extends Leafer {
     }
     __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);
@@ -9254,14 +9786,14 @@ let App = class App extends Leafer {
             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);
@@ -9286,7 +9818,7 @@ App = __decorate([
     registerUI()
 ], 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;
@@ -9296,7 +9828,7 @@ function fillOrFitMode(data, mode, box, width, height, rotation) {
     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;
@@ -9308,7 +9840,7 @@ function clipMode(data, box, offset, scale, rotation) {
     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;
     }
@@ -9421,6 +9953,10 @@ function hasNaturalSize(ui, attrName, image) {
         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;
         }
@@ -9432,22 +9968,19 @@ function emit(type, data) {
         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;
         }
@@ -9455,38 +9988,49 @@ function createPattern(ui, paint, pixelRatio) {
         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 {
@@ -9494,18 +10038,24 @@ function createPattern(ui, paint, pixelRatio) {
     }
 }
 
+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;
@@ -9514,7 +10064,6 @@ function checkImage(ui, canvas, paint, allowPaint) {
         if (allowPaint) {
             canvas.save();
             canvas.clip();
-            const { data } = paint;
             if (paint.blendMode)
                 canvas.blendMode = paint.blendMode;
             if (data.opacity)
@@ -9526,7 +10075,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
             return true;
         }
         else {
-            if (!paint.style) {
+            if (!paint.style || Export$1.running) {
                 createPattern(ui, paint, canvas.pixelRatio);
             }
             else {
@@ -9545,7 +10094,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
 }
 
 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++) {
@@ -9649,7 +10198,7 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas, renderOptions) {
     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 {
@@ -9722,7 +10271,7 @@ function stroke(stroke, ui, canvas, renderOptions) {
                 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 {
@@ -9762,7 +10311,7 @@ function strokes(strokes, ui, canvas, renderOptions) {
                 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 {
@@ -9986,7 +10535,7 @@ function shadow(ui, current, shape, renderOptions) {
             }
             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 {
@@ -10050,7 +10599,7 @@ function innerShadow(ui, current, shape, renderOptions) {
             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 {
@@ -10548,6 +11097,7 @@ const ColorConvert = {
 
 const Export = {
     export(leaf, filename, options) {
+        Export.running = true;
         return addTask((success) => new Promise((resolve) => {
             const { leafer } = leaf;
             if (leafer) {
@@ -10585,6 +11135,7 @@ const Export = {
                     }
                     success({ data });
                     resolve();
+                    Export.running = false;
                     if (unreal)
                         canvas.recycle();
                 }));
@@ -10592,6 +11143,7 @@ const Export = {
             else {
                 success({ data: false });
                 resolve();
+                Export.running = false;
             }
         }));
     }
@@ -10613,4 +11165,4 @@ Object.assign(Export$1, Export);
 
 useCanvas();
 
-export { Animate, AnimateEvent, App, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, Branch, BranchHelper, BranchRender, Canvas, CanvasManager, ChildEvent, ColorConvert$1 as ColorConvert, Creator, Cursor, DataHelper, Debug, DragEvent, DropEvent, Effect, Ellipse, EllipseHelper, Event, EventCreator, Export$1 as Export, FileHelper, Frame, Group, HitCanvasManager, Image$1 as Image, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafHit, LeafLayout, LeafLevelList, LeafList, LeafMask, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, Path, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, Platform, PluginManager, Point, PointHelper, PointerButton, PointerEvent, Polygon, PropertyEvent, Rect, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert$1 as TextConvert, TwoPointBounds, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIEvent, UIHit, UIRender, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, aliasType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, effectType, eraserType, getDescriptor, hitType, layoutProcessor, maskType, opacityType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, setDefaultValue, sortType, strokeType, surfaceType, useCanvas, useModule, usePlugin };
+export { Animate, AnimateEvent, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert$1 as ColorConvert, Creator, Cursor, DataHelper, Debug, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export$1 as Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafHit, LeafLayout, LeafLevelList, LeafList, LeafMask, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, Path, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, PluginManager, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert$1 as TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIHit, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, effectType, eraserType, getDescriptor, hitType, layoutProcessor, maskType, opacityType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, useCanvas, useModule, usePlugin };