@leafer/worker 1.6.7 → 1.8.0

package/dist/worker.js

@@ -46,7 +46,7 @@ var LeaferUI = (function (exports) {
     };
     const I$2 = IncrementId;
 
-    const { round: round$6, pow: pow$2, PI: PI$5 } = Math;
+    const { round: round$6, pow: pow$2, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
             if (typeof min === 'object')
@@ -142,9 +142,9 @@ var LeaferUI = (function (exports) {
     function randInt(num) {
         return Math.round(Math.random() * num);
     }
-    const OneRadian = PI$5 / 180;
-    const PI2 = PI$5 * 2;
-    const PI_2 = PI$5 / 2;
+    const OneRadian = PI$4 / 180;
+    const PI2 = PI$4 * 2;
+    const PI_2 = PI$4 / 2;
     function getPointData() { return { x: 0, y: 0 }; }
     function getBoundsData() { return { x: 0, y: 0, width: 0, height: 0 }; }
     function getMatrixData() { return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }; }
@@ -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, PI: PI$4 } = 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) {
@@ -552,10 +552,11 @@ var LeaferUI = (function (exports) {
         getRadianFrom(fromX, fromY, originX, originY, toX, toY, toOriginX, toOriginY) {
             if (toOriginX === undefined)
                 toOriginX = originX, toOriginY = originY;
-            let fromAngle = atan2$2(fromY - originY, fromX - originX);
-            let toAngle = atan2$2(toY - toOriginY, toX - toOriginX);
-            const radian = toAngle - fromAngle;
-            return radian < -PI$4 ? radian + PI2 : radian;
+            const a = fromX - originX;
+            const b = fromY - originY;
+            const c = toX - toOriginX;
+            const d = toY - toOriginY;
+            return Math.atan2(a * d - b * c, a * c + b * d);
         },
         getAtan2(t, to) {
             return atan2$2(to.y - t.y, to.x - t.x);
@@ -765,7 +766,7 @@ var LeaferUI = (function (exports) {
             MatrixHelper.reset(this);
         }
     }
-    const tempMatrix = new Matrix();
+    const tempMatrix$1 = new Matrix();
 
     const TwoPointBoundsHelper = {
         tempPointBounds: {},
@@ -862,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) {
@@ -1790,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 = [];
@@ -2069,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; }
@@ -2142,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;
@@ -2164,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;
@@ -2411,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;
@@ -2486,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) {
@@ -2528,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);
@@ -2973,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) {
@@ -3036,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);
         },
@@ -3342,7 +3365,7 @@ var LeaferUI = (function (exports) {
     const { arcTo } = PathCommandDataHelper;
     const PathCorner = {
         smooth(data, cornerRadius, _cornerSmoothing) {
-            let command, commandLen;
+            let command, lastCommand, commandLen;
             let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
             const len = data.length;
             const smooth = [];
@@ -3380,8 +3403,10 @@ var LeaferUI = (function (exports) {
                         lastY = y;
                         break;
                     case Z$3:
-                        arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
-                        smooth.push(Z$3);
+                        if (lastCommand !== Z$3) {
+                            arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
+                            smooth.push(Z$3);
+                        }
                         i += 1;
                         break;
                     default:
@@ -3390,6 +3415,7 @@ var LeaferUI = (function (exports) {
                             smooth.push(data[i + j]);
                         i += commandLen;
                 }
+                lastCommand = command;
             }
             if (command !== Z$3) {
                 smooth[1] = startX;
@@ -3886,12 +3912,12 @@ var LeaferUI = (function (exports) {
             try {
                 if (transform && pattern.setTransform) {
                     pattern.setTransform(transform);
-                    transform = null;
+                    transform = undefined;
                 }
             }
             catch (_a) { }
             if (paint)
-                paint.transform = transform;
+                DataHelper.stintSet(paint, 'transform', transform);
             return pattern;
         }
         destroy() {
@@ -3909,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);
     }
@@ -3996,10 +4029,14 @@ var LeaferUI = (function (exports) {
         }));
     }
     const pathType = boundsType;
-    function affectStrokeBoundsType(defaultValue) {
+    function affectStrokeBoundsType(defaultValue, useStroke) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
-                this.__setAttr(key, value) && doStrokeType(this);
+                if (this.__setAttr(key, value)) {
+                    doStrokeType(this);
+                    if (useStroke)
+                        this.__.__useStroke = true;
+                }
             }
         }));
     }
@@ -4137,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]; };
         }
@@ -4260,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) {
@@ -4332,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));
@@ -4391,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) {
@@ -5260,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;
                     }
@@ -5425,6 +5463,8 @@ var LeaferUI = (function (exports) {
 
     const LeafRender = {
         __render(canvas, options) {
+            if (options.shape)
+                return this.__renderShape(canvas, options);
             if (this.__worldOpacity) {
                 const data = this.__;
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
@@ -5434,12 +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 {
@@ -5449,6 +5484,12 @@ var LeaferUI = (function (exports) {
                     Debug.drawBounds(this, canvas, options);
             }
         },
+        __renderShape(canvas, options) {
+            if (this.__worldOpacity) {
+                canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
+                this.__drawShape(canvas, options);
+            }
+        },
         __clip(canvas, options) {
             if (this.__worldOpacity) {
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
@@ -5481,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);
@@ -5503,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);
                 }
             }
         },
@@ -5513,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;
@@ -5704,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;
@@ -5713,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');
         }
@@ -5868,7 +5922,8 @@ var LeaferUI = (function (exports) {
         __drawFast(_canvas, _options) { }
         __draw(_canvas, _options, _originCanvas) { }
         __clip(_canvas, _options) { }
-        __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
+        __renderShape(_canvas, _options) { }
+        __drawShape(_canvas, _options) { }
         __updateWorldOpacity() { }
         __updateChange() { }
         __drawPath(_canvas) { }
@@ -6236,7 +6291,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.6.7";
+    const version = "1.8.0";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -7084,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)
@@ -7141,26 +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 __hasStroke() { return this.stroke && this.strokeWidth; }
-        get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
-        get __hasMultiPaint() {
-            const t = this;
-            if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
-                return true;
-            return t.fill && this.__hasStroke;
-        }
+        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; }
@@ -7242,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;
@@ -7266,6 +7324,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 stintSet$2(this, '__isAlphaPixelStroke', undefined);
+                stintSet$2(this, '__hasMultiStrokeStyle', undefined);
                 this._stroke = this.__isStrokes = undefined;
             }
         }
