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

package/dist/web.module.js

@@ -126,13 +126,13 @@ const MatrixHelper = {
         t.d *= y;
     },
     scaleOfOuter(t, origin, x, y = x) {
-        M$5.toInnerPoint(t, origin, tempPoint$1);
-        M$5.scaleOfInner(t, tempPoint$1, x, y);
+        M$6.toInnerPoint(t, origin, tempPoint$1);
+        M$6.scaleOfInner(t, tempPoint$1, x, y);
     },
     scaleOfInner(t, origin, x, y = x) {
-        M$5.translateInner(t, origin.x, origin.y);
-        M$5.scale(t, x, y);
-        M$5.translateInner(t, -origin.x, -origin.y);
+        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;
@@ -145,13 +145,13 @@ const MatrixHelper = {
         t.d = (c * sinR) + (d * cosR);
     },
     rotateOfOuter(t, origin, angle) {
-        M$5.toInnerPoint(t, origin, tempPoint$1);
-        M$5.rotateOfInner(t, tempPoint$1, angle);
+        M$6.toInnerPoint(t, origin, tempPoint$1);
+        M$6.rotateOfInner(t, tempPoint$1, angle);
     },
     rotateOfInner(t, origin, angle) {
-        M$5.translateInner(t, origin.x, origin.y);
-        M$5.rotate(t, angle);
-        M$5.translateInner(t, -origin.x, -origin.y);
+        M$6.translateInner(t, origin.x, origin.y);
+        M$6.rotate(t, angle);
+        M$6.translateInner(t, -origin.x, -origin.y);
     },
     skew(t, x, y) {
         const { a, b, c, d } = t;
@@ -167,13 +167,13 @@ const MatrixHelper = {
         }
     },
     skewOfOuter(t, origin, x, y) {
-        M$5.toInnerPoint(t, origin, tempPoint$1);
-        M$5.skewOfInner(t, tempPoint$1, x, y);
+        M$6.toInnerPoint(t, origin, tempPoint$1);
+        M$6.skewOfInner(t, tempPoint$1, x, y);
     },
     skewOfInner(t, origin, x, y) {
-        M$5.translateInner(t, origin.x, origin.y);
-        M$5.skew(t, x, y);
-        M$5.translateInner(t, -origin.x, -origin.y);
+        M$6.translateInner(t, origin.x, origin.y);
+        M$6.skew(t, x, y);
+        M$6.translateInner(t, -origin.x, -origin.y);
     },
     multiply(t, matrix) {
         const { a, b, c, d, e, f } = t;
@@ -196,12 +196,12 @@ const MatrixHelper = {
         t.f = (e * matrix.b) + (f * matrix.d) + matrix.f;
     },
     divide(t, matrix) {
-        M$5.preMultiply(t, M$5.tempInvert(matrix));
+        M$6.preMultiply(t, M$6.tempInvert(matrix));
     },
     tempInvert(t) {
-        const { tempMatrix: temp } = M$5;
-        M$5.copy(temp, t);
-        M$5.invert(temp);
+        const { tempMatrix: temp } = M$6;
+        M$6.copy(temp, t);
+        M$6.invert(temp);
         return temp;
     },
     invert(t) {
@@ -264,10 +264,10 @@ const MatrixHelper = {
         return { x: t.e, y: t.f, scaleX, scaleY, rotation, skewX, skewY };
     },
     reset(t) {
-        M$5.set(t);
+        M$6.set(t);
     }
 };
-const M$5 = MatrixHelper;
+const M$6 = 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;
@@ -587,9 +587,7 @@ const BoundsHelper = {
         }
         B.move(to, -to.offsetX, -to.offsetY);
     },
-    scale(t, scaleX, scaleY) {
-        if (!scaleY)
-            scaleY = scaleX;
+    scale(t, scaleX, scaleY = scaleX) {
         if (t.x)
             t.x *= scaleX;
         if (t.y)
@@ -597,6 +595,12 @@ const BoundsHelper = {
         t.width *= scaleX;
         t.height *= scaleY;
     },
+    scaleOf(t, origin, scaleX, scaleY) {
+        t.x += (t.x - origin.x) * (scaleX - 1);
+        t.y += (t.y - origin.y) * (scaleY - 1);
+        t.width *= scaleX;
+        t.height *= scaleY;
+    },
     tempToOuterOf(t, matrix) {
         B.copy(B.tempBounds, t);
         B.toOuterOf(B.tempBounds, matrix);
@@ -647,14 +651,14 @@ const BoundsHelper = {
     },
     getFitMatrix(t, put) {
         const scale = Math.min(1, Math.min(t.width / put.width, t.height / put.height));
-        return new Matrix(scale, 0, 0, scale, -Math.ceil(put.x * scale), -Math.ceil(put.y * scale));
+        return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
     },
     getSpread(t, spreadX, spreadY) {
         const n = {};
         B.copyAndSpread(n, t, spreadX, spreadY);
         return n;
     },
-    spread(t, spreadX, spreadY) {
+    spread(t, spreadX, spreadY = spreadX) {
         B.copyAndSpread(t, t, spreadX, spreadY);
     },
     ceil(t) {
@@ -788,6 +792,10 @@ class Bounds {
         BoundsHelper.scale(this, scaleX, scaleY);
         return this;
     }
+    scaleOf(origin, scaleX, scaleY) {
+        BoundsHelper.scaleOf(this, origin, scaleX, scaleY);
+        return this;
+    }
     toOuterOf(matrix, to) {
         BoundsHelper.toOuterOf(this, matrix, to);
         return this;
@@ -795,8 +803,8 @@ class Bounds {
     getFitMatrix(put) {
         return BoundsHelper.getFitMatrix(this, put);
     }
-    spread(size) {
-        BoundsHelper.spread(this, size);
+    spread(spreadX, spreadY) {
+        BoundsHelper.spread(this, spreadX, spreadY);
         return this;
     }
     ceil() {
@@ -1340,14 +1348,22 @@ class LeafData {
         if (this.__input && this.__input[name] !== undefined)
             this.__input[name] = undefined;
     }
-    __getInputData() {
+    __getInputData(options) {
         const data = { tag: this.__leaf.tag }, { __input } = this;
-        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;
+        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;
+                }
             }
         }
         return data;
@@ -1378,6 +1394,8 @@ class LeafData {
 }
 
 const FileHelper = {
+    opacityTypes: ['png', 'webp', 'svg'],
+    upperCaseTypeMap: {},
     mineType(type) {
         if (!type || type.startsWith('image'))
             return type;
@@ -1390,6 +1408,7 @@ const FileHelper = {
         return l[l.length - 1];
     }
 };
+FileHelper.opacityTypes.forEach(type => FileHelper.upperCaseTypeMap[type] = type.toUpperCase());
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2083,11 +2102,11 @@ const RectHelper = {
 const { sin: sin$4, cos: cos$4, atan2: atan2$1, ceil, abs, PI: PI$2, sqrt: sqrt$1, pow } = Math;
 const { setPoint: setPoint$1, addPoint: addPoint$1 } = TwoPointBoundsHelper;
 const { set: set$2 } = PointHelper;
-const { M: M$4, L: L$5, C: C$4, Q: Q$4, Z: Z$4 } = PathCommandMap;
+const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
 const tempPoint = {};
 const BezierHelper = {
     points(data, points, curve, close) {
-        data.push(M$4, points[0], points[1]);
+        data.push(M$5, 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;
@@ -2117,7 +2136,7 @@ const BezierHelper = {
                         data.push(Q$4, c1X, c1Y, bX, bY);
                 }
                 else {
-                    data.push(C$4, c2X, c2Y, c1X, c1Y, bX, bY);
+                    data.push(C$5, c2X, c2Y, c1X, c1Y, bX, bY);
                 }
                 c2X = bX + cb * cX;
                 c2Y = bY + cb * cY;
@@ -2127,11 +2146,11 @@ const BezierHelper = {
         }
         else {
             for (let i = 2, len = points.length; i < len; i += 2) {
-                data.push(L$5, points[i], points[i + 1]);
+                data.push(L$6, points[i], points[i + 1]);
             }
         }
         if (close)
-            data.push(Z$4);
+            data.push(Z$5);
     },
     rect(data, x, y, width, height) {
         PathHelper.creator.path = data;
@@ -2154,7 +2173,7 @@ const BezierHelper = {
             totalRadian += PI2;
         if (totalRadian === PI$2 || (abs(BAx + BAy) < 1.e-12) || (abs(CBx + CBy) < 1.e-12)) {
             if (data)
-                data.push(L$5, x1, y1);
+                data.push(L$6, x1, y1);
             if (setPointBounds) {
                 setPoint$1(setPointBounds, fromX, fromY);
                 addPoint$1(setPointBounds, x1, y1);
@@ -2207,7 +2226,7 @@ const BezierHelper = {
         let startY = y = rotationSin * radiusX * startCos + rotationCos * radiusY * startSin;
         let fromX = cx + x, fromY = cy + y;
         if (data)
-            data.push(L$5, fromX, fromY);
+            data.push(L$6, fromX, fromY);
         if (setPointBounds)
             setPoint$1(setPointBounds, fromX, fromY);
         if (setStartPoint)
@@ -2222,7 +2241,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$4, x1, y1, x2, y2, cx + x, cy + y);
+                data.push(C$5, 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;
@@ -2236,7 +2255,7 @@ const BezierHelper = {
             set$2(setEndPoint, cx + x, cy + y);
     },
     quadraticCurveTo(data, fromX, fromY, x1, y1, toX, toY) {
-        data.push(C$4, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY);
+        data.push(C$5, (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);
@@ -2330,7 +2349,7 @@ const EllipseHelper = {
         const centerX = fromX + halfX + rotationCos * cx - rotationSin * cy;
         const centerY = fromY + halfY + rotationSin * cx + rotationCos * cy;
         const anticlockwise = totalRadian < 0 ? 1 : 0;
-        if (curveMode) {
+        if (curveMode || Platform.ellipseToCurve) {
             ellipse$5(data, centerX, centerY, radiusX, radiusY, rotation, startRadian / OneRadian, endRadian / OneRadian, anticlockwise);
         }
         else {
@@ -2344,7 +2363,7 @@ const EllipseHelper = {
     }
 };
 
-const { M: M$3, m, L: L$4, l, H, h, V, v, C: C$3, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$3, z, 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 { 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 { ellipticalArc } = EllipseHelper;
 const debug$b = Debug.get('PathConvert');
@@ -2432,33 +2451,33 @@ const PathConvert = {
                 case m:
                     old[i + 1] += x;
                     old[i + 2] += y;
-                case M$3:
+                case M$4:
                     x = old[i + 1];
                     y = old[i + 2];
-                    data.push(M$3, x, y);
+                    data.push(M$4, x, y);
                     i += 3;
                     break;
                 case h:
                     old[i + 1] += x;
                 case H:
                     x = old[i + 1];
-                    data.push(L$4, x, y);
+                    data.push(L$5, x, y);
                     i += 2;
                     break;
                 case v:
                     old[i + 1] += y;
                 case V:
                     y = old[i + 1];
-                    data.push(L$4, x, y);
+                    data.push(L$5, x, y);
                     i += 2;
                     break;
                 case l:
                     old[i + 1] += x;
                     old[i + 2] += y;
-                case L$4:
+                case L$5:
                     x = old[i + 1];
                     y = old[i + 2];
-                    data.push(L$4, x, y);
+                    data.push(L$5, x, y);
                     i += 3;
                     break;
                 case s:
@@ -2468,14 +2487,14 @@ const PathConvert = {
                     old[i + 4] += y;
                     command = S;
                 case S:
-                    smooth = (lastCommand === C$3) || (lastCommand === S);
+                    smooth = (lastCommand === C$4) || (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$3, x1, y1, controlX, controlY, x, y);
+                    data.push(C$4, x1, y1, controlX, controlY, x, y);
                     i += 5;
                     break;
                 case c:
@@ -2485,13 +2504,13 @@ const PathConvert = {
                     old[i + 4] += y;
                     old[i + 5] += x;
                     old[i + 6] += y;
-                    command = C$3;
-                case C$3:
+                    command = C$4;
+                case C$4:
                     controlX = old[i + 3];
                     controlY = old[i + 4];
                     x = old[i + 5];
                     y = old[i + 6];
-                    data.push(C$3, old[i + 1], old[i + 2], controlX, controlY, x, y);
+                    data.push(C$4, old[i + 1], old[i + 2], controlX, controlY, x, y);
                     i += 7;
                     break;
                 case t:
@@ -2531,8 +2550,8 @@ const PathConvert = {
                     i += 8;
                     break;
                 case z:
-                case Z$3:
-                    data.push(Z$3);
+                case Z$4:
+                    data.push(Z$4);
                     i++;
                     break;
                 case N$3:
@@ -2577,7 +2596,7 @@ const PathConvert = {
                     y = old[i + 2];
                     i += 4;
                     break;
-                case U$3:
+                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);
                     x = setEndPoint$1.x;
                     y = setEndPoint$1.y;
@@ -2608,26 +2627,26 @@ const PathConvert = {
 };
 const { current, pushData, copyData } = PathConvert;
 
-const { M: M$2, L: L$3, C: C$2, Q: Q$2, Z: Z$2, 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 { 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 startPoint = {};
 const PathCommandDataHelper = {
     beginPath(data) {
         data.length = 0;
     },
     moveTo(data, x, y) {
-        data.push(M$2, x, y);
+        data.push(M$3, x, y);
     },
     lineTo(data, x, y) {
-        data.push(L$3, x, y);
+        data.push(L$4, x, y);
     },
     bezierCurveTo(data, x1, y1, x2, y2, x, y) {
-        data.push(C$2, x1, y1, x2, y2, x, y);
+        data.push(C$3, x1, y1, x2, y2, x, y);
     },
     quadraticCurveTo(data, x1, y1, x, y) {
         data.push(Q$2, x1, y1, x, y);
     },
     closePath(data) {
-        data.push(Z$2);
+        data.push(Z$3);
     },
     rect(data, x, y, width, height) {
         data.push(N$2, x, y, width, height);
@@ -2669,7 +2688,7 @@ const PathCommandDataHelper = {
         }
     },
     arcTo(data, x1, y1, x2, y2, radius) {
-        data.push(U$2, x1, y1, x2, y2, radius);
+        data.push(U$3, x1, y1, x2, y2, radius);
     },
     drawEllipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         if (rotation === undefined)
@@ -2679,7 +2698,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$2, startPoint.x, startPoint.y);
+        data.push(M$3, startPoint.x, startPoint.y);
         ellipse$3(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
     },
     drawArc(data, x, y, radius, startAngle, endAngle, anticlockwise) {
@@ -2688,7 +2707,7 @@ const PathCommandDataHelper = {
         if (endAngle === undefined)
             endAngle = 360;
         BezierHelper.arc(null, x, y, radius, startAngle, endAngle, anticlockwise, null, null, startPoint);
-        data.push(M$2, startPoint.x, startPoint.y);
+        data.push(M$3, startPoint.x, startPoint.y);
         arc$2(data, x, y, radius, startAngle, endAngle, anticlockwise);
     },
     drawPoints(data, points, curve, close) {
@@ -2765,7 +2784,7 @@ class PathCreator {
     }
 }
 
-const { M: M$1, L: L$2, C: C$1, Q: Q$1, Z: Z$1, 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 { 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 PathDrawer = {
     drawPathByData(drawer, data) {
@@ -2776,15 +2795,15 @@ const PathDrawer = {
         while (i < len) {
             command = data[i];
             switch (command) {
-                case M$1:
+                case M$2:
                     drawer.moveTo(data[i + 1], data[i + 2]);
                     i += 3;
                     break;
-                case L$2:
+                case L$3:
                     drawer.lineTo(data[i + 1], data[i + 2]);
                     i += 3;
                     break;
-                case C$1:
+                case C$2:
                     drawer.bezierCurveTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6]);
                     i += 7;
                     break;
@@ -2792,7 +2811,7 @@ const PathDrawer = {
                     drawer.quadraticCurveTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4]);
                     i += 5;
                     break;
-                case Z$1:
+                case Z$2:
                     drawer.closePath();
                     i += 1;
                     break;
@@ -2824,7 +2843,7 @@ const PathDrawer = {
                     drawer.arc(data[i + 1], data[i + 2], data[i + 3], 0, PI2, false);
                     i += 4;
                     break;
-                case U$1:
+                case U$2:
                     drawer.arcTo(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5]);
                     i += 6;
                     break;
@@ -2836,7 +2855,7 @@ const PathDrawer = {
     }
 };
 
-const { M, L: L$1, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap;
+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');
@@ -2858,7 +2877,7 @@ const PathBounds = {
         while (i < len) {
             command = data[i];
             if (i === 0) {
-                if (command === Z || command === C || command === Q) {
+                if (command === Z$1 || command === C$1 || command === Q) {
                     setPoint(setPointBounds, x, y);
                 }
                 else {
@@ -2866,14 +2885,14 @@ const PathBounds = {
                 }
             }
             switch (command) {
-                case M:
-                case L$1:
+                case M$1:
+                case L$2:
                     x = data[i + 1];
                     y = data[i + 2];
                     addPoint(setPointBounds, x, y);
                     i += 3;
                     break;
-                case C:
+                case C$1:
                     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);
@@ -2893,7 +2912,7 @@ const PathBounds = {
                     y = toY;
                     i += 5;
                     break;
-                case Z:
+                case Z$1:
                     i += 1;
                     break;
                 case N:
@@ -2940,7 +2959,7 @@ const PathBounds = {
                     x += radius;
                     i += 4;
                     break;
-                case U:
+                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);
                     x = setEndPoint.x;
@@ -2955,9 +2974,60 @@ const PathBounds = {
     }
 };
 
+const { M, L: L$1, C, Z, U } = PathCommandMap;
 const PathCorner = {
-    smooth(data, _cornerRadius, _cornerSmoothing) {
-        return data;
+    smooth(data, cornerRadius, _cornerSmoothing) {
+        let command;
+        let i = 0, x = 0, y = 0, startX, startY = 0, centerX = 0, centerY = 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];
+                    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);
+                    }
+                    else {
+                        smooth.push(M, startX, startY);
+                    }
+                    break;
+                case L$1:
+                    x = data[i + 1];
+                    y = data[i + 2];
+                    i += 3;
+                    switch (data[i]) {
+                        case L$1:
+                            smooth.push(U, x, y, data[i + 1], data[i + 2], cornerRadius);
+                            break;
+                        case Z:
+                            smooth.push(U, x, y, startX, startY, cornerRadius);
+                            break;
+                        default:
+                            smooth.push(L$1, x, 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);
+                    smooth.push(Z);
+                    i += 1;
+                    break;
+            }
+        }
+        if (command !== Z) {
+            smooth[1] = startX;
+            smooth[2] = startY;
+        }
+        return smooth;
     }
 };
 
@@ -3009,9 +3079,7 @@ class TaskItem {
 }
 
 class TaskProcessor {
-    get total() {
-        return this.list.length + this.delayNumber;
-    }
+    get total() { return this.list.length + this.delayNumber; }
     get finishedIndex() {
         return this.isComplete ? 0 : this.index + this.parallelSuccessNumber;
     }
@@ -3067,8 +3135,10 @@ class TaskProcessor {
         else {
             this.delayNumber++;
             setTimeout(() => {
-                this.delayNumber--;
-                this.push(task, start);
+                if (this.delayNumber) {
+                    this.delayNumber--;
+                    this.push(task, start);
+                }
             }, delay);
         }
         this.isComplete = false;
@@ -3085,6 +3155,7 @@ class TaskProcessor {
         this.parallelSuccessNumber = 0;
         this.list = [];
         this.parallelList = [];
+        this.delayNumber = 0;
     }
     start() {
         if (!this.running) {
@@ -3257,6 +3328,23 @@ const ImageManager = {
             list.length = 0;
         }
     },
+    isPixel(config) {
+        return FileHelper.opacityTypes.some(item => I$1.isFormat(item, config));
+    },
+    isFormat(format, config) {
+        if (config.format === format)
+            return true;
+        const { url } = config;
+        if (url.startsWith('data:')) {
+            if (url.startsWith('data:' + FileHelper.mineType(format)))
+                return true;
+        }
+        else {
+            if (url.includes('.' + format) || url.includes('.' + FileHelper.upperCaseTypeMap[format]))
+                return true;
+        }
+        return false;
+    },
     destroy() {
         I$1.map = {};
     }
@@ -3272,17 +3360,7 @@ class LeaferImage {
         this.waitComplete = [];
         this.innerId = create$1(IMAGE);
         this.config = config || { url: '' };
-        const { url } = config;
-        if (url.startsWith('data:')) {
-            if (url.startsWith('data:image/svg'))
-                this.isSVG = true;
-        }
-        else {
-            if (url.includes('.svg'))
-                this.isSVG = true;
-        }
-        if (this.config.format === 'svg')
-            this.isSVG = true;
+        this.isSVG = ImageManager.isFormat('svg', config);
     }
     load(onSuccess, onError) {
         if (!this.loading) {
@@ -3355,13 +3433,19 @@ class Event {
     }
     stopDefault() {
         this.isStopDefault = true;
+        if (this.origin)
+            Platform.event.stopDefault(this.origin);
     }
     stopNow() {
         this.isStopNow = true;
         this.isStop = true;
+        if (this.origin)
+            Platform.event.stopNow(this.origin);
     }
     stop() {
         this.isStop = true;
+        if (this.origin)
+            Platform.event.stop(this.origin);
     }
 }
 
@@ -3423,20 +3507,6 @@ class ResizeEvent extends Event {
 }
 ResizeEvent.RESIZE = 'resize';
 
-class TransformEvent extends Event {
-    constructor(type, params) {
-        super(type);
-        if (params)
-            Object.assign(this, params);
-    }
-}
-TransformEvent.START = 'transform.start';
-TransformEvent.CHANGE = 'transform.change';
-TransformEvent.END = 'transform.end';
-TransformEvent.BEFORE_START = 'transform.before_start';
-TransformEvent.BEFORE_CHANGE = 'transform.before_change';
-TransformEvent.BEFORE_END = 'transform.before_end';
-
 class WatchEvent extends Event {
     constructor(type, data) {
         super(type);
@@ -3537,15 +3607,15 @@ class UIEvent extends Event {
         this.bubbles = true;
         Object.assign(this, params);
     }
-    getInner(target) {
-        if (!target)
-            target = this.current;
-        return target.getInnerPoint(this);
+    getInner(relative) {
+        if (!relative)
+            relative = this.current;
+        return relative.getInnerPoint(this);
     }
-    getLocal(target) {
-        if (!target)
-            target = this.current;
-        return target.getLocalPoint(this);
+    getLocal(relative) {
+        if (!relative)
+            relative = this.current;
+        return relative.getLocalPoint(this);
     }
     static changeName(oldName, newName) {
         EventCreator.changeName(oldName, newName);
@@ -3592,7 +3662,7 @@ function positionType(defaultValue) {
         defineLeafAttr(target, key, defaultValue, {
             set(value) {
                 this.__setAttr(key, value);
-                this.__layout.positionChanged || this.__layout.positionChange();
+                this.__layout.matrixChanged || this.__layout.matrixChange();
             }
         });
     };
@@ -3624,7 +3694,7 @@ function boundsType(defaultValue) {
                 this.__setAttr(key, value);
                 this.__layout.boxChanged || this.__layout.boxChange();
                 if (this.__.around)
-                    this.__layout.positionChanged || this.__layout.positionChange();
+                    this.__layout.matrixChanged || this.__layout.matrixChange();
             }
         });
     };
@@ -3860,29 +3930,36 @@ PointerEvent.CLICK = 'click';
 PointerEvent.DOUBLE_CLICK = 'double_click';
 PointerEvent.LONG_PRESS = 'long_press';
 PointerEvent.LONG_TAP = 'long_tap';
+PointerEvent.MENU = 'pointer.menu';
 PointerEvent = __decorate([
     registerUIEvent()
 ], PointerEvent);
 
 const move = {};
 let DragEvent = class DragEvent extends PointerEvent {
-    getInnerMove(target, total) {
-        if (!target)
-            target = this.current;
+    static setList(data) {
+        this.list = data instanceof LeafList ? data : new LeafList(data);
+    }
+    static setData(data) {
+        this.data = data;
+    }
+    getInnerMove(relative, total) {
+        if (!relative)
+            relative = this.current;
         this.assignMove(total);
-        return target.getInnerPoint(move, null, true);
+        return relative.getInnerPoint(move, null, true);
     }
-    getLocalMove(target, total) {
-        if (!target)
-            target = this.current;
+    getLocalMove(relative, total) {
+        if (!relative)
+            relative = this.current;
         this.assignMove(total);
-        return target.getLocalPoint(move, null, true);
+        return relative.getLocalPoint(move, null, true);
     }
-    getInnerTotal(target) {
-        return this.getInnerMove(target, true);
+    getInnerTotal(relative) {
+        return this.getInnerMove(relative, true);
     }
-    getLocalTotal(target) {
-        return this.getLocalMove(target, true);
+    getLocalTotal(relative) {
+        return this.getLocalMove(relative, true);
     }
     assignMove(total) {
         move.x = total ? this.totalX : this.moveX;
@@ -3901,17 +3978,16 @@ DragEvent = __decorate([
     registerUIEvent()
 ], DragEvent);
 
-var DropEvent_1;
-let DropEvent = DropEvent_1 = class DropEvent extends PointerEvent {
+let DropEvent = class DropEvent extends PointerEvent {
     static setList(data) {
-        DropEvent_1.dragList = data instanceof LeafList ? data : new LeafList(data);
+        DragEvent.setList(data);
     }
     static setData(data) {
-        this.dragData = data;
+        DragEvent.setData(data);
     }
 };
 DropEvent.DROP = 'drop';
-DropEvent = DropEvent_1 = __decorate([
+DropEvent = __decorate([
     registerUIEvent()
 ], DropEvent);
 
@@ -4018,7 +4094,6 @@ class Transformer {
         this.moveEnd();
         this.zoomEnd();
         this.rotateEnd();
-        this.transformMode = null;
     }
     moveEnd() {
         if (this.moveData) {
@@ -4043,7 +4118,7 @@ class Transformer {
     }
 }
 
-const { copy: copy$5, translate: translate$2, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter } = MatrixHelper;
+const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter } = MatrixHelper;
 const matrix = {};
 const LeafHelper = {
     updateAllWorldMatrix(leaf) {
@@ -4086,63 +4161,41 @@ const LeafHelper = {
         return true;
     },
     moveWorld(t, x, y) {
-        t.__layout.checkUpdate();
         const local = { x, y };
         if (t.parent)
-            toInnerPoint$1(t.parent.__world, local, local, true);
+            toInnerPoint$1(t.parent.worldTransform, local, local, true);
         L.moveLocal(t, local.x, local.y);
     },
     moveLocal(t, x, y = 0) {
         t.x += x;
         t.y += y;
     },
-    zoomOfWorld(t, origin, scaleX, scaleY, moveLayer) {
-        t.__layout.checkUpdate();
-        const local = t.parent ? PointHelper.tempToInnerOf(origin, t.parent.__world) : origin;
-        this.zoomOfLocal(t, local, scaleX, scaleY, moveLayer);
+    zoomOfWorld(t, origin, scaleX, scaleY) {
+        this.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY);
     },
-    zoomOfLocal(t, origin, scaleX, scaleY = scaleX, moveLayer) {
+    zoomOfLocal(t, origin, scaleX, scaleY = scaleX) {
         copy$5(matrix, t.__local);
-        if (moveLayer)
-            translate$2(matrix, moveLayer.x, moveLayer.y);
         scaleOfOuter$3(matrix, origin, scaleX, scaleY);
-        if (!moveLayer)
-            moveLayer = t;
-        moveLayer.x += matrix.e - t.__local.e;
-        moveLayer.y += matrix.f - t.__local.f;
+        moveByMatrix(t, matrix);
         t.scaleX *= scaleX;
         t.scaleY *= scaleY;
     },
-    rotateOfWorld(t, origin, angle, moveLayer) {
-        t.__layout.checkUpdate();
-        const local = t.parent ? PointHelper.tempToInnerOf(origin, t.parent.__world) : origin;
-        this.rotateOfLocal(t, local, angle, moveLayer);
+    rotateOfWorld(t, origin, angle) {
+        this.rotateOfLocal(t, getTempLocal(t, origin), angle);
     },
-    rotateOfLocal(t, origin, angle, moveLayer) {
+    rotateOfLocal(t, origin, angle) {
         copy$5(matrix, t.__local);
-        if (moveLayer)
-            translate$2(matrix, moveLayer.x, moveLayer.y);
         rotateOfOuter$3(matrix, origin, angle);
-        if (!moveLayer)
-            moveLayer = t;
-        moveLayer.x += matrix.e - t.__local.e;
-        moveLayer.y += matrix.f - t.__local.f;
+        moveByMatrix(t, matrix);
         t.rotation = MathHelper.formatRotation(t.rotation + angle);
     },
-    skewOfWorld(t, origin, skewX, skewY, moveLayer) {
-        t.__layout.checkUpdate();
-        const local = t.parent ? PointHelper.tempToInnerOf(origin, t.parent.__world) : origin;
-        this.skewOfLocal(t, local, skewX, skewY, moveLayer);
+    skewOfWorld(t, origin, skewX, skewY) {
+        this.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY);
     },
-    skewOfLocal(t, origin, skewX, skewY, moveLayer) {
+    skewOfLocal(t, origin, skewX, skewY) {
         copy$5(matrix, t.__local);
-        if (moveLayer)
-            translate$2(matrix, moveLayer.x, moveLayer.y);
         skewOfOuter(matrix, origin, skewX, skewY);
-        if (!moveLayer)
-            moveLayer = t;
-        moveLayer.x = matrix.e - t.__local.e;
-        moveLayer.y = matrix.f - t.__local.f;
+        moveByMatrix(t, matrix);
         t.skewX = MathHelper.formatSkew(t.skewX + skewX);
         t.skewY = MathHelper.formatSkew(t.skewY + skewY);
     },
@@ -4152,10 +4205,29 @@ const LeafHelper = {
         parent.worldToInner(position);
         t.set(position);
         parent.add(t);
+    },
+    hasParent(t, parent) {
+        if (!parent)
+            return false;
+        let p = t;
+        while (p) {
+            if (parent === p)
+                return true;
+            p = p.parent;
+        }
+        return false;
     }
 };
 const L = LeafHelper;
 const { updateAllWorldMatrix: updateAllWorldMatrix$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;
+}
+function getTempLocal(t, world) {
+    t.__layout.checkUpdate();
+    return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
+}
 
 const LeafBoundsHelper = {
     worldBounds(target) {
@@ -4317,7 +4389,8 @@ const InteractionHelper = {
 };
 const I = InteractionHelper;
 
-const { getDragEventData, getDropEventData, getSwipeEventData, filterPathByEventType } = InteractionHelper;
+const emptyList = new LeafList();
+const { getDragEventData, getDropEventData, getSwipeEventData } = InteractionHelper;
 class Dragger {
     constructor(interaction) {
         this.interaction = interaction;
@@ -4325,8 +4398,8 @@ class Dragger {
     setDragData(data) {
         this.dragData = getDragEventData(data, data, data);
     }
-    getDragList() {
-        return this.dragging ? DropEvent.dragList || this.dragList : null;
+    getList() {
+        return this.dragging ? (DragEvent.list || this.interaction.selector.list || this.dragableList || emptyList) : emptyList;
     }
     checkDrag(data, canDrag) {
         const { interaction } = this;
@@ -4355,7 +4428,7 @@ class Dragger {
             interaction.emit(MoveEvent.MOVE, this.dragData);
         }
         else if (this.dragging) {
-            this.dragDragableList();
+            this.realDrag();
             interaction.emit(DragEvent.BEFORE_DRAG, this.dragData);
             interaction.emit(DragEvent.DRAG, this.dragData);
         }
@@ -4366,9 +4439,6 @@ class Dragger {
             if (this.dragging) {
                 this.interaction.emit(DragEvent.START, this.dragData);
                 this.getDragableList(this.dragData.path);
-                this.dragList = filterPathByEventType(this.dragData.path, DragEvent.DRAG);
-                if (!this.dragList.length && this.dragableList)
-                    this.dragList.pushList(this.dragableList);
             }
         }
     }
@@ -4377,16 +4447,17 @@ class Dragger {
         for (let i = 0, len = path.length; i < len; i++) {
             leaf = path.list[i];
             if (leaf.__.draggable && leaf.__.hitSelf) {
-                this.dragableList = [leaf];
+                this.dragableList = new LeafList(leaf);
                 break;
             }
         }
     }
-    dragDragableList() {
+    realDrag() {
         const { running } = this.interaction;
-        if (this.dragableList && running) {
+        const list = this.getList();
+        if (list.length && running) {
             const { moveX, moveY } = this.dragData;
-            this.dragableList.forEach(leaf => {
+            list.forEach(leaf => {
                 LeafHelper.moveWorld(leaf, moveX, moveY);
             });
         }
@@ -4443,20 +4514,14 @@ class Dragger {
         }
     }
     drop(data) {
-        const dropData = getDropEventData(data, this.getDragList(), DropEvent.dragData);
+        const dropData = getDropEventData(data, this.getList(), DragEvent.data);
         dropData.path = this.dragEnterPath;
         this.interaction.emit(DropEvent.DROP, dropData);
         this.interaction.emit(DragEvent.LEAVE, data, this.dragEnterPath);
     }
     dragReset() {
-        DropEvent.dragList = null;
-        this.dragList = null;
-        this.dragableList = null;
-        this.dragData = null;
-        this.dragOverPath = null;
-        this.dragEnterPath = null;
-        this.dragging = null;
-        this.moving = null;
+        DragEvent.list = DragEvent.data = this.dragableList = this.dragData = this.dragOverPath = this.dragEnterPath = null;
+        this.dragging = this.moving = false;
     }
     checkDragOut(data) {
         const { interaction } = this;
@@ -4692,6 +4757,10 @@ class InteractionBase {
         this.zoom(getZoomEventData$1(center, scale, data));
         this.move(getMoveEventData$1(center, move, data));
     }
+    menu(data) {
+        this.findPath(data);
+        this.emit(PointerEvent.MENU, data);
+    }
     move(data) {
         this.transformer.move(data);
     }
@@ -4801,6 +4870,9 @@ class InteractionBase {
         data.path = find.path;
         return find.path;
     }
+    isDrag(leaf) {
+        return this.dragger.getList().has(leaf);
+    }
     updateDownData(data) {
         if (!data)
             data = this.downData;
@@ -4814,7 +4886,7 @@ class InteractionBase {
             data = this.hoverData;
         if (!data)
             return;
-        this.findPath(data, { exclude: this.dragger.getDragList(), name: PointerEvent.MOVE });
+        this.findPath(data, { exclude: this.dragger.getList(), name: PointerEvent.MOVE });
         this.hoverData = data;
     }
     updateCursor(data) {
@@ -4934,7 +5006,7 @@ class LeafLayout {
         this.renderBounds = this.strokeBounds = this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
         this.localRenderBounds = this.localStrokeBounds = leaf.__local;
         this.boxChange();
-        this.positionChange();
+        this.matrixChange();
     }
     checkUpdate(force) {
         const { leafer } = this.leaf;
@@ -5061,11 +5133,6 @@ class LeafLayout {
         this.renderSpread || (this.renderSpread = 1);
         this.boundsChanged = true;
     }
-    positionChange() {
-        this.positionChanged = true;
-        this.matrixChanged = true;
-        this.localBoxChanged || this.localBoxChange();
-    }
     scaleChange() {
         this.scaleChanged = true;
         this._scaleOrRotationChange();
@@ -5077,6 +5144,9 @@ class LeafLayout {
     }
     _scaleOrRotationChange() {
         this.affectScaleOrRotation = true;
+        this.matrixChange();
+    }
+    matrixChange() {
         this.matrixChanged = true;
         this.localBoxChanged || this.localBoxChange();
     }
@@ -5219,10 +5289,13 @@ function __getListenerMap(eventer, capture, create) {
 const LeafDataProxy = {
     __setAttr(name, newValue) {
         if (this.leafer && this.leafer.created) {
-            if (typeof newValue === 'object' || this.__.__getInput(name) !== newValue) {
+            const oldValue = this.__.__getInput(name);
+            if (typeof newValue === 'object' || oldValue !== newValue) {
                 this.__[name] = newValue;
+                if (this.proxyData)
+                    this.setProxyAttr(name, newValue);
                 const { CHANGE } = PropertyEvent;
-                const event = new PropertyEvent(CHANGE, this, name, this.__.__get(name), newValue);
+                const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
                 if (this.hasEvent(CHANGE) && !this.isLeafer)
                     this.emitEvent(event);
                 this.leafer.emitEvent(event);
@@ -5230,10 +5303,21 @@ const LeafDataProxy = {
         }
         else {
             this.__[name] = newValue;
+            if (this.proxyData)
+                this.setProxyAttr(name, newValue);
         }
     },
     __getAttr(name) {
+        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];
     }
 };
 
@@ -5313,17 +5397,17 @@ const LeafMatrix = {
                 }
             }
         }
-        if (layout.positionChanged) {
-            r.e = this.__.x;
-            r.f = this.__.y;
-            const { width, height, around } = this.__;
-            if (around && width && height) {
+        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;
             }
-            layout.positionChanged = false;
         }
         this.__layout.matrixChanged = false;
     }
@@ -5418,7 +5502,7 @@ const LeafBounds = {
         data.__naturalWidth = layout.boxBounds.width;
         data.__naturalHeight = layout.boxBounds.height;
         if (this.around) {
-            layout.positionChanged = layout.matrixChanged = true;
+            layout.matrixChanged = true;
             this.__updateWorldMatrix();
         }
     },
@@ -5443,6 +5527,10 @@ const LeafHit = {
             setRadius(point, this.__.hitRadius);
         }
         toInnerRadiusPointOf(point, this.__world, inner);
+        if (this.__.hitBox) {
+            if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner))
+                return true;
+        }
         return this.__hit(inner);
     },
     __drawHitPath(canvas) {
@@ -5486,12 +5574,21 @@ const LeafMask = {
     __updateMask(value) {
         this.__hasMask = value ? true : this.children.some(item => item.__.isMask);
     },
-    __renderMask(canvas, content, mask) {
+    __renderMask(canvas, content, mask, recycle) {
+        content.opacity = 1;
         content.resetTransform();
         content.useMask(mask);
-        canvas.resetTransform();
         canvas.opacity = this.__worldOpacity;
+        canvas.resetTransform();
         canvas.copyWorld(content);
+        if (recycle) {
+            content.recycle();
+            mask.recycle();
+        }
+        else {
+            content.clear();
+            mask.clear();
+        }
     },
     __removeMask(child) {
         if (child) {
@@ -5546,15 +5643,13 @@ const BranchRender = {
         const { children } = this;
         if (this.__hasMask && children.length > 1) {
             let mask;
-            let maskCanvas = canvas.getSameCanvas();
-            let contentCanvas = canvas.getSameCanvas();
+            const maskCanvas = canvas.getSameCanvas();
+            const contentCanvas = canvas.getSameCanvas();
             for (let i = 0, len = children.length; i < len; i++) {
                 child = children[i];
                 if (child.isMask) {
                     if (mask) {
                         this.__renderMask(canvas, contentCanvas, maskCanvas);
-                        maskCanvas.clear();
-                        contentCanvas.clear();
                     }
                     else {
                         mask = true;
@@ -5562,11 +5657,9 @@ const BranchRender = {
                     child.__render(maskCanvas, options);
                     continue;
                 }
-                child.__render(contentCanvas, options);
+                child.__render(mask ? contentCanvas : canvas, options);
             }
-            this.__renderMask(canvas, contentCanvas, maskCanvas);
-            maskCanvas.recycle();
-            contentCanvas.recycle();
+            this.__renderMask(canvas, contentCanvas, maskCanvas, true);
         }
         else {
             const { bounds, hideBounds } = options;
@@ -5606,11 +5699,16 @@ let Leaf = class Leaf {
     get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
     constructor(data) {
         this.innerId = create(LEAF);
+        this.reset(data);
+    }
+    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 };
         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);
@@ -5620,6 +5718,10 @@ let Leaf = class Leaf {
             }
         }
     }
+    resetCustom() {
+        this.__hasMask = this.__hasEraser = null;
+        this.forceUpdate();
+    }
     waitParent(item) {
         this.parent ? item() : (this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]);
     }
@@ -5634,8 +5736,11 @@ let Leaf = class Leaf {
             if (leafer !== null)
                 leafer = this;
         }
+        if (this.leafer && !leafer)
+            this.leafer.leafs--;
         this.leafer = leafer;
         if (leafer) {
+            leafer.leafs++;
             this.__level = this.parent ? this.parent.__level + 1 : 1;
             if (this.__leaferWait)
                 WaitHelper.run(this.__leaferWait);
@@ -5648,6 +5753,7 @@ let Leaf = class Leaf {
         }
     }
     set(_data) { }
+    get(_options) { return undefined; }
     toJSON() {
         return this.__.__getInputData();
     }
@@ -5656,9 +5762,13 @@ let Leaf = class Leaf {
     }
     __setAttr(_attrName, _newValue) { }
     __getAttr(_attrName) { return undefined; }
+    setProxyAttr(_attrName, _newValue) { }
+    getProxyAttr(_attrName) { return undefined; }
+    find(_condition) { return undefined; }
+    findOne(_condition) { return undefined; }
     forceUpdate(attrName) {
         if (attrName === undefined)
-            attrName = 'scaleX';
+            attrName = 'width';
         else if (attrName === 'surface')
             attrName = 'blendMode';
         const value = this.__.__getInput(attrName);
@@ -5680,7 +5790,7 @@ let Leaf = class Leaf {
     __onUpdateSize() { }
     __updateEraser(_value) { }
     __updateMask(_value) { }
-    __renderMask(_canvas, _content, _mask) { }
+    __renderMask(_canvas, _content, _mask, _recycle) { }
     __removeMask(_child) { }
     getWorld(attrName) {
         this.__layout.checkUpdate();
@@ -5865,7 +5975,7 @@ let Branch = class Branch extends Leaf {
         index === undefined ? this.children.push(child) : this.children.splice(index, 0, child);
         if (child.isBranch)
             this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
-        child.__layout.boundsChanged || child.__layout.positionChange();
+        child.__layout.boundsChanged || child.__layout.matrixChange();
         if (child.__parentWait)
             WaitHelper.run(child.__parentWait);
         if (this.leafer) {
@@ -6084,7 +6194,7 @@ function updateMatrix(updateList, levelList) {
     let layout;
     updateList.list.forEach(leaf => {
         layout = leaf.__layout;
-        if (levelList.without(leaf) && !layout.useZoomProxy) {
+        if (levelList.without(leaf) && !layout.proxyZoom) {
             if (layout.matrixChanged) {
                 updateAllWorldMatrix$1(leaf);
                 levelList.push(leaf);
@@ -6403,8 +6513,7 @@ class Renderer {
         const { canvas, updateBlocks: list } = this;
         if (!list)
             return debug$4.warn('PartRender: need update attr');
-        if (list.some(block => block.includes(this.target.__world)))
-            this.mergeBlocks();
+        this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
     }
@@ -6423,7 +6532,7 @@ class Renderer {
             canvas.clearWorld(bounds, true);
             canvas.clipWorld(bounds, true);
         }
-        this.__render(bounds, realBounds);
+        this.__render(bounds, includes, realBounds);
         canvas.restore();
         Run.end(t);
     }
@@ -6432,12 +6541,12 @@ class Renderer {
         const { canvas } = this;
         canvas.save();
         canvas.clear();
-        this.__render(canvas.bounds);
+        this.__render(canvas.bounds, true);
         canvas.restore();
         Run.end(t);
     }
-    __render(bounds, realBounds) {
-        const options = (bounds === null || bounds === void 0 ? void 0 : bounds.includes(this.target.__world)) ? {} : { bounds };
+    __render(bounds, includes, realBounds) {
+        const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
         if (this.needFill)
             this.canvas.fillWorld(bounds, this.config.fill);
         if (Debug.showRepaint)
@@ -6538,7 +6647,7 @@ class Renderer {
 }
 
 const { hitRadiusPoint } = BoundsHelper;
-class FindPath {
+class Pather {
     constructor(target, selector) {
         this.target = target;
         this.selector = selector;
@@ -6658,117 +6767,108 @@ class FindPath {
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
-        this.innerIdList = {};
-        this.idList = {};
-        this.classNameList = {};
-        this.tagNameList = {};
+        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,
+            className: (leaf, name) => leaf.className === name ? 1 : 0,
+            tag: (leaf, name) => leaf.__tag === name ? 1 : 0
+        };
         this.target = target;
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
-        this.findPath = new FindPath(target, this);
+        this.pather = new Pather(target, this);
         this.__listenEvents();
     }
     getByPoint(hitPoint, hitRadius, options) {
         if (Platform.name === 'node')
             this.target.emit(LayoutEvent.CHECK_UPDATE);
-        return this.findPath.getByPoint(hitPoint, hitRadius, options);
-    }
-    find(name, branch) {
-        if (typeof name === 'number') {
-            return this.getByInnerId(name, branch);
-        }
-        else if (name.startsWith('#')) {
-            return this.getById(name.substring(1), branch);
-        }
-        else if (name.startsWith('.')) {
-            return this.getByClassName(name.substring(1), branch);
-        }
-        else {
-            return this.getByTagName(name, branch);
+        return this.pather.getByPoint(hitPoint, hitRadius, options);
+    }
+    getBy(condition, branch, one, options) {
+        switch (typeof condition) {
+            case 'number':
+                const leaf = this.getByInnerId(condition, branch);
+                return one ? leaf : (leaf ? [leaf] : []);
+            case 'string':
+                switch (condition[0]) {
+                    case '#':
+                        const leaf = this.getById(condition.substring(1), branch);
+                        return one ? leaf : (leaf ? [leaf] : []);
+                    case '.':
+                        return this.getByMethod(this.methods.className, branch, one, condition.substring(1));
+                    default:
+                        return this.getByMethod(this.methods.tag, branch, one, condition);
+                }
+            case 'function':
+                return this.getByMethod(condition, branch, one, options);
         }
     }
-    getByInnerId(name, branch) {
-        let cache = this.innerIdList[name];
+    getByInnerId(innerId, branch) {
+        const cache = this.innerIdMap[innerId];
         if (cache)
             return cache;
-        if (!branch)
-            branch = this.target;
-        let find;
-        this.loopFind(branch, (leaf) => {
-            if (leaf.innerId === name) {
-                find = leaf;
-                this.innerIdList[name] = find;
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        return find;
+        this.eachFind(this.toChildren(branch), this.methods.innerId, null, innerId);
+        return this.findLeaf;
     }
-    getById(name, branch) {
-        let cache = this.idList[name];
-        if (cache)
+    getById(id, branch) {
+        const cache = this.idMap[id];
+        if (cache && LeafHelper.hasParent(cache, branch || this.target))
             return cache;
-        if (!branch)
-            branch = this.target;
-        let find;
-        this.loopFind(branch, (leaf) => {
-            if (leaf.id === name) {
-                find = leaf;
-                this.idList[name] = find;
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        return find;
+        this.eachFind(this.toChildren(branch), this.methods.id, null, id);
+        return this.findLeaf;
     }
-    getByClassName(name, branch) {
-        if (!branch)
-            branch = this.target;
-        let find = [];
-        this.loopFind(branch, (leaf) => {
-            if (leaf.className === name)
-                find.push(leaf);
-            return false;
-        });
-        return find;
+    getByClassName(className, branch) {
+        return this.getByMethod(this.methods.className, branch, false, className);
     }
-    getByTagName(name, branch) {
-        if (!branch)
-            branch = this.target;
-        let find = [];
-        this.loopFind(branch, (leaf) => {
-            if (leaf.__tag === name)
-                find.push(leaf);
-            return false;
-        });
-        return find;
+    getByTag(tag, branch) {
+        return this.getByMethod(this.methods.tag, branch, false, tag);
     }
-    loopFind(branch, find) {
-        if (find(branch))
-            return;
-        const { children } = branch;
+    getByMethod(method, branch, one, options) {
+        const list = one ? null : [];
+        this.eachFind(this.toChildren(branch), method, list, options);
+        return list || this.findLeaf;
+    }
+    eachFind(children, method, list, options) {
+        let child;
         for (let i = 0, len = children.length; i < len; i++) {
-            branch = children[i];
-            if (find(branch))
-                return;
-            if (branch.isBranch)
-                this.loopFind(branch, find);
+            child = children[i];
+            if (method(child, options)) {
+                if (list) {
+                    list.push(child);
+                }
+                else {
+                    this.findLeaf = child;
+                    return;
+                }
+            }
+            if (child.isBranch)
+                this.eachFind(child.children, method, list, options);
         }
     }
+    toChildren(branch) {
+        this.findLeaf = null;
+        return [branch || this.target];
+    }
     __onRemoveChild(event) {
-        const target = event.target;
-        if (this.idList[target.id])
-            this.idList[target.id] = null;
-        if (this.innerIdList[target.id])
-            this.innerIdList[target.innerId] = null;
+        const { id, innerId } = event.child;
+        if (this.idMap[id])
+            delete this.idMap[id];
+        if (this.innerIdMap[innerId])
+            delete this.innerIdMap[innerId];
+    }
+    __checkIdChange(event) {
+        if (event.attrName === 'id') {
+            const id = event.oldValue;
+            if (this.idMap[id])
+                delete this.idMap[id];
+        }
     }
     __listenEvents() {
         this.__eventIds = [
-            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this)
+            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this),
+            this.target.on_(PropertyEvent.CHANGE, this.__checkIdChange, this)
         ];
     }
     __removeListenEvents() {
@@ -6778,11 +6878,10 @@ class Selector {
     destroy() {
         if (this.__eventIds.length) {
             this.__removeListenEvents();
-            this.findPath.destroy();
-            this.innerIdList = {};
-            this.idList = {};
-            this.classNameList = {};
-            this.tagNameList = {};
+            this.pather.destroy();
+            this.findLeaf = null;
+            this.innerIdMap = {};
+            this.idMap = {};
         }
     }
 }
@@ -7004,7 +7103,7 @@ const WheelEventHelper = {
         let { zoomMode, zoomSpeed } = config;
         const delta = e.deltaY || e.deltaX;
         if (zoomMode) {
-            zoom = !e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta);
+            zoom = (zoomMode === 'mouse') ? true : (!e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta));
             if (e.shiftKey || e.metaKey || e.ctrlKey)
                 zoom = true;
         }
@@ -7041,6 +7140,7 @@ class Interaction extends InteractionBase {
             'pointerdown': this.onPointerDown,
             'mousedown': this.onMouseDown,
             'touchstart': this.onTouchStart,
+            'contextmenu': this.onContextMenu,
             'wheel': this.onWheel,
             'gesturestart': this.onGesturestart,
             'gesturechange': this.onGesturechange,
@@ -7113,6 +7213,9 @@ class Interaction extends InteractionBase {
     onKeyUp(e) {
         this.keyUp(KeyEventHelper.convert(e));
     }
+    onContextMenu(e) {
+        this.menu(PointerEventHelper.convert(e, this.getLocal(e)));
+    }
     onScroll() {
         this.canvas.updateClientBounds();
     }
@@ -7317,6 +7420,11 @@ function useCanvas(_canvasType, _power) {
             });
         }
     };
+    Platform.event = {
+        stopDefault(origin) { origin.preventDefault(); },
+        stopNow(origin) { origin.stopImmediatePropagation(); },
+        stop(origin) { origin.stopPropagation(); }
+    };
     Platform.canvas = Creator.canvas();
     Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
 }
@@ -7353,7 +7461,7 @@ function draw(leafer) {
 function design(leafer) {
     if (leafer.isApp)
         return;
-    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.moveLayer, e.moveX, e.moveY); }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
+    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;
         let { scale } = e;
         if (scale * Math.abs(scaleX) < min)
@@ -7434,6 +7542,8 @@ class UIData extends LeafData {
                 this.__removeInput('fill');
                 Paint.recycleImage('fill', this);
                 this.__isFills = false;
+                if (this.__pixelFill)
+                    this.__pixelFill = false;
             }
             this._fill = value;
         }
@@ -7450,6 +7560,8 @@ class UIData extends LeafData {
                 this.__removeInput('stroke');
                 Paint.recycleImage('stroke', this);
                 this.__isStrokes = false;
+                if (this.__pixelStroke)
+                    this.__pixelStroke = false;
             }
             this._stroke = value;
         }
@@ -7747,9 +7859,9 @@ const UIRender = {
         const { fill, stroke } = this.__;
         this.__drawRenderPath(canvas);
         if (fill)
-            Paint.fill('#000000', this, canvas);
+            this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
         if (stroke)
-            Paint.stroke('#000000', this, canvas, renderOptions);
+            this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas, renderOptions) : Paint.stroke('#000000', this, canvas, renderOptions);
     }
 };
 
@@ -7796,14 +7908,19 @@ 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() {
-        return this.__.__getInputData();
+    get(options) {
+        return this.__.__getInputData(options);
+    }
+    getProxyData() { return undefined; }
+    find(condition) {
+        return this.leafer ? this.leafer.selector.getBy(condition, this) : [];
+    }
+    findOne(condition) {
+        return this.leafer ? this.leafer.selector.getBy(condition, this, true) : null;
     }
     getPath(curve) {
         const path = this.__.path;
@@ -7927,6 +8044,9 @@ __decorate([
 __decorate([
     strokeType('path')
 ], UI.prototype, "hitStroke", void 0);
+__decorate([
+    hitType(false)
+], UI.prototype, "hitBox", void 0);
 __decorate([
     hitType(true)
 ], UI.prototype, "hitChildren", void 0);
@@ -7987,6 +8107,9 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "grayscale", void 0);
+__decorate([
+    rewrite(Leaf.prototype.reset)
+], UI.prototype, "reset", null);
 __decorate([
     rewrite(PathDrawer.drawPathByData)
 ], UI.prototype, "__drawPathByData", null);
@@ -8024,8 +8147,12 @@ let Group = class Group extends UI {
         if (data.children) {
             const { children } = data;
             delete data.children;
-            if (!this.children)
+            if (!this.children) {
                 this.__setBranch();
+            }
+            else {
+                this.removeAll(true);
+            }
             super.set(data);
             let child;
             children.forEach(childData => {
@@ -8226,8 +8353,10 @@ let Ellipse = class Ellipse extends UI {
                     ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
                     moveTo$3(path, width, ry);
                 }
-                ellipse(path, rx, ry, rx, ry, 0, 0, 360, true);
+                ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
             }
+            if (Platform.ellipseToCurve)
+                this.__.path = PathConvert.toCanvasData(path, true);
         }
         else {
             if (startAngle || endAngle) {
@@ -8537,7 +8666,7 @@ Canvas = __decorate([
     registerUI()
 ], Canvas);
 
-const { copyAndSpread, includes, spread } = BoundsHelper;
+const { copyAndSpread, includes, spread, setByList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
     get textDrawData() {
@@ -8571,18 +8700,19 @@ let Text = class Text extends UI {
     __updateBoxBounds() {
         const data = this.__;
         const layout = this.__layout;
-        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase } = data;
+        const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow } = data;
+        const width = data.__getInput('width');
+        const height = data.__getInput('height');
         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);
         this.__updateTextDrawData();
         const { bounds } = data.__textDrawData;
         const b = layout.boxBounds;
         if (data.__lineHeight < fontSize)
             spread(bounds, fontSize / 2);
-        const width = data.__getInput('width');
-        const height = data.__getInput('height');
         if (width && height) {
             super.__updateBoxBounds();
         }
@@ -8597,6 +8727,10 @@ let Text = class Text extends UI {
         if (contentBounds !== layout.contentBounds) {
             layout.contentBounds = contentBounds;
             layout.renderChanged = true;
+            setByList(data.__textBoxBounds = {}, [b, bounds]);
+        }
+        else {
+            data.__textBoxBounds = contentBounds;
         }
     }
     __updateRenderSpread() {
@@ -8606,7 +8740,7 @@ let Text = class Text extends UI {
         return width;
     }
     __updateRenderBounds() {
-        copyAndSpread(this.__layout.renderBounds, this.__layout.contentBounds, this.__layout.renderSpread);
+        copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
     }
 };
 __decorate([
@@ -8624,6 +8758,9 @@ __decorate([
 __decorate([
     affectStrokeBoundsType('outside')
 ], Text.prototype, "strokeAlign", void 0);
+__decorate([
+    hitType('all')
+], Text.prototype, "hitFill", void 0);
 __decorate([
     boundsType('')
 ], Text.prototype, "text", void 0);
@@ -8663,6 +8800,9 @@ __decorate([
 __decorate([
     boundsType('top')
 ], Text.prototype, "verticalAlign", void 0);
+__decorate([
+    boundsType('normal')
+], Text.prototype, "textWrap", void 0);
 __decorate([
     boundsType('show')
 ], Text.prototype, "textOverflow", void 0);
@@ -8748,10 +8888,10 @@ let Leafer = class Leafer extends Group {
     get __tag() { return 'Leafer'; }
     get isApp() { return false; }
     get app() { return this.parent || this; }
+    get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
     constructor(userConfig, data) {
         super(data);
         this.zoomLayer = this;
-        this.moveLayer = this;
         this.config = {
             type: 'design',
             start: true,
@@ -8767,6 +8907,7 @@ let Leafer = class Leafer extends Group {
                 autoDistance: 2
             }
         };
+        this.leafs = 0;
         this.__eventIds = [];
         this.__controllers = [];
         this.__readyWait = [];
@@ -8880,9 +9021,8 @@ let Leafer = class Leafer extends Group {
         this.isLeafer = !!leafer;
         this.__level = 1;
     }
-    setZoomLayer(zoomLayer, moveLayer) {
+    setZoomLayer(zoomLayer) {
         this.zoomLayer = zoomLayer;
-        this.moveLayer = moveLayer || zoomLayer;
     }
     __checkAutoLayout(config) {
         if (!config.width || !config.height) {
@@ -9390,10 +9530,14 @@ function checkImage(ui, canvas, paint, allowPaint) {
                 createPattern(ui, paint, canvas.pixelRatio);
             }
             else {
-                ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                    if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
+                if (!paint.patternTask) {
+                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                        paint.patternTask = null;
+                        if (canvas.bounds.hit(ui.__world))
+                            createPattern(ui, paint, canvas.pixelRatio);
                         ui.forceUpdate('surface');
-                }), 300);
+                    }), 300);
+                }
             }
             return false;
         }
@@ -9757,17 +9901,30 @@ function conicGradient(paint, box) {
 let recycleMap;
 function compute(attrName, ui) {
     const value = [];
+    const data = ui.__;
     let item;
-    let paints = ui.__.__input[attrName];
+    let paints = data.__input[attrName];
     if (!(paints instanceof Array))
         paints = [paints];
-    recycleMap = recycleImage(attrName, ui.__);
+    recycleMap = recycleImage(attrName, data);
     for (let i = 0, len = paints.length; i < len; i++) {
         item = getLeafPaint(attrName, paints[i], ui);
         if (item)
             value.push(item);
     }
-    ui.__['_' + attrName] = value.length ? value : undefined;
+    data['_' + attrName] = value.length ? value : undefined;
+    let isPixel;
+    if (paints.length === 1) {
+        const paint = paints[0];
+        if (paint.type === 'image')
+            isPixel = ImageManager.isPixel(paint);
+    }
+    if (attrName === 'fill') {
+        data.__pixelFill = isPixel;
+    }
+    else {
+        data.__pixelStroke = isPixel;
+    }
 }
 function getLeafPaint(attrName, paint, ui) {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
@@ -10042,6 +10199,8 @@ function createRows(drawData, content, style) {
     const { width, height } = bounds;
     const charMode = width || height || __letterSpacing || (textCase !== 'none');
     if (charMode) {
+        const wrap = style.textWrap !== 'none';
+        const breakAll = style.textWrap === 'break';
         paraStart = true;
         lastCharType = null;
         startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
@@ -10068,16 +10227,23 @@ function createRows(drawData, content, style) {
                 langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After);
                 afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After));
                 realWidth = paraStart && paraIndent ? width - paraIndent : width;
-                if (width && rowWidth + wordWidth + charWidth > realWidth) {
-                    if (!afterBreak)
-                        afterBreak = charType === Letter && lastCharType == After;
-                    if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                if (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) {
+                    if (breakAll) {
                         if (wordWidth)
                             addWord();
                         addRow();
                     }
                     else {
-                        addRow();
+                        if (!afterBreak)
+                            afterBreak = charType === Letter && lastCharType == After;
+                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                            if (wordWidth)
+                                addWord();
+                            addRow();
+                        }
+                        else {
+                            addRow();
+                        }
                     }
                 }
                 if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
@@ -10147,7 +10313,7 @@ function addRow() {
 
 const CharMode = 0;
 const WordMode = 1;
-const RowMode = 2;
+const TextMode = 2;
 function layoutChar(drawData, style, width, _height) {
     const { rows } = drawData;
     const { textAlign, paraIndent, letterSpacing } = style;
@@ -10156,15 +10322,12 @@ function layoutChar(drawData, style, width, _height) {
         if (row.words) {
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
             addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
-            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : RowMode);
-            if (mode === RowMode) {
-                row.text = '';
+            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
+            if (row.isOverflow && !letterSpacing)
+                row.textMode = true;
+            if (mode === TextMode) {
                 row.x += indentWidth;
-                row.words.forEach(word => {
-                    word.data.forEach(char => {
-                        row.text += char.char;
-                    });
-                });
+                toTextChar$1(row);
             }
             else {
                 row.x += indentWidth;
@@ -10190,6 +10353,14 @@ function layoutChar(drawData, style, width, _height) {
         }
     });
 }
+function toTextChar$1(row) {
+    row.text = '';
+    row.words.forEach(word => {
+        word.data.forEach(char => {
+            row.text += char.char;
+        });
+    });
+}
 function toWordChar(data, charX, wordChar) {
     data.forEach(char => {
         wordChar.char += char.char;
@@ -10210,10 +10381,10 @@ function toChar(data, charX, rowData) {
 
 function layoutText(drawData, style) {
     const { rows, bounds } = drawData;
-    const { __lineHeight, __baseLine, __letterSpacing, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
-    if (textOverflow !== 'show' && realHeight > height) {
+    if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
         drawData.overflow = rows.length;
     }
@@ -10262,39 +10433,58 @@ function layoutText(drawData, style) {
             bounds.x = rowX;
         if (rowWidth > bounds.width)
             bounds.width = rowWidth;
+        if (__clipText && width && width < rowWidth) {
+            row.isOverflow = true;
+            if (!drawData.overflow)
+                drawData.overflow = rows.length;
+        }
     }
     bounds.y = y;
     bounds.height = realHeight;
 }
 
-function clipText(drawData, textOverflow) {
+function clipText(drawData, style) {
     const { rows, overflow } = drawData;
+    let { textOverflow } = style;
     rows.splice(overflow);
     if (textOverflow !== 'hide') {
         if (textOverflow === 'ellipsis')
             textOverflow = '...';
+        let char, charRight;
         const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
-        const row = rows[overflow - 1];
-        let char, end = row.data.length - 1, charRight;
-        const { x, width } = drawData.bounds;
-        const right = x + width - ellipsisWidth;
-        for (let i = end; i > -1; i--) {
-            char = row.data[i];
-            charRight = char.x + char.width;
-            if (i === end && charRight < right) {
-                break;
-            }
-            else if (charRight < right && char.char !== ' ') {
-                row.data.splice(i + 1);
-                row.width -= char.width;
-                break;
+        const right = style.x + style.width - ellipsisWidth;
+        const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
+        list.forEach(row => {
+            if (row.isOverflow && row.data) {
+                let end = row.data.length - 1;
+                for (let i = end; i > -1; i--) {
+                    char = row.data[i];
+                    charRight = char.x + char.width;
+                    if (i === end && charRight < right) {
+                        break;
+                    }
+                    else if (charRight < right && char.char !== ' ') {
+                        row.data.splice(i + 1);
+                        row.width -= char.width;
+                        break;
+                    }
+                    row.width -= char.width;
+                }
+                row.width += ellipsisWidth;
+                row.data.push({ char: textOverflow, x: charRight });
+                if (row.textMode)
+                    toTextChar(row);
             }
-            row.width -= char.width;
-        }
-        row.width += ellipsisWidth;
-        row.data.push({ char: textOverflow, x: charRight });
+        });
     }
 }
+function toTextChar(row) {
+    row.text = '';
+    row.data.forEach(char => {
+        row.text += char.char;
+    });
+    row.data = null;
+}
 
 function decorationText(drawData, style) {
     const { fontSize } = style;
@@ -10315,7 +10505,7 @@ const TextConvert = {
         let x = 0, y = 0;
         let width = style.__getInput('width') || 0;
         let height = style.__getInput('height') || 0;
-        const { textDecoration, textOverflow, __font, padding } = style;
+        const { textDecoration, __font, padding } = style;
         if (padding) {
             const [top, right, bottom, left] = MathHelper.fourNumber(padding);
             if (width) {
@@ -10337,7 +10527,7 @@ const TextConvert = {
         layoutText(drawData, style);
         layoutChar(drawData, style, width);
         if (drawData.overflow)
-            clipText(drawData, textOverflow);
+            clipText(drawData, style);
         if (textDecoration !== 'none')
             decorationText(drawData, style);
         return drawData;
@@ -10423,4 +10613,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, TransformEvent, 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, 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 };