leafer-draw 1.6.2 → 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)
@@ -490,19 +490,19 @@ const PointHelper = {
     },
     tempToInnerOf(t, matrix) {
         const { tempPoint: temp } = P$5;
-        copy$a(temp, t);
+        copy$b(temp, t);
         toInnerPoint$2(matrix, temp, temp);
         return temp;
     },
     tempToOuterOf(t, matrix) {
         const { tempPoint: temp } = P$5;
-        copy$a(temp, t);
+        copy$b(temp, t);
         toOuterPoint$3(matrix, temp, temp);
         return temp;
     },
     tempToInnerRadiusPointOf(t, matrix) {
         const { tempRadiusPoint: temp } = P$5;
-        copy$a(temp, t);
+        copy$b(temp, t);
         P$5.toInnerRadiusPointOf(t, matrix, temp);
         return temp;
     },
@@ -575,7 +575,7 @@ const PointHelper = {
     }
 };
 const P$5 = PointHelper;
-const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
+const { getDistanceFrom, copy: copy$b, getAtan2 } = P$5;
 
 class Point {
     constructor(x, y) {
@@ -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;
@@ -860,7 +932,7 @@ const BoundsHelper = {
             to = t;
         }
         else {
-            copy$9(to, t);
+            copy$a(to, t);
         }
         if (parent) {
             to.offsetX = -(B.maxX(parent) - t.x);
@@ -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);
@@ -1006,7 +1090,7 @@ const BoundsHelper = {
                 if (first) {
                     first = false;
                     if (!addMode)
-                        copy$9(t, bounds);
+                        copy$a(t, bounds);
                 }
                 else {
                     add$1(t, bounds);
@@ -1087,7 +1171,7 @@ const BoundsHelper = {
     }
 };
 const B = BoundsHelper;
-const { add: add$1, copy: copy$9 } = B;
+const { add: add$1, copy: copy$a } = B;
 
 class Bounds {
     get minX() { return BoundsHelper.minX(this); }
@@ -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$e = 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;
@@ -2042,7 +2066,7 @@ __decorate([
     contextMethod()
 ], Canvas$1.prototype, "strokeText", null);
 
-const { copy: copy$8, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
+const { copy: copy$9, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
 const minSize = { width: 1, height: 1, pixelRatio: 1 };
 const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
 class LeaferCanvasBase extends Canvas$1 {
@@ -2274,7 +2298,7 @@ class LeaferCanvasBase extends Canvas$1 {
         const { size, pixelSnap } = this, canvas = this.manager ? this.manager.get(size) : Creator.canvas(Object.assign({}, size));
         canvas.save();
         if (useSameWorldTransform)
-            copy$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+            copy$9(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
         if (useSameSmooth)
             canvas.smooth = this.smooth;
         canvas.pixelSnap !== pixelSnap && (canvas.pixelSnap = pixelSnap);
@@ -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) {
@@ -2651,7 +2677,7 @@ const EllipseHelper = {
 };
 
 const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$3, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
-const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
+const { rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
 const { ellipticalArc } = EllipseHelper;
 const debug$c = Debug.get('PathConvert');
 const setEndPoint$1 = {};
@@ -2848,7 +2874,7 @@ const PathConvert = {
                 case N$3:
                     x = old[i + 1];
                     y = old[i + 2];
-                    curveMode ? rect$2(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
+                    curveMode ? rect$3(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
                     i += 5;
                     break;
                 case D$3:
@@ -3024,7 +3050,7 @@ const PathCommandDataHelper = {
 };
 const { ellipse: ellipse$3, arc: arc$2 } = PathCommandDataHelper;
 
-const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
+const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$2, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
 class PathCreator {
     set path(value) { this.__path = value; }
     get path() { return this.__path; }
@@ -3071,7 +3097,7 @@ class PathCreator {
         return this;
     }
     rect(x, y, width, height) {
-        rect$1(this.__path, x, y, width, height);
+        rect$2(this.__path, x, y, width, height);
         this.paint();
         return this;
     }
@@ -3189,7 +3215,7 @@ const PathDrawer = {
 
 const { M: M$1, L: L$2, C, Q, Z: Z$1, N, D, X, G, F: F$1, O, P, U } = PathCommandMap;
 const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
-const { addPointBounds, copy: copy$7, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
+const { addPointBounds, copy: copy$8, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
 const debug$a = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
@@ -3261,7 +3287,7 @@ const PathBounds = {
                     break;
                 case G:
                     ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 9;
@@ -3277,7 +3303,7 @@ const PathBounds = {
                     break;
                 case O:
                     arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 7;
@@ -3292,7 +3318,7 @@ const PathBounds = {
                     break;
                 case U:
                     arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 6;
@@ -3386,7 +3412,7 @@ function canvasPatch(drawer) {
 }
 
 const FileHelper = {
-    opacityTypes: ['png', 'webp', 'svg'],
+    alphaPixelTypes: ['png', 'webp', 'svg'],
     upperCaseTypeMap: {},
     mineType(type) {
         if (!type || type.startsWith('image'))
@@ -3413,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$9 = Debug.get('TaskProcessor');
 class TaskItem {
@@ -3730,8 +3756,8 @@ const ImageManager = {
             list.length = 0;
         }
     },
-    hasOpacityPixel(config) {
-        return FileHelper.opacityTypes.some(item => I.isFormat(item, config));
+    hasAlphaPixel(config) {
+        return FileHelper.alphaPixelTypes.some(item => I.isFormat(item, config));
     },
     isFormat(format, config) {
         if (config.format === format)
@@ -3769,7 +3795,7 @@ 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) {
@@ -4228,8 +4254,8 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$6, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-const matrix = {}, { round } = Math;
+const { copy: copy$7, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const matrix$1 = {}, { round } = Math;
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
         if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
@@ -4324,13 +4350,13 @@ const LeafHelper = {
                 transition = scaleY;
             scaleY = scaleX;
         }
-        copy$6(matrix, o);
-        scaleOfOuter$2(matrix, origin, scaleX, scaleY);
+        copy$7(matrix$1, o);
+        scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
         if (t.origin || t.around) {
-            L.setTransform(t, matrix, resize, transition);
+            L.setTransform(t, matrix$1, resize, transition);
         }
         else {
-            const x = t.x + matrix.e - o.e, y = t.y + matrix.f - o.f;
+            const x = t.x + matrix$1.e - o.e, y = t.y + matrix$1.f - o.f;
             if (transition && !resize)
                 t.animate({ x, y, scaleX: t.scaleX * scaleX, scaleY: t.scaleY * scaleY }, transition);
             else
@@ -4342,32 +4368,32 @@ const LeafHelper = {
     },
     rotateOfLocal(t, origin, angle, transition) {
         const o = t.__localMatrix;
-        copy$6(matrix, o);
-        rotateOfOuter$2(matrix, origin, angle);
+        copy$7(matrix$1, o);
+        rotateOfOuter$2(matrix$1, origin, angle);
         if (t.origin || t.around)
-            L.setTransform(t, matrix, false, transition);
+            L.setTransform(t, matrix$1, false, transition);
         else
-            t.set({ x: t.x + matrix.e - o.e, y: t.y + matrix.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
+            t.set({ x: t.x + matrix$1.e - o.e, y: t.y + matrix$1.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
     },
     skewOfWorld(t, origin, skewX, skewY, resize, transition) {
         L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
     },
     skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
-        copy$6(matrix, t.__localMatrix);
-        skewOfOuter(matrix, origin, skewX, skewY);
-        L.setTransform(t, matrix, resize, transition);
+        copy$7(matrix$1, t.__localMatrix);
+        skewOfOuter(matrix$1, origin, skewX, skewY);
+        L.setTransform(t, matrix$1, resize, transition);
     },
     transformWorld(t, transform, resize, transition) {
-        copy$6(matrix, t.worldTransform);
-        multiplyParent$2(matrix, transform);
+        copy$7(matrix$1, t.worldTransform);
+        multiplyParent$2(matrix$1, transform);
         if (t.parent)
-            divideParent(matrix, t.parent.worldTransform);
-        L.setTransform(t, matrix, resize, transition);
+            divideParent(matrix$1, t.parent.worldTransform);
+        L.setTransform(t, matrix$1, resize, transition);
     },
     transform(t, transform, resize, transition) {
-        copy$6(matrix, t.localTransform);
-        multiplyParent$2(matrix, transform);
-        L.setTransform(t, matrix, resize, transition);
+        copy$7(matrix$1, t.localTransform);
+        multiplyParent$2(matrix$1, transform);
+        L.setTransform(t, matrix$1, resize, transition);
     },
     setTransform(t, transform, resize, transition) {
         const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
@@ -4401,9 +4427,9 @@ const LeafHelper = {
         return innerOrigin;
     },
     getRelativeWorld(t, relative, temp) {
-        copy$6(matrix, t.worldTransform);
-        divideParent(matrix, relative.worldTransform);
-        return temp ? matrix : Object.assign({}, matrix);
+        copy$7(matrix$1, t.worldTransform);
+        divideParent(matrix$1, relative.worldTransform);
+        return temp ? matrix$1 : Object.assign({}, matrix$1);
     },
     drop(t, parent, index, resize) {
         t.setTransform(L.getRelativeWorld(t, parent, true), resize);
@@ -4457,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);
@@ -4519,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);
         }
     }
 };
@@ -4541,8 +4567,8 @@ const WaitHelper = {
     }
 };
 
-const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
-const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
+const { getRelativeWorld: getRelativeWorld$1, updateBounds: updateBounds$2 } = LeafHelper;
+const { toOuterOf: toOuterOf$2, getPoints, copy: copy$6 } = BoundsHelper;
 const localContent = '_localContentBounds';
 const worldContent = '_worldContentBounds', worldBox = '_worldBoxBounds', worldStroke = '_worldStrokeBounds';
 class LeafLayout {
@@ -4585,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();
@@ -4593,7 +4621,7 @@ class LeafLayout {
                 leafer.start();
         }
         else {
-            let root = this.leaf;
+            let root = leaf;
             while (root.parent && !root.parent.leafer) {
                 root = root.parent;
             }
@@ -4700,7 +4728,7 @@ class LeafLayout {
         }
         if (!layoutBounds)
             layoutBounds = MatrixHelper.getLayout(matrix);
-        copy$5(layoutBounds, bounds);
+        copy$6(layoutBounds, bounds);
         PointHelper.copy(layoutBounds, point);
         if (unscale) {
             const { scaleX, scaleY } = layoutBounds;
@@ -4815,7 +4843,7 @@ class LeafLayout {
     }
     childrenSortChange() {
         if (!this.childrenSortChanged) {
-            this.childrenSortChanged = true;
+            this.childrenSortChanged = this.affectChildrenSort = true;
             this.leaf.forceUpdate('surface');
         }
     }
@@ -4882,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)
@@ -4978,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;
@@ -5010,6 +5075,8 @@ class Eventer {
                 else {
                     map[type] = [item];
                 }
+                if (boundsEventMap[type])
+                    BoundsEvent.checkHas(this, type, 'on');
             }
         });
     }
@@ -5031,6 +5098,8 @@ class Eventer {
                                 events.splice(index, 1);
                             if (!events.length)
                                 delete map[type];
+                            if (boundsEventMap[type])
+                                BoundsEvent.checkHas(this, type, 'off');
                         }
                     }
                 });
@@ -5050,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) {
@@ -5174,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.__);
@@ -5183,33 +5264,39 @@ 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;
     }
 };
 
 const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
 const { updateBounds: updateBounds$1 } = BranchHelper;
-const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
+const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
 const { toBounds: toBounds$1 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
-        toOuterOf$1(this.__layout.renderBounds, this.__world, this.__world);
-        if (this.__layout.resized) {
-            this.__onUpdateSize();
-            this.__layout.resized = false;
+        const layout = this.__layout;
+        toOuterOf$1(layout.renderBounds, this.__world, this.__world);
+        if (layout.resized) {
+            if (layout.resized === 'inner')
+                this.__onUpdateSize();
+            if (this.__hasLocalEvent)
+                BoundsEvent.emitLocal(this);
+            layout.resized = undefined;
         }
+        if (this.__hasWorldEvent)
+            BoundsEvent.emitWorld(this);
     },
     __updateLocalBounds() {
         const layout = this.__layout;
@@ -5218,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)
@@ -5231,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) {
@@ -5243,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();
@@ -5261,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)
@@ -5325,7 +5413,7 @@ const LeafBounds = {
     },
     __updateRenderBounds() {
         const layout = this.__layout;
-        layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
+        layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
     }
 };
 
@@ -5430,7 +5518,7 @@ const BranchRender = {
 const { LEAF, create } = IncrementId;
 const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
 const { toOuterOf } = BoundsHelper;
-const { copy: copy$3, move } = PointHelper;
+const { copy: copy$4, move } = PointHelper;
 const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
@@ -5643,7 +5731,7 @@ let Leaf = class Leaf {
         }
         else {
             if (to)
-                copy$3(to, world);
+                copy$4(to, world);
         }
     }
     localToWorld(local, to, distance, relative) {
@@ -5652,7 +5740,7 @@ let Leaf = class Leaf {
         }
         else {
             if (to)
-                copy$3(to, local);
+                copy$4(to, local);
         }
     }
     worldToInner(world, to, distance, relative) {
@@ -5805,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; }
@@ -6142,7 +6230,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.6.2";
+const version = "1.6.3";
 
 const debug$4 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6482,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() {
@@ -6502,8 +6588,7 @@ class Watcher {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.__updatedList = null;
+            this.target = this.__updatedList = null;
         }
     }
 }
@@ -6608,7 +6693,7 @@ class Layouter {
         this.disabled = true;
     }
     layout() {
-        if (!this.running)
+        if (this.layouting || !this.running)
             return;
         const { target } = this;
         this.times = 0;
@@ -6691,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) {
@@ -6719,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() {
@@ -6954,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() {
@@ -7018,8 +7103,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;
@@ -7045,6 +7154,7 @@ const Transition = {
 };
 
 const { parse, objectToCanvasData } = PathConvert;
+const { stintSet: stintSet$2 } = DataHelper, { hasTransparent: hasTransparent$2 } = ColorConvert;
 const emptyPaint = {};
 const debug$1 = Debug.get('UIData');
 class UIData extends LeafData {
@@ -7103,38 +7213,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) {
@@ -7164,7 +7258,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) {
@@ -7172,10 +7293,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;
 }
 
@@ -7278,8 +7399,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() {
@@ -7345,21 +7464,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);
@@ -7369,21 +7486,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);
@@ -7392,21 +7511,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) {
@@ -7415,11 +7540,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) {
@@ -7434,13 +7559,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);
 }
 
@@ -7812,6 +7939,9 @@ __decorate([
 __decorate([
     surfaceType()
 ], UI.prototype, "placeholderColor", void 0);
+__decorate([
+    dataType(100)
+], UI.prototype, "placeholderDelay", void 0);
 __decorate([
     dataType({})
 ], UI.prototype, "data", void 0);
@@ -8213,15 +8343,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 = () => {
@@ -8281,8 +8416,8 @@ Rect = __decorate([
     registerUI()
 ], Rect);
 
-const { copy: copy$2, add, includes: includes$1 } = BoundsHelper;
-const rect = Rect.prototype, group = Group.prototype;
+const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
+const rect$1 = Rect.prototype, group = Group.prototype;
 const childrenRenderBounds = {};
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
@@ -8327,15 +8462,15 @@ let Box = class Box extends Group {
         const { renderBounds } = this.__layout;
         if (this.children.length) {
             super.__updateRenderBounds();
-            copy$2(childrenRenderBounds, renderBounds);
+            copy$3(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds);
             if (isOverflow && this.__.overflow !== 'hide')
                 add(renderBounds, childrenRenderBounds);
         }
         else
             this.__updateRectRenderBounds();
-        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+        DataHelper.stintSet(this, 'isOverflow', isOverflow);
     }
     __updateRectRenderBounds() { }
     __updateRectChange() { }
@@ -8379,25 +8514,25 @@ __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
 __decorate([
-    rewrite(rect.__updateStrokeSpread)
+    rewrite(rect$1.__updateStrokeSpread)
 ], Box.prototype, "__updateStrokeSpread", null);
 __decorate([
-    rewrite(rect.__updateRenderSpread)
+    rewrite(rect$1.__updateRenderSpread)
 ], Box.prototype, "__updateRectRenderSpread", null);
 __decorate([
-    rewrite(rect.__updateBoxBounds)
+    rewrite(rect$1.__updateBoxBounds)
 ], Box.prototype, "__updateRectBoxBounds", null);
 __decorate([
-    rewrite(rect.__updateStrokeBounds)
+    rewrite(rect$1.__updateStrokeBounds)
 ], Box.prototype, "__updateStrokeBounds", null);
 __decorate([
-    rewrite(rect.__updateRenderBounds)
+    rewrite(rect$1.__updateRenderBounds)
 ], Box.prototype, "__updateRectRenderBounds", null);
 __decorate([
-    rewrite(rect.__updateChange)
+    rewrite(rect$1.__updateChange)
 ], Box.prototype, "__updateRectChange", null);
 __decorate([
-    rewrite(rect.__render)
+    rewrite(rect$1.__render)
 ], Box.prototype, "__renderRect", null);
 __decorate([
     rewrite(group.__render)
@@ -8639,18 +8774,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, this.__onLoaded, this);
-    }
-    __onLoaded(e) {
-        if (e.attrName === 'fill' && e.attrValue.url === this.url)
-            this.image = e.image;
-    }
-    destroy() {
-        this.image = null;
-        super.destroy();
     }
 };
 __decorate([
@@ -8666,11 +8793,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);
     }
@@ -8714,7 +8841,7 @@ let Canvas = class Canvas extends Rect {
     destroy() {
         if (this.canvas) {
             this.canvas.destroy();
-            this.canvas = this.context = null;
+            this.canvas = null;
         }
         super.destroy();
     }
@@ -8790,12 +8917,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)
@@ -9040,32 +9166,557 @@ function fillPathOrText(ui, canvas) {
     ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
 }
 
+let App = class App extends Leafer {
+    get __tag() { return 'App'; }
+    get isApp() { return true; }
+    constructor(userConfig, data) {
+        super(userConfig, data);
+    }
+    init(userConfig, parentApp) {
+        super.init(userConfig, parentApp);
+        if (userConfig) {
+            const { ground, tree, sky, editor } = userConfig;
+            if (ground)
+                this.ground = this.addLeafer(ground);
+            if (tree || editor)
+                this.tree = this.addLeafer(tree || { type: userConfig.type || 'design' });
+            if (sky || editor)
+                this.sky = this.addLeafer(sky);
+            if (editor)
+                Creator.editor(editor, this);
+        }
+    }
+    __setApp() {
+        const { canvas } = this;
+        const { realCanvas, view } = this.config;
+        if (realCanvas || view === this.canvas.view || !canvas.parentView)
+            this.realCanvas = true;
+        else
+            canvas.unrealCanvas();
+        this.leafer = this;
+        this.watcher.disable();
+        this.layouter.disable();
+    }
+    __updateLocalBounds() {
+        this.forEach(leafer => leafer.updateLayout());
+        super.__updateLocalBounds();
+    }
+    start() {
+        super.start();
+        this.forEach(leafer => leafer.start());
+    }
+    stop() {
+        this.forEach(leafer => leafer.stop());
+        super.stop();
+    }
+    unlockLayout() {
+        super.unlockLayout();
+        this.forEach(leafer => leafer.unlockLayout());
+    }
+    lockLayout() {
+        super.lockLayout();
+        this.forEach(leafer => leafer.lockLayout());
+    }
+    forceRender(bounds, sync) {
+        this.forEach(leafer => leafer.forceRender(bounds, sync));
+    }
+    addLeafer(merge) {
+        const leafer = new Leafer(merge);
+        this.add(leafer);
+        return leafer;
+    }
+    add(leafer, index) {
+        if (!leafer.view) {
+            if (this.realCanvas && !this.canvas.bounds) {
+                setTimeout(() => this.add(leafer, index), 10);
+                return;
+            }
+            leafer.init(this.__getChildConfig(leafer.userConfig), this);
+        }
+        super.add(leafer, index);
+        if (index !== undefined)
+            leafer.canvas.childIndex = index;
+        this.__listenChildEvents(leafer);
+    }
+    forEach(fn) {
+        this.children.forEach(fn);
+    }
+    __onCreated() {
+        this.created = this.children.every(child => child.created);
+    }
+    __onReady() {
+        if (this.children.every(child => child.ready))
+            super.__onReady();
+    }
+    __onViewReady() {
+        if (this.children.every(child => child.viewReady))
+            super.__onViewReady();
+    }
+    __onChildRenderEnd(e) {
+        this.renderer.addBlock(e.renderBounds);
+        if (this.viewReady)
+            this.renderer.update();
+    }
+    __render(canvas, options) {
+        if (canvas.context)
+            this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options && options.bounds));
+    }
+    __onResize(event) {
+        this.forEach(leafer => leafer.resize(event));
+        super.__onResize(event);
+    }
+    updateLayout() {
+        this.forEach(leafer => leafer.updateLayout());
+    }
+    __getChildConfig(userConfig) {
+        const config = Object.assign({}, this.config);
+        config.hittable = config.realCanvas = undefined;
+        if (userConfig)
+            DataHelper.assign(config, userConfig);
+        if (this.autoLayout)
+            DataHelper.copyAttrs(config, this, canvasSizeAttrs);
+        config.view = this.realCanvas ? undefined : this.view;
+        config.fill = undefined;
+        return config;
+    }
+    __listenChildEvents(leafer) {
+        leafer.once([
+            [LayoutEvent.END, this.__onReady, this],
+            [RenderEvent.START, this.__onCreated, this],
+            [RenderEvent.END, this.__onViewReady, this]
+        ]);
+        if (this.realCanvas)
+            this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
+    }
+};
+App = __decorate([
+    registerUI()
+], App);
+
+const downKeyMap = {};
+const Keyboard = {
+    isHoldSpaceKey() {
+        return Keyboard.isHold('Space');
+    },
+    isHold(code) {
+        return downKeyMap[code];
+    },
+    setDownCode(code) {
+        if (!downKeyMap[code])
+            downKeyMap[code] = true;
+    },
+    setUpCode(code) {
+        downKeyMap[code] = false;
+    }
+};
+
+const PointerButton = {
+    LEFT: 1,
+    RIGHT: 2,
+    MIDDLE: 4,
+    defaultLeft(event) { if (!event.buttons)
+        event.buttons = 1; },
+    left(event) { return event.buttons === 1; },
+    right(event) { return event.buttons === 2; },
+    middle(event) { return event.buttons === 4; }
+};
+
+class UIEvent extends Event {
+    get spaceKey() { return Keyboard.isHoldSpaceKey(); }
+    get left() { return PointerButton.left(this); }
+    get right() { return PointerButton.right(this); }
+    get middle() { return PointerButton.middle(this); }
+    constructor(params) {
+        super(params.type);
+        this.bubbles = true;
+        Object.assign(this, params);
+    }
+    getBoxPoint(relative) {
+        return (relative || this.current).getBoxPoint(this);
+    }
+    getInnerPoint(relative) {
+        return (relative || this.current).getInnerPoint(this);
+    }
+    getLocalPoint(relative) {
+        return (relative || this.current).getLocalPoint(this);
+    }
+    getPagePoint() {
+        return this.current.getPagePoint(this);
+    }
+    getInner(relative) { return this.getInnerPoint(relative); }
+    getLocal(relative) { return this.getLocalPoint(relative); }
+    getPage() { return this.getPagePoint(); }
+    static changeName(oldName, newName) {
+        EventCreator.changeName(oldName, newName);
+    }
+}
+
+let PointerEvent$1 = class PointerEvent extends UIEvent {
+};
+PointerEvent$1.POINTER = 'pointer';
+PointerEvent$1.BEFORE_DOWN = 'pointer.before_down';
+PointerEvent$1.BEFORE_MOVE = 'pointer.before_move';
+PointerEvent$1.BEFORE_UP = 'pointer.before_up';
+PointerEvent$1.DOWN = 'pointer.down';
+PointerEvent$1.MOVE = 'pointer.move';
+PointerEvent$1.UP = 'pointer.up';
+PointerEvent$1.OVER = 'pointer.over';
+PointerEvent$1.OUT = 'pointer.out';
+PointerEvent$1.ENTER = 'pointer.enter';
+PointerEvent$1.LEAVE = 'pointer.leave';
+PointerEvent$1.TAP = 'tap';
+PointerEvent$1.DOUBLE_TAP = 'double_tap';
+PointerEvent$1.CLICK = 'click';
+PointerEvent$1.DOUBLE_CLICK = 'double_click';
+PointerEvent$1.LONG_PRESS = 'long_press';
+PointerEvent$1.LONG_TAP = 'long_tap';
+PointerEvent$1.MENU = 'pointer.menu';
+PointerEvent$1.MENU_TAP = 'pointer.menu_tap';
+PointerEvent$1 = __decorate([
+    registerUIEvent()
+], PointerEvent$1);
+
+const tempMove = {};
+let DragEvent$1 = class DragEvent extends PointerEvent$1 {
+    static setList(data) {
+        this.list = data instanceof LeafList ? data : new LeafList(data);
+    }
+    static setData(data) {
+        this.data = data;
+    }
+    static getValidMove(leaf, start, total) {
+        const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
+        PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
+        if (dragBounds)
+            this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
+        if (draggable === 'x')
+            move.y = 0;
+        if (draggable === 'y')
+            move.x = 0;
+        return move;
+    }
+    static getMoveInDragBounds(childBox, dragBounds, move, change) {
+        const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
+        const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
+        if (!change)
+            move = Object.assign({}, move);
+        if (BoundsHelper.includes(childBox, dragBounds)) {
+            if (x > dragBounds.x)
+                move.x += dragBounds.x - x;
+            else if (right < boundsRight)
+                move.x += boundsRight - right;
+            if (y > dragBounds.y)
+                move.y += dragBounds.y - y;
+            else if (bottom < boundsBottom)
+                move.y += boundsBottom - bottom;
+        }
+        else {
+            if (x < dragBounds.x)
+                move.x += dragBounds.x - x;
+            else if (right > boundsRight)
+                move.x += boundsRight - right;
+            if (y < dragBounds.y)
+                move.y += dragBounds.y - y;
+            else if (bottom > boundsBottom)
+                move.y += boundsBottom - bottom;
+        }
+        return move;
+    }
+    getPageMove(total) {
+        this.assignMove(total);
+        return this.current.getPagePoint(tempMove, null, true);
+    }
+    getInnerMove(relative, total) {
+        if (!relative)
+            relative = this.current;
+        this.assignMove(total);
+        return relative.getInnerPoint(tempMove, null, true);
+    }
+    getLocalMove(relative, total) {
+        if (!relative)
+            relative = this.current;
+        this.assignMove(total);
+        return relative.getLocalPoint(tempMove, null, true);
+    }
+    getPageTotal() {
+        return this.getPageMove(true);
+    }
+    getInnerTotal(relative) {
+        return this.getInnerMove(relative, true);
+    }
+    getLocalTotal(relative) {
+        return this.getLocalMove(relative, true);
+    }
+    getPageBounds() {
+        const total = this.getPageTotal(), start = this.getPagePoint(), bounds = {};
+        BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
+        BoundsHelper.unsign(bounds);
+        return bounds;
+    }
+    assignMove(total) {
+        tempMove.x = total ? this.totalX : this.moveX;
+        tempMove.y = total ? this.totalY : this.moveY;
+    }
+};
+DragEvent$1.BEFORE_DRAG = 'drag.before_drag';
+DragEvent$1.START = 'drag.start';
+DragEvent$1.DRAG = 'drag';
+DragEvent$1.END = 'drag.end';
+DragEvent$1.OVER = 'drag.over';
+DragEvent$1.OUT = 'drag.out';
+DragEvent$1.ENTER = 'drag.enter';
+DragEvent$1.LEAVE = 'drag.leave';
+DragEvent$1 = __decorate([
+    registerUIEvent()
+], DragEvent$1);
+
+let DropEvent = class DropEvent extends PointerEvent$1 {
+    static setList(data) {
+        DragEvent$1.setList(data);
+    }
+    static setData(data) {
+        DragEvent$1.setData(data);
+    }
+};
+DropEvent.DROP = 'drop';
+DropEvent = __decorate([
+    registerUIEvent()
+], DropEvent);
+
+let MoveEvent = class MoveEvent extends DragEvent$1 {
+};
+MoveEvent.BEFORE_MOVE = 'move.before_move';
+MoveEvent.START = 'move.start';
+MoveEvent.MOVE = 'move';
+MoveEvent.END = 'move.end';
+MoveEvent = __decorate([
+    registerUIEvent()
+], MoveEvent);
+
+let RotateEvent = class RotateEvent extends PointerEvent$1 {
+};
+RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
+RotateEvent.START = 'rotate.start';
+RotateEvent.ROTATE = 'rotate';
+RotateEvent.END = 'rotate.end';
+RotateEvent = __decorate([
+    registerUIEvent()
+], RotateEvent);
+
+let SwipeEvent = class SwipeEvent extends DragEvent$1 {
+};
+SwipeEvent.SWIPE = 'swipe';
+SwipeEvent.LEFT = 'swipe.left';
+SwipeEvent.RIGHT = 'swipe.right';
+SwipeEvent.UP = 'swipe.up';
+SwipeEvent.DOWN = 'swipe.down';
+SwipeEvent = __decorate([
+    registerUIEvent()
+], SwipeEvent);
+
+let ZoomEvent = class ZoomEvent extends PointerEvent$1 {
+};
+ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
+ZoomEvent.START = 'zoom.start';
+ZoomEvent.ZOOM = 'zoom';
+ZoomEvent.END = 'zoom.end';
+ZoomEvent = __decorate([
+    registerUIEvent()
+], ZoomEvent);
+
+let KeyEvent = class KeyEvent extends UIEvent {
+};
+KeyEvent.DOWN = 'key.down';
+KeyEvent.HOLD = 'key.hold';
+KeyEvent.UP = 'key.up';
+KeyEvent = __decorate([
+    registerUIEvent()
+], KeyEvent);
+
+new LeafList();
+
+Debug.get('emit');
+
+const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
+const inner = {};
+const leaf = Leaf.prototype;
+leaf.__hitWorld = function (point) {
+    const data = this.__;
+    if (!data.hitSelf)
+        return false;
+    const world = this.__world, layout = this.__layout;
+    const isSmall = world.width < 10 && world.height < 10;
+    if (data.hitRadius) {
+        copy$2(inner, point), point = inner;
+        setRadius(point, data.hitRadius);
+    }
+    toInnerRadiusPointOf(point, world, inner);
+    if (data.hitBox || isSmall) {
+        if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
+            return true;
+        if (isSmall)
+            return false;
+    }
+    if (layout.hitCanvasChanged || !this.__hitCanvas) {
+        this.__updateHitCanvas();
+        if (!layout.boundsChanged)
+            layout.hitCanvasChanged = false;
+    }
+    return this.__hit(inner);
+};
+leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
+leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
+leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+leaf.__drawHitPath = function (canvas) { if (canvas)
+    this.__drawRenderPath(canvas); };
+
+const matrix = new Matrix();
+const ui$1 = UI.prototype;
+ui$1.__updateHitCanvas = function () {
+    if (this.__box)
+        this.__box.__updateHitCanvas();
+    const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
+    const isHitPixelFill = (data.__isAlphaPixelFill || data.__isCanvas) && data.hitFill === 'pixel';
+    const isHitPixelStroke = data.__isAlphaPixelStroke && data.hitStroke === 'pixel';
+    const isHitPixel = isHitPixelFill || isHitPixelStroke;
+    if (!this.__hitCanvas)
+        this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this);
+    const h = this.__hitCanvas;
+    if (isHitPixel) {
+        const { renderBounds } = this.__layout;
+        const size = Platform.image.hitCanvasSize;
+        const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
+        const { x, y, width, height } = tempBounds$1.set(renderBounds).scale(scale);
+        h.resize({ width, height, pixelRatio: 1 });
+        h.clear();
+        ImageManager.patternLocked = true;
+        this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+        ImageManager.patternLocked = false;
+        h.resetTransform();
+        data.__isHitPixel = true;
+    }
+    else {
+        data.__isHitPixel && (data.__isHitPixel = false);
+    }
+    this.__drawHitPath(h);
+    h.setStrokeOptions(data);
+};
+ui$1.__hit = function (inner) {
+    if (this.__box && this.__box.__hit(inner))
+        return true;
+    const data = this.__;
+    if (data.__isHitPixel && this.__hitPixel(inner))
+        return true;
+    const { hitFill } = data;
+    const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__isAlphaPixelFill || data.__isCanvas)))) || hitFill === 'all';
+    if (needHitFillPath && this.__hitFill(inner))
+        return true;
+    const { hitStroke, __strokeWidth } = data;
+    const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__isAlphaPixelStroke))) || hitStroke === 'all';
+    if (!needHitFillPath && !needHitStrokePath)
+        return false;
+    const radiusWidth = inner.radiusX * 2;
+    let hitWidth = radiusWidth;
+    if (needHitStrokePath) {
+        switch (data.strokeAlign) {
+            case 'inside':
+                hitWidth += __strokeWidth * 2;
+                if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
+                    return true;
+                hitWidth = radiusWidth;
+                break;
+            case 'center':
+                hitWidth += __strokeWidth;
+                break;
+            case 'outside':
+                hitWidth += __strokeWidth * 2;
+                if (!needHitFillPath) {
+                    if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
+                        return true;
+                    hitWidth = radiusWidth;
+                }
+                break;
+        }
+    }
+    return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
+};
+
+const ui = UI.prototype, rect = Rect.prototype, box$1 = Box.prototype;
+rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
+    if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
+        ui.__updateHitCanvas.call(this);
+    else if (this.__hitCanvas)
+        this.__hitCanvas = null;
+};
+rect.__hitFill = box$1.__hitFill = function (inner) {
+    return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+};
+
+Text.prototype.__drawHitPath = function (canvas) {
+    const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
+    canvas.beginPath();
+    if (__letterSpacing < 0)
+        this.__drawPathByBox(canvas);
+    else
+        data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
+};
+
+function getSelector(ui) {
+    return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+}
+Group.prototype.pick = function (hitPoint, options) {
+    options || (options = emptyData);
+    this.updateLayout();
+    return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
+};
+
+const canvas = LeaferCanvasBase.prototype;
+canvas.hitFill = function (point, fillRule) {
+    return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
+};
+canvas.hitStroke = function (point, strokeWidth) {
+    this.strokeWidth = strokeWidth;
+    return this.context.isPointInStroke(point.x, point.y);
+};
+canvas.hitPixel = function (radiusPoint, offset, scale = 1) {
+    let { x, y, radiusX, radiusY } = radiusPoint;
+    if (offset)
+        x -= offset.x, y -= offset.y;
+    tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+    const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+    for (let i = 0, len = data.length; i < len; i += 4) {
+        if (data[i + 3] > 0)
+            return true;
+    }
+    return data[3] > 0;
+};
+
 function strokeText(stroke, ui, canvas) {
-    const { strokeAlign } = ui.__;
-    const isStrokes = typeof stroke !== 'string';
-    switch (strokeAlign) {
+    switch (ui.__.strokeAlign) {
         case 'center':
-            canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
-            isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+            drawCenter$1(stroke, 1, ui, canvas);
             break;
         case 'inside':
-            drawAlignStroke('inside', stroke, isStrokes, ui, canvas);
+            drawAlign(stroke, 'inside', ui, canvas);
             break;
         case 'outside':
-            drawAlignStroke('outside', stroke, isStrokes, ui, canvas);
+            ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas);
             break;
     }
 }
-function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
-    const { __strokeWidth, __font } = ui.__;
+function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
+    const data = ui.__;
+    canvas.setStroke(!data.__isStrokes && stroke, data.strokeWidth * strokeWidthScale, data);
+    data.__isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+}
+function drawAlign(stroke, align, ui, canvas) {
     const out = canvas.getSameCanvas(true, true);
-    out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__);
-    out.font = __font;
-    isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
+    out.font = ui.__.__font;
+    drawCenter$1(stroke, 2, ui, out);
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    if (ui.__worldFlipped)
+    if (ui.__worldFlipped || Platform.fullImageShadow)
         canvas.copyWorldByReset(out, ui.__nowWorld);
     else
         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
@@ -9107,90 +9758,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);
     }
 }
 
@@ -9237,9 +9858,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);
@@ -9249,29 +9871,55 @@ 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 = {
@@ -9337,12 +9985,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)
@@ -9350,38 +9996,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)
@@ -9389,12 +10035,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;
@@ -9402,7 +10048,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) {
@@ -9435,6 +10081,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)
@@ -9459,7 +10107,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');
                 }