@@ -7287,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 {
@@ -7408,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) {
@@ -7428,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));
@@ -7450,15 +7511,18 @@ var LeaferUI = (function (exports) {
     const UIRender = {
         __updateChange() {
             const data = this.__;
+            if (data.__useStroke) {
+                const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
+                stintSet$1(this.__world, 'half', useStroke && data.strokeAlign === 'center' && data.strokeWidth % 2);
+                stintSet$1(data, '__fillAfterStroke', useStroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
+            }
             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);
             }
-            stintSet$1(this.__world, 'half', data.__hasHalf);
-            stintSet$1(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
             data.__checkSingle();
-            stintSet$1(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+            stintSet$1(data, '__complex', (data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect));
         },
         __drawFast(canvas, options) {
             drawFast(this, canvas, options);
@@ -7516,18 +7580,15 @@ var LeaferUI = (function (exports) {
                     this.__drawFast(canvas, options);
             }
         },
-        __renderShape(canvas, options, ignoreFill, ignoreStroke) {
-            if (this.__worldOpacity) {
-                canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
-                const { fill, stroke } = this.__;
-                this.__drawRenderPath(canvas);
-                if (fill && !ignoreFill)
-                    this.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-                if (this.__.__isCanvas)
-                    this.__drawAfterFill(canvas, options);
-                if (stroke && !ignoreStroke)
-                    this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
-            }
+        __drawShape(canvas, options) {
+            this.__drawRenderPath(canvas);
+            const data = this.__, { fill, stroke } = data;
+            if (fill && !options.ignoreFill)
+                data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+            if (data.__isCanvas)
+                this.__drawAfterFill(canvas, options);
+            if (stroke && !options.ignoreStroke)
+                data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
         },
         __drawAfterFill(canvas, options) {
             if (this.__.__clipAfterFill) {
@@ -7564,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);
@@ -7585,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;
                 }
             }
@@ -7598,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 || []);
@@ -7652,12 +7715,14 @@ var LeaferUI = (function (exports) {
             }
         }
         __updateRenderPath() {
-            if (this.__.path) {
-                const data = this.__;
+            const data = this.__;
+            if (data.path) {
                 data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
                 if (data.__useArrow)
                     PathArrow.addArrows(this, !data.cornerRadius);
             }
+            else
+                data.__pathForRender && (data.__pathForRender = undefined);
         }
         __drawRenderPath(canvas) {
             canvas.beginPath();
@@ -7810,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);
@@ -7868,13 +7936,13 @@ var LeaferUI = (function (exports) {
         surfaceType()
     ], exports.UI.prototype, "fill", void 0);
     __decorate([
-        strokeType()
+        strokeType(undefined, true)
     ], exports.UI.prototype, "stroke", void 0);
     __decorate([
         strokeType('inside')
     ], exports.UI.prototype, "strokeAlign", void 0);
     __decorate([
-        strokeType(1)
+        strokeType(1, true)
     ], exports.UI.prototype, "strokeWidth", void 0);
     __decorate([
         strokeType(false)
@@ -7966,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; }
@@ -8301,7 +8370,7 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             this.requestRender();
         }
-        zoom(_zoomType, _padding, _fixedScale, _transition) {
+        zoom(_zoomType, _optionsOrPadding, _scroll, _transition) {
             return Plugin.need('view');
         }
         getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
@@ -8346,7 +8415,7 @@ var LeaferUI = (function (exports) {
                     Leafer_1.list.remove(this);
                     try {
                         this.stop();
-                        this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
+                        this.emitLeafer(LeaferEvent.END);
                         this.__removeListenEvents();
                         this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
                         this.__controllers.length = 0;
@@ -8413,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();
@@ -8441,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();
@@ -8471,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.__.__hasStroke) {
+            if (this.__.__useStroke || this.__.__useEffect) {
                 canvas.setWorld(this.__nowWorld);
                 this.__drawRenderPath(canvas);
             }
@@ -8694,8 +8771,8 @@ var LeaferUI = (function (exports) {
                 for (let i = 1; i < sides; i++) {
                     lineTo$1(path, rx + rx * sin$2((i * 2 * PI$2) / sides), ry - ry * cos$2((i * 2 * PI$2) / sides));
                 }
+                closePath$1(path);
             }
-            closePath$1(path);
         }
         __updateRenderPath() { }
         __updateBoxBounds() { }
@@ -8933,6 +9010,11 @@ var LeaferUI = (function (exports) {
                 return;
             super.__draw(canvas, options, originCanvas);
         }
+        __drawShape(canvas, options) {
+            if (options.shape)
+                this.__box && this.__box.__drawShape(canvas, options);
+            super.__drawShape(canvas, options);
+        }
         destroy() {
             if (this.boxStyle)
                 this.boxStyle = null;
@@ -9754,6 +9836,7 @@ var LeaferUI = (function (exports) {
             delta: { x: 80 / 4, y: 8.0 },
         },
         pointer: {
+            type: 'pointer',
             snap: true,
             hitRadius: 5,
             tapTime: 120,
@@ -10271,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;
@@ -10297,7 +10382,7 @@ var LeaferUI = (function (exports) {
             h.resize({ width, height, pixelRatio: 1 });
             h.clear();
             ImageManager.patternLocked = true;
-            this.__renderShape(h, { matrix: matrix$2.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+            this.__renderShape(h, { matrix: matrix$2.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y), ignoreFill: !isHitPixelFill, ignoreStroke: !isHitPixelStroke });
             ImageManager.patternLocked = false;
             h.resetTransform();
             data.__isHitPixel = true;
@@ -10318,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;
@@ -10327,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;
@@ -10436,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);
@@ -10474,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);
@@ -10484,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;
@@ -10508,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();
@@ -10554,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);
     }
@@ -10577,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);
         }
     }
@@ -10632,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) {
@@ -10650,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) {
@@ -10681,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;
         }
@@ -10700,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 } = 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);
@@ -10710,13 +10825,19 @@ 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) {
+    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
         const transform = get$3();
-        translate$1(transform, box.x + x, box.y + y);
-        if (scaleX)
-            scaleHelper(transform, scaleX, scaleY);
         if (rotation)
             rotate$2(transform, rotation);
+        if (skew)
+            skewHelper(transform, skew.x, skew.y);
+        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) {
@@ -10753,11 +10874,15 @@ var LeaferUI = (function (exports) {
     const tempScaleData = {};
     const tempImage = {};
     function createData(leafPaint, image, paint, box) {
-        const { changeful, sync } = 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) {
@@ -10766,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, 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;
@@ -10800,8 +10925,8 @@ var LeaferUI = (function (exports) {
                 break;
             case 'normal':
             case 'clip':
-                if (tempImage.x || tempImage.y || scaleX || rotation)
-                    clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+                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)
@@ -10878,11 +11003,11 @@ var LeaferUI = (function (exports) {
                     }
                     onLoadSuccess(ui, event);
                 }
-                leafPaint.loadId = null;
+                leafPaint.loadId = undefined;
             }, (error) => {
                 ignoreRender(ui, false);
                 onLoadError(ui, event, error);
-                leafPaint.loadId = null;
+                leafPaint.loadId = undefined;
             });
             if (ui.placeholderColor) {
                 if (!ui.placeholderDelay)
@@ -10938,16 +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$3(sx);
+                sy = abs$3(sy);
                 imageMatrix = get$1();
                 copy$4(imageMatrix, transform);
                 scale$2(imageMatrix, 1 / sx, 1 / sy);
@@ -11000,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;
@@ -11015,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;
@@ -11026,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;
             }
@@ -11214,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);
         });
@@ -11276,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);
         });
@@ -11335,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);
     };
