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

package/dist/web.js

@@ -129,13 +129,13 @@ var LeaferUI = (function (exports) {
             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;
@@ -148,13 +148,13 @@ var LeaferUI = (function (exports) {
             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;
@@ -170,13 +170,13 @@ var LeaferUI = (function (exports) {
             }
         },
         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;
@@ -199,12 +199,12 @@ var LeaferUI = (function (exports) {
             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) {
@@ -267,10 +267,10 @@ var LeaferUI = (function (exports) {
             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;
@@ -590,9 +590,7 @@ var LeaferUI = (function (exports) {
             }
             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)
@@ -600,6 +598,12 @@ var LeaferUI = (function (exports) {
             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);
@@ -650,14 +654,14 @@ var LeaferUI = (function (exports) {
         },
         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) {
@@ -791,6 +795,10 @@ var LeaferUI = (function (exports) {
             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;
@@ -798,8 +806,8 @@ var LeaferUI = (function (exports) {
         getFitMatrix(put) {
             return BoundsHelper.getFitMatrix(this, put);
         }
-        spread(size) {
-            BoundsHelper.spread(this, size);
+        spread(spreadX, spreadY) {
+            BoundsHelper.spread(this, spreadX, spreadY);
             return this;
         }
         ceil() {
@@ -1343,14 +1351,22 @@ var LeaferUI = (function (exports) {
             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;
@@ -1381,6 +1397,8 @@ var LeaferUI = (function (exports) {
     }
 
     const FileHelper = {
+        opacityTypes: ['png', 'webp', 'svg'],
+        upperCaseTypeMap: {},
         mineType(type) {
             if (!type || type.startsWith('image'))
                 return type;
@@ -1393,6 +1411,7 @@ var LeaferUI = (function (exports) {
             return l[l.length - 1];
         }
     };
+    FileHelper.opacityTypes.forEach(type => FileHelper.upperCaseTypeMap[type] = type.toUpperCase());
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -2086,11 +2105,11 @@ var LeaferUI = (function (exports) {
     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;
@@ -2120,7 +2139,7 @@ var LeaferUI = (function (exports) {
                             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;
@@ -2130,11 +2149,11 @@ var LeaferUI = (function (exports) {
             }
             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;
@@ -2157,7 +2176,7 @@ var LeaferUI = (function (exports) {
                 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);
@@ -2210,7 +2229,7 @@ var LeaferUI = (function (exports) {
             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)
@@ -2225,7 +2244,7 @@ var LeaferUI = (function (exports) {
                 x2 = cx + x + control * (rotationCos * radiusX * endSin + rotationSin * radiusY * endCos);
                 y2 = cy + y + control * (rotationSin * radiusX * endSin - rotationCos * radiusY * endCos);
                 if (data)
-                    data.push(C$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;
@@ -2239,7 +2258,7 @@ var LeaferUI = (function (exports) {
                 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);
@@ -2333,7 +2352,7 @@ var LeaferUI = (function (exports) {
             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 {
@@ -2347,7 +2366,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    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');
@@ -2435,33 +2454,33 @@ var LeaferUI = (function (exports) {
                     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:
@@ -2471,14 +2490,14 @@ var LeaferUI = (function (exports) {
                         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:
@@ -2488,13 +2507,13 @@ var LeaferUI = (function (exports) {
                         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:
@@ -2534,8 +2553,8 @@ var LeaferUI = (function (exports) {
                         i += 8;
                         break;
                     case z:
-                    case Z$3:
-                        data.push(Z$3);
+                    case Z$4:
+                        data.push(Z$4);
                         i++;
                         break;
                     case N$3:
@@ -2580,7 +2599,7 @@ var LeaferUI = (function (exports) {
                         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;
@@ -2611,26 +2630,26 @@ var LeaferUI = (function (exports) {
     };
     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);
@@ -2672,7 +2691,7 @@ var LeaferUI = (function (exports) {
             }
         },
         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)
@@ -2682,7 +2701,7 @@ var LeaferUI = (function (exports) {
             if (endAngle === undefined)
                 endAngle = 360;
             BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise, null, null, startPoint);
-            data.push(M$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) {
@@ -2691,7 +2710,7 @@ var LeaferUI = (function (exports) {
             if (endAngle === undefined)
                 endAngle = 360;
             BezierHelper.arc(null, x, y, radius, startAngle, endAngle, anticlockwise, null, null, startPoint);
-            data.push(M$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) {
@@ -2768,7 +2787,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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) {
@@ -2779,15 +2798,15 @@ var LeaferUI = (function (exports) {
             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;
@@ -2795,7 +2814,7 @@ var LeaferUI = (function (exports) {
                         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;
@@ -2827,7 +2846,7 @@ var LeaferUI = (function (exports) {
                         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;
@@ -2839,7 +2858,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    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');
@@ -2861,7 +2880,7 @@ var LeaferUI = (function (exports) {
             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 {
@@ -2869,14 +2888,14 @@ var LeaferUI = (function (exports) {
                     }
                 }
                 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);
@@ -2896,7 +2915,7 @@ var LeaferUI = (function (exports) {
                         y = toY;
                         i += 5;
                         break;
-                    case Z:
+                    case Z$1:
                         i += 1;
                         break;
                     case N:
@@ -2943,7 +2962,7 @@ var LeaferUI = (function (exports) {
                         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;
@@ -2958,9 +2977,60 @@ var LeaferUI = (function (exports) {
         }
     };
 
+    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;
         }
     };
 
@@ -3012,9 +3082,7 @@ var LeaferUI = (function (exports) {
     }
 
     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;
         }
@@ -3070,8 +3138,10 @@ var LeaferUI = (function (exports) {
             else {
                 this.delayNumber++;
                 setTimeout(() => {
-                    this.delayNumber--;
-                    this.push(task, start);
+                    if (this.delayNumber) {
+                        this.delayNumber--;
+                        this.push(task, start);
+                    }
                 }, delay);
             }
             this.isComplete = false;
@@ -3088,6 +3158,7 @@ var LeaferUI = (function (exports) {
             this.parallelSuccessNumber = 0;
             this.list = [];
             this.parallelList = [];
+            this.delayNumber = 0;
         }
         start() {
             if (!this.running) {
@@ -3260,6 +3331,23 @@ var LeaferUI = (function (exports) {
                 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 = {};
         }
@@ -3275,17 +3363,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -3358,13 +3436,19 @@ var LeaferUI = (function (exports) {
         }
         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);
         }
     }
 
@@ -3426,20 +3510,6 @@ var LeaferUI = (function (exports) {
     }
     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);
@@ -3540,15 +3610,15 @@ var LeaferUI = (function (exports) {
             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);
@@ -3595,7 +3665,7 @@ var LeaferUI = (function (exports) {
             defineLeafAttr(target, key, defaultValue, {
                 set(value) {
                     this.__setAttr(key, value);
-                    this.__layout.positionChanged || this.__layout.positionChange();
+                    this.__layout.matrixChanged || this.__layout.matrixChange();
                 }
             });
         };
@@ -3627,7 +3697,7 @@ var LeaferUI = (function (exports) {
                     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();
                 }
             });
         };
@@ -3863,29 +3933,36 @@ var LeaferUI = (function (exports) {
     exports.PointerEvent.DOUBLE_CLICK = 'double_click';
     exports.PointerEvent.LONG_PRESS = 'long_press';
     exports.PointerEvent.LONG_TAP = 'long_tap';
+    exports.PointerEvent.MENU = 'pointer.menu';
     exports.PointerEvent = __decorate([
         registerUIEvent()
     ], exports.PointerEvent);
 
     const move = {};
     exports.DragEvent = class DragEvent extends exports.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;
@@ -3904,17 +3981,16 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.DragEvent);
 
-    var DropEvent_1;
-    exports.DropEvent = DropEvent_1 = class DropEvent extends exports.PointerEvent {
+    exports.DropEvent = class DropEvent extends exports.PointerEvent {
         static setList(data) {
-            DropEvent_1.dragList = data instanceof LeafList ? data : new LeafList(data);
+            exports.DragEvent.setList(data);
         }
         static setData(data) {
-            this.dragData = data;
+            exports.DragEvent.setData(data);
         }
     };
     exports.DropEvent.DROP = 'drop';
-    exports.DropEvent = DropEvent_1 = __decorate([
+    exports.DropEvent = __decorate([
         registerUIEvent()
     ], exports.DropEvent);
 
@@ -4021,7 +4097,6 @@ var LeaferUI = (function (exports) {
             this.moveEnd();
             this.zoomEnd();
             this.rotateEnd();
-            this.transformMode = null;
         }
         moveEnd() {
             if (this.moveData) {
@@ -4046,7 +4121,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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) {
@@ -4089,63 +4164,41 @@ var LeaferUI = (function (exports) {
             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);
         },
@@ -4155,10 +4208,29 @@ var LeaferUI = (function (exports) {
             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) {
@@ -4320,7 +4392,8 @@ var LeaferUI = (function (exports) {
     };
     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;
@@ -4328,8 +4401,8 @@ var LeaferUI = (function (exports) {
         setDragData(data) {
             this.dragData = getDragEventData(data, data, data);
         }
-        getDragList() {
-            return this.dragging ? exports.DropEvent.dragList || this.dragList : null;
+        getList() {
+            return this.dragging ? (exports.DragEvent.list || this.interaction.selector.list || this.dragableList || emptyList) : emptyList;
         }
         checkDrag(data, canDrag) {
             const { interaction } = this;
@@ -4358,7 +4431,7 @@ var LeaferUI = (function (exports) {
                 interaction.emit(exports.MoveEvent.MOVE, this.dragData);
             }
             else if (this.dragging) {
-                this.dragDragableList();
+                this.realDrag();
                 interaction.emit(exports.DragEvent.BEFORE_DRAG, this.dragData);
                 interaction.emit(exports.DragEvent.DRAG, this.dragData);
             }
@@ -4369,9 +4442,6 @@ var LeaferUI = (function (exports) {
                 if (this.dragging) {
                     this.interaction.emit(exports.DragEvent.START, this.dragData);
                     this.getDragableList(this.dragData.path);
-                    this.dragList = filterPathByEventType(this.dragData.path, exports.DragEvent.DRAG);
-                    if (!this.dragList.length && this.dragableList)
-                        this.dragList.pushList(this.dragableList);
                 }
             }
         }
@@ -4380,16 +4450,17 @@ var LeaferUI = (function (exports) {
             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);
                 });
             }
@@ -4446,20 +4517,14 @@ var LeaferUI = (function (exports) {
             }
         }
         drop(data) {
-            const dropData = getDropEventData(data, this.getDragList(), exports.DropEvent.dragData);
+            const dropData = getDropEventData(data, this.getList(), exports.DragEvent.data);
             dropData.path = this.dragEnterPath;
             this.interaction.emit(exports.DropEvent.DROP, dropData);
             this.interaction.emit(exports.DragEvent.LEAVE, data, this.dragEnterPath);
         }
         dragReset() {
-            exports.DropEvent.dragList = null;
-            this.dragList = null;
-            this.dragableList = null;
-            this.dragData = null;
-            this.dragOverPath = null;
-            this.dragEnterPath = null;
-            this.dragging = null;
-            this.moving = null;
+            exports.DragEvent.list = exports.DragEvent.data = this.dragableList = this.dragData = this.dragOverPath = this.dragEnterPath = null;
+            this.dragging = this.moving = false;
         }
         checkDragOut(data) {
             const { interaction } = this;
@@ -4695,6 +4760,10 @@ var LeaferUI = (function (exports) {
             this.zoom(getZoomEventData$1(center, scale, data));
             this.move(getMoveEventData$1(center, move, data));
         }
+        menu(data) {
+            this.findPath(data);
+            this.emit(exports.PointerEvent.MENU, data);
+        }
         move(data) {
             this.transformer.move(data);
         }
@@ -4804,6 +4873,9 @@ var LeaferUI = (function (exports) {
             data.path = find.path;
             return find.path;
         }
+        isDrag(leaf) {
+            return this.dragger.getList().has(leaf);
+        }
         updateDownData(data) {
             if (!data)
                 data = this.downData;
@@ -4817,7 +4889,7 @@ var LeaferUI = (function (exports) {
                 data = this.hoverData;
             if (!data)
                 return;
-            this.findPath(data, { exclude: this.dragger.getDragList(), name: exports.PointerEvent.MOVE });
+            this.findPath(data, { exclude: this.dragger.getList(), name: exports.PointerEvent.MOVE });
             this.hoverData = data;
         }
         updateCursor(data) {
@@ -4937,7 +5009,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -5064,11 +5136,6 @@ var LeaferUI = (function (exports) {
             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();
@@ -5080,6 +5147,9 @@ var LeaferUI = (function (exports) {
         }
         _scaleOrRotationChange() {
             this.affectScaleOrRotation = true;
+            this.matrixChange();
+        }
+        matrixChange() {
             this.matrixChanged = true;
             this.localBoxChanged || this.localBoxChange();
         }
@@ -5222,10 +5292,13 @@ var LeaferUI = (function (exports) {
     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);
@@ -5233,10 +5306,21 @@ var LeaferUI = (function (exports) {
             }
             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];
         }
     };
 
@@ -5316,17 +5400,17 @@ var LeaferUI = (function (exports) {
                     }
                 }
             }
-            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;
         }
@@ -5421,7 +5505,7 @@ var LeaferUI = (function (exports) {
             data.__naturalWidth = layout.boxBounds.width;
             data.__naturalHeight = layout.boxBounds.height;
             if (this.around) {
-                layout.positionChanged = layout.matrixChanged = true;
+                layout.matrixChanged = true;
                 this.__updateWorldMatrix();
             }
         },
@@ -5446,6 +5530,10 @@ var LeaferUI = (function (exports) {
                 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) {
@@ -5489,12 +5577,21 @@ var LeaferUI = (function (exports) {
         __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) {
@@ -5549,15 +5646,13 @@ var LeaferUI = (function (exports) {
             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;
@@ -5565,11 +5660,9 @@ var LeaferUI = (function (exports) {
                         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;
@@ -5609,11 +5702,16 @@ var LeaferUI = (function (exports) {
         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);
@@ -5623,6 +5721,10 @@ var LeaferUI = (function (exports) {
                 }
             }
         }
+        resetCustom() {
+            this.__hasMask = this.__hasEraser = null;
+            this.forceUpdate();
+        }
         waitParent(item) {
             this.parent ? item() : (this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]);
         }
@@ -5637,8 +5739,11 @@ var LeaferUI = (function (exports) {
                 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);
@@ -5651,6 +5756,7 @@ var LeaferUI = (function (exports) {
             }
         }
         set(_data) { }
+        get(_options) { return undefined; }
         toJSON() {
             return this.__.__getInputData();
         }
@@ -5659,9 +5765,13 @@ var LeaferUI = (function (exports) {
         }
         __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);
@@ -5683,7 +5793,7 @@ var LeaferUI = (function (exports) {
         __onUpdateSize() { }
         __updateEraser(_value) { }
         __updateMask(_value) { }
-        __renderMask(_canvas, _content, _mask) { }
+        __renderMask(_canvas, _content, _mask, _recycle) { }
         __removeMask(_child) { }
         getWorld(attrName) {
             this.__layout.checkUpdate();
@@ -5868,7 +5978,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -6087,7 +6197,7 @@ var LeaferUI = (function (exports) {
         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);
@@ -6406,8 +6516,7 @@ var LeaferUI = (function (exports) {
             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); });
         }
@@ -6426,7 +6535,7 @@ var LeaferUI = (function (exports) {
                 canvas.clearWorld(bounds, true);
                 canvas.clipWorld(bounds, true);
             }
-            this.__render(bounds, realBounds);
+            this.__render(bounds, includes, realBounds);
             canvas.restore();
             Run.end(t);
         }
@@ -6435,12 +6544,12 @@ var LeaferUI = (function (exports) {
             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)
@@ -6541,7 +6650,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { hitRadiusPoint } = BoundsHelper;
-    class FindPath {
+    class Pather {
         constructor(target, selector) {
             this.target = target;
             this.selector = selector;
@@ -6661,117 +6770,108 @@ var LeaferUI = (function (exports) {
     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() {
@@ -6781,11 +6881,10 @@ var LeaferUI = (function (exports) {
         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 = {};
             }
         }
     }
@@ -7007,7 +7106,7 @@ var LeaferUI = (function (exports) {
             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;
             }
@@ -7044,6 +7143,7 @@ var LeaferUI = (function (exports) {
                 'pointerdown': this.onPointerDown,
                 'mousedown': this.onMouseDown,
                 'touchstart': this.onTouchStart,
+                'contextmenu': this.onContextMenu,
                 'wheel': this.onWheel,
                 'gesturestart': this.onGesturestart,
                 'gesturechange': this.onGesturechange,
@@ -7116,6 +7216,9 @@ var LeaferUI = (function (exports) {
         onKeyUp(e) {
             this.keyUp(KeyEventHelper.convert(e));
         }
+        onContextMenu(e) {
+            this.menu(PointerEventHelper.convert(e, this.getLocal(e)));
+        }
         onScroll() {
             this.canvas.updateClientBounds();
         }
@@ -7320,6 +7423,11 @@ var LeaferUI = (function (exports) {
                 });
             }
         };
+        Platform.event = {
+            stopDefault(origin) { origin.preventDefault(); },
+            stopNow(origin) { origin.stopImmediatePropagation(); },
+            stop(origin) { origin.stopPropagation(); }
+        };
         Platform.canvas = Creator.canvas();
         Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
     }
@@ -7356,7 +7464,7 @@ var LeaferUI = (function (exports) {
     function design(leafer) {
         if (leafer.isApp)
             return;
-        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.moveLayer, e.moveX, e.moveY); }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
+        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.zoomLayer, e.moveX, e.moveY); }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
             const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.config.zoom;
             let { scale } = e;
             if (scale * Math.abs(scaleX) < min)
@@ -7437,6 +7545,8 @@ var LeaferUI = (function (exports) {
                     this.__removeInput('fill');
                     Paint.recycleImage('fill', this);
                     this.__isFills = false;
+                    if (this.__pixelFill)
+                        this.__pixelFill = false;
                 }
                 this._fill = value;
             }
@@ -7453,6 +7563,8 @@ var LeaferUI = (function (exports) {
                     this.__removeInput('stroke');
                     Paint.recycleImage('stroke', this);
                     this.__isStrokes = false;
+                    if (this.__pixelStroke)
+                        this.__pixelStroke = false;
                 }
                 this._stroke = value;
             }
@@ -7750,9 +7862,9 @@ var LeaferUI = (function (exports) {
             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);
         }
     };
 
@@ -7799,14 +7911,19 @@ var LeaferUI = (function (exports) {
             const { scaleX, scaleY } = this;
             return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
         }
-        constructor(data) {
-            super(data);
-        }
+        reset(_data) { }
         set(data) {
             Object.assign(this, data);
         }
-        get() {
-            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;
@@ -7930,6 +8047,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         strokeType('path')
     ], exports.UI.prototype, "hitStroke", void 0);
+    __decorate([
+        hitType(false)
+    ], exports.UI.prototype, "hitBox", void 0);
     __decorate([
         hitType(true)
     ], exports.UI.prototype, "hitChildren", void 0);
@@ -7990,6 +8110,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         effectType()
     ], exports.UI.prototype, "grayscale", void 0);
+    __decorate([
+        rewrite(exports.Leaf.prototype.reset)
+    ], exports.UI.prototype, "reset", null);
     __decorate([
         rewrite(PathDrawer.drawPathByData)
     ], exports.UI.prototype, "__drawPathByData", null);
@@ -8027,8 +8150,12 @@ var LeaferUI = (function (exports) {
             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 => {
@@ -8229,8 +8356,10 @@ var LeaferUI = (function (exports) {
                         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) {
@@ -8540,7 +8669,7 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Canvas);
 
-    const { copyAndSpread, includes, spread } = BoundsHelper;
+    const { copyAndSpread, includes, spread, setByList } = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() { return 'Text'; }
         get textDrawData() {
@@ -8574,18 +8703,19 @@ var LeaferUI = (function (exports) {
         __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();
             }
@@ -8600,6 +8730,10 @@ var LeaferUI = (function (exports) {
             if (contentBounds !== layout.contentBounds) {
                 layout.contentBounds = contentBounds;
                 layout.renderChanged = true;
+                setByList(data.__textBoxBounds = {}, [b, bounds]);
+            }
+            else {
+                data.__textBoxBounds = contentBounds;
             }
         }
         __updateRenderSpread() {
@@ -8609,7 +8743,7 @@ var LeaferUI = (function (exports) {
             return width;
         }
         __updateRenderBounds() {
-            copyAndSpread(this.__layout.renderBounds, this.__layout.contentBounds, this.__layout.renderSpread);
+            copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
         }
     };
     __decorate([
@@ -8627,6 +8761,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         affectStrokeBoundsType('outside')
     ], exports.Text.prototype, "strokeAlign", void 0);
+    __decorate([
+        hitType('all')
+    ], exports.Text.prototype, "hitFill", void 0);
     __decorate([
         boundsType('')
     ], exports.Text.prototype, "text", void 0);
@@ -8666,6 +8803,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType('top')
     ], exports.Text.prototype, "verticalAlign", void 0);
+    __decorate([
+        boundsType('normal')
+    ], exports.Text.prototype, "textWrap", void 0);
     __decorate([
         boundsType('show')
     ], exports.Text.prototype, "textOverflow", void 0);
@@ -8751,10 +8891,10 @@ var LeaferUI = (function (exports) {
         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,
@@ -8770,6 +8910,7 @@ var LeaferUI = (function (exports) {
                     autoDistance: 2
                 }
             };
+            this.leafs = 0;
             this.__eventIds = [];
             this.__controllers = [];
             this.__readyWait = [];
@@ -8883,9 +9024,8 @@ var LeaferUI = (function (exports) {
             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) {
@@ -9393,10 +9533,14 @@ var LeaferUI = (function (exports) {
                     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;
             }
@@ -9760,17 +9904,30 @@ var LeaferUI = (function (exports) {
     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)
@@ -10045,6 +10202,8 @@ var LeaferUI = (function (exports) {
         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;
@@ -10071,16 +10230,23 @@ var LeaferUI = (function (exports) {
                     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) ;
@@ -10150,7 +10316,7 @@ var LeaferUI = (function (exports) {
 
     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;
@@ -10159,15 +10325,12 @@ var LeaferUI = (function (exports) {
             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;
@@ -10193,6 +10356,14 @@ var LeaferUI = (function (exports) {
             }
         });
     }
+    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;
@@ -10213,10 +10384,10 @@ var LeaferUI = (function (exports) {
 
     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;
         }
@@ -10265,39 +10436,58 @@ var LeaferUI = (function (exports) {
                 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;
@@ -10318,7 +10508,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -10340,7 +10530,7 @@ var LeaferUI = (function (exports) {
             layoutText(drawData, style);
             layoutChar(drawData, style, width);
             if (drawData.overflow)
-                clipText(drawData, textOverflow);
+                clipText(drawData, style);
             if (textDecoration !== 'none')
                 decorationText(drawData, style);
             return drawData;
@@ -10511,7 +10701,6 @@ var LeaferUI = (function (exports) {
     exports.TaskItem = TaskItem;
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert$1;
-    exports.TransformEvent = TransformEvent;
     exports.TwoPointBounds = TwoPointBounds;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;
     exports.UIBounds = UIBounds;