@leafer/worker 1.7.0 → 1.8.0

package/dist/worker.js

@@ -439,7 +439,7 @@ var LeaferUI = (function (exports) {
     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: {},
@@ -534,8 +534,8 @@ var LeaferUI = (function (exports) {
             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) {
@@ -766,7 +766,7 @@ var LeaferUI = (function (exports) {
             MatrixHelper.reset(this);
         }
     }
-    const tempMatrix = new Matrix();
+    const tempMatrix$1 = new Matrix();
 
     const TwoPointBoundsHelper = {
         tempPointBounds: {},
@@ -863,6 +863,12 @@ var LeaferUI = (function (exports) {
             }
             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) {
@@ -1791,10 +1797,13 @@ var LeaferUI = (function (exports) {
         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 = [];
@@ -2070,15 +2079,15 @@ var LeaferUI = (function (exports) {
         contextMethod()
     ], Canvas.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 {
         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; }
@@ -2143,7 +2152,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -2165,20 +2174,33 @@ var LeaferUI = (function (exports) {
             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;
@@ -2412,7 +2434,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    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;
@@ -2487,7 +2509,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -2529,7 +2551,7 @@ var LeaferUI = (function (exports) {
                 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);
@@ -2974,7 +2996,7 @@ var LeaferUI = (function (exports) {
 
     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) {
@@ -3037,7 +3059,7 @@ var LeaferUI = (function (exports) {
         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);
         },
@@ -3913,6 +3935,13 @@ var LeaferUI = (function (exports) {
     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);
     }
@@ -4145,15 +4174,7 @@ var LeaferUI = (function (exports) {
         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]; };
         }
@@ -4268,7 +4289,7 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    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) {
@@ -4340,6 +4361,14 @@ var LeaferUI = (function (exports) {
             }
             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));
@@ -4399,14 +4428,14 @@ var LeaferUI = (function (exports) {
         },
         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) {
@@ -5268,17 +5297,18 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    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;
                     }
@@ -5444,10 +5474,7 @@ var LeaferUI = (function (exports) {
                         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 {
@@ -5495,7 +5522,7 @@ var LeaferUI = (function (exports) {
                     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);
@@ -5517,9 +5544,7 @@ var LeaferUI = (function (exports) {
             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);
                 }
             }
         },
@@ -5527,16 +5552,15 @@ var LeaferUI = (function (exports) {
             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;
@@ -5718,7 +5742,7 @@ var LeaferUI = (function (exports) {
                 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;
@@ -5727,6 +5751,22 @@ var LeaferUI = (function (exports) {
                 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');
         }
@@ -6251,7 +6291,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.7.0";
+    const version = "1.8.0";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -7099,6 +7139,11 @@ var LeaferUI = (function (exports) {
             });
         };
     }
+    function createAttr(defaultValue) {
+        return (target, key) => {
+            defineKey(target, key, createDescriptor(key, defaultValue));
+        };
+    }
 
     function hasTransparent$3(color) {
         if (!color || color.length === 7 || color.length === 4)
@@ -7156,22 +7201,9 @@ var LeaferUI = (function (exports) {
     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; }
@@ -7253,6 +7285,21 @@ var LeaferUI = (function (exports) {
                 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;
@@ -7277,6 +7324,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 stintSet$2(this, '__isAlphaPixelStroke', undefined);
+                stintSet$2(this, '__hasMultiStrokeStyle', undefined);
                 this._stroke = this.__isStrokes = undefined;
             }
         }
@@ -7298,8 +7346,8 @@ var LeaferUI = (function (exports) {
 
     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 {
@@ -7419,7 +7467,7 @@ var LeaferUI = (function (exports) {
     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) {
@@ -7439,13 +7487,15 @@ var LeaferUI = (function (exports) {
         },
         __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));
@@ -7468,7 +7518,7 @@ var LeaferUI = (function (exports) {
             }
             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();
@@ -7575,17 +7625,17 @@ var LeaferUI = (function (exports) {
             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);
@@ -7596,7 +7646,7 @@ var LeaferUI = (function (exports) {
                             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;
                 }
             }
@@ -7609,6 +7659,8 @@ var LeaferUI = (function (exports) {
         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 || []);
@@ -7823,6 +7875,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         naturalBoundsType(1)
     ], exports.UI.prototype, "pixelRatio", void 0);
+    __decorate([
+        affectRenderBoundsType(0)
+    ], exports.UI.prototype, "renderSpread", void 0);
     __decorate([
         pathInputType()
     ], exports.UI.prototype, "path", void 0);
@@ -7979,7 +8034,8 @@ var LeaferUI = (function (exports) {
         }
         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; }
@@ -8426,8 +8482,8 @@ var LeaferUI = (function (exports) {
         __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();
@@ -8454,20 +8510,26 @@ var LeaferUI = (function (exports) {
         __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();
@@ -8484,10 +8546,12 @@ var LeaferUI = (function (exports) {
                 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);
             }
@@ -10290,18 +10354,20 @@ var LeaferUI = (function (exports) {
         }
         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 = exports.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;
@@ -10337,7 +10403,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -10346,16 +10412,16 @@ var LeaferUI = (function (exports) {
         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;
@@ -10455,9 +10521,14 @@ var LeaferUI = (function (exports) {
                 }
             }
             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);
@@ -10493,8 +10564,13 @@ var LeaferUI = (function (exports) {
     }
     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);
@@ -10503,15 +10579,9 @@ var LeaferUI = (function (exports) {
         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;
@@ -10527,14 +10597,21 @@ var LeaferUI = (function (exports) {
             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();
@@ -10573,8 +10650,13 @@ var LeaferUI = (function (exports) {
     }
     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);
     }
@@ -10596,7 +10678,7 @@ var LeaferUI = (function (exports) {
             drawCenter(stroke, 2, ui, out);
             out.clipUI(data);
             out.clearWorld(renderBounds);
-            copyWorld(canvas, out, ui);
+            LeafHelper.copyCanvasByWorld(ui, canvas, out);
             out.recycle(ui.__nowWorld);
         }
     }
@@ -10651,8 +10733,16 @@ var LeaferUI = (function (exports) {
         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) {
@@ -10669,6 +10759,7 @@ var LeaferUI = (function (exports) {
         else {
             stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
             stintSet(data, '__isTransparentStroke', isTransparent);
+            stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
         }
     }
     function getLeafPaint(attrName, paint, ui) {
@@ -10700,6 +10791,11 @@ var LeaferUI = (function (exports) {
         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;
         }
@@ -10719,8 +10815,8 @@ var LeaferUI = (function (exports) {
         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);
@@ -10729,7 +10825,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -10738,6 +10834,10 @@ var LeaferUI = (function (exports) {
         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) {
@@ -10774,13 +10874,15 @@ var LeaferUI = (function (exports) {
     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) {
@@ -10789,7 +10891,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -10823,8 +10925,8 @@ var LeaferUI = (function (exports) {
                 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)
@@ -10961,18 +11063,16 @@ var LeaferUI = (function (exports) {
     }
 
     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);
@@ -11025,9 +11125,8 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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;
@@ -11040,8 +11139,8 @@ var LeaferUI = (function (exports) {
                 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;
@@ -11051,6 +11150,10 @@ var LeaferUI = (function (exports) {
                 }
             }
             if (allowDraw) {
+                if (ui.__.__isFastShadow) {
+                    canvas.fillStyle = paint.style || '#000';
+                    canvas.fill();
+                }
                 drawImage(ui, canvas, paint, data);
                 return true;
             }
@@ -11239,10 +11342,7 @@ var LeaferUI = (function (exports) {
                 }
                 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);
         });
@@ -11301,10 +11401,7 @@ var LeaferUI = (function (exports) {
                 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);
         });
@@ -11360,12 +11457,11 @@ var LeaferUI = (function (exports) {
                         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);
     };
@@ -11983,6 +12079,8 @@ var LeaferUI = (function (exports) {
                             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 });
@@ -12006,9 +12104,11 @@ var LeaferUI = (function (exports) {
         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);
@@ -12040,14 +12140,17 @@ var LeaferUI = (function (exports) {
             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;
             }
@@ -12190,15 +12293,14 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -12474,15 +12576,17 @@ var LeaferUI = (function (exports) {
             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) {
@@ -12617,9 +12721,9 @@ var LeaferUI = (function (exports) {
     };
 
     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;
@@ -12628,13 +12732,15 @@ var LeaferUI = (function (exports) {
                 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;
@@ -12648,7 +12754,8 @@ var LeaferUI = (function (exports) {
     }
     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())) + '"';
@@ -12664,8 +12771,8 @@ var LeaferUI = (function (exports) {
     const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
     class EditBox extends exports.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; }
@@ -12676,6 +12783,13 @@ var LeaferUI = (function (exports) {
         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 exports.Group();
@@ -12722,8 +12836,7 @@ var LeaferUI = (function (exports) {
             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 || {})));
@@ -12742,12 +12855,19 @@ var LeaferUI = (function (exports) {
             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;
@@ -12772,7 +12892,6 @@ var LeaferUI = (function (exports) {
                         }
                         else {
                             resizeL.height = height;
-                            resizeP.rotation = 90;
                             if (hideOnSmall && resizeP.width * 2 > height)
                                 resizeP.visible = false;
                         }
@@ -12827,9 +12946,6 @@ var LeaferUI = (function (exports) {
                 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 };
@@ -12843,20 +12959,26 @@ var LeaferUI = (function (exports) {
             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;
@@ -12867,9 +12989,8 @@ var LeaferUI = (function (exports) {
                 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;
@@ -12877,31 +12998,61 @@ var LeaferUI = (function (exports) {
                 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) {
@@ -12918,7 +13069,7 @@ var LeaferUI = (function (exports) {
                         x = distance;
                 }
                 if (x || y)
-                    editor.move(x, y);
+                    transformTool.move(x, y);
             }
         }
         onDoubleTap(e) {
@@ -12961,12 +13112,12 @@ var LeaferUI = (function (exports) {
                 [exports.PointerEvent.LEAVE, () => { this.enterPoint = null; }],
             ];
             if (point.name !== 'circle')
-                events.push([exports.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(this, e); }]);
+                events.push([exports.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_([
                 [exports.DragEvent.START, this.onDragStart, this],
                 [exports.DragEvent.DRAG, this.onDrag, this],
                 [exports.DragEvent.END, this.onDragEnd, this],
@@ -12977,7 +13128,13 @@ var LeaferUI = (function (exports) {
             this.waitLeafer(() => {
                 events.push(editor.app.on_([
                     [[exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, this],
-                    [exports.KeyEvent.DOWN, this.onArrow, this]
+                    [exports.KeyEvent.DOWN, this.onArrow, this],
+                    [exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                    [exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                    [exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
+                    [exports.MoveEvent.END, this.resetDoing, this],
+                    [exports.ZoomEvent.END, this.resetDoing, this],
+                    [exports.RotateEvent.END, this.resetDoing, this],
                 ]));
             });
         }
@@ -13133,7 +13290,8 @@ ${filterStyle$1}
             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();
@@ -13353,16 +13511,10 @@ ${filterStyle$1}
 
     class TransformTool {
         onMove(e) {
-            const { target, mergeConfig, dragStartData } = this.editBox;
+            const { target, dragStartData } = this.editBox;
             if (e instanceof exports.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 };
@@ -13377,10 +13529,9 @@ ${filterStyle$1}
         }
         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 exports.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;
@@ -13398,28 +13549,18 @@ ${filterStyle$1}
         }
         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 exports.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 exports.DragEvent)
-                rotation = dragStartData.rotation + rotation - target.rotation;
             rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
             if (!rotation)
                 return;
@@ -13585,9 +13726,13 @@ ${filterStyle$1}
         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) {
@@ -13644,19 +13789,22 @@ ${filterStyle$1}
             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;
@@ -13730,16 +13878,21 @@ ${filterStyle$1}
             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();
@@ -13747,13 +13900,14 @@ ${filterStyle$1}
                 }
             }
         }
-        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;
             }
         }
@@ -13796,12 +13950,7 @@ ${filterStyle$1}
                 const { app, leafer, editMask } = this;
                 this.targetEventIds = [
                     leafer.on_(RenderEvent.START, this.onRenderStart, this),
-                    app.on_([
-                        [RenderEvent.CHILD_START, this.onAppRenderStart, this],
-                        [exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                        [exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                        [exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                    ])
+                    app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this)
                 ];
                 if (editMask.visible)
                     editMask.forceRender();
@@ -14289,7 +14438,7 @@ ${filterStyle$1}
     };
     exports.Box.addAttr('textBox', false, dataType);
     exports.UI.addAttr('editConfig', undefined, dataType);
-    exports.UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType);
+    exports.UI.addAttr('editOuter', (ui) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }, dataType);
     exports.UI.addAttr('editInner', 'PathEditor', dataType);
     exports.Group.addAttr('editInner', '', dataType);
     exports.Text.addAttr('editInner', 'TextEditor', dataType);
@@ -15981,9 +16130,8 @@ ${filterStyle$1}
         }
     };
     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();
@@ -16215,6 +16363,11 @@ ${filterStyle$1}
                     this.play();
                 }, 0);
         }
+        emitType(type) {
+            this.emit(type, this);
+            if (this.parent)
+                this.parent.onChildEvent(type, this);
+        }
         play() {
             if (this.destroyed)
                 return;
@@ -16223,20 +16376,20 @@ ${filterStyle$1}
                 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)
@@ -16250,7 +16403,7 @@ ${filterStyle$1}
             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;
@@ -16317,7 +16470,7 @@ ${filterStyle$1}
                 if (totalTime)
                     this.changeDuration(totalTime);
             }
-            this.emit(AnimateEvent.CREATED, this);
+            this.emitType(AnimateEvent.CREATED);
         }
         changeDuration(duration) {
             const { config } = this;
@@ -16437,7 +16590,7 @@ ${filterStyle$1}
                     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;
@@ -16481,7 +16634,7 @@ ${filterStyle$1}
                 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;
@@ -16525,7 +16678,7 @@ ${filterStyle$1}
                     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;
             }
         }
@@ -16591,6 +16744,7 @@ ${filterStyle$1}
                 });
             this.list = animation.map(item => {
                 const animate = item.target ? item : new exports.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);
@@ -16599,20 +16753,34 @@ ${filterStyle$1}
         }
         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);
         }
@@ -18071,123 +18239,131 @@ ${filterStyle$1}
             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);
@@ -18449,6 +18625,8 @@ ${filterStyle$1}
     exports.boundsType = boundsType;
     exports.canvasPatch = canvasPatch;
     exports.canvasSizeAttrs = canvasSizeAttrs;
+    exports.createAttr = createAttr;
+    exports.createDescriptor = createDescriptor;
     exports.cursorType = cursorType;
     exports.dataProcessor = dataProcessor;
     exports.dataType = dataType;
@@ -18497,7 +18675,7 @@ ${filterStyle$1}
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
     exports.tempBounds = tempBounds$1;
-    exports.tempMatrix = tempMatrix;
+    exports.tempMatrix = tempMatrix$1;
     exports.tempPoint = tempPoint$3;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;