@@ -9471,13 +10119,17 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
-        if (ui.placeholderColor)
-            setTimeout(() => {
-                if (!(image.ready || image.isPlacehold)) {
-                    image.isPlacehold = true;
-                    ui.forceUpdate('surface');
-                }
-            }, 100);
+        if (ui.placeholderColor) {
+            if (!ui.placeholderDelay)
+                image.isPlacehold = true;
+            else
+                setTimeout(() => {
+                    if (!image.ready) {
+                        image.isPlacehold = true;
+                        ui.forceUpdate('surface');
+                    }
+                }, ui.placeholderDelay);
+        }
     }
     return leafPaint;
 }
@@ -9683,32 +10335,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;
     }
 }
 
@@ -9718,17 +10371,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) {
@@ -9754,17 +10405,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;
 }
 
@@ -10097,6 +10746,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') {
@@ -10510,4 +11161,4 @@ Object.assign(Effect, EffectModule);
 
 useCanvas();
 
-export { AlignHelper, Answer, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, DataHelper, Debug, Direction4, Direction9, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Frame, FrameData, Group, GroupData, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, 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, MyImage, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Plugin, Point, PointHelper, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Run, Star, StarData, State, StringNumberMap, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, 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 };
+export { AlignHelper, Answer, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, DataHelper, Debug, Direction4, Direction9, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Frame, FrameData, Group, GroupData, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, 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, MyImage, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Plugin, Point, PointHelper, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Run, Star, StarData, State, StringNumberMap, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, 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 };