leafer-ui 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)
@@ -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;
@@ -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);
@@ -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$f = 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;
@@ -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;
 
@@ -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$a = Debug.get('TaskProcessor');
     class TaskItem {
@@ -3729,8 +3759,8 @@ var LeaferUI = (function (exports) {
                 list.length = 0;
             }
         },
-        hasOpacityPixel(config) {
-            return FileHelper.opacityTypes.some(item => I$1.isFormat(item, config));
+        hasAlphaPixel(config) {
+            return FileHelper.alphaPixelTypes.some(item => I$1.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) => {
@@ -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++) {
@@ -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,7 +4570,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
+    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';
@@ -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;
                 }
@@ -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,19 +5267,19 @@ 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;
         }
     };
 
@@ -5191,11 +5289,17 @@ var LeaferUI = (function (exports) {
     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)
@@ -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$5 = 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() {
@@ -7169,8 +7263,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;
@@ -7196,6 +7314,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { parse, objectToCanvasData } = PathConvert;
+    const { stintSet: stintSet$2 } = DataHelper, { hasTransparent: hasTransparent$2 } = ColorConvert;
     const emptyPaint = {};
     const debug$2 = Debug.get('UIData');
     class UIData extends LeafData {
@@ -7254,38 +7373,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) {
@@ -7315,7 +7418,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) {
@@ -7323,10 +7453,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;
     }
 
@@ -7390,13 +7520,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;
@@ -7431,8 +7559,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() {
@@ -7498,21 +7624,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);
@@ -7522,21 +7646,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);
@@ -7545,21 +7671,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) {
@@ -7568,11 +7700,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) {
@@ -7587,13 +7719,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);
     }
 
@@ -7723,6 +7857,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');
         }
@@ -7959,6 +8096,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);
@@ -8360,15 +8503,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 = () => {
@@ -8476,13 +8624,13 @@ var LeaferUI = (function (exports) {
                 super.__updateRenderBounds();
                 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() { }
@@ -8786,17 +8934,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([
@@ -8812,11 +8953,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);
         }
@@ -8860,7 +9001,7 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.canvas) {
                 this.canvas.destroy();
-                this.canvas = this.context = null;
+                this.canvas = null;
             }
             super.destroy();
         }
@@ -8906,7 +9047,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.__;
@@ -8936,12 +9077,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)
@@ -9004,6 +9144,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);
@@ -9139,7 +9282,7 @@ var LeaferUI = (function (exports) {
                 if (sky || editor)
                     this.sky = this.addLeafer(sky);
                 if (editor)
-                    this.sky.add(this.editor = Creator.editor(editor));
+                    Creator.editor(editor, this);
             }
         }
         __setApp() {
@@ -9153,6 +9296,10 @@ var LeaferUI = (function (exports) {
             this.watcher.disable();
             this.layouter.disable();
         }
+        __updateLocalBounds() {
+            this.forEach(leafer => leafer.updateLayout());
+            super.__updateLocalBounds();
+        }
         start() {
             super.start();
             this.forEach(leafer => leafer.start());
@@ -9210,12 +9357,8 @@ var LeaferUI = (function (exports) {
                 this.renderer.update();
         }
         __render(canvas, options) {
-            if (canvas.context) {
-                const m = options.matrix;
-                if (m)
-                    canvas.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
-                this.forEach(leafer => canvas.copyWorld(leafer.canvas));
-            }
+            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));
@@ -9236,9 +9379,11 @@ var LeaferUI = (function (exports) {
             return config;
         }
         __listenChildEvents(leafer) {
-            leafer.once(LayoutEvent.END, () => this.__onReady());
-            leafer.once(RenderEvent.START, () => this.__onCreated());
-            leafer.once(RenderEvent.END, () => this.__onViewReady());
+            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));
         }
@@ -9449,7 +9594,7 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.MoveEvent);
 
-    exports.RotateEvent = class RotateEvent extends UIEvent {
+    exports.RotateEvent = class RotateEvent extends exports.PointerEvent {
     };
     exports.RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
     exports.RotateEvent.START = 'rotate.start';
@@ -9470,7 +9615,7 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.SwipeEvent);
 
-    exports.ZoomEvent = class ZoomEvent extends UIEvent {
+    exports.ZoomEvent = class ZoomEvent extends exports.PointerEvent {
     };
     exports.ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
     exports.ZoomEvent.START = 'zoom.start';
@@ -10313,8 +10458,8 @@ var LeaferUI = (function (exports) {
         if (this.__box)
             this.__box.__updateHitCanvas();
         const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
-        const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
-        const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
+        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);
@@ -10345,11 +10490,11 @@ var LeaferUI = (function (exports) {
         if (data.__isHitPixel && this.__hitPixel(inner))
             return true;
         const { hitFill } = data;
-        const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__pixelFill || data.__isCanvas)))) || hitFill === 'all';
+        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.__pixelStroke))) || hitStroke === 'all';
+        const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__isAlphaPixelStroke))) || hitStroke === 'all';
         if (!needHitFillPath && !needHitStrokePath)
             return false;
         const radiusWidth = inner.radiusX * 2;
@@ -10738,8 +10883,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)
@@ -10748,7 +10895,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)));
@@ -10757,65 +10904,71 @@ 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());
+    }
 
     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);
@@ -10857,90 +11010,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);
         }
     }
 
@@ -10987,9 +11110,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);
@@ -10999,35 +11123,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,
@@ -11086,12 +11237,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)
@@ -11099,38 +11248,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)
@@ -11138,12 +11287,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;
@@ -11151,7 +11300,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) {
@@ -11184,6 +11333,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)
@@ -11208,7 +11359,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');
                     }
@@ -11220,6 +11371,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;
     }
@@ -11425,32 +11587,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;
         }
     }
 
@@ -11460,17 +11623,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) {
@@ -11496,17 +11657,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;
     }
 
@@ -11839,6 +11998,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') {
@@ -12262,6 +12423,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;
@@ -12421,7 +12583,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;
@@ -12431,4 +12593,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;