@leafer/miniapp 1.7.0 → 1.8.0

package/dist/miniapp.module.js

@@ -436,7 +436,7 @@ const MatrixHelper = {
 const M$a = MatrixHelper;
 
 const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
-const { sin: sin$5, cos: cos$5, abs: abs$7, sqrt: sqrt$4, atan2: atan2$2, min: min$1, round: round$5 } = Math;
+const { sin: sin$5, cos: cos$5, abs: abs$6, sqrt: sqrt$4, atan2: atan2$2, min: min$1, round: round$5 } = Math;
 const PointHelper = {
     defaultPoint: getPointData(),
     tempPoint: {},
@@ -531,8 +531,8 @@ const PointHelper = {
         return getDistanceFrom(t.x, t.y, point.x, point.y);
     },
     getDistanceFrom(x1, y1, x2, y2) {
-        const x = abs$7(x2 - x1);
-        const y = abs$7(y2 - y1);
+        const x = abs$6(x2 - x1);
+        const y = abs$6(y2 - y1);
         return sqrt$4(x * x + y * y);
     },
     getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
@@ -763,7 +763,7 @@ class Matrix {
         MatrixHelper.reset(this);
     }
 }
-const tempMatrix = new Matrix();
+const tempMatrix$1 = new Matrix();
 
 const TwoPointBoundsHelper = {
     tempPointBounds: {},
@@ -860,6 +860,12 @@ const AroundHelper = {
         }
         if (!onlyBoxSize)
             to.x += box.x, to.y += box.y;
+    },
+    getPoint(around, box, to) {
+        if (!to)
+            to = {};
+        AroundHelper.toPoint(around, box, to, true);
+        return to;
     }
 };
 function get$4(around) {
@@ -1788,10 +1794,13 @@ function contextAttr(realName) {
     return (target, key) => {
         if (!realName)
             realName = key;
-        Object.defineProperty(target, key, {
+        const property = {
             get() { return this.context[realName]; },
             set(value) { this.context[realName] = value; }
-        });
+        };
+        if (key === 'strokeCap')
+            property.set = function (value) { this.context[realName] = value === 'none' ? 'butt' : value; };
+        Object.defineProperty(target, key, property);
     };
 }
 const contextMethodNameList = [];
@@ -2067,15 +2076,15 @@ __decorate([
     contextMethod()
 ], Canvas$1.prototype, "strokeText", null);
 
-const { copy: copy$c, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$4 } = Math;
+const { copy: copy$c, multiplyParent: multiplyParent$4 } = MatrixHelper, { round: round$4 } = Math;
 const minSize = { width: 1, height: 1, pixelRatio: 1 };
 const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
 class LeaferCanvasBase extends Canvas$1 {
     get width() { return this.size.width; }
     get height() { return this.size.height; }
     get pixelRatio() { return this.size.pixelRatio; }
-    get pixelWidth() { return this.width * this.pixelRatio; }
-    get pixelHeight() { return this.height * this.pixelRatio; }
+    get pixelWidth() { return this.width * this.pixelRatio || 0; }
+    get pixelHeight() { return this.height * this.pixelRatio || 0; }
     get pixelSnap() { return this.config.pixelSnap; }
     set pixelSnap(value) { this.config.pixelSnap = value; }
     get allowBackgroundColor() { return this.view && this.parentView; }
@@ -2140,7 +2149,7 @@ class LeaferCanvasBase extends Canvas$1 {
     setWorld(matrix, parentMatrix) {
         const { pixelRatio, pixelSnap } = this, w = this.worldTransform;
         if (parentMatrix)
-            multiplyParent$3(matrix, parentMatrix, w);
+            multiplyParent$4(matrix, parentMatrix, w);
         w.a = matrix.a * pixelRatio;
         w.b = matrix.b * pixelRatio;
         w.c = matrix.c * pixelRatio;
@@ -2162,20 +2171,33 @@ class LeaferCanvasBase extends Canvas$1 {
         if (w)
             this.setTransform(w.a, w.b, w.c, w.d, w.e, w.f);
     }
-    setStroke(color, strokeWidth, options) {
+    setStroke(color, strokeWidth, options, childOptions) {
         if (strokeWidth)
             this.strokeWidth = strokeWidth;
         if (color)
             this.strokeStyle = color;
         if (options)
-            this.setStrokeOptions(options);
-    }
-    setStrokeOptions(options) {
-        this.strokeCap = options.strokeCap === 'none' ? 'butt' : options.strokeCap;
-        this.strokeJoin = options.strokeJoin;
-        this.dashPattern = options.dashPattern;
-        this.dashOffset = options.dashOffset;
-        this.miterLimit = options.miterLimit;
+            this.setStrokeOptions(options, childOptions);
+    }
+    setStrokeOptions(options, childOptions) {
+        let { strokeCap, strokeJoin, dashPattern, dashOffset, miterLimit } = options;
+        if (childOptions) {
+            if (childOptions.strokeCap)
+                strokeCap = childOptions.strokeCap;
+            if (childOptions.strokeJoin)
+                strokeJoin = childOptions.strokeJoin;
+            if (childOptions.dashPattern !== undefined)
+                dashPattern = childOptions.dashPattern;
+            if (childOptions.dashOffset !== undefined)
+                dashOffset = childOptions.dashOffset;
+            if (childOptions.miterLimit)
+                miterLimit = childOptions.miterLimit;
+        }
+        this.strokeCap = strokeCap;
+        this.strokeJoin = strokeJoin;
+        this.dashPattern = dashPattern;
+        this.dashOffset = dashOffset;
+        this.miterLimit = miterLimit;
     }
     saveBlendMode(blendMode) {
         this.savedBlendMode = this.blendMode;
@@ -2409,7 +2431,7 @@ const RectHelper = {
     }
 };
 
-const { sin: sin$4, cos: cos$4, atan2: atan2$1, ceil: ceil$2, abs: abs$6, PI: PI$3, sqrt: sqrt$3, pow: pow$1 } = Math;
+const { sin: sin$4, cos: cos$4, atan2: atan2$1, ceil: ceil$2, abs: abs$5, PI: PI$3, sqrt: sqrt$3, pow: pow$1 } = Math;
 const { setPoint: setPoint$4, addPoint: addPoint$2 } = TwoPointBoundsHelper;
 const { set, toNumberPoints: toNumberPoints$1 } = PointHelper;
 const { M: M$9, L: L$a, C: C$8, Q: Q$7, Z: Z$8 } = PathCommandMap;
@@ -2484,7 +2506,7 @@ const BezierHelper = {
         let totalRadian = endRadian - startRadian;
         if (totalRadian < 0)
             totalRadian += PI2;
-        if (totalRadian === PI$3 || (abs$6(BAx + BAy) < 1.e-12) || (abs$6(CBx + CBy) < 1.e-12)) {
+        if (totalRadian === PI$3 || (abs$5(BAx + BAy) < 1.e-12) || (abs$5(CBx + CBy) < 1.e-12)) {
             if (data)
                 data.push(L$a, x1, y1);
             if (setPointBounds) {
@@ -2526,7 +2548,7 @@ const BezierHelper = {
             totalRadian -= PI2;
         if (anticlockwise)
             totalRadian -= PI2;
-        const parts = ceil$2(abs$6(totalRadian / PI_2));
+        const parts = ceil$2(abs$5(totalRadian / PI_2));
         const partRadian = totalRadian / parts;
         const partRadian4Sin = sin$4(partRadian / 4);
         const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$4(partRadian / 2);
@@ -2971,7 +2993,7 @@ const { current, pushData, copyData } = PathConvert;
 
 const { M: M$7, L: L$8, C: C$6, Q: Q$5, Z: Z$6, N: N$4, D: D$4, X: X$4, G: G$4, F: F$5, O: O$5, P: P$4, U: U$4 } = PathCommandMap;
 const { getMinDistanceFrom, getRadianFrom } = PointHelper;
-const { tan, min, abs: abs$5 } = Math;
+const { tan, min, abs: abs$4 } = Math;
 const startPoint = {};
 const PathCommandDataHelper = {
     beginPath(data) {
@@ -3034,7 +3056,7 @@ const PathCommandDataHelper = {
     arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
         if (lastX !== undefined) {
             const d = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2);
-            radius = min(radius, min(d / 2, d / 2 * abs$5(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+            radius = min(radius, min(d / 2, d / 2 * abs$4(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
         }
         data.push(U$4, x1, y1, x2, y2, radius);
     },
@@ -3910,6 +3932,13 @@ function defineKey(target, key, descriptor, noConfigurable) {
 function getDescriptor(object, name) {
     return Object.getOwnPropertyDescriptor(object, name);
 }
+function createDescriptor(key, defaultValue) {
+    const privateKey = '_' + key;
+    return {
+        get() { const v = this[privateKey]; return v === undefined ? defaultValue : v; },
+        set(value) { this[privateKey] = value; }
+    };
+}
 function getNames(object) {
     return Object.getOwnPropertyNames(object);
 }
@@ -4142,15 +4171,7 @@ function defineDataProcessor(target, key, defaultValue) {
     const data = target.__DataProcessor.prototype;
     const computedKey = '_' + key;
     const setMethodName = getSetMethodName(key);
-    const property = {
-        get() {
-            const v = this[computedKey];
-            return v === undefined ? defaultValue : v;
-        },
-        set(value) {
-            this[computedKey] = value;
-        }
-    };
+    const property = createDescriptor(key, defaultValue);
     if (defaultValue === undefined) {
         property.get = function () { return this[computedKey]; };
     }
@@ -4265,7 +4286,7 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$a, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const { copy: copy$a, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$3, divideParent, getLayout } = MatrixHelper;
 const matrix$3 = {}, { round: round$3 } = Math;
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4337,6 +4358,14 @@ const LeafHelper = {
         }
         return true;
     },
+    copyCanvasByWorld(leaf, currentCanvas, fromCanvas, fromWorld, blendMode, onlyResetTransform) {
+        if (!fromWorld)
+            fromWorld = leaf.__nowWorld;
+        if (leaf.__worldFlipped || Platform.fullImageShadow)
+            currentCanvas.copyWorldByReset(fromCanvas, fromWorld, leaf.__nowWorld, blendMode, onlyResetTransform);
+        else
+            currentCanvas.copyWorldToInner(fromCanvas, fromWorld, leaf.__layout.renderBounds, blendMode);
+    },
     moveWorld(t, x, y = 0, isInnerPoint, transition) {
         const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
         isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
@@ -4396,14 +4425,14 @@ const LeafHelper = {
     },
     transformWorld(t, transform, resize, transition) {
         copy$a(matrix$3, t.worldTransform);
-        multiplyParent$2(matrix$3, transform);
+        multiplyParent$3(matrix$3, transform);
         if (t.parent)
             divideParent(matrix$3, t.parent.worldTransform);
         L$4.setTransform(t, matrix$3, resize, transition);
     },
     transform(t, transform, resize, transition) {
         copy$a(matrix$3, t.localTransform);
-        multiplyParent$2(matrix$3, transform);
+        multiplyParent$3(matrix$3, transform);
         L$4.setTransform(t, matrix$3, resize, transition);
     },
     setTransform(t, transform, resize, transition) {
@@ -5265,17 +5294,18 @@ const LeafDataProxy = {
     }
 };
 
-const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
+const { setLayout, multiplyParent: multiplyParent$2, translateInner, defaultWorld } = MatrixHelper;
 const { toPoint: toPoint$4, tempPoint: tempPoint$1 } = 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.__);
+        const { parent, __layout } = this;
+        multiplyParent$2(this.__local || __layout, parent ? parent.__world : defaultWorld, this.__world, !!__layout.affectScaleOrRotation, this.__, parent && (parent.scrollY || parent.scrollX) && parent.__);
     },
     __updateLocalMatrix() {
         if (this.__local) {
             const layout = this.__layout, local = this.__local, data = this.__;
             if (layout.affectScaleOrRotation) {
-                if ((layout.scaleChanged && (layout.resized = 'scale')) || layout.rotationChanged) {
+                if ((layout.scaleChanged && (layout.resized || (layout.resized = 'scale'))) || layout.rotationChanged) {
                     setLayout(local, data, null, null, layout.affectRotation);
                     layout.scaleChanged = layout.rotationChanged = undefined;
                 }
@@ -5441,10 +5471,7 @@ const LeafRender = {
                     return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(true, true);
                 this.__draw(tempCanvas, options, canvas);
-                if (this.__worldFlipped)
-                    canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, data.__blendMode, true);
-                else
-                    canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, data.__blendMode);
+                LeafHelper.copyCanvasByWorld(this, canvas, tempCanvas, this.__nowWorld, data.__blendMode, true);
                 tempCanvas.recycle(this.__nowWorld);
             }
             else {
@@ -5492,7 +5519,7 @@ const BranchRender = {
                 options.dimOpacity = data.dim === true ? 0.2 : data.dim;
             else if (data.dimskip)
                 options.dimOpacity && (options.dimOpacity = 0);
-            if (data.__single) {
+            if (data.__single && !this.isBranchLeaf) {
                 if (data.eraser === 'path')
                     return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(false, true);
@@ -5514,9 +5541,7 @@ const BranchRender = {
         else {
             const { children } = this;
             for (let i = 0, len = children.length; i < len; i++) {
-                if (excludeRenderBounds$1(children[i], options))
-                    continue;
-                children[i].__render(canvas, options);
+                excludeRenderBounds$1(children[i], options) || children[i].__render(canvas, options);
             }
         }
     },
@@ -5524,16 +5549,15 @@ const BranchRender = {
         if (this.__worldOpacity) {
             const { children } = this;
             for (let i = 0, len = children.length; i < len; i++) {
-                if (excludeRenderBounds$1(children[i], options))
-                    continue;
-                children[i].__clip(canvas, options);
+                excludeRenderBounds$1(children[i], options) || children[i].__clip(canvas, options);
             }
         }
     }
 };
 
+const tempScaleData$1 = {};
 const { LEAF, create } = IncrementId;
-const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
+const { toInnerPoint, toOuterPoint, multiplyParent: multiplyParent$1 } = MatrixHelper;
 const { toOuterOf } = BoundsHelper;
 const { copy: copy$7, move: move$5 } = PointHelper;
 const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
@@ -5715,7 +5739,7 @@ let Leaf = class Leaf {
             if (!this.__cameraWorld)
                 this.__cameraWorld = {};
             const cameraWorld = this.__cameraWorld, world = this.__world;
-            multiplyParent(world, options.matrix, cameraWorld, undefined, world);
+            multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
             toOuterOf(this.__layout.renderBounds, cameraWorld, cameraWorld);
             cameraWorld.half !== world.half && (cameraWorld.half = world.half);
             return cameraWorld;
@@ -5724,6 +5748,22 @@ let Leaf = class Leaf {
             return this.__world;
         }
     }
+    getClampRenderScale() {
+        let { scaleX } = this.__nowWorld || this.__world;
+        if (scaleX < 0)
+            scaleX = -scaleX;
+        return scaleX > 1 ? scaleX : 1;
+    }
+    getRenderScaleData(abs, scaleFixed) {
+        const { scaleX, scaleY } = ImageManager.patternLocked ? this.__world : this.__nowWorld;
+        if (scaleFixed)
+            tempScaleData$1.scaleX = tempScaleData$1.scaleY = 1;
+        else if (abs)
+            tempScaleData$1.scaleX = scaleX < 0 ? -scaleX : scaleX, tempScaleData$1.scaleY = scaleY < 0 ? -scaleY : scaleY;
+        else
+            tempScaleData$1.scaleX = scaleX, tempScaleData$1.scaleY = scaleY;
+        return tempScaleData$1;
+    }
     getTransform(relative) {
         return this.__layout.getTransform(relative || 'local');
     }
@@ -6248,7 +6288,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.7.0";
+const version = "1.8.0";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return false; }
@@ -7235,6 +7275,11 @@ function zoomLayerType() {
         });
     };
 }
+function createAttr(defaultValue) {
+    return (target, key) => {
+        defineKey(target, key, createDescriptor(key, defaultValue));
+    };
+}
 
 function hasTransparent$3(color) {
     if (!color || color.length === 7 || color.length === 4)
@@ -7292,22 +7337,9 @@ const emptyPaint = {};
 const debug$5 = Debug.get('UIData');
 class UIData extends LeafData {
     get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
-    get __strokeWidth() {
-        const { strokeWidth, strokeWidthFixed } = this;
-        if (strokeWidthFixed) {
-            const ui = this.__leaf;
-            let { scaleX } = ui.__nowWorld || ui.__world;
-            if (scaleX < 0)
-                scaleX = -scaleX;
-            return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
-        }
-        else
-            return strokeWidth;
-    }
-    get __hasMultiPaint() {
-        const t = this;
-        return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect;
-    }
+    get __strokeWidth() { return this.__getRealStrokeWidth(); }
+    get __maxStrokeWidth() { const t = this; return t.__hasMultiStrokeStyle ? Math.max(t.__hasMultiStrokeStyle, t.strokeWidth) : t.strokeWidth; }
+    get __hasMultiPaint() { const t = this; return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect; }
     get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
     get __hasSurface() { const t = this; return (t.fill || t.stroke); }
     get __autoWidth() { return !this._width; }
@@ -7389,6 +7421,21 @@ class UIData extends LeafData {
             Paint.compute('stroke', this.__leaf);
         this.__needComputePaint = undefined;
     }
+    __getRealStrokeWidth(childStyle) {
+        let { strokeWidth, strokeWidthFixed } = this;
+        if (childStyle) {
+            if (childStyle.strokeWidth)
+                strokeWidth = childStyle.strokeWidth;
+            if (childStyle.strokeWidthFixed !== undefined)
+                strokeWidthFixed = childStyle.strokeWidthFixed;
+        }
+        if (strokeWidthFixed) {
+            const scale = this.__leaf.getClampRenderScale();
+            return scale > 1 ? strokeWidth / scale : strokeWidth;
+        }
+        else
+            return strokeWidth;
+    }
     __setPaint(attrName, value) {
         this.__setInput(attrName, value);
         const layout = this.__leaf.__layout;
@@ -7413,6 +7460,7 @@ class UIData extends LeafData {
         }
         else {
             stintSet$2(this, '__isAlphaPixelStroke', undefined);
+            stintSet$2(this, '__hasMultiStrokeStyle', undefined);
             this._stroke = this.__isStrokes = undefined;
         }
     }
@@ -7434,8 +7482,8 @@ class GroupData extends UIData {
 
 class BoxData extends GroupData {
     get __boxStroke() { return !this.__pathInputed; }
-    get __drawAfterFill() { const t = this; return (t.overflow === 'hide' && (t.__clipAfterFill || t.innerShadow) && t.__leaf.children.length); }
-    get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
+    get __drawAfterFill() { const t = this; return t.__single || t.__clipAfterFill; }
+    get __clipAfterFill() { const t = this; return t.overflow === 'hide' && t.__leaf.children.length && (t.__leaf.isOverflow || super.__clipAfterFill); }
 }
 
 class LeaferData extends GroupData {
@@ -7555,7 +7603,7 @@ class CanvasData extends RectData {
 const UIBounds = {
     __updateStrokeSpread() {
         let width = 0, boxWidth = 0;
-        const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
+        const data = this.__, { strokeAlign, __maxStrokeWidth: strokeWidth } = data, box = this.__box;
         if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
             boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
             if (!data.__boxStroke) {
@@ -7575,13 +7623,15 @@ const UIBounds = {
     },
     __updateRenderSpread() {
         let width = 0;
-        const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
+        const { shadow, innerShadow, blur, backgroundBlur, filter, renderSpread } = this.__;
         if (shadow)
             shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
         if (blur)
             width = Math.max(width, blur);
         if (filter)
             width += Filter.getSpread(filter);
+        if (renderSpread)
+            width += renderSpread;
         let shapeWidth = width = Math.ceil(width);
         if (innerShadow)
             innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
@@ -7604,7 +7654,7 @@ const UIRender = {
         }
         if (data.__useEffect) {
             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')));
+            stintSet$1(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && fill && !data.__isTransparentFill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
             data.__useEffect = !!(shadow || otherEffect);
         }
         data.__checkSingle();
@@ -7711,17 +7761,17 @@ const RectRender = {
         if (__drawAfterFill)
             this.__drawAfterFill(canvas, options);
         if (stroke) {
-            const { strokeAlign, __strokeWidth } = this.__;
-            if (!__strokeWidth)
+            const { strokeAlign, __strokeWidth: strokeWidth } = this.__;
+            if (!strokeWidth)
                 return;
-            canvas.setStroke(stroke, __strokeWidth, this.__);
-            const half = __strokeWidth / 2;
+            canvas.setStroke(stroke, strokeWidth, this.__);
+            const half = strokeWidth / 2;
             switch (strokeAlign) {
                 case 'center':
                     canvas.strokeRect(0, 0, width, height);
                     break;
                 case 'inside':
-                    width -= __strokeWidth, height -= __strokeWidth;
+                    width -= strokeWidth, height -= strokeWidth;
                     if (width < 0 || height < 0) {
                         canvas.save();
                         this.__clip(canvas, options);
@@ -7732,7 +7782,7 @@ const RectRender = {
                         canvas.strokeRect(x + half, y + half, width, height);
                     break;
                 case 'outside':
-                    canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
+                    canvas.strokeRect(x - half, y - half, width + strokeWidth, height + strokeWidth);
                     break;
             }
         }
@@ -7745,6 +7795,8 @@ let UI = UI_1 = class UI extends Leaf {
     get isFrame() { return false; }
     set scale(value) { MathHelper.assignScale(this, value); }
     get scale() { return this.__.scale; }
+    get isAutoWidth() { const t = this.__; return t.__autoWidth || t.autoWidth; }
+    get isAutoHeight() { const t = this.__; return t.__autoHeight || t.autoHeight; }
     get pen() {
         const { path } = this.__;
         pen.set(this.path = path || []);
@@ -7959,6 +8011,9 @@ __decorate([
 __decorate([
     naturalBoundsType(1)
 ], UI.prototype, "pixelRatio", void 0);
+__decorate([
+    affectRenderBoundsType(0)
+], UI.prototype, "renderSpread", void 0);
 __decorate([
     pathInputType()
 ], UI.prototype, "path", void 0);
@@ -8115,7 +8170,8 @@ let Group = class Group extends UI {
     }
     toJSON(options) {
         const data = super.toJSON(options);
-        data.children = this.children.map(child => child.toJSON(options));
+        if (!this.childlessJSON)
+            data.children = this.children.map(child => child.toJSON(options));
         return data;
     }
     pick(_hitPoint, _options) { return undefined; }
@@ -8562,8 +8618,8 @@ let Box = class Box extends Group {
     __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
     __updateRectBoxBounds() { }
     __updateBoxBounds(_secondLayout) {
-        const data = this.__;
         if (this.children.length && !this.pathInputed) {
+            const data = this.__;
             if (data.__autoSide) {
                 if (data.__hasSurface)
                     this.__extraUpdate();
@@ -8590,20 +8646,26 @@ let Box = class Box extends Group {
     __updateStrokeBounds() { }
     __updateRenderBounds() {
         let isOverflow;
-        const { renderBounds } = this.__layout;
         if (this.children.length) {
+            const data = this.__, { renderBounds, boxBounds } = this.__layout;
             super.__updateRenderBounds();
             copy$6(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds);
-            if (isOverflow && this.__.overflow !== 'hide')
+            if (data.scrollY || data.scrollX) {
+                childrenRenderBounds.x += data.scrollX;
+                childrenRenderBounds.y += data.scrollY;
+            }
+            isOverflow = !includes$1(boxBounds, childrenRenderBounds);
+            if (isOverflow && data.overflow !== 'hide')
                 add(renderBounds, childrenRenderBounds);
         }
         else
             this.__updateRectRenderBounds();
         DataHelper.stintSet(this, 'isOverflow', isOverflow);
+        this.__updateScrollBar();
     }
     __updateRectRenderBounds() { }
+    __updateScrollBar() { }
     __updateRectChange() { }
     __updateChange() {
         super.__updateChange();
@@ -8620,10 +8682,12 @@ let Box = class Box extends Group {
             if (this.children.length)
                 this.__renderGroup(canvas, options);
         }
+        if (this.scrollBar)
+            this.scrollBar.__render(canvas, options);
     }
     __drawContent(canvas, options) {
         this.__renderGroup(canvas, options);
-        if (this.__.__useStroke) {
+        if (this.__.__useStroke || this.__.__useEffect) {
             canvas.setWorld(this.__nowWorld);
             this.__drawRenderPath(canvas);
         }
@@ -10426,18 +10490,20 @@ leaf$1.__hitWorld = function (point) {
     }
     return this.__hit(inner);
 };
-leaf$1.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
-leaf$1.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
-leaf$1.__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$1.__drawHitPath = function (canvas) { if (canvas)
-    this.__drawRenderPath(canvas); };
+leaf$1.__hitFill = function (inner) { const h = this.__hitCanvas; return h && h.hitFill(inner, this.__.windingRule); };
+leaf$1.__hitStroke = function (inner, strokeWidth) { const h = this.__hitCanvas; return h && h.hitStroke(inner, strokeWidth); };
+leaf$1.__hitPixel = function (inner) { const h = this.__hitCanvas; return h && h.hitPixel(inner, this.__layout.renderBounds, h.hitScale); };
+leaf$1.__drawHitPath = function (canvas) { canvas && this.__drawRenderPath(canvas); };
 
 const matrix$2 = new Matrix();
 const ui$5 = UI.prototype;
 ui$5.__updateHitCanvas = function () {
     if (this.__box)
         this.__box.__updateHitCanvas();
-    const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
+    const leafer = this.leafer || (this.parent && this.parent.leafer);
+    if (!leafer)
+        return;
+    const data = this.__, { hitCanvasManager } = leafer;
     const isHitPixelFill = (data.__isAlphaPixelFill || data.__isCanvas) && data.hitFill === 'pixel';
     const isHitPixelStroke = data.__isAlphaPixelStroke && data.hitStroke === 'pixel';
     const isHitPixel = isHitPixelFill || isHitPixelStroke;
@@ -10473,7 +10539,7 @@ ui$5.__hit = function (inner) {
     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 { hitStroke, __maxStrokeWidth: strokeWidth } = data;
     const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__isAlphaPixelStroke))) || hitStroke === 'all';
     if (!needHitFillPath && !needHitStrokePath)
         return false;
@@ -10482,16 +10548,16 @@ ui$5.__hit = function (inner) {
     if (needHitStrokePath) {
         switch (data.strokeAlign) {
             case 'inside':
-                hitWidth += __strokeWidth * 2;
+                hitWidth += strokeWidth * 2;
                 if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
                     return true;
                 hitWidth = radiusWidth;
                 break;
             case 'center':
-                hitWidth += __strokeWidth;
+                hitWidth += strokeWidth;
                 break;
             case 'outside':
-                hitWidth += __strokeWidth * 2;
+                hitWidth += strokeWidth * 2;
                 if (!needHitFillPath) {
                     if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
                         return true;
@@ -10696,9 +10762,14 @@ function fills(fills, ui, canvas) {
             }
         }
         canvas.fillStyle = item.style;
-        if (item.transform) {
+        if (item.transform || item.scaleFixed) {
             canvas.save();
-            canvas.transform(item.transform);
+            if (item.transform)
+                canvas.transform(item.transform);
+            if (item.scaleFixed) {
+                const { scaleX, scaleY } = ui.getRenderScaleData(true);
+                canvas.scale(1 / scaleX, 1 / scaleY);
+            }
             if (item.blendMode)
                 canvas.blendMode = item.blendMode;
             fillPathOrText(ui, canvas);
@@ -10734,8 +10805,13 @@ function strokeText(stroke, ui, canvas) {
 }
 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);
+    if (typeof stroke === 'object') {
+        drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
+    }
+    else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        drawTextStroke(ui, canvas);
+    }
 }
 function drawAlign(stroke, align, ui, canvas) {
     const out = canvas.getSameCanvas(true, true);
@@ -10744,15 +10820,9 @@ function drawAlign(stroke, align, ui, canvas) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    copyWorld(canvas, out, ui);
+    LeafHelper.copyCanvasByWorld(ui, canvas, out);
     out.recycle(ui.__nowWorld);
 }
-function copyWorld(canvas, out, ui) {
-    if (ui.__worldFlipped || Platform.fullImageShadow)
-        canvas.copyWorldByReset(out, ui.__nowWorld);
-    else
-        canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-}
 function drawTextStroke(ui, canvas) {
     let row, data = ui.__.__textDrawData;
     const { rows, decorationY } = data;
@@ -10768,14 +10838,21 @@ function drawTextStroke(ui, canvas) {
         rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
     }
 }
-function drawStrokesStyle(strokes, isText, ui, canvas) {
+function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
     let item;
+    const data = ui.__, { __hasMultiStrokeStyle } = data;
+    __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i];
         if (item.image && PaintImage.checkImage(ui, canvas, item, false))
             continue;
         if (item.style) {
-            canvas.strokeStyle = item.style;
+            if (__hasMultiStrokeStyle) {
+                const { strokeStyle } = item;
+                strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
+            }
+            else
+                canvas.strokeStyle = item.style;
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
                 isText ? drawTextStroke(ui, canvas) : canvas.stroke();
@@ -10814,8 +10891,13 @@ function strokes(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 (typeof stroke === 'object') {
+        drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
+    }
+    else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        canvas.stroke();
+    }
     if (data.__useArrow)
         Paint.strokeArrow(stroke, ui, canvas);
 }
@@ -10837,7 +10919,7 @@ function drawOutside(stroke, ui, canvas) {
         drawCenter(stroke, 2, ui, out);
         out.clipUI(data);
         out.clearWorld(renderBounds);
-        copyWorld(canvas, out, ui);
+        LeafHelper.copyCanvasByWorld(ui, canvas, out);
         out.recycle(ui.__nowWorld);
     }
 }
@@ -10892,8 +10974,16 @@ function compute(attrName, ui) {
     if (!(paints instanceof Array))
         paints = [paints];
     recycleMap = PaintImage.recycleImage(attrName, data);
+    let maxChildStrokeWidth;
     for (let i = 0, len = paints.length, item; i < len; i++) {
-        (item = getLeafPaint(attrName, paints[i], ui)) && leafPaints.push(item);
+        if (item = getLeafPaint(attrName, paints[i], ui)) {
+            leafPaints.push(item);
+            if (item.strokeStyle) {
+                maxChildStrokeWidth || (maxChildStrokeWidth = 1);
+                if (item.strokeStyle.strokeWidth)
+                    maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
+            }
+        }
     }
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length) {
@@ -10910,6 +11000,7 @@ function compute(attrName, ui) {
     else {
         stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
         stintSet(data, '__isTransparentStroke', isTransparent);
+        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
     }
 }
 function getLeafPaint(attrName, paint, ui) {
@@ -10941,6 +11032,11 @@ function getLeafPaint(attrName, paint, ui) {
     if (data) {
         if (typeof data.style === 'string' && hasTransparent$1(data.style))
             data.isTransparent = true;
+        if (paint.style) {
+            if (paint.style.strokeWidth === 0)
+                return undefined;
+            data.strokeStyle = paint.style;
+        }
         if (paint.blendMode)
             data.blendMode = paint.blendMode;
     }
@@ -10960,8 +11056,8 @@ const PaintModule = {
     shape
 };
 
-let origin$1 = {};
-const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate: rotate$2, skew: skewHelper } = MatrixHelper;
+let origin$1 = {}, tempMatrix = getMatrixData();
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate: rotate$2, skew: skewHelper } = MatrixHelper;
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
     translate$1(transform, box.x + x, box.y + y);
@@ -10970,7 +11066,7 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.transform = transform;
 }
-function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
     const transform = get$3();
     if (rotation)
         rotate$2(transform, rotation);
@@ -10979,6 +11075,10 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
     if (scaleX)
         scaleHelper(transform, scaleX, scaleY);
     translate$1(transform, box.x + x, box.y + y);
+    if (clipSize) {
+        tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
+        multiplyParent(transform, tempMatrix);
+    }
     data.transform = transform;
 }
 function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
@@ -11015,13 +11115,15 @@ const tempBox = new Bounds();
 const tempScaleData = {};
 const tempImage = {};
 function createData(leafPaint, image, paint, box) {
-    const { changeful, sync, editing } = paint;
+    const { changeful, sync, editing, scaleFixed } = paint;
     if (changeful)
         leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
     if (editing)
         leafPaint.editing = editing;
+    if (scaleFixed)
+        leafPaint.scaleFixed = scaleFixed;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
@@ -11030,7 +11132,7 @@ function getPatternData(paint, box, image) {
     if (paint.mode === 'strench')
         paint.mode = 'stretch';
     let { width, height } = image;
-    const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint;
+    const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
     const sameBox = box.width === width && box.height === height;
     const data = { mode };
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -11064,8 +11166,8 @@ function getPatternData(paint, box, image) {
             break;
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation || skew)
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
+            if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
+                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
@@ -11202,18 +11304,16 @@ function ignoreRender(ui, value) {
 }
 
 const { get: get$1, scale: scale$2, copy: copy$4 } = MatrixHelper;
-const { ceil: ceil$1, abs: abs$4 } = Math;
+const { ceil: ceil$1, abs: abs$3 } = Math;
 function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
     const id = scaleX + '-' + scaleY + '-' + pixelRatio;
     if (paint.patternId !== id && !ui.destroyed) {
-        scaleX = abs$4(scaleX);
-        scaleY = abs$4(scaleY);
         const { image, data } = paint;
         let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
         if (sx) {
-            sx = abs$4(sx);
-            sy = abs$4(sy);
+            sx = abs$3(sx);
+            sy = abs$3(sy);
             imageMatrix = get$1();
             copy$4(imageMatrix, transform);
             scale$2(imageMatrix, 1 / sx, 1 / sy);
@@ -11266,9 +11366,8 @@ function createPattern(ui, paint, pixelRatio) {
     }
 }
 
-const { abs: abs$3 } = Math;
 function checkImage(ui, canvas, paint, allowDraw) {
-    const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+    const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
     const { pixelRatio } = canvas, { data } = paint;
     if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
         return false;
@@ -11281,8 +11380,8 @@ function checkImage(ui, canvas, paint, allowDraw) {
             else {
                 if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
                     let { width, height } = data;
-                    width *= abs$3(scaleX) * pixelRatio;
-                    height *= abs$3(scaleY) * pixelRatio;
+                    width *= scaleX * pixelRatio;
+                    height *= scaleY * pixelRatio;
                     if (data.scaleX) {
                         width *= data.scaleX;
                         height *= data.scaleY;
@@ -11292,6 +11391,10 @@ function checkImage(ui, canvas, paint, allowDraw) {
             }
         }
         if (allowDraw) {
+            if (ui.__.__isFastShadow) {
+                canvas.fillStyle = paint.style || '#000';
+                canvas.fill();
+            }
             drawImage(ui, canvas, paint, data);
             return true;
         }
@@ -11480,10 +11583,7 @@ function shadow$1(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
         }
-        if (ui.__worldFlipped)
-            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        else
-            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -11542,10 +11642,7 @@ function innerShadow(ui, current, shape) {
             copyBounds = bounds;
         }
         other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
-        if (ui.__worldFlipped)
-            current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-        else
-            current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
         if (end && index < end)
             other.clearWorld(copyBounds, true);
     });
@@ -11601,12 +11698,11 @@ Group.prototype.__renderMask = function (canvas, options) {
                     contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (!(mask === 'clipping' || mask === 'clipping-path'))
-                continue;
-        }
-        if (excludeRenderBounds(child, options))
+            if (mask === 'clipping' || mask === 'clipping-path')
+                excludeRenderBounds(child, options) || child.__render(canvas, options);
             continue;
-        child.__render(contentCanvas || canvas, options);
+        }
+        excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
     }
     maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
 };
@@ -12231,6 +12327,8 @@ function targetAttr(fn) {
                         if (isSelect) {
                             if (value instanceof Array && value.length > 1 && value[0].locked)
                                 value.splice(0, 1);
+                            if (this.single)
+                                this.element.syncEventer = null;
                             const { beforeSelect } = this.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({ target: value });
@@ -12254,9 +12352,11 @@ function mergeConfigAttr() {
     return (target, key) => {
         defineKey(target, key, {
             get() {
-                const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
+                const { config, element, dragPoint, editBox } = this, mergeConfig = Object.assign({}, config);
                 if (element && element.editConfig)
                     Object.assign(mergeConfig, element.editConfig);
+                if (editBox.config)
+                    Object.assign(mergeConfig, editBox.config);
                 if (dragPoint) {
                     if (dragPoint.editConfig)
                         Object.assign(mergeConfig, dragPoint.editConfig);
@@ -12288,14 +12388,17 @@ class Stroker extends UI {
         this.strokeAlign = 'center';
     }
     setTarget(target, style) {
-        this.set(style);
+        if (style)
+            this.set(style);
         this.target = target;
         this.update();
     }
-    update() {
+    update(style) {
         const { list } = this;
         if (list.length) {
             setListWithFn(bounds$2, list, worldBounds);
+            if (style)
+                this.set(style);
             this.set(bounds$2);
             this.visible = true;
         }
@@ -12438,15 +12541,14 @@ class EditSelect extends Group {
     }
     onSelect() {
         if (this.running) {
-            const { mergeConfig, list } = this.editor;
-            const { stroke, strokeWidth, selectedStyle } = mergeConfig;
-            this.targetStroker.setTarget(list, Object.assign({ stroke, strokeWidth: Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
+            this.targetStroker.setTarget(this.editor.list);
             this.hoverStroker.target = null;
         }
     }
     update() {
         this.hoverStroker.update();
-        this.targetStroker.update();
+        const { stroke, strokeWidth, selectedStyle } = this.editor.mergedConfig;
+        this.targetStroker.update(Object.assign({ stroke, strokeWidth: strokeWidth && Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
     }
     onPointerMove(e) {
         const { app, editor } = this;
@@ -12722,15 +12824,17 @@ const EditDataHelper = {
         toPoint(around || align, boxBounds, origin, true);
         if (dragBounds) {
             const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds;
-            const localBounds = new Bounds(target.__localBoxBounds);
-            localBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
-            if (!BoundsHelper.includes(allowBounds, localBounds)) {
-                const realBounds = localBounds.getIntersect(allowBounds);
-                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
-                if (useScaleX)
-                    scaleX *= fitScaleX;
-                if (useScaleY)
-                    scaleY *= fitScaleY;
+            const childBounds = new Bounds(target.__localBoxBounds);
+            if (BoundsHelper.includes(new Bounds(allowBounds).spread(0.1), childBounds)) {
+                childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
+                if (!BoundsHelper.includes(allowBounds, childBounds)) {
+                    const realBounds = childBounds.getIntersect(allowBounds);
+                    const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height;
+                    if (useScaleX)
+                        scaleX *= fitScaleX;
+                    if (useScaleY)
+                        scaleY *= fitScaleY;
+                }
             }
         }
         if (useScaleX && widthRange) {
@@ -12865,9 +12969,9 @@ const EditDataHelper = {
 };
 
 const cacheCursors = {};
-function updateCursor(editBox, e) {
-    const { enterPoint: point } = editBox;
-    if (!point || !editBox.editor.editing || !editBox.visible)
+function updatePointCursor(editBox, e) {
+    const { enterPoint: point, dragging, skewing, resizing, flippedX, flippedY } = editBox;
+    if (!point || !editBox.editor.editing || !editBox.canUse)
         return;
     if (point.name === 'circle')
         return;
@@ -12876,13 +12980,15 @@ function updateCursor(editBox, e) {
             point.cursor = 'pointer';
         return;
     }
-    let { rotation, flippedX, flippedY } = editBox;
+    let { rotation } = editBox;
     const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig;
     let showResize = pointType.includes('resize');
     if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
         showResize = false;
     const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew');
-    const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor);
+    const cursor = dragging
+        ? (skewing ? skewCursor : (resizing ? resizeCursor : rotateCursor))
+        : (showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor));
     rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45;
     rotation = Math.round(MathHelper.formatRotation(rotation, true) / 2) * 2;
     const { url, x, y } = cursor;
@@ -12896,7 +13002,8 @@ function updateCursor(editBox, e) {
 }
 function updateMoveCursor(editBox) {
     const { moveCursor, moveable } = editBox.mergeConfig;
-    editBox.rect.cursor = moveable ? moveCursor : undefined;
+    if (editBox.canUse)
+        editBox.rect.cursor = moveable ? moveCursor : undefined;
 }
 function toDataURL(svg, rotation) {
     return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
@@ -12912,8 +13019,8 @@ class EditPoint extends Box {
 const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
 class EditBox extends Group {
     get mergeConfig() {
-        const { config } = this, { mergeConfig } = this.editor;
-        return this.mergedConfig = config ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
+        const { config } = this, { mergeConfig, editBox } = this.editor;
+        return this.mergedConfig = config && (editBox !== this) ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
     }
     get target() { return this._target || this.editor.element; }
     set target(target) { this._target = target; }
@@ -12924,6 +13031,13 @@ class EditBox extends Group {
     get flippedX() { return this.scaleX < 0; }
     get flippedY() { return this.scaleY < 0; }
     get flippedOne() { return this.scaleX * this.scaleY < 0; }
+    get canUse() { return (this.visible && this.view.visible); }
+    get canGesture() {
+        if (!this.canUse)
+            return false;
+        const { moveable, resizeable, rotateable } = this.mergeConfig;
+        return typeof moveable === 'string' || typeof resizeable === 'string' || typeof rotateable === 'string';
+    }
     constructor(editor) {
         super();
         this.view = new Group();
@@ -12970,8 +13084,7 @@ class EditBox extends Group {
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i];
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]));
-            if (!(i % 2))
-                resizeP.rotation = (i / 2) * 90;
+            resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90;
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
@@ -12990,12 +13103,19 @@ class EditBox extends Group {
         this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
         this.updateBounds({ x: 0, y: 0, width, height });
     }
+    unload() {
+        this.visible = false;
+        if (this.app)
+            this.rect.syncEventer = this.app.interaction.bottomList = null;
+    }
     updateBounds(bounds) {
         const { editMask } = this.editor;
         const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, spread } = mergeConfig;
         this.visible = !this.target.locked;
         editMask.visible = mask ? true : 0;
+        if (spread)
+            BoundsHelper.spread(bounds, spread);
         if (this.view.worldOpacity) {
             const { width, height } = bounds;
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
@@ -13020,7 +13140,6 @@ class EditBox extends Group {
                     }
                     else {
                         resizeL.height = height;
-                        resizeP.rotation = 90;
                         if (hideOnSmall && resizeP.width * 2 > height)
                             resizeP.visible = false;
                     }
@@ -13075,9 +13194,6 @@ class EditBox extends Group {
             buttons.y = point.y + margin;
         }
     }
-    unload() {
-        this.visible = false;
-    }
     getPointStyle(userStyle) {
         const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig;
         const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig };
@@ -13091,20 +13207,26 @@ class EditBox extends Group {
         const { middlePoint } = this.mergedConfig;
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
     }
-    onSelect(e) {
-        if (e.oldList.length === 1) {
-            e.oldList[0].syncEventer = null;
-            if (this.app)
-                this.app.interaction.bottomList = null;
-        }
-    }
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, { pointType } = point;
-        const { editor, dragStartData } = this, { target } = this;
+        const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig;
         if (point.name === 'rect') {
-            this.moving = true;
-            editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1;
+            moveable && (this.moving = true);
+            editor.opacity = hideOnMove ? 0 : 1;
+        }
+        else {
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !resizeable) {
+                rotateable && (this.rotating = true);
+                if (pointType === 'resize-rotate')
+                    resizeable && (this.resizing = true);
+                else if (point.name === 'resize-line')
+                    skewable && (this.skewing = true), this.rotating = false;
+            }
+            else if (pointType === 'resize')
+                resizeable && (this.resizing = true);
+            if (pointType === 'skew')
+                skewable && (this.skewing = true);
         }
         dragStartData.x = e.x;
         dragStartData.y = e.y;
@@ -13115,9 +13237,8 @@ class EditBox extends Group {
             ResizeEvent.resizingKeys = editor.leafList.keys;
     }
     onDragEnd(e) {
-        this.dragging = false;
         this.dragPoint = null;
-        this.moving = false;
+        this.resetDoing();
         const { name, pointType } = e.current;
         if (name === 'rect')
             this.editor.opacity = 1;
@@ -13125,31 +13246,61 @@ class EditBox extends Group {
             ResizeEvent.resizingKeys = null;
     }
     onDrag(e) {
-        const { transformTool } = this, point = e.current;
-        if (point.name === 'rect') {
+        const { transformTool, moving, resizing, rotating, skewing } = this;
+        if (moving) {
             transformTool.onMove(e);
             updateMoveCursor(this);
         }
-        else {
-            const { pointType } = this.enterPoint = point;
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !this.mergeConfig.resizeable) {
+        else if (resizing || rotating || skewing) {
+            const point = e.current;
+            if (point.pointType)
+                this.enterPoint = point;
+            if (rotating)
                 transformTool.onRotate(e);
-                if (pointType === 'resize-rotate')
-                    transformTool.onScale(e);
-            }
-            else if (pointType === 'resize')
+            if (resizing)
                 transformTool.onScale(e);
-            if (pointType === 'skew')
+            if (skewing)
                 transformTool.onSkew(e);
-            updateCursor(this, e);
+            updatePointCursor(this, e);
+        }
+    }
+    resetDoing() {
+        if (this.canUse)
+            this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+    }
+    onMove(e) {
+        if (this.canGesture && e.moveType !== 'drag') {
+            e.stop();
+            if (typeof this.mergeConfig.moveable === 'string') {
+                this.gesturing = this.moving = true;
+                this.transformTool.onMove(e);
+            }
+        }
+    }
+    onScale(e) {
+        if (this.canGesture) {
+            e.stop();
+            if (typeof this.mergeConfig.resizeable === 'string') {
+                this.gesturing = this.resizing = true;
+                this.transformTool.onScale(e);
+            }
+        }
+    }
+    onRotate(e) {
+        if (this.canGesture) {
+            e.stop();
+            if (typeof this.mergeConfig.rotateable === 'string') {
+                this.gesturing = this.rotating = true;
+                this.transformTool.onRotate(e);
+            }
         }
     }
     onKey(e) {
-        updateCursor(this, e);
+        updatePointCursor(this, e);
     }
     onArrow(e) {
-        const { editor } = this;
-        if (editor.editing && this.mergeConfig.keyEvent) {
+        const { editor, transformTool } = this;
+        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
             let x = 0, y = 0;
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
@@ -13166,7 +13317,7 @@ class EditBox extends Group {
                     x = distance;
             }
             if (x || y)
-                editor.move(x, y);
+                transformTool.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -13209,12 +13360,12 @@ class EditBox extends Group {
             [PointerEvent.LEAVE, () => { this.enterPoint = null; }],
         ];
         if (point.name !== 'circle')
-            events.push([PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(this, e); }]);
+            events.push([PointerEvent.ENTER, (e) => { this.enterPoint = point, updatePointCursor(this, e); }]);
         this.__eventIds.push(point.on_(events));
     }
     __listenEvents() {
         const { rect, editor, __eventIds: events } = this;
-        events.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
+        events.push(rect.on_([
             [DragEvent.START, this.onDragStart, this],
             [DragEvent.DRAG, this.onDrag, this],
             [DragEvent.END, this.onDragEnd, this],
@@ -13225,7 +13376,13 @@ class EditBox extends Group {
         this.waitLeafer(() => {
             events.push(editor.app.on_([
                 [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
-                [KeyEvent.DOWN, this.onArrow, this]
+                [KeyEvent.DOWN, this.onArrow, this],
+                [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
+                [MoveEvent.END, this.resetDoing, this],
+                [ZoomEvent.END, this.resetDoing, this],
+                [RotateEvent.END, this.resetDoing, this],
             ]));
         });
     }
@@ -13381,7 +13538,8 @@ function onTarget(editor, oldValue) {
         editor.simulateTarget.remove();
         editor.leafList.reset();
     }
-    editor.closeInnerEditor();
+    editor.closeInnerEditor(true);
+    editor.unloadEditTool();
     const data = { editor, value: target, oldValue };
     editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data));
     editor.checkOpenedGroups();
@@ -13601,16 +13759,10 @@ EditorSkewEvent.SKEW = 'editor.skew';
 
 class TransformTool {
     onMove(e) {
-        const { target, mergeConfig, dragStartData } = this.editBox;
+        const { target, dragStartData } = this.editBox;
         if (e instanceof MoveEvent) {
-            if (e.moveType !== 'drag') {
-                const { moveable, resizeable } = mergeConfig;
-                const move = e.getLocalMove(target);
-                if (moveable === 'move')
-                    e.stop(), this.move(move.x, move.y);
-                else if (resizeable === 'zoom')
-                    e.stop();
-            }
+            const move = e.getLocalMove(target);
+            this.move(move.x, move.y);
         }
         else {
             const total = { x: e.totalX, y: e.totalY };
@@ -13625,10 +13777,9 @@ class TransformTool {
     }
     onScale(e) {
         const { target, mergeConfig, single, dragStartData } = this.editBox;
-        let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig;
+        let { around, lockRatio, flipable, editSize } = mergeConfig;
         if (e instanceof ZoomEvent) {
-            if (resizeable === 'zoom')
-                e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
+            this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
         }
         else {
             const { direction } = e.current;
@@ -13646,28 +13797,18 @@ class TransformTool {
     }
     onRotate(e) {
         const { target, mergeConfig, dragStartData } = this.editBox;
-        const { skewable, rotateable, around, rotateGap } = mergeConfig;
-        const { direction, name } = e.current;
-        if (skewable && name === 'resize-line')
-            return this.onSkew(e);
+        const { around, rotateAround, rotateGap } = mergeConfig;
+        const { direction } = e.current;
         let origin, rotation;
         if (e instanceof RotateEvent) {
-            if (rotateable === 'rotate')
-                e.stop(), rotation = e.rotation, origin = target.getBoxPoint(e);
-            else
-                return;
-            if (target.scaleX * target.scaleY < 0)
-                rotation = -rotation;
+            rotation = e.rotation;
+            origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
         }
         else {
-            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'));
-            rotation = data.rotation;
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (rotateAround || target.around || target.origin || around || 'center'));
+            rotation = dragStartData.rotation + data.rotation - target.rotation;
             origin = data.origin;
         }
-        if (target.scaleX * target.scaleY < 0)
-            rotation = -rotation;
-        if (e instanceof DragEvent)
-            rotation = dragStartData.rotation + rotation - target.rotation;
         rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
         if (!rotation)
             return;
@@ -13833,9 +13974,13 @@ let Editor = class Editor extends Group {
     get groupOpening() { return !!this.openedGroupList.length; }
     get multiple() { return this.list.length > 1; }
     get single() { return this.list.length === 1; }
+    get dragPoint() { return this.editBox.dragPoint; }
     get dragging() { return this.editBox.dragging; }
+    get gesturing() { return this.editBox.gesturing; }
     get moving() { return this.editBox.moving; }
-    get dragPoint() { return this.editBox.dragPoint; }
+    get resizing() { return this.editBox.resizing; }
+    get rotating() { return this.editBox.rotating; }
+    get skewing() { return this.editBox.skewing; }
     get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
     get buttons() { return this.editBox.buttons; }
     constructor(userConfig, data) {
@@ -13892,19 +14037,22 @@ let Editor = class Editor extends Group {
         this.update();
     }
     updateEditTool() {
+        this.unloadEditTool();
+        if (this.editing) {
+            const name = this.element.editOuter || 'EditTool';
+            const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+            this.editBox.load();
+            tool.load();
+            this.update();
+        }
+    }
+    unloadEditTool() {
         let tool = this.editTool;
         if (tool) {
             this.editBox.unload();
             tool.unload();
             this.editTool = null;
         }
-        if (this.editing) {
-            const tag = this.element.editOuter || 'EditTool';
-            tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
-            this.editBox.load();
-            tool.load();
-            this.update();
-        }
     }
     getEditSize(_ui) {
         return this.mergeConfig.editSize;
@@ -13978,16 +14126,21 @@ let Editor = class Editor extends Group {
         if (group)
             group.emitEvent(event);
     }
-    openInnerEditor(target, select) {
+    openInnerEditor(target, nameOrSelect, select) {
+        let name;
+        if (typeof nameOrSelect === 'string')
+            name = nameOrSelect;
+        else if (!select)
+            select = nameOrSelect;
         if (target && select)
             this.target = target;
         if (this.single) {
             const editTarget = target || this.element;
-            const tag = editTarget.editInner;
-            if (tag && EditToolCreator.list[tag]) {
+            name || (name = editTarget.editInner);
+            if (name && EditToolCreator.list[name]) {
                 this.editTool.unload();
                 this.innerEditing = true;
-                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
                 this.innerEditor.editTarget = editTarget;
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                 this.innerEditor.load();
@@ -13995,13 +14148,14 @@ let Editor = class Editor extends Group {
             }
         }
     }
-    closeInnerEditor() {
+    closeInnerEditor(onlyInnerEditor) {
         if (this.innerEditing) {
             this.innerEditing = false;
             this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE);
             this.innerEditor.unload();
             this.emitInnerEvent(InnerEditorEvent.CLOSE);
-            this.editTool.load();
+            if (!onlyInnerEditor)
+                this.updateEditTool();
             this.innerEditor = null;
         }
     }
@@ -14044,12 +14198,7 @@ let Editor = class Editor extends Group {
             const { app, leafer, editMask } = this;
             this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.onRenderStart, this),
-                app.on_([
-                    [RenderEvent.CHILD_START, this.onAppRenderStart, this],
-                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                ])
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this)
             ];
             if (editMask.visible)
                 editMask.forceRender();
@@ -14537,7 +14686,7 @@ Creator.editor = function (options, app) {
 };
 Box.addAttr('textBox', false, dataType);
 UI.addAttr('editConfig', undefined, dataType);
-UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType);
+UI.addAttr('editOuter', (ui) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }, dataType);
 UI.addAttr('editInner', 'PathEditor', dataType);
 Group.addAttr('editInner', '', dataType);
 Text.addAttr('editInner', 'TextEditor', dataType);
@@ -15898,9 +16047,8 @@ box.__updateContentBounds = function () {
     }
 };
 box.__updateBoxBounds = function (secondLayout) {
-    const data = this.__;
     if (this.children.length && !this.pathInputed) {
-        const { flow } = data;
+        const data = this.__, { flow } = data;
         if (data.__autoSide) {
             if (data.__hasSurface)
                 this.__extraUpdate();
@@ -16132,6 +16280,11 @@ let Animate = class Animate extends Eventer {
                 this.play();
             }, 0);
     }
+    emitType(type) {
+        this.emit(type, this);
+        if (this.parent)
+            this.parent.onChildEvent(type, this);
+    }
     play() {
         if (this.destroyed)
             return;
@@ -16140,20 +16293,20 @@ let Animate = class Animate extends Eventer {
             this.clearTimer(), this.start();
         else if (!this.timer)
             this.requestAnimate();
-        this.emit(AnimateEvent.PLAY, this);
+        this.emitType(AnimateEvent.PLAY);
     }
     pause() {
         if (this.destroyed)
             return;
         this.running = false;
         this.clearTimer();
-        this.emit(AnimateEvent.PAUSE, this);
+        this.emitType(AnimateEvent.PAUSE);
     }
     stop() {
         if (this.destroyed)
             return;
         this.complete();
-        this.emit(AnimateEvent.STOP, this);
+        this.emitType(AnimateEvent.STOP);
     }
     seek(time) {
         if (this.destroyed)
@@ -16167,7 +16320,7 @@ let Animate = class Animate extends Eventer {
         this.time = time;
         this.animate(0, true);
         this.clearTimer(() => this.requestAnimate());
-        this.emit(AnimateEvent.SEEK, this);
+        this.emitType(AnimateEvent.SEEK);
     }
     kill(complete = true, killStyle) {
         this.killStyle = killStyle;
@@ -16234,7 +16387,7 @@ let Animate = class Animate extends Eventer {
             if (totalTime)
                 this.changeDuration(totalTime);
         }
-        this.emit(AnimateEvent.CREATED, this);
+        this.emitType(AnimateEvent.CREATED);
     }
     changeDuration(duration) {
         const { config } = this;
@@ -16354,7 +16507,7 @@ let Animate = class Animate extends Eventer {
                 key in killStyle || (style[key] = endingStyle[key]);
         this.setStyle(style);
         this.clearTimer();
-        this.emit(AnimateEvent.COMPLETED, this);
+        this.emitType(AnimateEvent.COMPLETED);
     }
     setFrom() {
         this.nowIndex = 0;
@@ -16398,7 +16551,7 @@ let Animate = class Animate extends Eventer {
             Transition.setBetweenStyle(betweenStyle, fromStyle, toStyle, style, t, target, attrsMap);
             this.setStyle(betweenStyle);
         }
-        this.emit(AnimateEvent.UPDATE, this);
+        this.emitType(AnimateEvent.UPDATE);
     }
     setStyle(style) {
         const { target } = this;
@@ -16442,7 +16595,7 @@ let Animate = class Animate extends Eventer {
                 this.stop();
             else
                 this.pause();
-            this.target = this.config = this.frames = this.fromStyle = this.toStyle = this.style = this.killStyle = null;
+            this.target = this.parent = this.config = this.frames = this.fromStyle = this.toStyle = this.style = this.killStyle = null;
             this.destroyed = true;
         }
     }
@@ -16508,6 +16661,7 @@ let AnimateList = class AnimateList extends Animate {
             });
         this.list = animation.map(item => {
             const animate = item.target ? item : new Animate(this.target, item, isTemp);
+            animate.parent = this;
             Object.assign(this.fromStyle, animate.fromStyle);
             Object.assign(this.toStyle, animate.toStyle);
             Object.assign(this._endingStyle, animate.endingStyle);
@@ -16516,20 +16670,34 @@ let AnimateList = class AnimateList extends Animate {
     }
     play() {
         this.each(item => item.play());
+        this.emitType(AnimateEvent.PLAY);
     }
     pause() {
         this.each(item => item.pause());
+        this.emitType(AnimateEvent.PAUSE);
     }
     stop() {
         this.each(item => item.stop());
+        this.emitType(AnimateEvent.STOP);
     }
     seek(time) {
         this.each(item => item.seek(time));
+        this.emitType(AnimateEvent.SEEK);
     }
     kill(complete, killStyle) {
         this.each(item => item.kill(complete, killStyle));
         this.destroy();
     }
+    onChildEvent(type, _animate) {
+        switch (type) {
+            case AnimateEvent.COMPLETED:
+                if (this.completed)
+                    this.emitType(type);
+                break;
+            case AnimateEvent.UPDATE:
+                this.emitType(type);
+        }
+    }
     each(func) {
         this.list.forEach(func);
     }
@@ -17988,123 +18156,131 @@ function getTrimBounds(canvas) {
         index++;
     }
     const bounds = new Bounds();
-    toBounds(pointBounds, bounds);
-    return bounds.scale(1 / canvas.pixelRatio).ceil();
+    if (pointBounds) {
+        toBounds(pointBounds, bounds);
+        bounds.scale(1 / canvas.pixelRatio).ceil();
+    }
+    return bounds;
 }
 
 const ExportModule = {
     syncExport(leaf, filename, options) {
-        this.running = true;
+        Export.running = true;
         let result;
-        const fileType = FileHelper.fileType(filename);
-        const isDownload = filename.includes('.');
-        options = FileHelper.getExportOptions(options);
-        const { toURL } = Platform;
-        const { download } = Platform.origin;
-        if (fileType === 'json') {
-            isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
-            result = { data: isDownload ? true : leaf.toJSON(options.json) };
-        }
-        else if (fileType === 'svg') {
-            isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
-            result = { data: isDownload ? true : leaf.toSVG() };
-        }
-        else {
-            let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
-            const { worldTransform, isLeafer, leafer, isFrame } = leaf;
-            const { slice, clip, trim, screenshot, padding, onCanvas } = options;
-            const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
-            const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
-            const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
-            const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
-            if (screenshot) {
-                renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+        try {
+            const fileType = FileHelper.fileType(filename);
+            const isDownload = filename.includes('.');
+            options = FileHelper.getExportOptions(options);
+            const { toURL } = Platform;
+            const { download } = Platform.origin;
+            if (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                result = { data: isDownload ? true : leaf.toJSON(options.json) };
+            }
+            else if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                result = { data: isDownload ? true : leaf.toSVG() };
             }
             else {
-                let relative = options.relative || (isLeafer ? 'inner' : 'local');
-                scaleX = worldTransform.scaleX;
-                scaleY = worldTransform.scaleY;
-                switch (relative) {
-                    case 'inner':
-                        matrix.set(worldTransform);
-                        break;
-                    case 'local':
-                        matrix.set(worldTransform).divide(leaf.localTransform);
-                        scaleX /= leaf.scaleX;
-                        scaleY /= leaf.scaleY;
-                        break;
-                    case 'world':
-                        scaleX = 1;
-                        scaleY = 1;
-                        break;
-                    case 'page':
-                        relative = leafer || leaf;
-                    default:
-                        matrix.set(worldTransform).divide(leaf.getTransform(relative));
-                        const l = relative.worldTransform;
-                        scaleX /= scaleX / l.scaleX;
-                        scaleY /= scaleY / l.scaleY;
+                let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                const { worldTransform, isLeafer, leafer, isFrame } = leaf;
+                const { slice, clip, trim, screenshot, padding, onCanvas } = options;
+                const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
+                const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
+                const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
+                const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
+                if (screenshot) {
+                    renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
                 }
-                renderBounds = leaf.getBounds('render', relative);
-            }
-            const scaleData = { scaleX: 1, scaleY: 1 };
-            MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
-            let pixelRatio = options.pixelRatio || 1;
-            let { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
-            if (clip)
-                x += clip.x, y += clip.y, width = clip.width, height = clip.height;
-            const renderOptions = { exporting: true, matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
-            let canvas = Creator.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
-            let sliceLeaf;
-            if (slice) {
-                sliceLeaf = leaf;
-                sliceLeaf.__worldOpacity = 0;
-                leaf = leafer || leaf;
-                renderOptions.bounds = canvas.bounds;
-            }
-            canvas.save();
-            if (isFrame && fill !== undefined) {
-                const oldFill = leaf.get('fill');
-                leaf.fill = '';
-                leaf.__render(canvas, renderOptions);
-                leaf.fill = oldFill;
-            }
-            else {
-                leaf.__render(canvas, renderOptions);
-            }
-            canvas.restore();
-            if (sliceLeaf)
-                sliceLeaf.__updateWorldOpacity();
-            if (trim) {
-                trimBounds = getTrimBounds(canvas);
-                const old = canvas, { width, height } = trimBounds;
-                const config = { x: 0, y: 0, width, height, pixelRatio };
-                canvas = Creator.canvas(config);
-                canvas.copyWorld(old, trimBounds, config);
+                else {
+                    let relative = options.relative || (isLeafer ? 'inner' : 'local');
+                    scaleX = worldTransform.scaleX;
+                    scaleY = worldTransform.scaleY;
+                    switch (relative) {
+                        case 'inner':
+                            matrix.set(worldTransform);
+                            break;
+                        case 'local':
+                            matrix.set(worldTransform).divide(leaf.localTransform);
+                            scaleX /= leaf.scaleX;
+                            scaleY /= leaf.scaleY;
+                            break;
+                        case 'world':
+                            scaleX = 1;
+                            scaleY = 1;
+                            break;
+                        case 'page':
+                            relative = leafer || leaf;
+                        default:
+                            matrix.set(worldTransform).divide(leaf.getTransform(relative));
+                            const l = relative.worldTransform;
+                            scaleX /= scaleX / l.scaleX;
+                            scaleY /= scaleY / l.scaleY;
+                    }
+                    renderBounds = leaf.getBounds('render', relative);
+                }
+                const scaleData = { scaleX: 1, scaleY: 1 };
+                MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                let pixelRatio = options.pixelRatio || 1;
+                let { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                if (clip)
+                    x += clip.x, y += clip.y, width = clip.width, height = clip.height;
+                const renderOptions = { exporting: true, matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
+                let canvas = Creator.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
+                let sliceLeaf;
+                if (slice) {
+                    sliceLeaf = leaf;
+                    sliceLeaf.__worldOpacity = 0;
+                    leaf = leafer || leaf;
+                    renderOptions.bounds = canvas.bounds;
+                }
+                canvas.save();
+                if (isFrame && fill !== undefined) {
+                    const oldFill = leaf.get('fill');
+                    leaf.fill = '';
+                    leaf.__render(canvas, renderOptions);
+                    leaf.fill = oldFill;
+                }
+                else {
+                    leaf.__render(canvas, renderOptions);
+                }
+                canvas.restore();
+                if (sliceLeaf)
+                    sliceLeaf.__updateWorldOpacity();
+                if (trim) {
+                    trimBounds = getTrimBounds(canvas);
+                    const old = canvas, { width, height } = trimBounds;
+                    const config = { x: 0, y: 0, width, height, pixelRatio };
+                    canvas = Creator.canvas(config);
+                    canvas.copyWorld(old, trimBounds, config);
+                }
+                if (padding) {
+                    const [top, right, bottom, left] = MathHelper.fourNumber(padding);
+                    const old = canvas, { width, height } = old;
+                    canvas = Creator.canvas({ width: width + left + right, height: height + top + bottom, pixelRatio });
+                    canvas.copyWorld(old, old.bounds, { x: left, y: top, width, height });
+                }
+                if (needFill)
+                    canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
+                if (onCanvas)
+                    onCanvas(canvas);
+                const data = filename === 'canvas' ? canvas : canvas.export(filename, options);
+                result = { data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds };
             }
-            if (padding) {
-                const [top, right, bottom, left] = MathHelper.fourNumber(padding);
-                const old = canvas, { width, height } = old;
-                canvas = Creator.canvas({ width: width + left + right, height: height + top + bottom, pixelRatio });
-                canvas.copyWorld(old, old.bounds, { x: left, y: top, width, height });
-            }
-            if (needFill)
-                canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
-            if (onCanvas)
-                onCanvas(canvas);
-            const data = filename === 'canvas' ? canvas : canvas.export(filename, options);
-            result = { data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds };
         }
-        this.running = false;
+        catch (error) {
+            result = { data: '', error };
+        }
+        Export.running = false;
         return result;
     },
     export(leaf, filename, options) {
-        this.running = true;
+        Export.running = true;
         return addTask((success) => new Promise((resolve) => {
             const getResult = () => __awaiter(this, void 0, void 0, function* () {
                 if (!Resource.isComplete)
                     return Platform.requestRender(getResult);
-                const result = ExportModule.syncExport(leaf, filename, options);
+                const result = Export.syncExport(leaf, filename, options);
                 if (result.data instanceof Promise)
                     result.data = yield result.data;
                 success(result);
@@ -18204,4 +18380,4 @@ Object.assign(Filter, {
     }
 });
 
-export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, 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, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isEmptyData, isNull, layoutProcessor, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix$1 as tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };