leafer-ui 1.6.1 → 1.6.3

package/dist/web.module.js

@@ -23,8 +23,6 @@ const Platform = {
     }
 };
 
-const Creator = {};
-
 const IncrementId = {
     RUNTIME: 'runtime',
     LEAF: 'leaf',
@@ -150,7 +148,7 @@ function getMatrixData() { return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }; }
 
 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 });
 }
@@ -193,8 +191,8 @@ const MatrixHelper = {
         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);
@@ -212,8 +210,8 @@ const MatrixHelper = {
         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);
@@ -234,8 +232,8 @@ const MatrixHelper = {
         }
     },
     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);
@@ -464,8 +462,10 @@ const PointHelper = {
         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)
@@ -643,7 +643,7 @@ class Point {
         return this;
     }
 }
-const tempPoint$3 = new Point();
+const tempPoint$2 = new Point();
 
 class Matrix {
     constructor(a, b, c, d, e, f) {
@@ -801,15 +801,87 @@ const TwoPointBoundsHelper = {
 };
 const { addPoint: addPoint$3 } = TwoPointBoundsHelper;
 
+var Direction4;
+(function (Direction4) {
+    Direction4[Direction4["top"] = 0] = "top";
+    Direction4[Direction4["right"] = 1] = "right";
+    Direction4[Direction4["bottom"] = 2] = "bottom";
+    Direction4[Direction4["left"] = 3] = "left";
+})(Direction4 || (Direction4 = {}));
+var Direction9;
+(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";
+})(Direction9 || (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[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;
@@ -872,8 +944,8 @@ const BoundsHelper = {
         }
         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;
     },
@@ -883,9 +955,9 @@ const BoundsHelper = {
         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);
@@ -916,17 +988,17 @@ const BoundsHelper = {
         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);
         }
     },
@@ -936,9 +1008,21 @@ const BoundsHelper = {
         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);
@@ -1112,8 +1196,8 @@ class Bounds {
         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) {
@@ -1131,6 +1215,9 @@ class Bounds {
     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;
@@ -1239,79 +1326,6 @@ class AutoBounds {
     }
 }
 
-var Direction4;
-(function (Direction4) {
-    Direction4[Direction4["top"] = 0] = "top";
-    Direction4[Direction4["right"] = 1] = "right";
-    Direction4[Direction4["bottom"] = 2] = "bottom";
-    Direction4[Direction4["left"] = 3] = "left";
-})(Direction4 || (Direction4 = {}));
-var Direction9;
-(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";
-})(Direction9 || (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[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,
@@ -1442,11 +1456,17 @@ const Plugin = {
         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: {},
@@ -1584,6 +1604,10 @@ const DataHelper = {
         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;
@@ -2385,7 +2409,7 @@ const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI
 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);
@@ -2407,6 +2431,8 @@ const BezierHelper = {
                 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;
@@ -2576,8 +2602,8 @@ const BezierHelper = {
         addMode ? addPoint$1(pointBounds, fromX, fromY) : setPoint$1(pointBounds, fromX, fromY);
         addPoint$1(pointBounds, toX, toY);
         for (let i = 0, len = tList.length; i < len; i++) {
-            getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$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) {
@@ -2589,7 +2615,11 @@ const BezierHelper = {
         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;
 
@@ -3382,7 +3412,7 @@ function canvasPatch(drawer) {
 }
 
 const FileHelper = {
-    opacityTypes: ['png', 'webp', 'svg'],
+    alphaPixelTypes: ['png', 'webp', 'svg'],
     upperCaseTypeMap: {},
     mineType(type) {
         if (!type || type.startsWith('image'))
@@ -3409,7 +3439,7 @@ const FileHelper = {
     }
 };
 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 {
@@ -3726,8 +3756,8 @@ const ImageManager = {
             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)
@@ -3765,13 +3795,16 @@ class LeaferImage {
             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);
                 });
@@ -3796,6 +3829,9 @@ class LeaferImage {
         this.view = img;
         this.onComplete(true);
     }
+    onProgress(progress) {
+        this.progress = progress;
+    }
     onComplete(isSuccess) {
         let odd;
         this.waitComplete.forEach((item, index) => {
@@ -4261,13 +4297,20 @@ const LeafHelper = {
         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++) {
@@ -4403,7 +4446,7 @@ const LeafHelper = {
     }
 };
 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;
@@ -4440,7 +4483,7 @@ const LeafBoundsHelper = {
     }
 };
 
-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);
@@ -4502,11 +4545,11 @@ const BranchHelper = {
             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);
         }
     }
 };
@@ -4524,7 +4567,7 @@ const WaitHelper = {
     }
 };
 
-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';
@@ -4568,7 +4611,9 @@ class LeafLayout {
             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();
@@ -4576,7 +4621,7 @@ class LeafLayout {
                 leafer.start();
         }
         else {
-            let root = this.leaf;
+            let root = leaf;
             while (root.parent && !root.parent.leafer) {
                 root = root.parent;
             }
@@ -4798,7 +4843,7 @@ class LeafLayout {
     }
     childrenSortChange() {
         if (!this.childrenSortChanged) {
-            this.childrenSortChanged = true;
+            this.childrenSortChanged = this.affectChildrenSort = true;
             this.leaf.forceUpdate('surface');
         }
     }
@@ -4865,6 +4910,40 @@ ImageEvent.LOAD = 'image.load';
 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)
@@ -4961,9 +5040,12 @@ class Eventer {
     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;
@@ -4993,6 +5075,8 @@ class Eventer {
                 else {
                     map[type] = [item];
                 }
+                if (boundsEventMap[type])
+                    BoundsEvent.checkHas(this, type, 'on');
             }
         });
     }
@@ -5014,6 +5098,8 @@ class Eventer {
                                 events.splice(index, 1);
                             if (!events.length)
                                 delete map[type];
+                            if (boundsEventMap[type])
+                                BoundsEvent.checkHas(this, type, 'off');
                         }
                     }
                 });
@@ -5033,19 +5119,31 @@ class Eventer {
         }
     }
     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) {
@@ -5157,7 +5255,7 @@ const LeafDataProxy = {
 };
 
 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.__);
