leafer-draw 1.6.1 → 1.6.3

package/dist/web.js

@@ -26,8 +26,6 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const Creator = {};
-
     const IncrementId = {
         RUNTIME: 'runtime',
         LEAF: 'leaf',
@@ -153,7 +151,7 @@ var LeaferUI = (function (exports) {
 
     const { sin: sin$5, cos: cos$5, acos, sqrt: sqrt$3 } = Math;
     const { float: float$1 } = MathHelper;
-    const tempPoint$4 = {};
+    const tempPoint$3 = {};
     function getWorld() {
         return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), { scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
     }
@@ -196,8 +194,8 @@ var LeaferUI = (function (exports) {
             t.d *= scaleY;
         },
         scaleOfOuter(t, origin, scaleX, scaleY) {
-            M$6.toInnerPoint(t, origin, tempPoint$4);
-            M$6.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
+            M$6.toInnerPoint(t, origin, tempPoint$3);
+            M$6.scaleOfInner(t, tempPoint$3, scaleX, scaleY);
         },
         scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
             M$6.translateInner(t, origin.x, origin.y);
@@ -215,8 +213,8 @@ var LeaferUI = (function (exports) {
             t.d = c * sinR + d * cosR;
         },
         rotateOfOuter(t, origin, rotation) {
-            M$6.toInnerPoint(t, origin, tempPoint$4);
-            M$6.rotateOfInner(t, tempPoint$4, rotation);
+            M$6.toInnerPoint(t, origin, tempPoint$3);
+            M$6.rotateOfInner(t, tempPoint$3, rotation);
         },
         rotateOfInner(t, origin, rotation) {
             M$6.translateInner(t, origin.x, origin.y);
@@ -237,8 +235,8 @@ var LeaferUI = (function (exports) {
             }
         },
         skewOfOuter(t, origin, skewX, skewY) {
-            M$6.toInnerPoint(t, origin, tempPoint$4);
-            M$6.skewOfInner(t, tempPoint$4, skewX, skewY);
+            M$6.toInnerPoint(t, origin, tempPoint$3);
+            M$6.skewOfInner(t, tempPoint$3, skewX, skewY);
         },
         skewOfInner(t, origin, skewX, skewY = 0) {
             M$6.translateInner(t, origin.x, origin.y);
@@ -467,8 +465,10 @@ var LeaferUI = (function (exports) {
             t.y = halfPixel ? round$2(t.y - 0.5) + 0.5 : round$2(t.y);
         },
         move(t, x, y) {
-            t.x += x;
-            t.y += y;
+            if (typeof x === 'object')
+                t.x += x.x, t.y += x.y;
+            else
+                t.x += x, t.y += y;
         },
         scale(t, scaleX, scaleY = scaleX) {
             if (t.x)
@@ -493,19 +493,19 @@ var LeaferUI = (function (exports) {
         },
         tempToInnerOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            copy$a(temp, t);
+            copy$b(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            copy$a(temp, t);
+            copy$b(temp, t);
             toOuterPoint$3(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
             const { tempRadiusPoint: temp } = P$5;
-            copy$a(temp, t);
+            copy$b(temp, t);
             P$5.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
@@ -578,7 +578,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const P$5 = PointHelper;
-    const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
+    const { getDistanceFrom, copy: copy$b, getAtan2 } = P$5;
 
     class Point {
         constructor(x, y) {
@@ -646,7 +646,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
     }
-    const tempPoint$3 = new Point();
+    const tempPoint$2 = new Point();
 
     class Matrix {
         constructor(a, b, c, d, e, f) {
@@ -804,15 +804,87 @@ var LeaferUI = (function (exports) {
     };
     const { addPoint: addPoint$3 } = TwoPointBoundsHelper;
 
+    exports.Direction4 = void 0;
+    (function (Direction4) {
+        Direction4[Direction4["top"] = 0] = "top";
+        Direction4[Direction4["right"] = 1] = "right";
+        Direction4[Direction4["bottom"] = 2] = "bottom";
+        Direction4[Direction4["left"] = 3] = "left";
+    })(exports.Direction4 || (exports.Direction4 = {}));
+    exports.Direction9 = void 0;
+    (function (Direction9) {
+        Direction9[Direction9["topLeft"] = 0] = "topLeft";
+        Direction9[Direction9["top"] = 1] = "top";
+        Direction9[Direction9["topRight"] = 2] = "topRight";
+        Direction9[Direction9["right"] = 3] = "right";
+        Direction9[Direction9["bottomRight"] = 4] = "bottomRight";
+        Direction9[Direction9["bottom"] = 5] = "bottom";
+        Direction9[Direction9["bottomLeft"] = 6] = "bottomLeft";
+        Direction9[Direction9["left"] = 7] = "left";
+        Direction9[Direction9["center"] = 8] = "center";
+        Direction9[Direction9["top-left"] = 0] = "top-left";
+        Direction9[Direction9["top-right"] = 2] = "top-right";
+        Direction9[Direction9["bottom-right"] = 4] = "bottom-right";
+        Direction9[Direction9["bottom-left"] = 6] = "bottom-left";
+    })(exports.Direction9 || (exports.Direction9 = {}));
+
+    const directionData = [
+        { x: 0, y: 0 },
+        { x: 0.5, y: 0 },
+        { x: 1, y: 0 },
+        { x: 1, y: 0.5 },
+        { x: 1, y: 1 },
+        { x: 0.5, y: 1 },
+        { x: 0, y: 1 },
+        { x: 0, y: 0.5 },
+        { x: 0.5, y: 0.5 }
+    ];
+    directionData.forEach(item => item.type = 'percent');
+    const AroundHelper = {
+        directionData,
+        tempPoint: {},
+        get: get$4,
+        toPoint(around, box, to, onlyBoxSize, content, onlyContentSize) {
+            const point = get$4(around);
+            to.x = point.x;
+            to.y = point.y;
+            if (point.type === 'percent') {
+                to.x *= box.width;
+                to.y *= box.height;
+                if (content) {
+                    if (!onlyContentSize)
+                        to.x -= content.x, to.y -= content.y;
+                    if (point.x)
+                        to.x -= (point.x === 1) ? content.width : (point.x === 0.5 ? point.x * content.width : 0);
+                    if (point.y)
+                        to.y -= (point.y === 1) ? content.height : (point.y === 0.5 ? point.y * content.height : 0);
+                }
+            }
+            if (!onlyBoxSize)
+                to.x += box.x, to.y += box.y;
+        }
+    };
+    function get$4(around) {
+        return typeof around === 'string' ? directionData[exports.Direction9[around]] : around;
+    }
+
+    const { toPoint: toPoint$5 } = AroundHelper;
+    const AlignHelper = {
+        toPoint(align, content, box, to, onlyBoxSize, onlyContentSize) {
+            toPoint$5(align, box, to, onlyBoxSize, content, onlyContentSize);
+        }
+    };
+
     const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$3 } = TwoPointBoundsHelper;
     const { toOuterPoint: toOuterPoint$2 } = MatrixHelper;
     const { float, fourNumber } = MathHelper;
     const { floor, ceil: ceil$2 } = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
-    const toPoint$5 = {};
+    const toPoint$4 = {};
+    const tempBounds$2 = {};
     const BoundsHelper = {
-        tempBounds: {},
+        tempBounds: tempBounds$2,
         set(t, x = 0, y = 0, width = 0, height = 0) {
             t.x = x;
             t.y = y;
@@ -863,7 +935,7 @@ var LeaferUI = (function (exports) {
                 to = t;
             }
             else {
-                copy$9(to, t);
+                copy$a(to, t);
             }
             if (parent) {
                 to.offsetX = -(B.maxX(parent) - t.x);
@@ -875,8 +947,8 @@ var LeaferUI = (function (exports) {
             }
             B.move(to, -to.offsetX, -to.offsetY);
         },
-        scale(t, scaleX, scaleY = scaleX) {
-            PointHelper.scale(t, scaleX, scaleY);
+        scale(t, scaleX, scaleY = scaleX, onlySize) {
+            onlySize || PointHelper.scale(t, scaleX, scaleY);
             t.width *= scaleX;
             t.height *= scaleY;
         },
@@ -886,9 +958,9 @@ var LeaferUI = (function (exports) {
             t.height *= scaleY;
         },
         tempToOuterOf(t, matrix) {
-            B.copy(B.tempBounds, t);
-            B.toOuterOf(B.tempBounds, matrix);
-            return B.tempBounds;
+            B.copy(tempBounds$2, t);
+            B.toOuterOf(tempBounds$2, matrix);
+            return tempBounds$2;
         },
         getOuterOf(t, matrix) {
             t = Object.assign({}, t);
@@ -919,17 +991,17 @@ var LeaferUI = (function (exports) {
             else {
                 point.x = t.x;
                 point.y = t.y;
-                toOuterPoint$2(matrix, point, toPoint$5);
-                setPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+                toOuterPoint$2(matrix, point, toPoint$4);
+                setPoint$2(tempPointBounds$1, toPoint$4.x, toPoint$4.y);
                 point.x = t.x + t.width;
-                toOuterPoint$2(matrix, point, toPoint$5);
-                addPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+                toOuterPoint$2(matrix, point, toPoint$4);
+                addPoint$2(tempPointBounds$1, toPoint$4.x, toPoint$4.y);
                 point.y = t.y + t.height;
-                toOuterPoint$2(matrix, point, toPoint$5);
-                addPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+                toOuterPoint$2(matrix, point, toPoint$4);
+                addPoint$2(tempPointBounds$1, toPoint$4.x, toPoint$4.y);
                 point.x = t.x;
-                toOuterPoint$2(matrix, point, toPoint$5);
-                addPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+                toOuterPoint$2(matrix, point, toPoint$4);
+                addPoint$2(tempPointBounds$1, toPoint$4.x, toPoint$4.y);
                 toBounds$3(tempPointBounds$1, to);
             }
         },
@@ -939,9 +1011,21 @@ var LeaferUI = (function (exports) {
             B.scale(to, 1 / matrix.a, 1 / matrix.d);
         },
         getFitMatrix(t, put, baseScale = 1) {
-            const scale = Math.min(baseScale, Math.min(t.width / put.width, t.height / put.height));
+            const scale = Math.min(baseScale, B.getFitScale(t, put));
             return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
         },
+        getFitScale(t, put, isCoverMode) {
+            const sw = t.width / put.width, sh = t.height / put.height;
+            return isCoverMode ? Math.max(sw, sh) : Math.min(sw, sh);
+        },
+        put(t, put, align = 'center', putScale = 1, changeSize = true, to) {
+            to || (to = put);
+            if (typeof putScale === 'string')
+                putScale = B.getFitScale(t, put, putScale === 'cover');
+            tempBounds$2.width = changeSize ? put.width *= putScale : put.width * putScale;
+            tempBounds$2.height = changeSize ? put.height *= putScale : put.height * putScale;
+            AlignHelper.toPoint(align, tempBounds$2, t, to, true, true);
+        },
         getSpread(t, spread, side) {
             const n = {};
             B.copyAndSpread(n, t, spread, false, side);
@@ -1009,7 +1093,7 @@ var LeaferUI = (function (exports) {
                     if (first) {
                         first = false;
                         if (!addMode)
-                            copy$9(t, bounds);
+                            copy$a(t, bounds);
                     }
                     else {
                         add$1(t, bounds);
@@ -1090,7 +1174,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const B = BoundsHelper;
-    const { add: add$1, copy: copy$9 } = B;
+    const { add: add$1, copy: copy$a } = B;
 
     class Bounds {
         get minX() { return BoundsHelper.minX(this); }
@@ -1115,8 +1199,8 @@ var LeaferUI = (function (exports) {
             BoundsHelper.move(this, x, y);
             return this;
         }
-        scale(scaleX, scaleY) {
-            BoundsHelper.scale(this, scaleX, scaleY);
+        scale(scaleX, scaleY, onlySize) {
+            BoundsHelper.scale(this, scaleX, scaleY, onlySize);
             return this;
         }
         scaleOf(origin, scaleX, scaleY) {
@@ -1134,6 +1218,9 @@ var LeaferUI = (function (exports) {
         getFitMatrix(put, baseScale) {
             return BoundsHelper.getFitMatrix(this, put, baseScale);
         }
+        put(put, align, putScale) {
+            BoundsHelper.put(this, put, align, putScale);
+        }
         spread(fourNumber, side) {
             BoundsHelper.spread(this, fourNumber, side);
             return this;
@@ -1242,79 +1329,6 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    exports.Direction4 = void 0;
-    (function (Direction4) {
-        Direction4[Direction4["top"] = 0] = "top";
-        Direction4[Direction4["right"] = 1] = "right";
-        Direction4[Direction4["bottom"] = 2] = "bottom";
-        Direction4[Direction4["left"] = 3] = "left";
-    })(exports.Direction4 || (exports.Direction4 = {}));
-    exports.Direction9 = void 0;
-    (function (Direction9) {
-        Direction9[Direction9["topLeft"] = 0] = "topLeft";
-        Direction9[Direction9["top"] = 1] = "top";
-        Direction9[Direction9["topRight"] = 2] = "topRight";
-        Direction9[Direction9["right"] = 3] = "right";
-        Direction9[Direction9["bottomRight"] = 4] = "bottomRight";
-        Direction9[Direction9["bottom"] = 5] = "bottom";
-        Direction9[Direction9["bottomLeft"] = 6] = "bottomLeft";
-        Direction9[Direction9["left"] = 7] = "left";
-        Direction9[Direction9["center"] = 8] = "center";
-        Direction9[Direction9["top-left"] = 0] = "top-left";
-        Direction9[Direction9["top-right"] = 2] = "top-right";
-        Direction9[Direction9["bottom-right"] = 4] = "bottom-right";
-        Direction9[Direction9["bottom-left"] = 6] = "bottom-left";
-    })(exports.Direction9 || (exports.Direction9 = {}));
-
-    const directionData = [
-        { x: 0, y: 0 },
-        { x: 0.5, y: 0 },
-        { x: 1, y: 0 },
-        { x: 1, y: 0.5 },
-        { x: 1, y: 1 },
-        { x: 0.5, y: 1 },
-        { x: 0, y: 1 },
-        { x: 0, y: 0.5 },
-        { x: 0.5, y: 0.5 }
-    ];
-    directionData.forEach(item => item.type = 'percent');
-    const AroundHelper = {
-        directionData,
-        tempPoint: {},
-        get: get$4,
-        toPoint(around, bounds, to, onlySize, pointBounds) {
-            const point = get$4(around);
-            to.x = point.x;
-            to.y = point.y;
-            if (point.type === 'percent') {
-                to.x *= bounds.width;
-                to.y *= bounds.height;
-                if (pointBounds) {
-                    to.x -= pointBounds.x;
-                    to.y -= pointBounds.y;
-                    if (point.x)
-                        to.x -= (point.x === 1) ? pointBounds.width : (point.x === 0.5 ? point.x * pointBounds.width : 0);
-                    if (point.y)
-                        to.y -= (point.y === 1) ? pointBounds.height : (point.y === 0.5 ? point.y * pointBounds.height : 0);
-                }
-            }
-            if (!onlySize) {
-                to.x += bounds.x;
-                to.y += bounds.y;
-            }
-        }
-    };
-    function get$4(around) {
-        return typeof around === 'string' ? directionData[exports.Direction9[around]] : around;
-    }
-
-    const { toPoint: toPoint$4 } = AroundHelper;
-    const AlignHelper = {
-        toPoint(align, contentBounds, bounds, to, onlySize) {
-            toPoint$4(align, bounds, to, onlySize, contentBounds);
-        }
-    };
-
     const StringNumberMap = {
         '0': 1,
         '1': 1,
@@ -1445,11 +1459,17 @@ var LeaferUI = (function (exports) {
             return rs;
         },
         need(name) {
-            console.error('please install plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
+            console.error('please install and import plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
         }
     };
     setTimeout(() => check.forEach(name => Plugin.has(name, true)));
 
+    const Creator = {
+        editor(_options) {
+            return Plugin.need('editor');
+        }
+    };
+
     const debug$e = Debug.get('UICreator');
     const UICreator = {
         list: {},
@@ -1587,6 +1607,10 @@ var LeaferUI = (function (exports) {
             for (let i = 0, len = list.length; i < len; i++)
                 map[list[i]] = true;
             return map;
+        },
+        stintSet(data, attrName, value) {
+            value || (value = undefined);
+            data[attrName] !== value && (data[attrName] = value);
         }
     };
     const { assign } = DataHelper;
@@ -2045,7 +2069,7 @@ var LeaferUI = (function (exports) {
         contextMethod()
     ], Canvas.prototype, "strokeText", null);
 
-    const { copy: copy$8, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
+    const { copy: copy$9, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
     const minSize = { width: 1, height: 1, pixelRatio: 1 };
     const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
     class LeaferCanvasBase extends Canvas {
@@ -2277,7 +2301,7 @@ var LeaferUI = (function (exports) {
             const { size, pixelSnap } = this, canvas = this.manager ? this.manager.get(size) : Creator.canvas(Object.assign({}, size));
             canvas.save();
             if (useSameWorldTransform)
-                copy$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+                copy$9(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
             if (useSameSmooth)
                 canvas.smooth = this.smooth;
             canvas.pixelSnap !== pixelSnap && (canvas.pixelSnap = pixelSnap);
@@ -2388,7 +2412,7 @@ var LeaferUI = (function (exports) {
     const { setPoint: setPoint$1, addPoint: addPoint$1 } = TwoPointBoundsHelper;
     const { set, toNumberPoints } = PointHelper;
     const { M: M$5, L: L$6, C: C$4, Q: Q$4, Z: Z$5 } = PathCommandMap;
-    const tempPoint$2 = {};
+    const tempPoint$1 = {};
     const BezierHelper = {
         points(data, originPoints, curve, close) {
             let points = toNumberPoints(originPoints);
@@ -2410,6 +2434,8 @@ var LeaferUI = (function (exports) {
                     cY = points[i + 3];
                     ba = sqrt$1(pow(bX - aX, 2) + pow(bY - aY, 2));
                     cb = sqrt$1(pow(cX - bX, 2) + pow(cY - bY, 2));
+                    if (!ba && !cb)
+                        continue;
                     d = ba + cb;
                     ba = (t * ba) / d;
                     cb = (t * cb) / d;
@@ -2579,8 +2605,8 @@ var LeaferUI = (function (exports) {
             addMode ? addPoint$1(pointBounds, fromX, fromY) : setPoint$1(pointBounds, fromX, fromY);
             addPoint$1(pointBounds, toX, toY);
             for (let i = 0, len = tList.length; i < len; i++) {
-                getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$2);
-                addPoint$1(pointBounds, tempPoint$2.x, tempPoint$2.y);
+                getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$1);
+                addPoint$1(pointBounds, tempPoint$1.x, tempPoint$1.y);
             }
         },
         getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, setPoint) {
@@ -2592,7 +2618,11 @@ var LeaferUI = (function (exports) {
             const point = {};
             getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, point);
             return point;
-        }
+        },
+        getDerivative(t, fromV, v1, v2, toV) {
+            const o = 1 - t;
+            return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
+        },
     };
     const { getPointAndSet, toTwoPointBounds: toTwoPointBounds$1, ellipse: ellipse$6 } = BezierHelper;
 
@@ -2650,7 +2680,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$3, 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$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
-    const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
+    const { rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
     const { ellipticalArc } = EllipseHelper;
     const debug$c = Debug.get('PathConvert');
     const setEndPoint$1 = {};
@@ -2847,7 +2877,7 @@ var LeaferUI = (function (exports) {
                     case N$3:
                         x = old[i + 1];
                         y = old[i + 2];
-                        curveMode ? rect$2(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
+                        curveMode ? rect$3(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
                         i += 5;
                         break;
                     case D$3:
@@ -3023,7 +3053,7 @@ var LeaferUI = (function (exports) {
     };
     const { ellipse: ellipse$3, arc: arc$2 } = PathCommandDataHelper;
 
-    const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
+    const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$2, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
     class PathCreator {
         set path(value) { this.__path = value; }
         get path() { return this.__path; }
@@ -3070,7 +3100,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
         rect(x, y, width, height) {
-            rect$1(this.__path, x, y, width, height);
+            rect$2(this.__path, x, y, width, height);
             this.paint();
             return this;
         }
@@ -3188,7 +3218,7 @@ var LeaferUI = (function (exports) {
 
     const { M: M$1, L: L$2, C, Q, Z: Z$1, N, D, X, G, F: F$1, O, P, U } = PathCommandMap;
     const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
-    const { addPointBounds, copy: copy$7, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
+    const { addPointBounds, copy: copy$8, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
     const debug$a = Debug.get('PathBounds');
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
@@ -3260,7 +3290,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case G:
                         ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 9;
@@ -3276,7 +3306,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case O:
                         arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 7;
@@ -3291,7 +3321,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case U:
                         arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 6;
@@ -3385,7 +3415,7 @@ var LeaferUI = (function (exports) {
     }
 
     const FileHelper = {
-        opacityTypes: ['png', 'webp', 'svg'],
+        alphaPixelTypes: ['png', 'webp', 'svg'],
         upperCaseTypeMap: {},
         mineType(type) {
             if (!type || type.startsWith('image'))
@@ -3412,7 +3442,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const F = FileHelper;
-    F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
+    F.alphaPixelTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
 
     const debug$9 = Debug.get('TaskProcessor');
     class TaskItem {
@@ -3729,8 +3759,8 @@ var LeaferUI = (function (exports) {
                 list.length = 0;
             }
         },
-        hasOpacityPixel(config) {
-            return FileHelper.opacityTypes.some(item => I.isFormat(item, config));
+        hasAlphaPixel(config) {
+            return FileHelper.alphaPixelTypes.some(item => I.isFormat(item, config));
         },
         isFormat(format, config) {
             if (config.format === format)
@@ -3768,13 +3798,16 @@ var LeaferUI = (function (exports) {
                 this.setView(view.config ? view.view : view);
             }
             ImageManager.isFormat('svg', config) && (this.isSVG = true);
-            ImageManager.hasOpacityPixel(config) && (this.hasOpacityPixel = true);
+            ImageManager.hasAlphaPixel(config) && (this.hasAlphaPixel = true);
         }
         load(onSuccess, onError) {
             if (!this.loading) {
                 this.loading = true;
+                let { loadImage, loadImageWithProgress } = Platform.origin, onProgress = this.config.showProgress && loadImageWithProgress && this.onProgress.bind(this);
+                if (onProgress)
+                    loadImage = loadImageWithProgress;
                 Resource.tasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                    return yield Platform.origin.loadImage(this.url).then(img => this.setView(img)).catch((e) => {
+                    return yield loadImage(this.url, onProgress).then(img => this.setView(img)).catch((e) => {
                         this.error = e;
                         this.onComplete(false);
                     });
@@ -3799,6 +3832,9 @@ var LeaferUI = (function (exports) {
             this.view = img;
             this.onComplete(true);
         }
+        onProgress(progress) {
+            this.progress = progress;
+        }
         onComplete(isSuccess) {
             let odd;
             this.waitComplete.forEach((item, index) => {
@@ -4221,8 +4257,8 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const { copy: copy$6, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-    const matrix = {}, { round } = Math;
+    const { copy: copy$7, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+    const matrix$1 = {}, { round } = Math;
     const LeafHelper = {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
             if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
@@ -4264,13 +4300,20 @@ var LeaferUI = (function (exports) {
             if (leaf.isBranch) {
                 const { children } = leaf;
                 for (let i = 0, len = children.length; i < len; i++) {
-                    updateAllWorldOpacity$1(children[i]);
+                    updateAllWorldOpacity(children[i]);
                 }
             }
         },
-        updateAllChange(leaf) {
-            updateAllWorldOpacity$1(leaf);
+        updateChange(leaf) {
+            const layout = leaf.__layout;
+            if (layout.stateStyleChanged)
+                leaf.updateState();
+            if (layout.opacityChanged)
+                updateAllWorldOpacity(leaf);
             leaf.__updateChange();
+        },
+        updateAllChange(leaf) {
+            updateChange$1(leaf);
             if (leaf.isBranch) {
                 const { children } = leaf;
                 for (let i = 0, len = children.length; i < len; i++) {
@@ -4310,13 +4353,13 @@ var LeaferUI = (function (exports) {
                     transition = scaleY;
                 scaleY = scaleX;
             }
-            copy$6(matrix, o);
-            scaleOfOuter$2(matrix, origin, scaleX, scaleY);
+            copy$7(matrix$1, o);
+            scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
             if (t.origin || t.around) {
-                L.setTransform(t, matrix, resize, transition);
+                L.setTransform(t, matrix$1, resize, transition);
             }
             else {
-                const x = t.x + matrix.e - o.e, y = t.y + matrix.f - o.f;
+                const x = t.x + matrix$1.e - o.e, y = t.y + matrix$1.f - o.f;
                 if (transition && !resize)
                     t.animate({ x, y, scaleX: t.scaleX * scaleX, scaleY: t.scaleY * scaleY }, transition);
                 else
@@ -4328,32 +4371,32 @@ var LeaferUI = (function (exports) {
         },
         rotateOfLocal(t, origin, angle, transition) {
             const o = t.__localMatrix;
-            copy$6(matrix, o);
-            rotateOfOuter$2(matrix, origin, angle);
+            copy$7(matrix$1, o);
+            rotateOfOuter$2(matrix$1, origin, angle);
             if (t.origin || t.around)
-                L.setTransform(t, matrix, false, transition);
+                L.setTransform(t, matrix$1, false, transition);
             else
-                t.set({ x: t.x + matrix.e - o.e, y: t.y + matrix.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
+                t.set({ x: t.x + matrix$1.e - o.e, y: t.y + matrix$1.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
         },
         skewOfWorld(t, origin, skewX, skewY, resize, transition) {
             L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
         },
         skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
-            copy$6(matrix, t.__localMatrix);
-            skewOfOuter(matrix, origin, skewX, skewY);
-            L.setTransform(t, matrix, resize, transition);
+            copy$7(matrix$1, t.__localMatrix);
+            skewOfOuter(matrix$1, origin, skewX, skewY);
+            L.setTransform(t, matrix$1, resize, transition);
         },
         transformWorld(t, transform, resize, transition) {
-            copy$6(matrix, t.worldTransform);
-            multiplyParent$2(matrix, transform);
+            copy$7(matrix$1, t.worldTransform);
+            multiplyParent$2(matrix$1, transform);
             if (t.parent)
-                divideParent(matrix, t.parent.worldTransform);
-            L.setTransform(t, matrix, resize, transition);
+                divideParent(matrix$1, t.parent.worldTransform);
+            L.setTransform(t, matrix$1, resize, transition);
         },
         transform(t, transform, resize, transition) {
-            copy$6(matrix, t.localTransform);
-            multiplyParent$2(matrix, transform);
-            L.setTransform(t, matrix, resize, transition);
+            copy$7(matrix$1, t.localTransform);
+            multiplyParent$2(matrix$1, transform);
+            L.setTransform(t, matrix$1, resize, transition);
         },
         setTransform(t, transform, resize, transition) {
             const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
@@ -4387,9 +4430,9 @@ var LeaferUI = (function (exports) {
             return innerOrigin;
         },
         getRelativeWorld(t, relative, temp) {
-            copy$6(matrix, t.worldTransform);
-            divideParent(matrix, relative.worldTransform);
-            return temp ? matrix : Object.assign({}, matrix);
+            copy$7(matrix$1, t.worldTransform);
+            divideParent(matrix$1, relative.worldTransform);
+            return temp ? matrix$1 : Object.assign({}, matrix$1);
         },
         drop(t, parent, index, resize) {
             t.setTransform(L.getRelativeWorld(t, parent, true), resize);
@@ -4406,7 +4449,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const L = LeafHelper;
-    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
+    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1 } = L;
     function getTempLocal(t, world) {
         t.__layout.update();
         return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
@@ -4443,7 +4486,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { updateBounds: updateBounds$2 } = LeafHelper;
+    const { updateBounds: updateBounds$3 } = LeafHelper;
     const BranchHelper = {
         sort(a, b) {
             return (a.__.zIndex === b.__.zIndex) ? (a.__tempNumber - b.__tempNumber) : (a.__.zIndex - b.__.zIndex);
@@ -4505,11 +4548,11 @@ var LeaferUI = (function (exports) {
                 branch = branchStack[i];
                 children = branch.children;
                 for (let j = 0, len = children.length; j < len; j++) {
-                    updateBounds$2(children[j]);
+                    updateBounds$3(children[j]);
                 }
                 if (exclude && exclude === branch)
                     continue;
-                updateBounds$2(branch);
+                updateBounds$3(branch);
             }
         }
     };
@@ -4527,8 +4570,8 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
-    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
+    const { getRelativeWorld: getRelativeWorld$1, updateBounds: updateBounds$2 } = LeafHelper;
+    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$6 } = BoundsHelper;
     const localContent = '_localContentBounds';
     const worldContent = '_worldContentBounds', worldBox = '_worldBoxBounds', worldStroke = '_worldStrokeBounds';
     class LeafLayout {
@@ -4571,7 +4614,9 @@ var LeaferUI = (function (exports) {
                 this._localRenderBounds = local;
         }
         update() {
-            const { leafer } = this.leaf;
+            const { leaf } = this, { leafer } = leaf;
+            if (leaf.isApp)
+                return updateBounds$2(leaf);
             if (leafer) {
                 if (leafer.ready)
                     leafer.watcher.changed && leafer.layouter.layout();
@@ -4579,7 +4624,7 @@ var LeaferUI = (function (exports) {
                     leafer.start();
             }
             else {
-                let root = this.leaf;
+                let root = leaf;
                 while (root.parent && !root.parent.leafer) {
                     root = root.parent;
                 }
@@ -4686,7 +4731,7 @@ var LeaferUI = (function (exports) {
             }
             if (!layoutBounds)
                 layoutBounds = MatrixHelper.getLayout(matrix);
-            copy$5(layoutBounds, bounds);
+            copy$6(layoutBounds, bounds);
             PointHelper.copy(layoutBounds, point);
             if (unscale) {
                 const { scaleX, scaleY } = layoutBounds;
@@ -4801,7 +4846,7 @@ var LeaferUI = (function (exports) {
         }
         childrenSortChange() {
             if (!this.childrenSortChanged) {
-                this.childrenSortChanged = true;
+                this.childrenSortChanged = this.affectChildrenSort = true;
                 this.leaf.forceUpdate('surface');
             }
         }
@@ -4868,6 +4913,40 @@ var LeaferUI = (function (exports) {
     ImageEvent.LOADED = 'image.loaded';
     ImageEvent.ERROR = 'image.error';
 
+    class BoundsEvent extends Event {
+        static checkHas(leaf, type, mode) {
+            if (mode === 'on') {
+                type === WORLD ? leaf.__hasWorldEvent = true : leaf.__hasLocalEvent = true;
+            }
+            else {
+                leaf.__hasLocalEvent = leaf.hasEvent(RESIZE) || leaf.hasEvent(INNER) || leaf.hasEvent(LOCAL);
+                leaf.__hasWorldEvent = leaf.hasEvent(WORLD);
+            }
+        }
+        static emitLocal(leaf) {
+            if (leaf.leaferIsReady) {
+                const { resized } = leaf.__layout;
+                if (resized !== 'local') {
+                    leaf.emit(RESIZE, leaf);
+                    if (resized === 'inner')
+                        leaf.emit(INNER, leaf);
+                }
+                leaf.emit(LOCAL, leaf);
+            }
+        }
+        static emitWorld(leaf) {
+            if (leaf.leaferIsReady)
+                leaf.emit(WORLD, this);
+        }
+    }
+    BoundsEvent.RESIZE = 'bounds.resize';
+    BoundsEvent.INNER = 'bounds.inner';
+    BoundsEvent.LOCAL = 'bounds.local';
+    BoundsEvent.WORLD = 'bounds.world';
+    const { RESIZE, INNER, LOCAL, WORLD } = BoundsEvent;
+    const boundsEventMap = {};
+    [RESIZE, INNER, LOCAL, WORLD].forEach(key => boundsEventMap[key] = 1);
+
     class ResizeEvent extends Event {
         get bigger() {
             if (!this.old)
@@ -4964,9 +5043,12 @@ var LeaferUI = (function (exports) {
         set event(map) { this.on(map); }
         on(type, listener, options) {
             if (!listener) {
-                let event, map = type;
-                for (let key in map)
-                    event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event);
+                let event;
+                if (type instanceof Array)
+                    type.forEach(item => this.on(item[0], item[1], item[2]));
+                else
+                    for (let key in type)
+                        (event = type[key]) instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event);
                 return;
             }
             let capture, once;
@@ -4996,6 +5078,8 @@ var LeaferUI = (function (exports) {
                     else {
                         map[type] = [item];
                     }
+                    if (boundsEventMap[type])
+                        BoundsEvent.checkHas(this, type, 'on');
                 }
             });
         }
@@ -5017,6 +5101,8 @@ var LeaferUI = (function (exports) {
                                     events.splice(index, 1);
                                 if (!events.length)
                                     delete map[type];
+                                if (boundsEventMap[type])
+                                    BoundsEvent.checkHas(this, type, 'off');
                             }
                         }
                     });
@@ -5036,19 +5122,31 @@ var LeaferUI = (function (exports) {
             }
         }
         on_(type, listener, bind, options) {
-            if (bind)
-                listener = listener.bind(bind);
-            this.on(type, listener, options);
+            if (!listener)
+                (type instanceof Array) && type.forEach(item => this.on(item[0], item[2] ? item[1] = item[1].bind(item[2]) : item[1], item[3]));
+            else
+                this.on(type, bind ? listener = listener.bind(bind) : listener, options);
             return { type, current: this, listener, options };
         }
         off_(id) {
             if (!id)
                 return;
             const list = id instanceof Array ? id : [id];
-            list.forEach(item => item.current.off(item.type, item.listener, item.options));
+            list.forEach(item => {
+                if (!item.listener)
+                    (item.type instanceof Array) && item.type.forEach(v => item.current.off(v[0], v[1], v[3]));
+                else
+                    item.current.off(item.type, item.listener, item.options);
+            });
             list.length = 0;
         }
-        once(type, listener, capture) {
+        once(type, listener, captureOrBind, capture) {
+            if (!listener)
+                return (type instanceof Array) && type.forEach(item => this.once(item[0], item[1], item[2], item[3]));
+            if (typeof captureOrBind === 'object')
+                listener = listener.bind(captureOrBind);
+            else
+                capture = captureOrBind;
             this.on(type, listener, { once: true, capture });
         }
         emit(type, event, capture) {
@@ -5160,7 +5258,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
-    const { toPoint: toPoint$3, tempPoint: tempPoint$1 } = AroundHelper;
+    const { toPoint: toPoint$3, tempPoint } = AroundHelper;
     const LeafMatrix = {
         __updateWorldMatrix() {
             multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__, this.parent && this.parent.__);
@@ -5169,33 +5267,39 @@ var LeaferUI = (function (exports) {
             if (this.__local) {
                 const layout = this.__layout, local = this.__local, data = this.__;
                 if (layout.affectScaleOrRotation) {
-                    if (layout.scaleChanged || layout.rotationChanged) {
+                    if ((layout.scaleChanged && (layout.resized = 'scale')) || layout.rotationChanged) {
                         setLayout(local, data, null, null, layout.affectRotation);
-                        layout.scaleChanged = layout.rotationChanged = false;
+                        layout.scaleChanged = layout.rotationChanged = undefined;
                     }
                 }
                 local.e = data.x + data.offsetX;
                 local.f = data.y + data.offsetY;
                 if (data.around || data.origin) {
-                    toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$1);
-                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, !data.around);
+                    toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint);
+                    translateInner(local, -tempPoint.x, -tempPoint.y, !data.around);
                 }
             }
-            this.__layout.matrixChanged = false;
+            this.__layout.matrixChanged = undefined;
         }
     };
 
     const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
     const { updateBounds: updateBounds$1 } = BranchHelper;
-    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
     const { toBounds: toBounds$1 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
-            toOuterOf$1(this.__layout.renderBounds, this.__world, this.__world);
-            if (this.__layout.resized) {
-                this.__onUpdateSize();
-                this.__layout.resized = false;
+            const layout = this.__layout;
+            toOuterOf$1(layout.renderBounds, this.__world, this.__world);
+            if (layout.resized) {
+                if (layout.resized === 'inner')
+                    this.__onUpdateSize();
+                if (this.__hasLocalEvent)
+                    BoundsEvent.emitLocal(this);
+                layout.resized = undefined;
             }
+            if (this.__hasWorldEvent)
+                BoundsEvent.emitWorld(this);
         },
         __updateLocalBounds() {
             const layout = this.__layout;
@@ -5204,12 +5308,12 @@ var LeaferUI = (function (exports) {
                     this.__updatePath();
                 this.__updateRenderPath();
                 this.__updateBoxBounds();
-                layout.resized = true;
+                layout.resized = 'inner';
             }
             if (layout.localBoxChanged) {
                 if (this.__local)
                     this.__updateLocalBoxBounds();
-                layout.localBoxChanged = false;
+                layout.localBoxChanged = undefined;
                 if (layout.strokeSpread)
                     layout.strokeChanged = true;
                 if (layout.renderSpread)
@@ -5217,7 +5321,7 @@ var LeaferUI = (function (exports) {
                 if (this.parent)
                     this.parent.__layout.boxChange();
             }
-            layout.boxChanged = false;
+            layout.boxChanged = undefined;
             if (layout.strokeChanged) {
                 layout.strokeSpread = this.__updateStrokeSpread();
                 if (layout.strokeSpread) {
@@ -5229,12 +5333,12 @@ var LeaferUI = (function (exports) {
                 else {
                     layout.spreadStrokeCancel();
                 }
-                layout.strokeChanged = false;
+                layout.strokeChanged = undefined;
                 if (layout.renderSpread || layout.strokeSpread !== layout.strokeBoxSpread)
                     layout.renderChanged = true;
                 if (this.parent)
                     this.parent.__layout.strokeChange();
-                layout.resized = true;
+                layout.resized = 'inner';
             }
             if (layout.renderChanged) {
                 layout.renderSpread = this.__updateRenderSpread();
@@ -5247,11 +5351,12 @@ var LeaferUI = (function (exports) {
                 else {
                     layout.spreadRenderCancel();
                 }
-                layout.renderChanged = false;
+                layout.renderChanged = undefined;
                 if (this.parent)
                     this.parent.__layout.renderChange();
             }
-            layout.boundsChanged = false;
+            layout.resized || (layout.resized = 'local');
+            layout.boundsChanged = undefined;
         },
         __updateLocalBoxBounds() {
             if (this.__hasMotionPath)
@@ -5311,7 +5416,7 @@ var LeaferUI = (function (exports) {
         },
         __updateRenderBounds() {
             const layout = this.__layout;
-            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
         }
     };
 
@@ -5416,7 +5521,7 @@ var LeaferUI = (function (exports) {
     const { LEAF, create } = IncrementId;
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
-    const { copy: copy$3, move } = PointHelper;
+    const { copy: copy$4, move } = PointHelper;
     const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
@@ -5629,7 +5734,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 if (to)
-                    copy$3(to, world);
+                    copy$4(to, world);
             }
         }
         localToWorld(local, to, distance, relative) {
@@ -5638,7 +5743,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 if (to)
-                    copy$3(to, local);
+                    copy$4(to, local);
             }
         }
         worldToInner(world, to, distance, relative) {
@@ -5791,7 +5896,7 @@ var LeaferUI = (function (exports) {
         off(_type, _listener, _options) { }
         on_(_type, _listener, _bind, _options) { return undefined; }
         off_(_id) { }
-        once(_type, _listener, _capture) { }
+        once(_type, _listener, _captureOrBind, _capture) { }
         emit(_type, _event, _capture) { }
         emitEvent(_event, _capture) { }
         hasEvent(_type, _capture) { return false; }
@@ -6128,7 +6233,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.6.1";
+    const version = "1.6.3";
 
     const debug$4 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6468,17 +6573,15 @@ var LeaferUI = (function (exports) {
             this.target.emitEvent(new WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }));
             this.__updatedList = new LeafList();
             this.totalTimes++;
-            this.changed = false;
-            this.hasVisible = false;
-            this.hasRemove = false;
-            this.hasAdd = false;
+            this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false;
         }
         __listenEvents() {
-            const { target } = this;
             this.__eventIds = [
-                target.on_(PropertyEvent.CHANGE, this.__onAttrChange, this),
-                target.on_([ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this),
-                target.on_(WatchEvent.REQUEST, this.__onRquestData, this)
+                this.target.on_([
+                    [PropertyEvent.CHANGE, this.__onAttrChange, this],
+                    [[ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this],
+                    [WatchEvent.REQUEST, this.__onRquestData, this]
+                ])
             ];
         }
         __removeListenEvents() {
@@ -6488,13 +6591,12 @@ var LeaferUI = (function (exports) {
             if (this.target) {
                 this.stop();
                 this.__removeListenEvents();
-                this.target = null;
-                this.__updatedList = null;
+                this.target = this.__updatedList = null;
             }
         }
     }
 
-    const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
+    const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
     const { pushAllChildBranch, pushAllParent } = BranchHelper;
     function updateMatrix(updateList, levelList) {
         let layout;
@@ -6537,15 +6639,7 @@ var LeaferUI = (function (exports) {
         });
     }
     function updateChange(updateList) {
-        let layout;
-        updateList.list.forEach(leaf => {
-            layout = leaf.__layout;
-            if (layout.opacityChanged)
-                updateAllWorldOpacity(leaf);
-            if (layout.stateStyleChanged)
-                setTimeout(() => layout.stateStyleChanged && leaf.updateState());
-            leaf.__updateChange();
-        });
+        updateList.list.forEach(updateOneChange);
     }
 
     const { worldBounds } = LeafBoundsHelper;
@@ -6602,7 +6696,7 @@ var LeaferUI = (function (exports) {
             this.disabled = true;
         }
         layout() {
-            if (!this.running)
+            if (this.layouting || !this.running)
                 return;
             const { target } = this;
             this.times = 0;
@@ -6685,12 +6779,10 @@ var LeaferUI = (function (exports) {
         }
         static fullLayout(target) {
             updateAllMatrix(target, true);
-            if (target.isBranch) {
+            if (target.isBranch)
                 BranchHelper.updateBounds(target);
-            }
-            else {
+            else
                 LeafHelper.updateBounds(target);
-            }
             updateAllChange(target);
         }
         addExtra(leaf) {
@@ -6713,11 +6805,12 @@ var LeaferUI = (function (exports) {
             this.__updatedList = event.data.updatedList;
         }
         __listenEvents() {
-            const { target } = this;
             this.__eventIds = [
-                target.on_(LayoutEvent.REQUEST, this.layout, this),
-                target.on_(LayoutEvent.AGAIN, this.layoutAgain, this),
-                target.on_(WatchEvent.DATA, this.__onReceiveWatchData, this)
+                this.target.on_([
+                    [LayoutEvent.REQUEST, this.layout, this],
+                    [LayoutEvent.AGAIN, this.layoutAgain, this],
+                    [WatchEvent.DATA, this.__onReceiveWatchData, this]
+                ])
             ];
         }
         __removeListenEvents() {
@@ -6948,12 +7041,13 @@ var LeaferUI = (function (exports) {
             this.target.emitEvent(new RenderEvent(type, this.times, bounds, options));
         }
         __listenEvents() {
-            const { target } = this;
             this.__eventIds = [
-                target.on_(RenderEvent.REQUEST, this.update, this),
-                target.on_(LayoutEvent.END, this.__onLayoutEnd, this),
-                target.on_(RenderEvent.AGAIN, this.renderAgain, this),
-                target.on_(ResizeEvent.RESIZE, this.__onResize, this)
+                this.target.on_([
+                    [RenderEvent.REQUEST, this.update, this],
+                    [LayoutEvent.END, this.__onLayoutEnd, this],
+                    [RenderEvent.AGAIN, this.renderAgain, this],
+                    [ResizeEvent.RESIZE, this.__onResize, this]
+                ])
             ];
         }
         __removeListenEvents() {
@@ -7012,8 +7106,32 @@ var LeaferUI = (function (exports) {
         };
     }
 
+    function hasTransparent$3(color) {
+        if (!color || color.length === 7 || color.length === 4)
+            return false;
+        if (color === 'transparent')
+            return true;
+        const first = color[0];
+        if (first === '#') {
+            switch (color.length) {
+                case 5: return color[4] !== 'f' && color[4] !== 'F';
+                case 9: return (color[7] !== 'f' && color[7] !== 'F') || (color[8] !== 'f' && color[8] !== 'F');
+            }
+        }
+        else if (first === 'r' || first === 'h') {
+            if (color[3] === 'a') {
+                const i = color.lastIndexOf(',');
+                if (i > -1)
+                    return parseFloat(color.slice(i + 1)) < 1;
+            }
+        }
+        return false;
+    }
+
     const TextConvert = {};
-    const ColorConvert = {};
+    const ColorConvert = {
+        hasTransparent: hasTransparent$3
+    };
     const UnitConvert = {
         number(value, percentRefer) {
             return typeof value === 'object' ? (value.type === 'percent' ? value.value * percentRefer : value.value) : value;
@@ -7039,6 +7157,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { parse, objectToCanvasData } = PathConvert;
+    const { stintSet: stintSet$2 } = DataHelper, { hasTransparent: hasTransparent$2 } = ColorConvert;
     const emptyPaint = {};
     const debug$1 = Debug.get('UIData');
     class UIData extends LeafData {
@@ -7097,38 +7216,22 @@ var LeaferUI = (function (exports) {
             if (this.__naturalWidth)
                 this.__removeNaturalSize();
             if (typeof value === 'string' || !value) {
-                if (this.__isFills) {
-                    this.__removeInput('fill');
-                    PaintImage.recycleImage('fill', this);
-                    this.__isFills = false;
-                    this.__pixelFill && (this.__pixelFill = false);
-                }
+                stintSet$2(this, '__isTransparentFill', hasTransparent$2(value));
+                this.__isFills && this.__removePaint('fill', true);
                 this._fill = value;
             }
             else if (typeof value === 'object') {
-                this.__setInput('fill', value);
-                const layout = this.__leaf.__layout;
-                layout.boxChanged || layout.boxChange();
-                this.__isFills = true;
-                this._fill || (this._fill = emptyPaint);
+                this.__setPaint('fill', value);
             }
         }
         setStroke(value) {
             if (typeof value === 'string' || !value) {
-                if (this.__isStrokes) {
-                    this.__removeInput('stroke');
-                    PaintImage.recycleImage('stroke', this);
-                    this.__isStrokes = false;
-                    this.__pixelStroke && (this.__pixelStroke = false);
-                }
+                stintSet$2(this, '__isTransparentStroke', hasTransparent$2(value));
+                this.__isStrokes && this.__removePaint('stroke', true);
                 this._stroke = value;
             }
             else if (typeof value === 'object') {
-                this.__setInput('stroke', value);
-                const layout = this.__leaf.__layout;
-                layout.boxChanged || layout.boxChange();
-                this.__isStrokes = true;
-                this._stroke || (this._stroke = emptyPaint);
+                this.__setPaint('stroke', value);
             }
         }
         setPath(value) {
@@ -7158,7 +7261,34 @@ var LeaferUI = (function (exports) {
                 Paint.compute('fill', this.__leaf);
             if (stroke)
                 Paint.compute('stroke', this.__leaf);
-            this.__needComputePaint = false;
+            this.__needComputePaint = undefined;
+        }
+        __setPaint(attrName, value) {
+            this.__setInput(attrName, value);
+            const layout = this.__leaf.__layout;
+            layout.boxChanged || layout.boxChange();
+            if (value instanceof Array && !value.length) {
+                this.__removePaint(attrName);
+            }
+            else {
+                if (attrName === 'fill')
+                    this.__isFills = true, this._fill || (this._fill = emptyPaint);
+                else
+                    this.__isStrokes = true, this._stroke || (this._stroke = emptyPaint);
+            }
+        }
+        __removePaint(attrName, removeInput) {
+            if (removeInput)
+                this.__removeInput(attrName);
+            PaintImage.recycleImage(attrName, this);
+            if (attrName === 'fill') {
+                stintSet$2(this, '__isAlphaPixelFill', undefined);
+                this._fill = this.__isFills = undefined;
+            }
+            else {
+                stintSet$2(this, '__isAlphaPixelStroke', undefined);
+                this._stroke = this.__isStrokes = undefined;
+            }
         }
     }
     function setArray(data, key, value) {
@@ -7166,10 +7296,10 @@ var LeaferUI = (function (exports) {
         if (value instanceof Array) {
             if (value.some((item) => item.visible === false))
                 value = value.filter((item) => item.visible !== false);
-            value.length || (value = null);
+            value.length || (value = undefined);
         }
         else
-            value = value && value.visible !== false ? [value] : null;
+            value = value && value.visible !== false ? [value] : undefined;
         data['_' + key] = value;
     }
 
@@ -7233,13 +7363,11 @@ var LeaferUI = (function (exports) {
         setFontWeight(value) {
             if (typeof value === 'string') {
                 this.__setInput('fontWeight', value);
-                this._fontWeight = fontWeightMap[value] || 400;
-            }
-            else {
-                if (this.__input)
-                    this.__removeInput('fontWeight');
-                this._fontWeight = value;
+                value = fontWeightMap[value] || 400;
             }
+            else if (this.__input)
+                this.__removeInput('fontWeight');
+            this._fontWeight = value;
         }
         setBoxStyle(value) {
             let t = this.__leaf, box = t.__box;
@@ -7274,8 +7402,6 @@ var LeaferUI = (function (exports) {
             this._url = value;
         }
         __setImageFill(value) {
-            if (this.__leaf.image)
-                this.__leaf.image = null;
             this.fill = value ? { type: 'image', mode: 'stretch', url: value } : undefined;
         }
         __getData() {
@@ -7341,21 +7467,19 @@ var LeaferUI = (function (exports) {
         }
     };
 
+    const { stintSet: stintSet$1 } = DataHelper;
     const UIRender = {
         __updateChange() {
-            const data = this.__, w = this.__world;
+            const data = this.__;
             if (data.__useEffect) {
-                const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
-                data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
+                const { shadow, fill, stroke } = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
+                stintSet$1(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !(shadow[0].box && data.__isTransparentFill) && fill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
+                data.__useEffect = !!(shadow || otherEffect);
             }
-            const half = data.__hasHalf;
-            w.half !== half && (w.half = half);
+            stintSet$1(this.__world, 'half', data.__hasHalf);
+            stintSet$1(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
             data.__checkSingle();
-            const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
-            if (complex)
-                data.__complex = true;
-            else
-                data.__complex && (data.__complex = false);
+            stintSet$1(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
         },
         __drawFast(canvas, options) {
             drawFast(this, canvas, options);
@@ -7365,21 +7489,23 @@ var LeaferUI = (function (exports) {
             if (data.__complex) {
                 if (data.__needComputePaint)
                     data.__computePaint();
-                const { fill, stroke, __drawAfterFill } = data;
+                const { fill, stroke, __drawAfterFill, __fillAfterStroke, __isFastShadow } = data;
                 this.__drawRenderPath(canvas);
-                if (data.__useEffect) {
+                if (data.__useEffect && !__isFastShadow) {
                     const shape = Paint.shape(this, canvas, options);
                     this.__nowWorld = this.__getNowWorld(options);
                     const { shadow, innerShadow, filter } = data;
                     if (shadow)
                         Effect.shadow(this, canvas, shape);
+                    if (__fillAfterStroke)
+                        data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
                     if (fill)
                         data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
                     if (__drawAfterFill)
                         this.__drawAfterFill(canvas, options);
                     if (innerShadow)
                         Effect.innerShadow(this, canvas, shape);
-                    if (stroke)
+                    if (stroke && !__fillAfterStroke)
                         data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
                     if (filter)
                         Filter.apply(filter, this, this.__nowWorld, canvas, originCanvas, shape);
@@ -7388,21 +7514,27 @@ var LeaferUI = (function (exports) {
                     shape.canvas.recycle();
                 }
                 else {
+                    if (__fillAfterStroke)
+                        data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                    if (__isFastShadow) {
+                        const shadow = data.shadow[0], { scaleX, scaleY } = this.__nowWorld;
+                        canvas.save(), canvas.setWorldShadow(shadow.x * scaleX, shadow.y * scaleY, shadow.blur * scaleX, ColorConvert.string(shadow.color));
+                    }
                     if (fill)
                         data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                    if (__isFastShadow)
+                        canvas.restore();
                     if (__drawAfterFill)
                         this.__drawAfterFill(canvas, options);
-                    if (stroke)
+                    if (stroke && !__fillAfterStroke)
                         data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
                 }
             }
             else {
-                if (data.__pathInputed) {
+                if (data.__pathInputed)
                     drawFast(this, canvas, options);
-                }
-                else {
+                else
                     this.__drawFast(canvas, options);
-                }
             }
         },
         __renderShape(canvas, options, ignoreFill, ignoreStroke) {
@@ -7411,11 +7543,11 @@ var LeaferUI = (function (exports) {
                 const { fill, stroke } = this.__;
                 this.__drawRenderPath(canvas);
                 if (fill && !ignoreFill)
-                    this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+                    this.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
                 if (this.__.__isCanvas)
                     this.__drawAfterFill(canvas, options);
                 if (stroke && !ignoreStroke)
-                    this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
+                    this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
             }
         },
         __drawAfterFill(canvas, options) {
@@ -7430,13 +7562,15 @@ var LeaferUI = (function (exports) {
         }
     };
     function drawFast(ui, canvas, options) {
-        const { fill, stroke, __drawAfterFill } = ui.__;
+        const { fill, stroke, __drawAfterFill, __fillAfterStroke } = ui.__;
         ui.__drawRenderPath(canvas);
+        if (__fillAfterStroke)
+            Paint.stroke(stroke, ui, canvas);
         if (fill)
             Paint.fill(fill, ui, canvas);
         if (__drawAfterFill)
             ui.__drawAfterFill(canvas, options);
-        if (stroke)
+        if (stroke && !__fillAfterStroke)
             Paint.stroke(stroke, ui, canvas);
     }
 
@@ -7566,6 +7700,9 @@ var LeaferUI = (function (exports) {
             else
                 drawer.rect(x, y, width, height);
         }
+        drawImagePlaceholder(canvas, _image) {
+            Paint.fill(this.__.placeholderColor, this, canvas);
+        }
         animate(_keyframe, _options, _type, _isTemp) {
             return Plugin.need('animate');
         }
@@ -7802,6 +7939,12 @@ var LeaferUI = (function (exports) {
     __decorate([
         effectType()
     ], exports.UI.prototype, "filter", void 0);
+    __decorate([
+        surfaceType()
+    ], exports.UI.prototype, "placeholderColor", void 0);
+    __decorate([
+        dataType(100)
+    ], exports.UI.prototype, "placeholderDelay", void 0);
     __decorate([
         dataType({})
     ], exports.UI.prototype, "data", void 0);
@@ -8203,15 +8346,20 @@ var LeaferUI = (function (exports) {
         }
         __listenEvents() {
             const runId = Run.start('FirstCreate ' + this.innerName);
-            this.once(LeaferEvent.START, () => Run.end(runId));
-            this.once(LayoutEvent.START, () => this.updateLazyBounds());
-            this.once(RenderEvent.START, () => this.__onCreated());
-            this.once(RenderEvent.END, () => this.__onViewReady());
-            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(LayoutEvent.END, this.__onLayoutEnd, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
+            this.once([
+                [LeaferEvent.START, () => Run.end(runId)],
+                [LayoutEvent.START, this.updateLazyBounds, this],
+                [RenderEvent.START, this.__onCreated, this],
+                [RenderEvent.END, this.__onViewReady, this]
+            ]);
+            this.__eventIds.push(this.on_([
+                [WatchEvent.DATA, this.__onWatchData, this],
+                [LayoutEvent.END, this.__onLayoutEnd, this],
+                [RenderEvent.NEXT, this.__onNextRender, this]
+            ]));
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
-            this.__eventIds.length = 0;
         }
         destroy(sync) {
             const doDestory = () => {
@@ -8271,8 +8419,8 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Rect);
 
-    const { copy: copy$2, add, includes: includes$1 } = BoundsHelper;
-    const rect = exports.Rect.prototype, group = exports.Group.prototype;
+    const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
+    const rect$1 = exports.Rect.prototype, group = exports.Group.prototype;
     const childrenRenderBounds = {};
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
@@ -8317,15 +8465,15 @@ var LeaferUI = (function (exports) {
             const { renderBounds } = this.__layout;
             if (this.children.length) {
                 super.__updateRenderBounds();
-                copy$2(childrenRenderBounds, renderBounds);
+                copy$3(childrenRenderBounds, renderBounds);
                 this.__updateRectRenderBounds();
-                isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
+                isOverflow = !includes$1(renderBounds, childrenRenderBounds);
                 if (isOverflow && this.__.overflow !== 'hide')
                     add(renderBounds, childrenRenderBounds);
             }
             else
                 this.__updateRectRenderBounds();
-            this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+            DataHelper.stintSet(this, 'isOverflow', isOverflow);
         }
         __updateRectRenderBounds() { }
         __updateRectChange() { }
@@ -8369,25 +8517,25 @@ var LeaferUI = (function (exports) {
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
     __decorate([
-        rewrite(rect.__updateStrokeSpread)
+        rewrite(rect$1.__updateStrokeSpread)
     ], exports.Box.prototype, "__updateStrokeSpread", null);
     __decorate([
-        rewrite(rect.__updateRenderSpread)
+        rewrite(rect$1.__updateRenderSpread)
     ], exports.Box.prototype, "__updateRectRenderSpread", null);
     __decorate([
-        rewrite(rect.__updateBoxBounds)
+        rewrite(rect$1.__updateBoxBounds)
     ], exports.Box.prototype, "__updateRectBoxBounds", null);
     __decorate([
-        rewrite(rect.__updateStrokeBounds)
+        rewrite(rect$1.__updateStrokeBounds)
     ], exports.Box.prototype, "__updateStrokeBounds", null);
     __decorate([
-        rewrite(rect.__updateRenderBounds)
+        rewrite(rect$1.__updateRenderBounds)
     ], exports.Box.prototype, "__updateRectRenderBounds", null);
     __decorate([
-        rewrite(rect.__updateChange)
+        rewrite(rect$1.__updateChange)
     ], exports.Box.prototype, "__updateRectChange", null);
     __decorate([
-        rewrite(rect.__render)
+        rewrite(rect$1.__render)
     ], exports.Box.prototype, "__renderRect", null);
     __decorate([
         rewrite(group.__render)
@@ -8629,17 +8777,10 @@ var LeaferUI = (function (exports) {
 
     exports.Image = class Image extends exports.Rect {
         get __tag() { return 'Image'; }
-        get ready() { return this.image ? this.image.ready : false; }
+        get ready() { const { image } = this; return image && image.ready; }
+        get image() { const { fill } = this.__; return fill instanceof Array && fill[0].image; }
         constructor(data) {
             super(data);
-            this.on(ImageEvent.LOADED, (e) => {
-                if (e.attrName === 'fill' && e.attrValue.url === this.url)
-                    this.image = e.image;
-            });
-        }
-        destroy() {
-            this.image = null;
-            super.destroy();
         }
     };
     __decorate([
@@ -8655,11 +8796,11 @@ var LeaferUI = (function (exports) {
 
     exports.Canvas = class Canvas extends exports.Rect {
         get __tag() { return 'Canvas'; }
+        get context() { return this.canvas.context; }
         get ready() { return !this.url; }
         constructor(data) {
             super(data);
             this.canvas = Creator.canvas(this.__);
-            this.context = this.canvas.context;
             if (data && data.url)
                 this.drawImage(data.url);
         }
@@ -8703,7 +8844,7 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.canvas) {
                 this.canvas.destroy();
-                this.canvas = this.context = null;
+                this.canvas = null;
             }
             super.destroy();
         }
@@ -8749,7 +8890,7 @@ var LeaferUI = (function (exports) {
             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' && !data.__autoSize;
-            data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
+            data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__);
         }
         __updateBoxBounds() {
             const data = this.__;
@@ -8779,12 +8920,11 @@ var LeaferUI = (function (exports) {
                 super.__updateBoxBounds();
             if (italic)
                 b.width += fontSize * 0.16;
-            const isOverflow = !includes(b, contentBounds) || undefined;
-            if (isOverflow)
+            DataHelper.stintSet(this, 'isOverflow', !includes(b, contentBounds));
+            if (this.isOverflow)
                 setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
             else
                 data.__textBoxBounds = b;
-            this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
         }
         __onUpdateSize() {
             if (this.__box)
@@ -8847,6 +8987,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType('')
     ], exports.Text.prototype, "text", void 0);
+    __decorate([
+        boundsType('')
+    ], exports.Text.prototype, "placeholder", void 0);
     __decorate([
         boundsType('caption')
     ], exports.Text.prototype, "fontFamily", void 0);
@@ -8966,8 +9109,10 @@ var LeaferUI = (function (exports) {
     }
 
     function fillText(ui, canvas) {
-        let row, data = ui.__.__textDrawData;
-        const { rows, decorationY } = data;
+        const data = ui.__, { rows, decorationY } = data.__textDrawData;
+        if (data.__isPlacehold && data.placeholderColor)
+            canvas.fillStyle = data.placeholderColor;
+        let row;
         for (let i = 0, len = rows.length; i < len; i++) {
             row = rows[i];
             if (row.text)
@@ -8976,7 +9121,7 @@ var LeaferUI = (function (exports) {
                 row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
         }
         if (decorationY) {
-            const { decorationColor, decorationHeight } = data;
+            const { decorationColor, decorationHeight } = data.__textDrawData;
             if (decorationColor)
                 canvas.fillStyle = decorationColor;
             rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
@@ -8985,65 +9130,596 @@ var LeaferUI = (function (exports) {
 
     function fill(fill, ui, canvas) {
         canvas.fillStyle = fill;
-        ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+        fillPathOrText(ui, canvas);
     }
     function fills(fills, ui, canvas) {
         let item;
-        const { windingRule, __font } = ui.__;
         for (let i = 0, len = fills.length; i < len; i++) {
             item = fills[i];
-            if (item.image && PaintImage.checkImage(ui, canvas, item, !__font))
-                continue;
-            if (item.style) {
-                canvas.fillStyle = item.style;
-                if (item.transform) {
-                    canvas.save();
-                    canvas.transform(item.transform);
-                    if (item.blendMode)
-                        canvas.blendMode = item.blendMode;
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    canvas.restore();
+            if (item.image) {
+                if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
+                    continue;
+                if (!item.style) {
+                    if (!i && item.image.isPlacehold)
+                        ui.drawImagePlaceholder(canvas, item.image);
+                    continue;
                 }
-                else {
-                    if (item.blendMode) {
-                        canvas.saveBlendMode(item.blendMode);
-                        __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                        canvas.restoreBlendMode();
-                    }
-                    else {
-                        __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    }
+            }
+            canvas.fillStyle = item.style;
+            if (item.transform) {
+                canvas.save();
+                canvas.transform(item.transform);
+                if (item.blendMode)
+                    canvas.blendMode = item.blendMode;
+                fillPathOrText(ui, canvas);
+                canvas.restore();
+            }
+            else {
+                if (item.blendMode) {
+                    canvas.saveBlendMode(item.blendMode);
+                    fillPathOrText(ui, canvas);
+                    canvas.restoreBlendMode();
                 }
+                else
+                    fillPathOrText(ui, canvas);
             }
         }
     }
+    function fillPathOrText(ui, canvas) {
+        ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    }
+
+    let App = class App extends exports.Leafer {
+        get __tag() { return 'App'; }
+        get isApp() { return true; }
+        constructor(userConfig, data) {
+            super(userConfig, data);
+        }
+        init(userConfig, parentApp) {
+            super.init(userConfig, parentApp);
+            if (userConfig) {
+                const { ground, tree, sky, editor } = userConfig;
+                if (ground)
+                    this.ground = this.addLeafer(ground);
+                if (tree || editor)
+                    this.tree = this.addLeafer(tree || { type: userConfig.type || 'design' });
+                if (sky || editor)
+                    this.sky = this.addLeafer(sky);
+                if (editor)
+                    Creator.editor(editor, this);
+            }
+        }
+        __setApp() {
+            const { canvas } = this;
+            const { realCanvas, view } = this.config;
+            if (realCanvas || view === this.canvas.view || !canvas.parentView)
+                this.realCanvas = true;
+            else
+                canvas.unrealCanvas();
+            this.leafer = this;
+            this.watcher.disable();
+            this.layouter.disable();
+        }
+        __updateLocalBounds() {
+            this.forEach(leafer => leafer.updateLayout());
+            super.__updateLocalBounds();
+        }
+        start() {
+            super.start();
+            this.forEach(leafer => leafer.start());
+        }
+        stop() {
+            this.forEach(leafer => leafer.stop());
+            super.stop();
+        }
+        unlockLayout() {
+            super.unlockLayout();
+            this.forEach(leafer => leafer.unlockLayout());
+        }
+        lockLayout() {
+            super.lockLayout();
+            this.forEach(leafer => leafer.lockLayout());
+        }
+        forceRender(bounds, sync) {
+            this.forEach(leafer => leafer.forceRender(bounds, sync));
+        }
+        addLeafer(merge) {
+            const leafer = new exports.Leafer(merge);
+            this.add(leafer);
+            return leafer;
+        }
+        add(leafer, index) {
+            if (!leafer.view) {
+                if (this.realCanvas && !this.canvas.bounds) {
+                    setTimeout(() => this.add(leafer, index), 10);
+                    return;
+                }
+                leafer.init(this.__getChildConfig(leafer.userConfig), this);
+            }
+            super.add(leafer, index);
+            if (index !== undefined)
+                leafer.canvas.childIndex = index;
+            this.__listenChildEvents(leafer);
+        }
+        forEach(fn) {
+            this.children.forEach(fn);
+        }
+        __onCreated() {
+            this.created = this.children.every(child => child.created);
+        }
+        __onReady() {
+            if (this.children.every(child => child.ready))
+                super.__onReady();
+        }
+        __onViewReady() {
+            if (this.children.every(child => child.viewReady))
+                super.__onViewReady();
+        }
+        __onChildRenderEnd(e) {
+            this.renderer.addBlock(e.renderBounds);
+            if (this.viewReady)
+                this.renderer.update();
+        }
+        __render(canvas, options) {
+            if (canvas.context)
+                this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options && options.bounds));
+        }
+        __onResize(event) {
+            this.forEach(leafer => leafer.resize(event));
+            super.__onResize(event);
+        }
+        updateLayout() {
+            this.forEach(leafer => leafer.updateLayout());
+        }
+        __getChildConfig(userConfig) {
+            const config = Object.assign({}, this.config);
+            config.hittable = config.realCanvas = undefined;
+            if (userConfig)
+                DataHelper.assign(config, userConfig);
+            if (this.autoLayout)
+                DataHelper.copyAttrs(config, this, canvasSizeAttrs);
+            config.view = this.realCanvas ? undefined : this.view;
+            config.fill = undefined;
+            return config;
+        }
+        __listenChildEvents(leafer) {
+            leafer.once([
+                [LayoutEvent.END, this.__onReady, this],
+                [RenderEvent.START, this.__onCreated, this],
+                [RenderEvent.END, this.__onViewReady, this]
+            ]);
+            if (this.realCanvas)
+                this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
+        }
+    };
+    App = __decorate([
+        registerUI()
+    ], App);
+
+    const downKeyMap = {};
+    const Keyboard = {
+        isHoldSpaceKey() {
+            return Keyboard.isHold('Space');
+        },
+        isHold(code) {
+            return downKeyMap[code];
+        },
+        setDownCode(code) {
+            if (!downKeyMap[code])
+                downKeyMap[code] = true;
+        },
+        setUpCode(code) {
+            downKeyMap[code] = false;
+        }
+    };
+
+    const PointerButton = {
+        LEFT: 1,
+        RIGHT: 2,
+        MIDDLE: 4,
+        defaultLeft(event) { if (!event.buttons)
+            event.buttons = 1; },
+        left(event) { return event.buttons === 1; },
+        right(event) { return event.buttons === 2; },
+        middle(event) { return event.buttons === 4; }
+    };
+
+    class UIEvent extends Event {
+        get spaceKey() { return Keyboard.isHoldSpaceKey(); }
+        get left() { return PointerButton.left(this); }
+        get right() { return PointerButton.right(this); }
+        get middle() { return PointerButton.middle(this); }
+        constructor(params) {
+            super(params.type);
+            this.bubbles = true;
+            Object.assign(this, params);
+        }
+        getBoxPoint(relative) {
+            return (relative || this.current).getBoxPoint(this);
+        }
+        getInnerPoint(relative) {
+            return (relative || this.current).getInnerPoint(this);
+        }
+        getLocalPoint(relative) {
+            return (relative || this.current).getLocalPoint(this);
+        }
+        getPagePoint() {
+            return this.current.getPagePoint(this);
+        }
+        getInner(relative) { return this.getInnerPoint(relative); }
+        getLocal(relative) { return this.getLocalPoint(relative); }
+        getPage() { return this.getPagePoint(); }
+        static changeName(oldName, newName) {
+            EventCreator.changeName(oldName, newName);
+        }
+    }
+
+    let PointerEvent$1 = class PointerEvent extends UIEvent {
+    };
+    PointerEvent$1.POINTER = 'pointer';
+    PointerEvent$1.BEFORE_DOWN = 'pointer.before_down';
+    PointerEvent$1.BEFORE_MOVE = 'pointer.before_move';
+    PointerEvent$1.BEFORE_UP = 'pointer.before_up';
+    PointerEvent$1.DOWN = 'pointer.down';
+    PointerEvent$1.MOVE = 'pointer.move';
+    PointerEvent$1.UP = 'pointer.up';
+    PointerEvent$1.OVER = 'pointer.over';
+    PointerEvent$1.OUT = 'pointer.out';
+    PointerEvent$1.ENTER = 'pointer.enter';
+    PointerEvent$1.LEAVE = 'pointer.leave';
+    PointerEvent$1.TAP = 'tap';
+    PointerEvent$1.DOUBLE_TAP = 'double_tap';
+    PointerEvent$1.CLICK = 'click';
+    PointerEvent$1.DOUBLE_CLICK = 'double_click';
+    PointerEvent$1.LONG_PRESS = 'long_press';
+    PointerEvent$1.LONG_TAP = 'long_tap';
+    PointerEvent$1.MENU = 'pointer.menu';
+    PointerEvent$1.MENU_TAP = 'pointer.menu_tap';
+    PointerEvent$1 = __decorate([
+        registerUIEvent()
+    ], PointerEvent$1);
+
+    const tempMove = {};
+    let DragEvent$1 = class DragEvent extends PointerEvent$1 {
+        static setList(data) {
+            this.list = data instanceof LeafList ? data : new LeafList(data);
+        }
+        static setData(data) {
+            this.data = data;
+        }
+        static getValidMove(leaf, start, total) {
+            const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
+            PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
+            if (dragBounds)
+                this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
+            if (draggable === 'x')
+                move.y = 0;
+            if (draggable === 'y')
+                move.x = 0;
+            return move;
+        }
+        static getMoveInDragBounds(childBox, dragBounds, move, change) {
+            const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
+            const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
+            if (!change)
+                move = Object.assign({}, move);
+            if (BoundsHelper.includes(childBox, dragBounds)) {
+                if (x > dragBounds.x)
+                    move.x += dragBounds.x - x;
+                else if (right < boundsRight)
+                    move.x += boundsRight - right;
+                if (y > dragBounds.y)
+                    move.y += dragBounds.y - y;
+                else if (bottom < boundsBottom)
+                    move.y += boundsBottom - bottom;
+            }
+            else {
+                if (x < dragBounds.x)
+                    move.x += dragBounds.x - x;
+                else if (right > boundsRight)
+                    move.x += boundsRight - right;
+                if (y < dragBounds.y)
+                    move.y += dragBounds.y - y;
+                else if (bottom > boundsBottom)
+                    move.y += boundsBottom - bottom;
+            }
+            return move;
+        }
+        getPageMove(total) {
+            this.assignMove(total);
+            return this.current.getPagePoint(tempMove, null, true);
+        }
+        getInnerMove(relative, total) {
+            if (!relative)
+                relative = this.current;
+            this.assignMove(total);
+            return relative.getInnerPoint(tempMove, null, true);
+        }
+        getLocalMove(relative, total) {
+            if (!relative)
+                relative = this.current;
+            this.assignMove(total);
+            return relative.getLocalPoint(tempMove, null, true);
+        }
+        getPageTotal() {
+            return this.getPageMove(true);
+        }
+        getInnerTotal(relative) {
+            return this.getInnerMove(relative, true);
+        }
+        getLocalTotal(relative) {
+            return this.getLocalMove(relative, true);
+        }
+        getPageBounds() {
+            const total = this.getPageTotal(), start = this.getPagePoint(), bounds = {};
+            BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
+            BoundsHelper.unsign(bounds);
+            return bounds;
+        }
+        assignMove(total) {
+            tempMove.x = total ? this.totalX : this.moveX;
+            tempMove.y = total ? this.totalY : this.moveY;
+        }
+    };
+    DragEvent$1.BEFORE_DRAG = 'drag.before_drag';
+    DragEvent$1.START = 'drag.start';
+    DragEvent$1.DRAG = 'drag';
+    DragEvent$1.END = 'drag.end';
+    DragEvent$1.OVER = 'drag.over';
+    DragEvent$1.OUT = 'drag.out';
+    DragEvent$1.ENTER = 'drag.enter';
+    DragEvent$1.LEAVE = 'drag.leave';
+    DragEvent$1 = __decorate([
+        registerUIEvent()
+    ], DragEvent$1);
+
+    let DropEvent = class DropEvent extends PointerEvent$1 {
+        static setList(data) {
+            DragEvent$1.setList(data);
+        }
+        static setData(data) {
+            DragEvent$1.setData(data);
+        }
+    };
+    DropEvent.DROP = 'drop';
+    DropEvent = __decorate([
+        registerUIEvent()
+    ], DropEvent);
+
+    let MoveEvent = class MoveEvent extends DragEvent$1 {
+    };
+    MoveEvent.BEFORE_MOVE = 'move.before_move';
+    MoveEvent.START = 'move.start';
+    MoveEvent.MOVE = 'move';
+    MoveEvent.END = 'move.end';
+    MoveEvent = __decorate([
+        registerUIEvent()
+    ], MoveEvent);
+
+    let RotateEvent = class RotateEvent extends PointerEvent$1 {
+    };
+    RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
+    RotateEvent.START = 'rotate.start';
+    RotateEvent.ROTATE = 'rotate';
+    RotateEvent.END = 'rotate.end';
+    RotateEvent = __decorate([
+        registerUIEvent()
+    ], RotateEvent);
+
+    let SwipeEvent = class SwipeEvent extends DragEvent$1 {
+    };
+    SwipeEvent.SWIPE = 'swipe';
+    SwipeEvent.LEFT = 'swipe.left';
+    SwipeEvent.RIGHT = 'swipe.right';
+    SwipeEvent.UP = 'swipe.up';
+    SwipeEvent.DOWN = 'swipe.down';
+    SwipeEvent = __decorate([
+        registerUIEvent()
+    ], SwipeEvent);
+
+    let ZoomEvent = class ZoomEvent extends PointerEvent$1 {
+    };
+    ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
+    ZoomEvent.START = 'zoom.start';
+    ZoomEvent.ZOOM = 'zoom';
+    ZoomEvent.END = 'zoom.end';
+    ZoomEvent = __decorate([
+        registerUIEvent()
+    ], ZoomEvent);
+
+    let KeyEvent = class KeyEvent extends UIEvent {
+    };
+    KeyEvent.DOWN = 'key.down';
+    KeyEvent.HOLD = 'key.hold';
+    KeyEvent.UP = 'key.up';
+    KeyEvent = __decorate([
+        registerUIEvent()
+    ], KeyEvent);
+
+    new LeafList();
+
+    Debug.get('emit');
+
+    const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
+    const inner = {};
+    const leaf = exports.Leaf.prototype;
+    leaf.__hitWorld = function (point) {
+        const data = this.__;
+        if (!data.hitSelf)
+            return false;
+        const world = this.__world, layout = this.__layout;
+        const isSmall = world.width < 10 && world.height < 10;
+        if (data.hitRadius) {
+            copy$2(inner, point), point = inner;
+            setRadius(point, data.hitRadius);
+        }
+        toInnerRadiusPointOf(point, world, inner);
+        if (data.hitBox || isSmall) {
+            if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
+                return true;
+            if (isSmall)
+                return false;
+        }
+        if (layout.hitCanvasChanged || !this.__hitCanvas) {
+            this.__updateHitCanvas();
+            if (!layout.boundsChanged)
+                layout.hitCanvasChanged = false;
+        }
+        return this.__hit(inner);
+    };
+    leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
+    leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
+    leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+    leaf.__drawHitPath = function (canvas) { if (canvas)
+        this.__drawRenderPath(canvas); };
+
+    const matrix = new Matrix();
+    const ui$1 = exports.UI.prototype;
+    ui$1.__updateHitCanvas = function () {
+        if (this.__box)
+            this.__box.__updateHitCanvas();
+        const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
+        const isHitPixelFill = (data.__isAlphaPixelFill || data.__isCanvas) && data.hitFill === 'pixel';
+        const isHitPixelStroke = data.__isAlphaPixelStroke && data.hitStroke === 'pixel';
+        const isHitPixel = isHitPixelFill || isHitPixelStroke;
+        if (!this.__hitCanvas)
+            this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this);
+        const h = this.__hitCanvas;
+        if (isHitPixel) {
+            const { renderBounds } = this.__layout;
+            const size = Platform.image.hitCanvasSize;
+            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
+            const { x, y, width, height } = tempBounds$1.set(renderBounds).scale(scale);
+            h.resize({ width, height, pixelRatio: 1 });
+            h.clear();
+            ImageManager.patternLocked = true;
+            this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+            ImageManager.patternLocked = false;
+            h.resetTransform();
+            data.__isHitPixel = true;
+        }
+        else {
+            data.__isHitPixel && (data.__isHitPixel = false);
+        }
+        this.__drawHitPath(h);
+        h.setStrokeOptions(data);
+    };
+    ui$1.__hit = function (inner) {
+        if (this.__box && this.__box.__hit(inner))
+            return true;
+        const data = this.__;
+        if (data.__isHitPixel && this.__hitPixel(inner))
+            return true;
+        const { hitFill } = data;
+        const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__isAlphaPixelFill || data.__isCanvas)))) || hitFill === 'all';
+        if (needHitFillPath && this.__hitFill(inner))
+            return true;
+        const { hitStroke, __strokeWidth } = data;
+        const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__isAlphaPixelStroke))) || hitStroke === 'all';
+        if (!needHitFillPath && !needHitStrokePath)
+            return false;
+        const radiusWidth = inner.radiusX * 2;
+        let hitWidth = radiusWidth;
+        if (needHitStrokePath) {
+            switch (data.strokeAlign) {
+                case 'inside':
+                    hitWidth += __strokeWidth * 2;
+                    if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
+                        return true;
+                    hitWidth = radiusWidth;
+                    break;
+                case 'center':
+                    hitWidth += __strokeWidth;
+                    break;
+                case 'outside':
+                    hitWidth += __strokeWidth * 2;
+                    if (!needHitFillPath) {
+                        if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
+                            return true;
+                        hitWidth = radiusWidth;
+                    }
+                    break;
+            }
+        }
+        return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
+    };
+
+    const ui = exports.UI.prototype, rect = exports.Rect.prototype, box$1 = exports.Box.prototype;
+    rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
+        if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
+            ui.__updateHitCanvas.call(this);
+        else if (this.__hitCanvas)
+            this.__hitCanvas = null;
+    };
+    rect.__hitFill = box$1.__hitFill = function (inner) {
+        return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+    };
+
+    exports.Text.prototype.__drawHitPath = function (canvas) {
+        const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
+        canvas.beginPath();
+        if (__letterSpacing < 0)
+            this.__drawPathByBox(canvas);
+        else
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
+    };
+
+    function getSelector(ui) {
+        return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+    }
+    exports.Group.prototype.pick = function (hitPoint, options) {
+        options || (options = emptyData);
+        this.updateLayout();
+        return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
+    };
+
+    const canvas = LeaferCanvasBase.prototype;
+    canvas.hitFill = function (point, fillRule) {
+        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
+    };
+    canvas.hitStroke = function (point, strokeWidth) {
+        this.strokeWidth = strokeWidth;
+        return this.context.isPointInStroke(point.x, point.y);
+    };
+    canvas.hitPixel = function (radiusPoint, offset, scale = 1) {
+        let { x, y, radiusX, radiusY } = radiusPoint;
+        if (offset)
+            x -= offset.x, y -= offset.y;
+        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+        for (let i = 0, len = data.length; i < len; i += 4) {
+            if (data[i + 3] > 0)
+                return true;
+        }
+        return data[3] > 0;
+    };
 
     function strokeText(stroke, ui, canvas) {
-        const { strokeAlign } = ui.__;
-        const isStrokes = typeof stroke !== 'string';
-        switch (strokeAlign) {
+        switch (ui.__.strokeAlign) {
             case 'center':
-                canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
-                isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+                drawCenter$1(stroke, 1, ui, canvas);
                 break;
             case 'inside':
-                drawAlignStroke('inside', stroke, isStrokes, ui, canvas);
+                drawAlign(stroke, 'inside', ui, canvas);
                 break;
             case 'outside':
-                drawAlignStroke('outside', stroke, isStrokes, ui, canvas);
+                ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas);
                 break;
         }
     }
-    function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
-        const { __strokeWidth, __font } = ui.__;
+    function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
+        const data = ui.__;
+        canvas.setStroke(!data.__isStrokes && stroke, data.strokeWidth * strokeWidthScale, data);
+        data.__isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+    }
+    function drawAlign(stroke, align, ui, canvas) {
         const out = canvas.getSameCanvas(true, true);
-        out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__);
-        out.font = __font;
-        isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
+        out.font = ui.__.__font;
+        drawCenter$1(stroke, 2, ui, out);
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
-        if (ui.__worldFlipped)
+        if (ui.__worldFlipped || Platform.fullImageShadow)
             canvas.copyWorldByReset(out, ui.__nowWorld);
         else
             canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
@@ -9085,90 +9761,60 @@ var LeaferUI = (function (exports) {
     }
 
     function stroke(stroke, ui, canvas) {
-        const options = ui.__;
-        const { __strokeWidth, strokeAlign, __font } = options;
-        if (!__strokeWidth)
+        const data = ui.__;
+        if (!data.__strokeWidth)
             return;
-        if (__font) {
+        if (data.__font) {
             strokeText(stroke, ui, canvas);
         }
         else {
-            switch (strokeAlign) {
+            switch (data.strokeAlign) {
                 case 'center':
-                    canvas.setStroke(stroke, __strokeWidth, options);
-                    canvas.stroke();
-                    if (options.__useArrow)
-                        strokeArrow(ui, canvas);
+                    drawCenter(stroke, 1, ui, canvas);
                     break;
                 case 'inside':
-                    canvas.save();
-                    canvas.setStroke(stroke, __strokeWidth * 2, options);
-                    options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                    canvas.stroke();
-                    canvas.restore();
+                    drawInside(stroke, ui, canvas);
                     break;
                 case 'outside':
-                    const out = canvas.getSameCanvas(true, true);
-                    out.setStroke(stroke, __strokeWidth * 2, options);
-                    ui.__drawRenderPath(out);
-                    out.stroke();
-                    options.windingRule ? out.clip(options.windingRule) : out.clip();
-                    out.clearWorld(ui.__layout.renderBounds);
-                    if (ui.__worldFlipped)
-                        canvas.copyWorldByReset(out, ui.__nowWorld);
-                    else
-                        canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-                    out.recycle(ui.__nowWorld);
+                    drawOutside(stroke, ui, canvas);
                     break;
             }
         }
     }
     function strokes(strokes, ui, canvas) {
-        const options = ui.__;
-        const { __strokeWidth, strokeAlign, __font } = options;
-        if (!__strokeWidth)
-            return;
-        if (__font) {
-            strokeText(strokes, ui, canvas);
+        stroke(strokes, ui, canvas);
+    }
+    function drawCenter(stroke, strokeWidthScale, ui, canvas) {
+        const data = ui.__;
+        canvas.setStroke(!data.__isStrokes && stroke, data.__strokeWidth * strokeWidthScale, data);
+        data.__isStrokes ? drawStrokesStyle(stroke, false, ui, canvas) : canvas.stroke();
+        if (data.__useArrow)
+            Paint.strokeArrow(stroke, ui, canvas);
+    }
+    function drawInside(stroke, ui, canvas) {
+        const data = ui.__;
+        canvas.save();
+        data.windingRule ? canvas.clip(data.windingRule) : canvas.clip();
+        drawCenter(stroke, 2, ui, canvas);
+        canvas.restore();
+    }
+    function drawOutside(stroke, ui, canvas) {
+        const data = ui.__;
+        if (data.__fillAfterStroke) {
+            drawCenter(stroke, 2, ui, canvas);
         }
         else {
-            switch (strokeAlign) {
-                case 'center':
-                    canvas.setStroke(undefined, __strokeWidth, options);
-                    drawStrokesStyle(strokes, false, ui, canvas);
-                    if (options.__useArrow)
-                        strokeArrow(ui, canvas);
-                    break;
-                case 'inside':
-                    canvas.save();
-                    canvas.setStroke(undefined, __strokeWidth * 2, options);
-                    options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                    drawStrokesStyle(strokes, false, ui, canvas);
-                    canvas.restore();
-                    break;
-                case 'outside':
-                    const { renderBounds } = ui.__layout;
-                    const out = canvas.getSameCanvas(true, true);
-                    ui.__drawRenderPath(out);
-                    out.setStroke(undefined, __strokeWidth * 2, options);
-                    drawStrokesStyle(strokes, false, ui, out);
-                    options.windingRule ? out.clip(options.windingRule) : out.clip();
-                    out.clearWorld(renderBounds);
-                    if (ui.__worldFlipped)
-                        canvas.copyWorldByReset(out, ui.__nowWorld);
-                    else
-                        canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
-                    out.recycle(ui.__nowWorld);
-                    break;
-            }
-        }
-    }
-    function strokeArrow(ui, canvas) {
-        if (ui.__.dashPattern) {
-            canvas.beginPath();
-            ui.__drawPathByData(canvas, ui.__.__pathForArrow);
-            canvas.dashPattern = null;
-            canvas.stroke();
+            const { renderBounds } = ui.__layout;
+            const out = canvas.getSameCanvas(true, true);
+            ui.__drawRenderPath(out);
+            drawCenter(stroke, 2, ui, out);
+            data.windingRule ? out.clip(data.windingRule) : out.clip();
+            out.clearWorld(renderBounds);
+            if (ui.__worldFlipped || Platform.fullImageShadow)
+                canvas.copyWorldByReset(out, ui.__nowWorld);
+            else
+                canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
+            out.recycle(ui.__nowWorld);
         }
     }
 
@@ -9215,9 +9861,10 @@ var LeaferUI = (function (exports) {
     }
 
     let recycleMap;
+    const { stintSet } = DataHelper, { hasTransparent: hasTransparent$1 } = ColorConvert;
     function compute(attrName, ui) {
         const data = ui.__, leafPaints = [];
-        let paints = data.__input[attrName], hasOpacityPixel;
+        let paints = data.__input[attrName], isAlphaPixel, isTransparent;
         if (!(paints instanceof Array))
             paints = [paints];
         recycleMap = PaintImage.recycleImage(attrName, data);
@@ -9227,35 +9874,62 @@ var LeaferUI = (function (exports) {
                 leafPaints.push(item);
         }
         data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
-        if (leafPaints.length && leafPaints[0].image)
-            hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
-        attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
+        if (leafPaints.length) {
+            if (leafPaints.every(item => item.isTransparent)) {
+                if (leafPaints.some(item => item.image))
+                    isAlphaPixel = true;
+                isTransparent = true;
+            }
+        }
+        if (attrName === 'fill') {
+            stintSet(data, '__isAlphaPixelFill', isAlphaPixel);
+            stintSet(data, '__isTransparentFill', isTransparent);
+        }
+        else {
+            stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
+            stintSet(data, '__isTransparentStroke', isTransparent);
+        }
     }
     function getLeafPaint(attrName, paint, ui) {
         if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
             return undefined;
+        let data;
         const { boxBounds } = ui.__layout;
         switch (paint.type) {
-            case 'solid':
-                let { type, blendMode, color, opacity } = paint;
-                return { type, blendMode, style: ColorConvert.string(color, opacity) };
             case 'image':
-                return PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+                data = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+                break;
             case 'linear':
-                return PaintGradient.linearGradient(paint, boxBounds);
+                data = PaintGradient.linearGradient(paint, boxBounds);
+                break;
             case 'radial':
-                return PaintGradient.radialGradient(paint, boxBounds);
+                data = PaintGradient.radialGradient(paint, boxBounds);
+                break;
             case 'angular':
-                return PaintGradient.conicGradient(paint, boxBounds);
+                data = PaintGradient.conicGradient(paint, boxBounds);
+                break;
+            case 'solid':
+                const { type, blendMode, color, opacity } = paint;
+                data = { type, blendMode, style: ColorConvert.string(color, opacity) };
+                break;
             default:
-                return paint.r !== undefined ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
+                if (paint.r !== undefined)
+                    data = { type: 'solid', style: ColorConvert.string(paint) };
         }
+        if (data) {
+            if (typeof data.style === 'string' && hasTransparent$1(data.style))
+                data.isTransparent = true;
+            if (paint.blendMode)
+                data.blendMode = paint.blendMode;
+        }
+        return data;
     }
 
     const PaintModule = {
         compute,
         fill,
         fills,
+        fillPathOrText,
         fillText,
         stroke,
         strokes,
@@ -9314,12 +9988,10 @@ var LeaferUI = (function (exports) {
 
     const { get: get$2, translate } = MatrixHelper;
     const tempBox = new Bounds();
-    const tempPoint = {};
     const tempScaleData = {};
+    const tempImage = {};
     function createData(leafPaint, image, paint, box) {
-        const { blendMode, changeful, sync } = paint;
-        if (blendMode)
-            leafPaint.blendMode = blendMode;
+        const { changeful, sync } = paint;
         if (changeful)
             leafPaint.changeful = changeful;
         if (sync)
@@ -9327,38 +9999,38 @@ var LeaferUI = (function (exports) {
         leafPaint.data = getPatternData(paint, box, image);
     }
     function getPatternData(paint, box, image) {
-        let { width, height } = image;
         if (paint.padding)
             box = tempBox.set(box).shrink(paint.padding);
         if (paint.mode === 'strench')
             paint.mode = 'stretch';
+        let { width, height } = image;
         const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
         const sameBox = box.width === width && box.height === height;
         const data = { mode };
         const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
-        const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
-        let x = 0, y = 0, scaleX, scaleY;
+        BoundsHelper.set(tempImage, 0, 0, swapSize ? height : width, swapSize ? width : height);
+        let scaleX, scaleY;
         if (!mode || mode === 'cover' || mode === 'fit') {
             if (!sameBox || rotation) {
-                const sw = box.width / swapWidth, sh = box.height / swapHeight;
-                scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
-                x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
+                scaleX = scaleY = BoundsHelper.getFitScale(box, tempImage, mode !== 'fit');
+                BoundsHelper.put(box, image, align, scaleX, false, tempImage);
+                BoundsHelper.scale(tempImage, scaleX, scaleY, true);
             }
         }
-        else if (scale || size) {
-            MathHelper.getScaleData(scale, size, image, tempScaleData);
-            scaleX = tempScaleData.scaleX;
-            scaleY = tempScaleData.scaleY;
-        }
-        if (align) {
-            const imageBounds = { x, y, width: swapWidth, height: swapHeight };
-            if (scaleX)
-                imageBounds.width *= scaleX, imageBounds.height *= scaleY;
-            AlignHelper.toPoint(align, imageBounds, box, tempPoint, true);
-            x += tempPoint.x, y += tempPoint.y;
+        else {
+            if (scale || size) {
+                MathHelper.getScaleData(scale, size, image, tempScaleData);
+                scaleX = tempScaleData.scaleX;
+                scaleY = tempScaleData.scaleY;
+            }
+            if (align) {
+                if (scaleX)
+                    BoundsHelper.scale(tempImage, scaleX, scaleY, true);
+                AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
+            }
         }
         if (offset)
-            x += offset.x, y += offset.y;
+            PointHelper.move(tempImage, offset);
         switch (mode) {
             case 'stretch':
                 if (!sameBox)
@@ -9366,12 +10038,12 @@ var LeaferUI = (function (exports) {
                 break;
             case 'normal':
             case 'clip':
-                if (x || y || scaleX || rotation)
-                    clipMode(data, box, x, y, scaleX, scaleY, rotation);
+                if (tempImage.x || tempImage.y || scaleX || rotation)
+                    clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
                 break;
             case 'repeat':
                 if (!sameBox || scaleX || rotation)
-                    repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align);
+                    repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, align);
                 if (!repeat)
                     data.repeat = 'repeat';
                 break;
@@ -9379,7 +10051,7 @@ var LeaferUI = (function (exports) {
             case 'cover':
             default:
                 if (scaleX)
-                    fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
+                    fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
         }
         if (!data.transform) {
             if (box.x || box.y) {
@@ -9412,6 +10084,8 @@ var LeaferUI = (function (exports) {
         }
         else {
             leafPaint = { type: paint.type, image };
+            if (image.hasAlphaPixel)
+                leafPaint.isTransparent = true;
             cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
         }
         if (firstUse || image.loading)
@@ -9436,7 +10110,7 @@ var LeaferUI = (function (exports) {
                 ignoreRender(ui, false);
                 if (!ui.destroyed) {
                     if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
-                        if (image.hasOpacityPixel)
+                        if (image.hasAlphaPixel)
                             ui.__layout.hitCanvasChanged = true;
                         ui.forceUpdate('surface');
                     }
@@ -9448,6 +10122,17 @@ var LeaferUI = (function (exports) {
                 onLoadError(ui, event, error);
                 leafPaint.loadId = null;
             });
+            if (ui.placeholderColor) {
+                if (!ui.placeholderDelay)
+                    image.isPlacehold = true;
+                else
+                    setTimeout(() => {
+                        if (!image.ready) {
+                            image.isPlacehold = true;
+                            ui.forceUpdate('surface');
+                        }
+                    }, ui.placeholderDelay);
+            }
         }
         return leafPaint;
     }
@@ -9653,32 +10338,33 @@ var LeaferUI = (function (exports) {
         repeatMode
     };
 
-    const { toPoint: toPoint$2 } = AroundHelper;
+    const { toPoint: toPoint$2 } = AroundHelper, { hasTransparent } = ColorConvert;
     const realFrom$2 = {};
     const realTo$2 = {};
     function linearGradient(paint, box) {
-        let { from, to, type, blendMode, opacity } = paint;
+        let { from, to, type, opacity } = paint;
         toPoint$2(from || 'top', box, realFrom$2);
         toPoint$2(to || 'bottom', box, realTo$2);
         const style = Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
-        applyStops(style, paint.stops, opacity);
         const data = { type, style };
-        if (blendMode)
-            data.blendMode = blendMode;
+        applyStops(data, style, paint.stops, opacity);
         return data;
     }
-    function applyStops(gradient, stops, opacity) {
+    function applyStops(data, gradient, stops, opacity) {
         if (stops) {
-            let stop;
+            let stop, color, offset, isTransparent;
             for (let i = 0, len = stops.length; i < len; i++) {
                 stop = stops[i];
-                if (typeof stop === 'string') {
-                    gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
-                }
-                else {
-                    gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
-                }
+                if (typeof stop === 'string')
+                    offset = i / (len - 1), color = ColorConvert.string(stop, opacity);
+                else
+                    offset = stop.offset, color = ColorConvert.string(stop.color, opacity);
+                gradient.addColorStop(offset, color);
+                if (!isTransparent && hasTransparent(color))
+                    isTransparent = true;
             }
+            if (isTransparent)
+                data.isTransparent = true;
         }
     }
 
@@ -9688,17 +10374,15 @@ var LeaferUI = (function (exports) {
     const realFrom$1 = {};
     const realTo$1 = {};
     function radialGradient(paint, box) {
-        let { from, to, type, opacity, blendMode, stretch } = paint;
+        let { from, to, type, opacity, stretch } = paint;
         toPoint$1(from || 'center', box, realFrom$1);
         toPoint$1(to || 'bottom', box, realTo$1);
         const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
-        applyStops(style, paint.stops, opacity);
         const data = { type, style };
+        applyStops(data, style, paint.stops, opacity);
         const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
         if (transform)
             data.transform = transform;
-        if (blendMode)
-            data.blendMode = blendMode;
         return data;
     }
     function getTransform(box, from, to, stretch, rotate90) {
@@ -9724,17 +10408,15 @@ var LeaferUI = (function (exports) {
     const realFrom = {};
     const realTo = {};
     function conicGradient(paint, box) {
-        let { from, to, type, opacity, blendMode, stretch } = paint;
+        let { from, to, type, opacity, stretch } = paint;
         toPoint(from || 'center', box, realFrom);
         toPoint(to || 'bottom', box, realTo);
         const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
-        applyStops(style, paint.stops, opacity);
         const data = { type, style };
+        applyStops(data, style, paint.stops, opacity);
         const transform = getTransform(box, realFrom, realTo, stretch || 1, Platform.conicGradientRotate90);
         if (transform)
             data.transform = transform;
-        if (blendMode)
-            data.blendMode = blendMode;
         return data;
     }
 
@@ -10067,6 +10749,8 @@ var LeaferUI = (function (exports) {
             lastCharType = null;
             startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
             word = { data: [] }, row = { words: [] };
+            if (__letterSpacing)
+                content = [...content];
             for (let i = 0, len = content.length; i < len; i++) {
                 char = content[i];
                 if (char === '\n') {
@@ -10485,6 +11169,7 @@ var LeaferUI = (function (exports) {
     exports.AutoBounds = AutoBounds;
     exports.BezierHelper = BezierHelper;
     exports.Bounds = Bounds;
+    exports.BoundsEvent = BoundsEvent;
     exports.BoundsHelper = BoundsHelper;
     exports.BoxData = BoxData;
     exports.BranchHelper = BranchHelper;
@@ -10631,7 +11316,7 @@ var LeaferUI = (function (exports) {
     exports.surfaceType = surfaceType;
     exports.tempBounds = tempBounds$1;
     exports.tempMatrix = tempMatrix;
-    exports.tempPoint = tempPoint$3;
+    exports.tempPoint = tempPoint$2;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;
     exports.version = version;
@@ -10641,4 +11326,7 @@ var LeaferUI = (function (exports) {
     return exports;
 
 })({});
-//# sourceMappingURL=web.js.map
+
+function Leafer(opt) { return new LeaferUI.Leafer(opt); }
+Object.setPrototypeOf(Leafer, LeaferUI);
+Leafer.prototype = LeaferUI.Leafer.prototype;