@@ -11941,41 +12062,10 @@ var LeaferUI = (function (exports) {
     }
     EditorEvent.BEFORE_SELECT = 'editor.before_select';
     EditorEvent.SELECT = 'editor.select';
+    EditorEvent.AFTER_SELECT = 'editor.after_select';
     EditorEvent.BEFORE_HOVER = 'editor.before_hover';
     EditorEvent.HOVER = 'editor.hover';
 
-    class EditorMoveEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
-    EditorMoveEvent.MOVE = 'editor.move';
-
-    class EditorScaleEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
-    EditorScaleEvent.SCALE = 'editor.scale';
-
-    class EditorRotateEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
-    EditorRotateEvent.ROTATE = 'editor.rotate';
-
-    class EditorSkewEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
-    EditorSkewEvent.SKEW = 'editor.skew';
-
     function targetAttr(fn) {
         return (target, key) => {
             const privateKey = '_' + key;
@@ -11989,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 });
@@ -12012,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);
@@ -12046,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;
             }
@@ -12196,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;
@@ -12386,16 +12482,16 @@ var LeaferUI = (function (exports) {
     const { toPoint } = AroundHelper;
     const { within: within$2 } = MathHelper;
     const EditDataHelper = {
-        getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
+        getScaleData(target, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = element;
+            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target;
             const { width, height } = startBounds;
             if (around) {
                 totalMove.x *= 2;
                 totalMove.y *= 2;
             }
-            const originChangedScaleX = element.scaleX / startBounds.scaleX;
-            const originChangedScaleY = element.scaleY / startBounds.scaleY;
+            const originChangedScaleX = target.scaleX / startBounds.scaleX;
+            const originChangedScaleY = target.scaleY / startBounds.scaleY;
             const signX = originChangedScaleX < 0 ? -1 : 1;
             const signY = originChangedScaleY < 0 ? -1 : 1;
             const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
@@ -12471,7 +12567,7 @@ var LeaferUI = (function (exports) {
             if (useScaleY)
                 scaleY /= changedScaleY;
             if (!flipable) {
-                const { worldTransform } = element;
+                const { worldTransform } = target;
                 if (scaleX < 0)
                     scaleX = 1 / boxBounds.width / worldTransform.scaleX;
                 if (scaleY < 0)
@@ -12479,24 +12575,26 @@ var LeaferUI = (function (exports) {
             }
             toPoint(around || align, boxBounds, origin, true);
             if (dragBounds) {
-                const allowBounds = dragBounds === 'parent' ? element.parent.boxBounds : dragBounds;
-                const localBounds = new Bounds(element.__localBoxBounds);
-                localBounds.scaleOf(element.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 allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds;
+                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) {
-                const nowWidth = boxBounds.width * element.scaleX;
+                const nowWidth = boxBounds.width * target.scaleX;
                 scaleX = within$2(nowWidth * scaleX, widthRange) / nowWidth;
             }
             if (useScaleY && heightRange) {
-                const nowHeight = boxBounds.height * element.scaleY;
+                const nowHeight = boxBounds.height * target.scaleY;
                 scaleY = within$2(nowHeight * scaleY, heightRange) / nowHeight;
             }
             if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
@@ -12507,7 +12605,7 @@ var LeaferUI = (function (exports) {
                 scaleY = scaleX = Math.min(scaleX, scaleY);
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
-        getRotateData(bounds, direction, current, last, around) {
+        getRotateData(target, direction, current, last, around) {
             let align, origin = {};
             switch (direction) {
                 case topLeft$1:
@@ -12525,8 +12623,8 @@ var LeaferUI = (function (exports) {
                 default:
                     align = 'center';
             }
-            toPoint(around || align, bounds, origin, true);
-            return { origin, rotation: PointHelper.getRotation(last, origin, current) };
+            toPoint(around || align, target.boxBounds, origin, true);
+            return { origin, rotation: PointHelper.getRotation(last, target.getWorldPointByBox(origin), current) };
         },
         getSkewData(bounds, direction, move, around) {
             let align, origin = {}, skewX = 0, skewY = 0;
@@ -12623,9 +12721,9 @@ var LeaferUI = (function (exports) {
     };
 
     const cacheCursors = {};
-    function updateCursor(editor, e) {
-        const { editBox } = editor, point = editBox.enterPoint;
-        if (!point || !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;
@@ -12635,13 +12733,14 @@ var LeaferUI = (function (exports) {
             return;
         }
         let { rotation } = editBox;
-        const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
-        const { pointType } = point, { flippedX, flippedY } = 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;
@@ -12653,9 +12752,10 @@ var LeaferUI = (function (exports) {
             cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y };
         }
     }
-    function updateMoveCursor(editor) {
-        const { moveCursor, moveable } = editor.mergeConfig;
-        editor.editBox.rect.cursor = moveable ? moveCursor : undefined;
+    function updateMoveCursor(editBox) {
+        const { moveCursor, moveable } = editBox.mergeConfig;
+        if (editBox.canUse)
+            editBox.rect.cursor = moveable ? moveCursor : undefined;
     }
     function toDataURL(svg, rotation) {
         return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
@@ -12670,10 +12770,26 @@ var LeaferUI = (function (exports) {
 
     const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
     class EditBox extends exports.Group {
+        get 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; }
+        get single() { return !!this._target || this.editor.single; }
+        get transformTool() { return this._transformTool || this.editor; }
+        set transformTool(tool) { this._transformTool = tool; }
         get flipped() { return this.flippedX || this.flippedY; }
         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();
@@ -12712,8 +12828,7 @@ var LeaferUI = (function (exports) {
             this.add(view);
         }
         load() {
-            const { mergeConfig, element, single } = this.editor;
-            const { rect, circle, resizePoints } = this;
+            const { target, mergeConfig, single, rect, circle, resizePoints } = this;
             const { stroke, strokeWidth } = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
@@ -12721,24 +12836,38 @@ 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 || {})));
-            rect.hittable = !single;
-            rect.syncEventer = single && this.editor;
-            if (single) {
-                element.syncEventer = rect;
-                this.app.interaction.bottomList = [{ target: rect, proxy: element }];
-            }
-        }
-        update(bounds) {
-            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
-            const { mergeConfig, element, multiple, editMask } = editor;
-            const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
-            this.visible = !element.locked;
+            const syncEventer = single && this.transformTool.editTool;
+            rect.hittable = !syncEventer;
+            rect.syncEventer = syncEventer && this.editor;
+            if (syncEventer) {
+                target.syncEventer = rect;
+                this.app.interaction.bottomList = [{ target: rect, proxy: target }];
+            }
+            updateMoveCursor(this);
+        }
+        update() {
+            const { editor } = this;
+            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true);
+            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, 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;
@@ -12763,7 +12892,6 @@ var LeaferUI = (function (exports) {
                         }
                         else {
                             resizeL.height = height;
-                            resizeP.rotation = 90;
                             if (hideOnSmall && resizeP.width * 2 > height)
                                 resizeP.visible = false;
                         }
@@ -12771,25 +12899,25 @@ var LeaferUI = (function (exports) {
                 }
                 circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
                 if (circle.visible)
-                    this.layoutCircle(mergeConfig);
+                    this.layoutCircle();
                 if (rect.path)
                     rect.path = null;
-                rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
+                rect.set(Object.assign(Object.assign({}, bounds), { visible: single ? editBox : true }));
                 buttons.visible = showPoints && buttons.children.length > 0 || 0;
                 if (buttons.visible)
-                    this.layoutButtons(mergeConfig);
+                    this.layoutButtons();
             }
             else
                 rect.set(bounds);
         }
-        layoutCircle(config) {
-            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
+        layoutCircle() {
+            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = this.mergedConfig;
             const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
             this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
         }
-        layoutButtons(config) {
+        layoutButtons() {
             const { buttons } = this;
-            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config;
+            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.mergedConfig;
             const { flippedX, flippedY } = this;
             let index = fourDirection.indexOf(buttonsDirection);
             if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -12818,49 +12946,51 @@ var LeaferUI = (function (exports) {
                 buttons.y = point.y + margin;
             }
         }
-        unload() {
-            this.visible = false;
-        }
         getPointStyle(userStyle) {
-            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
+            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 };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
-            const { point } = this.editor.mergeConfig;
+            const { point } = this.mergedConfig;
             return point instanceof Array ? point : [point];
         }
         getMiddlePointsStyle() {
-            const { middlePoint } = this.editor.mergeConfig;
+            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, { element } = editor;
+            const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig;
             if (point.name === 'rect') {
-                this.moving = true;
-                editor.opacity = editor.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;
-            dragStartData.point = { x: element.x, y: element.y };
-            dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
-            dragStartData.rotation = element.rotation;
+            dragStartData.point = { x: target.x, y: target.y };
+            dragStartData.bounds = Object.assign({}, target.getLayoutBounds('box', 'local'));
+            dragStartData.rotation = target.rotation;
             if (pointType && pointType.includes('resize'))
                 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;
@@ -12868,22 +12998,61 @@ var LeaferUI = (function (exports) {
                 ResizeEvent.resizingKeys = null;
         }
         onDrag(e) {
-            const { editor } = this;
-            const { pointType } = this.enterPoint = e.current;
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
-                editor.onRotate(e);
-                if (pointType === 'resize-rotate')
-                    editor.onScale(e);
-            }
-            else if (pointType === 'resize')
-                editor.onScale(e);
-            if (pointType === 'skew')
-                editor.onSkew(e);
-            updateCursor(editor, e);
+            const { transformTool, moving, resizing, rotating, skewing } = this;
+            if (moving) {
+                transformTool.onMove(e);
+                updateMoveCursor(this);
+            }
+            else if (resizing || rotating || skewing) {
+                const point = e.current;
+                if (point.pointType)
+                    this.enterPoint = point;
+                if (rotating)
+                    transformTool.onRotate(e);
+                if (resizing)
+                    transformTool.onScale(e);
+                if (skewing)
+                    transformTool.onSkew(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) {
+            updatePointCursor(this, e);
         }
         onArrow(e) {
-            const { editor } = this;
-            if (editor.editing && editor.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) {
@@ -12900,31 +13069,32 @@ var LeaferUI = (function (exports) {
                         x = distance;
                 }
                 if (x || y)
-                    editor.move(x, y);
+                    transformTool.move(x, y);
             }
         }
         onDoubleTap(e) {
-            if (this.editor.mergeConfig.openInner === 'double')
+            const { openInner, preventEditInner } = this.mergeConfig;
+            if (openInner === 'double' && !preventEditInner)
                 this.openInner(e);
         }
         onLongPress(e) {
-            if (this.editor.mergeConfig.openInner === 'long')
+            const { openInner, preventEditInner } = this.mergeConfig;
+            if (openInner === 'long' && preventEditInner)
                 this.openInner(e);
         }
         openInner(e) {
-            const { editor } = this;
-            if (editor.single) {
-                const { element } = editor;
-                if (element.locked)
+            const { editor, target } = this;
+            if (this.single) {
+                if (target.locked)
                     return;
-                if (element.isBranch && !element.editInner) {
-                    if (element.textBox) {
-                        const { children } = element;
+                if (target.isBranch && !target.editInner) {
+                    if (target.textBox) {
+                        const { children } = target;
                         const find = children.find(item => item.editable && item instanceof exports.Text) || children.find(item => item instanceof exports.Text);
                         if (find)
                             return editor.openInnerEditor(find);
                     }
-                    editor.openGroup(element);
+                    editor.openGroup(target);
                     editor.target = editor.selector.findDeepOne(e);
                 }
                 else {
@@ -12933,7 +13103,6 @@ var LeaferUI = (function (exports) {
             }
         }
         listenPointEvents(point, type, direction) {
-            const { editor } = this;
             point.direction = direction;
             point.pointType = type;
             const events = [
@@ -12943,19 +13112,31 @@ var LeaferUI = (function (exports) {
                 [exports.PointerEvent.LEAVE, () => { this.enterPoint = null; }],
             ];
             if (point.name !== 'circle')
-                events.push([exports.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(editor, e); }]);
+                events.push([exports.PointerEvent.ENTER, (e) => { this.enterPoint = point, updatePointCursor(this, e); }]);
             this.__eventIds.push(point.on_(events));
         }
         __listenEvents() {
-            const { rect, editor } = this;
-            this.__eventIds.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
+            const { rect, editor, __eventIds: events } = this;
+            events.push(rect.on_([
                 [exports.DragEvent.START, this.onDragStart, this],
-                [exports.DragEvent.DRAG, editor.onMove, editor],
+                [exports.DragEvent.DRAG, this.onDrag, this],
                 [exports.DragEvent.END, this.onDragEnd, this],
-                [exports.PointerEvent.ENTER, () => updateMoveCursor(editor)],
+                [exports.PointerEvent.ENTER, () => updateMoveCursor(this)],
                 [exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
                 [exports.PointerEvent.LONG_PRESS, this.onLongPress, this]
             ]));
+            this.waitLeafer(() => {
+                events.push(editor.app.on_([
+                    [[exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, 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],
+                ]));
+            });
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
@@ -12986,11 +13167,12 @@ var LeaferUI = (function (exports) {
                 if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
                     return;
                 canvas.saveBlendMode('destination-out');
+                options = Object.assign(Object.assign({}, options), { shape: true });
                 editor.list.forEach(item => {
-                    item.__renderShape(canvas, options);
-                    const { __box, parent } = item;
-                    if ((item = __box) || ((item = parent) && parent.textBox))
-                        item.__renderShape(canvas, options);
+                    item.__render(canvas, options);
+                    const { parent } = item;
+                    if (parent && parent.textBox)
+                        parent.__renderShape(canvas, options);
                 });
                 canvas.restoreBlendMode();
             }
@@ -13085,7 +13267,7 @@ ${filterStyle$1}
     const bounds$1 = new Bounds();
     function simulate(editor) {
         const { simulateTarget, list } = editor;
-        const { zoomLayer } = list[0].leafer.zoomLayer;
+        const { zoomLayer } = list[0].leafer;
         simulateTarget.safeChange(() => {
             bounds$1.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page'));
             if (bounds$1.width === 0)
@@ -13107,15 +13289,15 @@ ${filterStyle$1}
         else {
             editor.simulateTarget.remove();
             editor.leafList.reset();
-            editor.closeInnerEditor();
         }
-        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
+        editor.closeInnerEditor(true);
+        editor.unloadEditTool();
+        const data = { editor, value: target, oldValue };
+        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data));
         editor.checkOpenedGroups();
         if (editor.editing) {
             editor.waitLeafer(() => {
-                updateMoveCursor(editor);
                 editor.updateEditTool();
-                editor.update();
                 editor.listenTargetEvents();
             });
         }
@@ -13123,6 +13305,7 @@ ${filterStyle$1}
             editor.updateEditTool();
             editor.removeTargetEvents();
         }
+        editor.emitEvent(new EditorEvent(EditorEvent.AFTER_SELECT, data));
     }
     function onHover(editor, oldValue) {
         editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
@@ -13294,98 +13477,44 @@ ${filterStyle$1}
         }
     }
 
-    class Editor extends exports.Group {
-        get list() { return this.leafList.list; }
-        get dragHoverExclude() { return [this.editBox.rect]; }
-        get editing() { return !!this.list.length; }
-        get groupOpening() { return !!this.openedGroupList.length; }
-        get multiple() { return this.list.length > 1; }
-        get single() { return this.list.length === 1; }
-        get dragging() { return this.editBox.dragging; }
-        get moving() { return this.editBox.moving; }
-        get dragPoint() { return this.editBox.dragPoint; }
-        get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
-        get buttons() { return this.editBox.buttons; }
-        constructor(userConfig, data) {
-            super(data);
-            this.leafList = new LeafList();
-            this.openedGroupList = new LeafList();
-            this.simulateTarget = new SimulateElement(this);
-            this.editBox = new EditBox(this);
-            this.editToolList = {};
-            this.selector = new EditSelect(this);
-            this.editMask = new EditMask(this);
-            this.targetEventIds = [];
-            let mergedConfig = DataHelper.clone(config);
-            if (userConfig)
-                mergedConfig = DataHelper.default(userConfig, mergedConfig);
-            this.mergedConfig = this.config = mergedConfig;
-            this.addMany(this.editMask, this.selector, this.editBox);
-            if (!Plugin.has('resize'))
-                this.config.editSize = 'scale';
-        }
-        select(target) {
-            this.target = target;
-        }
-        cancel() {
-            this.target = null;
-        }
-        hasItem(item) {
-            return this.leafList.has(item);
-        }
-        addItem(item) {
-            if (!this.hasItem(item) && !item.locked)
-                this.leafList.add(item), this.target = this.leafList.list;
-        }
-        removeItem(item) {
-            if (this.hasItem(item))
-                this.leafList.remove(item), this.target = this.leafList.list;
-        }
-        shiftItem(item) {
-            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
-        }
-        update() {
-            if (this.editing) {
-                if (!this.element.parent)
-                    return this.cancel();
-                if (this.innerEditing)
-                    this.innerEditor.update();
-                this.editTool.update();
-                this.selector.update();
-            }
+    class EditorMoveEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        updateEditBox() {
-            if (this.multiple)
-                simulate(this);
-            this.update();
+    }
+    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
+    EditorMoveEvent.MOVE = 'editor.move';
+
+    class EditorScaleEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        updateEditTool() {
-            const tool = this.editTool;
-            if (tool) {
-                this.editBox.unload();
-                tool.unload();
-                this.editTool = null;
-            }
-            if (this.editing) {
-                const tag = this.single ? this.list[0].editOuter : 'EditTool';
-                this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
-                this.editBox.load();
-                this.editTool.load();
-            }
+    }
+    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
+    EditorScaleEvent.SCALE = 'editor.scale';
+
+    class EditorRotateEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        getEditSize(_ui) {
-            return this.mergeConfig.editSize;
+    }
+    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
+    EditorRotateEvent.ROTATE = 'editor.rotate';
+
+    class EditorSkewEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
+    }
+    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
+    EditorSkewEvent.SKEW = 'editor.skew';
+
+    class TransformTool {
         onMove(e) {
+            const { target, dragStartData } = this.editBox;
             if (e instanceof exports.MoveEvent) {
-                if (e.moveType !== 'drag') {
-                    const { moveable, resizeable } = this.mergeConfig;
-                    const move = e.getLocalMove(this.element);
-                    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 };
@@ -13395,22 +13524,21 @@ ${filterStyle$1}
                     else
                         total.x = 0;
                 }
-                this.move(exports.DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total));
+                this.move(exports.DragEvent.getValidMove(target, dragStartData.point, total));
             }
         }
         onScale(e) {
-            const { element } = this;
-            let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
+            const { target, mergeConfig, single, dragStartData } = this.editBox;
+            let { around, lockRatio, flipable, editSize } = mergeConfig;
             if (e instanceof exports.ZoomEvent) {
-                if (resizeable === 'zoom')
-                    e.stop(), this.scaleOf(element.getBoxPoint(e), e.scale, e.scale);
+                this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
             }
             else {
                 const { direction } = e.current;
-                if (e.shiftKey || element.lockRatio)
+                if (e.shiftKey || target.lockRatio)
                     lockRatio = true;
-                const data = EditDataHelper.getScaleData(element, this.editBox.dragStartData.bounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
-                if (this.editTool.onScaleWithDrag) {
+                const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === 'scale');
+                if (this.editTool && this.editTool.onScaleWithDrag) {
                     data.drag = e;
                     this.scaleWithDrag(data);
                 }
@@ -13420,38 +13548,28 @@ ${filterStyle$1}
             }
         }
         onRotate(e) {
-            const { skewable, rotateable, around, rotateGap } = this.mergeConfig;
-            const { direction, name } = e.current;
-            if (skewable && name === 'resize-line')
-                return this.onSkew(e);
-            const { element } = this, { dragStartData } = this.editBox;
+            const { target, mergeConfig, dragStartData } = this.editBox;
+            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 = element.getBoxPoint(e);
-                else
-                    return;
-                if (element.scaleX * element.scaleY < 0)
-                    rotation = -rotation;
+                rotation = e.rotation;
+                origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
             }
             else {
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.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 (element.scaleX * element.scaleY < 0)
-                rotation = -rotation;
-            if (e instanceof exports.DragEvent)
-                rotation = dragStartData.rotation + rotation - element.rotation;
-            rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2);
+            rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
             if (!rotation)
                 return;
             this.rotateOf(origin, rotation);
         }
         onSkew(e) {
-            const { element } = this;
-            const { around } = this.mergeConfig;
-            const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, e.current.direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey));
+            const { target, mergeConfig } = this.editBox;
+            const { around } = mergeConfig;
+            const { origin, skewX, skewY } = EditDataHelper.getSkewData(target.boxBounds, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
             if (!skewX && !skewY)
                 return;
             this.skewOf(origin, skewX, skewY);
@@ -13461,7 +13579,8 @@ ${filterStyle$1}
                 return;
             if (typeof x === 'object')
                 y = x.y, x = x.x;
-            const { element: target } = this, { beforeMove } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeMove } = mergeConfig;
             if (beforeMove) {
                 const check = beforeMove({ target, x, y });
                 if (typeof check === 'object')
@@ -13470,25 +13589,26 @@ ${filterStyle$1}
                     return;
             }
             const world = target.getWorldPointByLocal({ x, y }, null, true);
-            if (this.multiple)
+            if (!single)
                 target.safeChange(() => target.move(x, y));
-            const data = { target, editor: this, moveX: world.x, moveY: world.y };
+            const data = { target, editor, moveX: world.x, moveY: world.y };
             this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
-            this.editTool.onMove(event);
+            this.doMove(event);
             this.emitEvent(event);
         }
         scaleWithDrag(data) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            const { target, mergeConfig, editor } = this.editBox;
+            const { beforeScale } = mergeConfig;
             if (beforeScale) {
                 const { origin, scaleX, scaleY, drag } = data;
                 const check = beforeScale({ target, drag, origin, scaleX, scaleY });
                 if (check === false)
                     return;
             }
-            data = Object.assign(Object.assign({}, data), { target, editor: this, worldOrigin: target.getWorldPoint(data.origin) });
+            data = Object.assign(Object.assign({}, data), { target, editor, worldOrigin: target.getWorldPoint(data.origin) });
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
@@ -13497,7 +13617,8 @@ ${filterStyle$1}
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeScale } = mergeConfig;
             if (beforeScale) {
                 const check = beforeScale({ target, origin, scaleX, scaleY });
                 if (typeof check === 'object')
@@ -13506,29 +13627,30 @@ ${filterStyle$1}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
-            const data = { target, editor: this, worldOrigin, scaleX, scaleY, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
+            const data = { target, editor, worldOrigin, scaleX, scaleY, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
-            this.editTool.onScale(event);
+            this.doScale(event);
             this.emitEvent(event);
         }
         flip(axis) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element } = this;
+            const { target, single, editor } = this.editBox;
             const worldOrigin = this.getWorldOrigin('center');
-            const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis));
-            const data = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
+            const transform = !single ? this.getChangedTransform(() => target.safeChange(() => target.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(target, axis));
+            const data = { target, editor, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
-            this.editTool.onScale(event);
+            this.doScale(event);
             this.emitEvent(event);
         }
         rotateOf(origin, rotation) {
             if (!this.checkTransform('rotateable'))
                 return;
-            const { element: target } = this, { beforeRotate } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeRotate } = mergeConfig;
             if (beforeRotate) {
                 const check = beforeRotate({ target, origin, rotation });
                 if (typeof check === 'number')
@@ -13537,17 +13659,18 @@ ${filterStyle$1}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
-            const data = { target, editor: this, worldOrigin, rotation, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
+            const data = { target, editor, worldOrigin, rotation, transform };
             this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
-            this.editTool.onRotate(event);
+            this.doRotate(event);
             this.emitEvent(event);
         }
         skewOf(origin, skewX, skewY = 0, _resize) {
             if (!this.checkTransform('skewable'))
                 return;
-            const { element: target } = this, { beforeSkew } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeSkew } = mergeConfig;
             if (beforeSkew) {
                 const check = beforeSkew({ target, origin, skewX, skewY });
                 if (typeof check === 'object')
@@ -13556,25 +13679,149 @@ ${filterStyle$1}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
-            const data = { target, editor: this, worldOrigin, skewX, skewY, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
+            const data = { target, editor, worldOrigin, skewX, skewY, transform };
             this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
             const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
-            this.editTool.onSkew(event);
+            this.doSkew(event);
             this.emitEvent(event);
         }
-        checkTransform(type) { return this.element && !this.element.locked && this.mergeConfig[type]; }
+        doMove(event) {
+            this.editTool.onMove(event);
+        }
+        doScale(event) {
+            this.editTool.onScale(event);
+        }
+        doRotate(event) {
+            this.editTool.onRotate(event);
+        }
+        doSkew(event) {
+            this.editTool.onSkew(event);
+        }
+        checkTransform(type) {
+            const { target, mergeConfig } = this.editBox;
+            return target && !target.locked && mergeConfig[type];
+        }
         getWorldOrigin(origin) {
-            return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin));
+            const { target } = this.editBox;
+            return target.getWorldPoint(LeafHelper.getInnerOrigin(target, origin));
         }
         getChangedTransform(func) {
-            const { element } = this;
-            if (this.multiple && !element.canChange)
-                return element.changedTransform;
-            const oldMatrix = new Matrix(element.worldTransform);
+            const { target, single } = this.editBox;
+            if (!single && !target.canChange)
+                return target.changedTransform;
+            const oldMatrix = new Matrix(target.worldTransform);
             func();
-            return new Matrix(element.worldTransform).divide(oldMatrix);
+            return new Matrix(target.worldTransform).divide(oldMatrix);
+        }
+        emitEvent(event, capture) {
+            this.editBox.editor.emitEvent(event, capture);
+        }
+    }
+
+    exports.Editor = class Editor extends exports.Group {
+        get list() { return this.leafList.list; }
+        get dragHoverExclude() { return [this.editBox.rect]; }
+        get editing() { return !!this.list.length; }
+        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 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) {
+            super(data);
+            this.leafList = new LeafList();
+            this.openedGroupList = new LeafList();
+            this.simulateTarget = new SimulateElement(this);
+            this.editBox = new EditBox(this);
+            this.editToolList = {};
+            this.selector = new EditSelect(this);
+            this.editMask = new EditMask(this);
+            this.targetEventIds = [];
+            let mergedConfig = DataHelper.clone(config);
+            if (userConfig)
+                mergedConfig = DataHelper.default(userConfig, mergedConfig);
+            this.mergedConfig = this.config = mergedConfig;
+            this.addMany(this.editMask, this.selector, this.editBox);
+            if (!Plugin.has('resize'))
+                this.config.editSize = 'scale';
         }
+        select(target) {
+            this.target = target;
+        }
+        cancel() {
+            this.target = null;
+        }
+        hasItem(item) {
+            return this.leafList.has(item);
+        }
+        addItem(item) {
+            if (!this.hasItem(item) && !item.locked)
+                this.leafList.add(item), this.target = this.leafList.list;
+        }
+        removeItem(item) {
+            if (this.hasItem(item))
+                this.leafList.remove(item), this.target = this.leafList.list;
+        }
+        shiftItem(item) {
+            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
+        }
+        update() {
+            if (this.editing) {
+                if (!this.element.parent)
+                    return this.cancel();
+                if (this.innerEditing)
+                    this.innerEditor.update();
+                this.editTool.update();
+                this.selector.update();
+            }
+        }
+        updateEditBox() {
+            if (this.multiple)
+                simulate(this);
+            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;
+            }
+        }
+        getEditSize(_ui) {
+            return this.mergeConfig.editSize;
+        }
+        onMove(_e) { }
+        onScale(_e) { }
+        onRotate(_e) { }
+        onSkew(_e) { }
+        move(_x, _y = 0) { }
+        scaleWithDrag(_data) { }
+        scaleOf(_origin, scaleX, _scaleY = scaleX, _resize) { }
+        flip(_axis) { }
+        rotateOf(_origin, _rotation) { }
+        skewOf(_origin, _skewX, _skewY = 0, _resize) { }
+        checkTransform(_type) { return undefined; }
+        getWorldOrigin(_origin) { return undefined; }
+        getChangedTransform(_func) { return undefined; }
         group(userGroup) {
             if (this.multiple) {
                 this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP);
@@ -13631,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();
@@ -13648,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;
             }
         }
@@ -13692,22 +13945,12 @@ ${filterStyle$1}
             if (this.targetChanged)
                 this.update();
         }
-        onKey(e) {
-            updateCursor(this, e);
-        }
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
-                const { app, leafer, editBox, editMask } = this;
+                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],
-                        [[exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, this],
-                        [exports.KeyEvent.DOWN, editBox.onArrow, editBox]
-                    ])
+                    app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this)
                 ];
                 if (editMask.visible)
                     editMask.forceRender();
@@ -13731,24 +13974,29 @@ ${filterStyle$1}
                 super.destroy();
             }
         }
-    }
+    };
     __decorate([
         mergeConfigAttr()
-    ], Editor.prototype, "mergeConfig", void 0);
+    ], exports.Editor.prototype, "mergeConfig", void 0);
     __decorate([
         targetAttr(onHover)
-    ], Editor.prototype, "hoverTarget", void 0);
+    ], exports.Editor.prototype, "hoverTarget", void 0);
     __decorate([
         targetAttr(onTarget)
-    ], Editor.prototype, "target", void 0);
+    ], exports.Editor.prototype, "target", void 0);
+    exports.Editor = __decorate([
+        useModule(TransformTool, ['editBox', 'editTool', 'emitEvent'])
+    ], exports.Editor);
 
     class InnerEditor {
         static registerInnerEditor() {
             EditToolCreator.register(this);
         }
         get tag() { return 'InnerEditor'; }
+        get mode() { return 'focus'; }
         get editBox() { return this.editor.editBox; }
         constructor(editor) {
+            this.eventIds = [];
             this.editor = editor;
             this.create();
         }
@@ -13761,7 +14009,7 @@ ${filterStyle$1}
         load() {
             const { editor } = this;
             if (editor) {
-                if (editor.app)
+                if (editor.app && this.mode === 'focus')
                     editor.selector.hittable = editor.app.tree.hitChildren = false;
                 this.onLoad();
             }
@@ -13772,7 +14020,7 @@ ${filterStyle$1}
         unload() {
             const { editor } = this;
             if (editor) {
-                if (editor.app)
+                if (editor.app && this.mode === 'focus')
                     editor.selector.hittable = editor.app.tree.hitChildren = true;
                 this.onUnload();
             }
@@ -13846,10 +14094,7 @@ ${filterStyle$1}
             this.onLoad();
         }
         update() {
-            const { editor, editBox } = this;
-            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = editor.element.getLayoutBounds('box', editor, true);
-            editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
-            editBox.update({ x: 0, y: 0, width, height });
+            this.editBox.update();
             this.onUpdate();
         }
         unload() {
@@ -14186,14 +14431,14 @@ ${filterStyle$1}
 
     Plugin.add('editor', 'resize');
     Creator.editor = function (options, app) {
-        const editor = new Editor(options);
+        const editor = new exports.Editor(options);
         if (app)
             app.sky.add(app.editor = editor);
         return editor;
     };
     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);
@@ -14318,10 +14563,12 @@ ${filterStyle$1}
             ];
             this.onFocus = this.onFocus.bind(this);
             this.onInput = this.onInput.bind(this);
+            this.onPaste = this.onPaste.bind(this);
             this.onUpdate = this.onUpdate.bind(this);
             this.onKeydown = this.onKeydown.bind(this);
             div.addEventListener("focus", this.onFocus);
             div.addEventListener("input", this.onInput);
+            div.addEventListener("paste", this.onPaste);
             window.addEventListener('keydown', this.onKeydown);
             window.addEventListener('scroll', this.onUpdate);
             const selection = window.getSelection();
@@ -14351,15 +14598,43 @@ ${filterStyle$1}
             if (e.key === 'Enter') {
                 e.preventDefault();
                 const br = document.createElement('br');
+                const zwsp = document.createTextNode('\u200B');
                 const selection = window.getSelection();
                 const range = selection.getRangeAt(0);
                 range.deleteContents();
+                range.insertNode(zwsp);
                 range.insertNode(br);
                 range.setStartAfter(br);
                 range.setEndAfter(br);
                 this.onInput();
             }
         }
+        onPaste(event) {
+            if (this.isHTMLText)
+                return;
+            event.preventDefault();
+            const clipboardData = event.clipboardData;
+            if (!clipboardData)
+                return;
+            let text = clipboardData.getData('text/plain').replace(/\r\n?/g, '\n');
+            const selection = window.getSelection();
+            if (!selection || !selection.rangeCount)
+                return;
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            const lines = text.split('\n');
+            const fragment = document.createDocumentFragment();
+            lines.forEach((line, index) => {
+                if (index > 0)
+                    fragment.appendChild(document.createElement('br'));
+                fragment.appendChild(document.createTextNode(line));
+            });
+            range.insertNode(fragment);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            this.onInput();
+        }
         onUpdate() {
             const { editTarget: text } = this;
             let textScale = 1;
@@ -14418,6 +14693,7 @@ ${filterStyle$1}
                 editor.off_(this.eventIds);
                 dom.removeEventListener("focus", this.onFocus);
                 dom.removeEventListener("input", this.onInput);
+                dom.removeEventListener("paste", this.onPaste);
                 window.removeEventListener('keydown', this.onKeydown);
                 window.removeEventListener('scroll', this.onUpdate);
                 dom.remove();
@@ -14820,8 +15096,16 @@ ${filterStyle$1}
     }
 
     Plugin.add('view');
-    exports.Leafer.prototype.zoom = function (zoomType, padding, fixed, transition) {
+    exports.Leafer.prototype.zoom = function (zoomType, optionsOrPadding, scroll, transition) {
         this.killAnimate();
+        let padding;
+        if (typeof optionsOrPadding === 'object' && !(optionsOrPadding instanceof Array)) {
+            padding = optionsOrPadding.padding;
+            scroll = optionsOrPadding.scroll;
+            transition = optionsOrPadding.transition;
+        }
+        else
+            padding = optionsOrPadding;
         const { zoomLayer } = this;
         const limitBounds = this.canvas.bounds.clone().shrink(padding !== undefined ? padding : 30), bounds = new Bounds();
         const center = { x: limitBounds.x + limitBounds.width / 2, y: limitBounds.y + limitBounds.height / 2 };
@@ -14868,7 +15152,7 @@ ${filterStyle$1}
             }
             const { width, height } = bounds;
             let moveX = limitBounds.x - bounds.x, moveY = limitBounds.y - bounds.y;
-            if (fixed) {
+            if (scroll) {
                 moveX += Math.max((limitBounds.width - width) / 2, 0);
                 moveY += Math.max((limitBounds.height - height) / 2, 0);
             }
@@ -14881,6 +15165,10 @@ ${filterStyle$1}
                 data.scaleX *= changeScale;
                 data.scaleY *= changeScale;
             }
+            if (scroll === 'x')
+                moveY = 0;
+            else if (scroll === 'y')
+                moveX = 0;
             PointHelper.move(data, moveX, moveY);
             bounds.move(moveX, moveY);
             zoomLayer.set(data, transition);
@@ -15046,6 +15334,11 @@ ${filterStyle$1}
             }
             super.__updateBoxBounds();
         }
+        __draw(canvas, options, originCanvas) {
+            if (this.textEditing && !options.exporting)
+                return;
+            super.__draw(canvas, options, originCanvas);
+        }
     };
     __decorate([
         dataProcessor(HTMLTextData)
@@ -15056,6 +15349,9 @@ ${filterStyle$1}
     __decorate([
         dataType('TextEditor')
     ], exports.HTMLText.prototype, "editInner", void 0);
+    __decorate([
+        surfaceType(false)
+    ], exports.HTMLText.prototype, "textEditing", void 0);
     exports.HTMLText = __decorate([
         registerUI()
     ], exports.HTMLText);
@@ -15834,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();
@@ -16068,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;
@@ -16076,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)
@@ -16103,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;
@@ -16170,7 +16470,7 @@ ${filterStyle$1}
                 if (totalTime)
                     this.changeDuration(totalTime);
             }
-            this.emit(AnimateEvent.CREATED, this);
+            this.emitType(AnimateEvent.CREATED);
         }
         changeDuration(duration) {
             const { config } = this;
@@ -16290,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;
@@ -16334,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;
@@ -16378,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;
             }
         }
@@ -16444,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);
@@ -16452,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);
         }
@@ -17924,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);
@@ -18168,7 +18491,6 @@ ${filterStyle$1}
     exports.EditSelect = EditSelect;
     exports.EditSelectHelper = EditSelectHelper;
     exports.EditToolCreator = EditToolCreator;
-    exports.Editor = Editor;
     exports.EditorEvent = EditorEvent;
     exports.EditorGroupEvent = EditorGroupEvent;
     exports.EditorHelper = EditorHelper;
@@ -18279,6 +18601,7 @@ ${filterStyle$1}
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert;
     exports.TextData = TextData;
+    exports.TransformTool = TransformTool;
     exports.Transformer = Transformer;
     exports.Transition = Transition;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;
@@ -18302,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;
@@ -18350,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;