@@ -5166,19 +5264,19 @@ const LeafMatrix = {
         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;
     }
 };
 
@@ -5188,11 +5286,17 @@ const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } =
 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;
@@ -5201,12 +5305,12 @@ const LeafBounds = {
                 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)
@@ -5214,7 +5318,7 @@ const LeafBounds = {
             if (this.parent)
                 this.parent.__layout.boxChange();
         }
-        layout.boxChanged = false;
+        layout.boxChanged = undefined;
         if (layout.strokeChanged) {
             layout.strokeSpread = this.__updateStrokeSpread();
             if (layout.strokeSpread) {
@@ -5226,12 +5330,12 @@ const LeafBounds = {
             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();
@@ -5244,11 +5348,12 @@ const LeafBounds = {
             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)
@@ -5788,7 +5893,7 @@ let Leaf = class Leaf {
     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; }
@@ -6125,7 +6230,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.6.1";
+const version = "1.6.3";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6465,17 +6570,15 @@ class Watcher {
         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() {
@@ -6485,13 +6588,12 @@ class Watcher {
         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;
@@ -6534,15 +6636,7 @@ function updateBounds(boundsList) {
     });
 }
 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;
@@ -6599,7 +6693,7 @@ class Layouter {
         this.disabled = true;
     }
     layout() {
-        if (!this.running)
+        if (this.layouting || !this.running)
             return;
         const { target } = this;
         this.times = 0;
@@ -6682,12 +6776,10 @@ class Layouter {
     }
     static fullLayout(target) {
         updateAllMatrix(target, true);
-        if (target.isBranch) {
+        if (target.isBranch)
             BranchHelper.updateBounds(target);
-        }
-        else {
+        else
             LeafHelper.updateBounds(target);
-        }
         updateAllChange(target);
     }
     addExtra(leaf) {
@@ -6710,11 +6802,12 @@ class Layouter {
         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() {
@@ -6945,12 +7038,13 @@ class Renderer {
         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() {
@@ -7166,8 +7260,32 @@ function zoomLayerType() {
     };
 }
 
+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;
@@ -7193,6 +7311,7 @@ const Transition = {
 };
 
 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 {
@@ -7251,38 +7370,22 @@ class UIData extends LeafData {
         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) {
@@ -7312,7 +7415,34 @@ class UIData extends LeafData {
             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) {
@@ -7320,10 +7450,10 @@ function setArray(data, key, value) {
     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;
 }
 
@@ -7387,13 +7517,11 @@ class TextData extends UIData {
     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;
@@ -7428,8 +7556,6 @@ class ImageData extends RectData {
         this._url = value;
     }
     __setImageFill(value) {
-        if (this.__leaf.image)
-            this.__leaf.image = null;
         this.fill = value ? { type: 'image', mode: 'stretch', url: value } : undefined;
     }
     __getData() {
@@ -7495,21 +7621,19 @@ const UIBounds = {
     }
 };
 
+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);
@@ -7519,21 +7643,23 @@ const UIRender = {
         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);
@@ -7542,21 +7668,27 @@ const UIRender = {
                 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) {
@@ -7565,11 +7697,11 @@ const UIRender = {
             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) {
@@ -7584,13 +7716,15 @@ const UIRender = {
     }
 };
 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);
 }
 
@@ -7720,6 +7854,9 @@ let UI = UI_1 = class UI extends Leaf {
         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');
     }
@@ -7956,6 +8093,12 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "filter", void 0);
+__decorate([
+    surfaceType()
+], UI.prototype, "placeholderColor", void 0);
+__decorate([
+    dataType(100)
+], UI.prototype, "placeholderDelay", void 0);
 __decorate([
     dataType({})
 ], UI.prototype, "data", void 0);
@@ -8357,15 +8500,20 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     }
     __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 = () => {
@@ -8473,13 +8621,13 @@ let Box = class Box extends Group {
             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() { }
@@ -8783,17 +8931,10 @@ Star = __decorate([
 
 let Image$1 = class Image extends 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([
@@ -8809,11 +8950,11 @@ const MyImage = Image$1;
 
 let Canvas = class Canvas extends 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);
     }
@@ -8857,7 +8998,7 @@ let Canvas = class Canvas extends Rect {
     destroy() {
         if (this.canvas) {
             this.canvas.destroy();
-            this.canvas = this.context = null;
+            this.canvas = null;
         }
         super.destroy();
     }
@@ -8903,7 +9044,7 @@ let Text = class Text extends UI {
         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.__;
@@ -8933,12 +9074,11 @@ let Text = class Text extends UI {
             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)
@@ -9001,6 +9141,9 @@ __decorate([
 __decorate([
     boundsType('')
 ], Text.prototype, "text", void 0);
+__decorate([
+    boundsType('')
+], Text.prototype, "placeholder", void 0);
 __decorate([
     boundsType('caption')
 ], Text.prototype, "fontFamily", void 0);
@@ -9136,7 +9279,7 @@ let App = class App extends Leafer {
             if (sky || editor)
                 this.sky = this.addLeafer(sky);
             if (editor)
-                this.sky.add(this.editor = Creator.editor(editor));
+                Creator.editor(editor, this);
         }
     }
     __setApp() {
@@ -9150,6 +9293,10 @@ let App = class App extends Leafer {
         this.watcher.disable();
         this.layouter.disable();
     }
+    __updateLocalBounds() {
+        this.forEach(leafer => leafer.updateLayout());
+        super.__updateLocalBounds();
+    }
     start() {
         super.start();
         this.forEach(leafer => leafer.start());
@@ -9207,12 +9354,8 @@ let App = class App extends Leafer {
             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));
@@ -9233,9 +9376,11 @@ let App = class App extends Leafer {
         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));
     }
@@ -9446,7 +9591,7 @@ MoveEvent = __decorate([
     registerUIEvent()
 ], MoveEvent);
 
-let RotateEvent = class RotateEvent extends UIEvent {
+let RotateEvent = class RotateEvent extends PointerEvent$1 {
 };
 RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
 RotateEvent.START = 'rotate.start';
@@ -9467,7 +9612,7 @@ SwipeEvent = __decorate([
     registerUIEvent()
 ], SwipeEvent);
 
-let ZoomEvent = class ZoomEvent extends UIEvent {
+let ZoomEvent = class ZoomEvent extends PointerEvent$1 {
 };
 ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
 ZoomEvent.START = 'zoom.start';
@@ -10310,8 +10455,8 @@ ui$1.__updateHitCanvas = function () {
     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);
@@ -10342,11 +10487,11 @@ ui$1.__hit = function (inner) {
     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;
@@ -10735,8 +10880,10 @@ class Interaction extends InteractionBase {
 }
 
 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)
@@ -10745,7 +10892,7 @@ function fillText(ui, canvas) {
             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)));
@@ -10754,65 +10901,71 @@ function fillText(ui, canvas) {
 
 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);
@@ -10854,90 +11007,60 @@ function drawStrokesStyle(strokes, isText, ui, canvas) {
 }
 
 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);
     }
 }
 
@@ -10984,9 +11107,10 @@ function shape(ui, current, options) {
 }
 
 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);
@@ -10996,35 +11120,62 @@ function compute(attrName, ui) {
             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,
@@ -11083,12 +11234,10 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
 
 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)
@@ -11096,38 +11245,38 @@ function createData(leafPaint, image, paint, box) {
     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)
@@ -11135,12 +11284,12 @@ function getPatternData(paint, box, image) {
             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;
@@ -11148,7 +11297,7 @@ function getPatternData(paint, box, image) {
         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) {
@@ -11181,6 +11330,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
     }
     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)
@@ -11205,7 +11356,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             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');
                 }
@@ -11217,6 +11368,17 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             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;
 }
@@ -11422,32 +11584,33 @@ const PaintImageModule = {
     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;
     }
 }
 
@@ -11457,17 +11620,15 @@ const { toPoint: toPoint$1 } = AroundHelper;
 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) {
@@ -11493,17 +11654,15 @@ const { toPoint } = AroundHelper;
 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;
 }
 
@@ -11836,6 +11995,8 @@ function createRows(drawData, content, style) {
         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') {
@@ -12254,5 +12415,4 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isEmptyData, isNull, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
-//# sourceMappingURL=web.module.js.map
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isEmptyData, isNull, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$2 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };