npm - @leafer-editor/worker - Versions diffs - 1.0.4 → 1.0.6 - Mend

@leafer-editor/worker 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/worker.js CHANGED Viewed

@@ -555,6 +555,12 @@ var LeaferUI = (function (exports) {
             to.y = t.y + sin$4(r) * distance;
             return to;
         },
+        toNumberPoints(originPoints) {
+            let points = originPoints;
+            if (typeof originPoints[0] === 'object')
+                points = [], originPoints.forEach(p => points.push(p.x, p.y));
+            return points;
+        },
         reset(t) {
             P$7.reset(t);
         }
@@ -1545,7 +1551,10 @@ var LeaferUI = (function (exports) {
     class LeafData {
         get __useNaturalRatio() { return true; }
-        get __isLinePath() { return this.path && this.path.length === 6; }
+        get __isLinePath() {
+            const { path } = this;
+            return path && path.length === 6 && path[0] === 1;
+        }
         get __blendMode() {
             if (this.eraser && this.eraser !== 'path')
                 return 'destination-out';
@@ -2308,11 +2317,12 @@ var LeaferUI = (function (exports) {
     const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$4, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$4, addPoint: addPoint$2 } = TwoPointBoundsHelper;
-    const { set } = PointHelper;
+    const { set, toNumberPoints: toNumberPoints$1 } = PointHelper;
     const { M: M$8, L: L$9, C: C$8, Q: Q$7, Z: Z$7 } = PathCommandMap;
     const tempPoint$2 = {};
     const BezierHelper = {
-        points(data, points, curve, close) {
+        points(data, originPoints, curve, close) {
+            let points = toNumberPoints$1(originPoints);
             data.push(M$8, points[0], points[1]);
             if (curve && points.length > 5) {
                 let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
@@ -2821,6 +2831,27 @@ var LeaferUI = (function (exports) {
             }
             return data;
         },
+        objectToCanvasData(list) {
+            const data = [];
+            list.forEach(item => {
+                switch (item.name) {
+                    case 'M':
+                        data.push(M$7, item.x, item.y);
+                        break;
+                    case 'L':
+                        data.push(L$8, item.x, item.y);
+                        break;
+                    case 'C':
+                        data.push(C$7, item.x1, item.y1, item.x2, item.y2, item.x, item.y);
+                        break;
+                    case 'Q':
+                        data.push(Q$6, item.x1, item.y1, item.x, item.y);
+                        break;
+                    case 'Z': data.push(Z$6);
+                }
+            });
+            return data;
+        },
         copyData(data, old, index, count) {
             for (let i = index, end = index + count; i < end; i++) {
                 data.push(old[i]);
@@ -4059,7 +4090,7 @@ var LeaferUI = (function (exports) {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
             if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
                 waitAutoLayout = true;
-            updateMatrix$2(leaf, checkAutoLayout, waitAutoLayout);
+            updateMatrix$3(leaf, checkAutoLayout, waitAutoLayout);
             if (leaf.isBranch) {
                 const { children } = leaf;
                 for (let i = 0, len = children.length; i < len; i++) {
@@ -4229,7 +4260,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const L$3 = LeafHelper;
-    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L$3;
+    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$3, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L$3;
     function moveByMatrix(t, matrix) {
         const { e, f } = t.__localMatrix;
         t.x += matrix.e - e;
@@ -4758,6 +4789,7 @@ var LeaferUI = (function (exports) {
         }
     }
     RenderEvent.REQUEST = 'render.request';
+    RenderEvent.CHILD_START = 'render.child_start';
     RenderEvent.START = 'render.start';
     RenderEvent.BEFORE = 'render.before';
     RenderEvent.RENDER = 'render';
@@ -4933,7 +4965,7 @@ var LeaferUI = (function (exports) {
     const debug$8 = Debug.get('setAttr');
     const LeafDataProxy = {
         __setAttr(name, newValue, checkFiniteNumber) {
-            if (this.leafer && this.leafer.created) {
+            if (this.leaferIsCreated) {
                 const oldValue = this.__.__getInput(name);
                 if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
                     debug$8.warn(this.innerName, name, newValue);
@@ -5003,9 +5035,9 @@ var LeaferUI = (function (exports) {
         }
     };
-    const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
+    const { updateMatrix: updateMatrix$2, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
     const { updateBounds: updateBounds$1 } = BranchHelper;
-    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$8 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$8 } = BoundsHelper;
     const { toBounds: toBounds$2 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
@@ -5088,7 +5120,7 @@ var LeaferUI = (function (exports) {
             const b = this.__layout.boxBounds;
             const data = this.__;
             if (data.__pathInputed) {
-                toBounds$2(data.__pathForRender, b);
+                toBounds$2(data.path, b);
             }
             else {
                 b.x = 0;
@@ -5100,7 +5132,7 @@ var LeaferUI = (function (exports) {
         __updateAutoLayout() {
             this.__layout.matrixChanged = true;
             if (this.isBranch) {
-                if (this.leafer && this.leafer.ready)
+                if (this.leaferIsReady)
                     this.leafer.layouter.addExtra(this);
                 if (this.__.flow) {
                     if (this.__layout.boxChanged)
@@ -5116,7 +5148,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             else {
-                updateMatrix$1(this);
+                updateMatrix$2(this);
             }
         },
         __updateNaturalSize() {
@@ -5126,11 +5158,11 @@ var LeaferUI = (function (exports) {
         },
         __updateStrokeBounds() {
             const layout = this.__layout;
-            copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+            copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
         },
         __updateRenderBounds() {
             const layout = this.__layout;
-            layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$8(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$8(layout.renderBounds, layout.strokeBounds);
         }
     };
@@ -5161,7 +5193,7 @@ var LeaferUI = (function (exports) {
             if (this.__worldOpacity) {
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 this.__drawRenderPath(canvas);
-                this.__.windingRule ? canvas.clip(this.__.windingRule) : canvas.clip();
+                this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
             }
         },
         __updateWorldOpacity() {
@@ -5235,6 +5267,8 @@ var LeaferUI = (function (exports) {
         get innerName() { return this.__.name || this.tag + this.innerId; }
         get __DataProcessor() { return LeafData; }
         get __LayoutProcessor() { return LeafLayout; }
+        get leaferIsCreated() { return this.leafer && this.leafer.created; }
+        get leaferIsReady() { return this.leafer && this.leafer.ready; }
         get isLeafer() { return false; }
         get isBranch() { return false; }
         get isBranchLeaf() { return false; }
@@ -5676,10 +5710,17 @@ var LeaferUI = (function (exports) {
         add(child, index) {
             if (child === this)
                 return;
+            const noIndex = index === undefined;
+            if (!child.__) {
+                if (child instanceof Array)
+                    return child.forEach(item => { this.add(item, index); noIndex || index++; });
+                else
+                    child = UICreator.get(child.tag, child);
+            }
             if (child.parent)
                 child.parent.remove(child);
             child.parent = this;
-            index === undefined ? this.children.push(child) : this.children.splice(index, 0, child);
+            noIndex ? this.children.push(child) : this.children.splice(index, 0, child);
             if (child.isBranch)
                 this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
             child.__layout.boxChanged || child.__layout.boxChange();
@@ -5693,15 +5734,17 @@ var LeaferUI = (function (exports) {
             }
             this.__layout.affectChildrenSort && this.__layout.childrenSortChange();
         }
-        addMany(...children) {
-            children.forEach(child => this.add(child));
-        }
+        addMany(...children) { this.add(children); }
         remove(child, destroy) {
             if (child) {
-                if (child.animationOut)
-                    child.__runAnimation('out', () => this.__remove(child, destroy));
+                if (child.__) {
+                    if (child.animationOut)
+                        child.__runAnimation('out', () => this.__remove(child, destroy));
+                    else
+                        this.__remove(child, destroy);
+                }
                 else
-                    this.__remove(child, destroy);
+                    this.find(child).forEach(item => this.remove(item, destroy));
             }
             else if (child === undefined) {
                 super.remove(null, destroy);
@@ -5919,7 +5962,7 @@ var LeaferUI = (function (exports) {
         }
     }
-    const version = "1.0.4";
+    const version = "1.0.6";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6105,7 +6148,7 @@ var LeaferUI = (function (exports) {
     const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
     const { pushAllChildBranch, pushAllParent } = BranchHelper;
-    function updateMatrix(updateList, levelList) {
+    function updateMatrix$1(updateList, levelList) {
         let layout;
         updateList.list.forEach(leaf => {
             layout = leaf.__layout;
@@ -6273,7 +6316,7 @@ var LeaferUI = (function (exports) {
             target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
             this.extraBlock = null;
             updateList.sort();
-            updateMatrix(updateList, this.__levelList);
+            updateMatrix$1(updateList, this.__levelList);
             updateBounds(this.__levelList);
             updateChange(updateList);
             if (this.extraBlock)
@@ -6388,6 +6431,7 @@ var LeaferUI = (function (exports) {
             this.totalBounds = new Bounds();
             debug$6.log(target.innerName, '--->');
             try {
+                target.app.emit(RenderEvent.CHILD_START, target);
                 this.emitRender(RenderEvent.START);
                 this.renderOnce(callback);
                 this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6685,7 +6729,7 @@ var LeaferUI = (function (exports) {
                 if (child.isBranch) {
                     if (hit || child.__ignoreHitWorld) {
                         this.eachFind(child.children, child.__onlyHitMask);
-                        if (child.isBranchLeaf && !this.findList.length)
+                        if (child.isBranchLeaf)
                             this.hitChild(child, point);
                     }
                 }
@@ -6898,6 +6942,13 @@ var LeaferUI = (function (exports) {
     const TextConvert = {};
     const ColorConvert = {};
+    const UnitConvert = {
+        number(value, percentRefer) {
+            if (typeof value === 'object')
+                return value.type === 'percent' ? value.value * percentRefer : value.value;
+            return value;
+        }
+    };
     const PathArrow = {};
     const Paint = {};
     const PaintImage = {};
@@ -6918,7 +6969,7 @@ var LeaferUI = (function (exports) {
         }
     };
-    const { parse } = PathConvert;
+    const { parse, objectToCanvasData } = PathConvert;
     const emptyPaint = {};
     const debug$5 = Debug.get('UIData');
     class UIData extends LeafData {
@@ -6932,10 +6983,11 @@ var LeaferUI = (function (exports) {
                     scaleX = -scaleX;
                 return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
             }
-            else {
+            else
                 return strokeWidth;
-            }
         }
+        get __hasStroke() { return this.stroke && this.strokeWidth; }
+        get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
         get __autoWidth() { return !this._width; }
         get __autoHeight() { return !this._height; }
         get __autoSide() { return !this._width || !this._height; }
@@ -6952,9 +7004,8 @@ var LeaferUI = (function (exports) {
                 this.__leaf.scaleX *= -1;
                 debug$5.warn('width < 0, instead -scaleX ', this);
             }
-            else {
+            else
                 this._width = value;
-            }
         }
         setHeight(value) {
             if (value < 0) {
@@ -6962,9 +7013,8 @@ var LeaferUI = (function (exports) {
                 this.__leaf.scaleY *= -1;
                 debug$5.warn('height < 0, instead -scaleY', this);
             }
-            else {
+            else
                 this._height = value;
-            }
         }
         setFill(value) {
             if (this.__naturalWidth)
@@ -7005,9 +7055,10 @@ var LeaferUI = (function (exports) {
             }
         }
         setPath(value) {
-            if (typeof value === 'string') {
+            const isString = typeof value === 'string';
+            if (isString || (value && typeof value[0] === 'object')) {
                 this.__setInput('path', value);
-                this._path = parse(value);
+                this._path = isString ? parse(value) : objectToCanvasData(value);
             }
             else {
                 if (this.__input)
@@ -7022,12 +7073,8 @@ var LeaferUI = (function (exports) {
                     value = value.filter((item) => item.visible !== false);
                 this._shadow = value.length ? value : null;
             }
-            else if (value) {
-                this._shadow = value.visible === false ? null : [value];
-            }
-            else {
-                this._shadow = null;
-            }
+            else
+                this._shadow = value && value.visible !== false ? [value] : null;
         }
         setInnerShadow(value) {
             this.__setInput('innerShadow', value);
@@ -7036,12 +7083,8 @@ var LeaferUI = (function (exports) {
                     value = value.filter((item) => item.visible !== false);
                 this._innerShadow = value.length ? value : null;
             }
-            else if (value) {
-                this._innerShadow = value.visible === false ? null : [value];
-            }
-            else {
-                this._innerShadow = null;
-            }
+            else
+                this._innerShadow = value && value.visible !== false ? [value] : null;
         }
         __computePaint() {
             const { fill, stroke } = this.__input;
@@ -7052,24 +7095,19 @@ var LeaferUI = (function (exports) {
             this.__needComputePaint = false;
         }
     }
-    const UnitConvert = {
-        number(value, percentRefer) {
-            if (typeof value === 'object')
-                return value.type === 'percent' ? value.value * percentRefer : value.value;
-            return value;
-        }
-    };
     class GroupData extends UIData {
     }
     class BoxData extends GroupData {
         get __boxStroke() { return !this.__pathInputed; }
+        get __drawAfterFill() { return this.overflow === 'hide' && this.__clipAfterFill && this.__leaf.children.length; }
+        get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
     }
     class LeaferData extends GroupData {
-        __getInputData() {
-            const data = super.__getInputData();
+        __getInputData(names, options) {
+            const data = super.__getInputData(names, options);
             canvasSizeAttrs.forEach(key => delete data[key]);
             return data;
         }
@@ -7096,6 +7134,7 @@ var LeaferUI = (function (exports) {
     }
     class PathData extends UIData {
+        get __pathInputed() { return 2; }
     }
     class PenData extends GroupData {
@@ -7142,16 +7181,18 @@ var LeaferUI = (function (exports) {
             delete data.fill;
             return data;
         }
-        __getInputData() {
-            const data = super.__getInputData();
+        __getInputData(names, options) {
+            const data = super.__getInputData(names, options);
             delete data.fill;
             return data;
         }
     }
     class CanvasData extends RectData {
-        __getInputData() {
-            const data = super.__getInputData();
+        get __isCanvas() { return true; }
+        get __drawAfterFill() { return true; }
+        __getInputData(names, options) {
+            const data = super.__getInputData(names, options);
             data.url = this.__leaf.canvas.toDataURL('image/png');
             return data;
         }
@@ -7178,16 +7219,12 @@ var LeaferUI = (function (exports) {
             let width = 0;
             const { shadow, innerShadow, blur, backgroundBlur } = 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);
-                });
+                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);
             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);
-                });
+                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));
             if (backgroundBlur)
                 shapeWidth = Math.max(shapeWidth, backgroundBlur);
             this.__layout.renderShapeSpread = shapeWidth;
@@ -7269,6 +7306,16 @@ var LeaferUI = (function (exports) {
                 if (stroke && !ignoreStroke)
                     this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
             }
+        },
+        __drawAfterFill(canvas, options) {
+            if (this.__.__clipAfterFill) {
+                canvas.save();
+                this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
+                this.__drawContent(canvas, options);
+                canvas.restore();
+            }
+            else
+                this.__drawContent(canvas, options);
         }
     };
     function drawFast(ui, canvas, options) {
@@ -7335,8 +7382,8 @@ var LeaferUI = (function (exports) {
             return pen;
         }
         get editConfig() { return undefined; }
-        get editOuter() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
-        get editInner() { return 'PathEditor'; }
+        get editOuter() { return ''; }
+        get editInner() { return ''; }
         constructor(data) {
             super(data);
         }
@@ -7347,9 +7394,8 @@ var LeaferUI = (function (exports) {
                 Object.assign(this, data);
                 this.lockNormalStyle = false;
             }
-            else {
+            else
                 Object.assign(this, data);
-            }
         }
         get(name) {
             return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -7395,12 +7441,7 @@ var LeaferUI = (function (exports) {
             this.__drawPathByData(canvas, this.__.path);
         }
         __drawPathByData(drawer, data) {
-            if (data) {
-                PathDrawer.drawPathByData(drawer, data);
-            }
-            else {
-                this.__drawPathByBox(drawer);
-            }
+            data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
         }
         __drawPathByBox(drawer) {
             const { x, y, width, height } = this.__layout.boxBounds;
@@ -7408,9 +7449,8 @@ var LeaferUI = (function (exports) {
                 const { cornerRadius } = this.__;
                 drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
             }
-            else {
+            else
                 drawer.rect(x, y, width, height);
-            }
         }
         animate(_keyframe, _options, _type, _isTemp) {
             return needPlugin('animate');
@@ -7657,23 +7697,13 @@ var LeaferUI = (function (exports) {
             if (data.children) {
                 const { children } = data;
                 delete data.children;
-                if (!this.children) {
-                    this.__setBranch();
-                }
-                else {
-                    this.clear();
-                }
+                this.children ? this.clear() : this.__setBranch();
                 super.set(data, isTemp);
-                let child;
-                children.forEach(childData => {
-                    child = childData.__ ? childData : UICreator.get(childData.tag, childData);
-                    this.add(child);
-                });
+                children.forEach(child => this.add(child));
                 data.children = children;
             }
-            else {
+            else
                 super.set(data, isTemp);
-            }
         }
         toJSON(options) {
             const data = super.toJSON(options);
@@ -8093,10 +8123,9 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Rect);
-    const rect$1 = exports.Rect.prototype;
-    const group$1 = exports.Group.prototype;
+    const { copy: copy$6, add, includes: includes$1 } = BoundsHelper;
+    const rect$1 = exports.Rect.prototype, group$1 = exports.Group.prototype;
     const childrenRenderBounds = {};
-    const { copy: copy$6, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
         get isBranchLeaf() { return true; }
@@ -8106,37 +8135,31 @@ var LeaferUI = (function (exports) {
         }
         __updateStrokeSpread() { return 0; }
         __updateRectRenderSpread() { return 0; }
-        __updateRenderSpread() {
-            return this.__updateRectRenderSpread() || -1;
-        }
+        __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
         __updateRectBoxBounds() { }
-        __updateBoxBounds(secondLayout) {
+        __updateBoxBounds(_secondLayout) {
             const data = this.__;
             if (this.children.length) {
                 if (data.__autoSide) {
-                    if (this.leafer && this.leafer.ready)
-                        this.leafer.layouter.addExtra(this);
                     super.__updateBoxBounds();
                     const { boxBounds } = this.__layout;
                     if (!data.__autoSize) {
-                        if (data.__autoWidth)
-                            boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0;
-                        else
-                            boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0;
+                        if (data.__autoWidth) {
+                            boxBounds.width += boxBounds.x, boxBounds.x = 0;
+                            boxBounds.height = data.height, boxBounds.y = 0;
+                        }
+                        else {
+                            boxBounds.height += boxBounds.y, boxBounds.y = 0;
+                            boxBounds.width = data.width, boxBounds.x = 0;
+                        }
                     }
-                    if (secondLayout && data.flow && data.padding)
-                        copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
                     this.__updateNaturalSize();
                 }
-                else {
+                else
                     this.__updateRectBoxBounds();
-                }
-                if (data.flow)
-                    this.__updateContentBounds();
             }
-            else {
+            else
                 this.__updateRectBoxBounds();
-            }
         }
         __updateStrokeBounds() { }
         __updateRenderBounds() {
@@ -8146,14 +8169,13 @@ var LeaferUI = (function (exports) {
                 super.__updateRenderBounds();
                 copy$6(childrenRenderBounds, renderBounds);
                 this.__updateRectRenderBounds();
-                isOverflow = !includes$1(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius;
+                isOverflow = !includes$1(renderBounds, childrenRenderBounds);
+                if (isOverflow && this.__.overflow !== 'hide')
+                    add(renderBounds, childrenRenderBounds);
             }
-            else {
+            else
                 this.__updateRectRenderBounds();
-            }
-            this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
-            if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow)
-                add(renderBounds, childrenRenderBounds);
+            !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
         }
         __updateRectRenderBounds() { }
         __updateRectChange() { }
@@ -8173,20 +8195,9 @@ var LeaferUI = (function (exports) {
                     this.__renderGroup(canvas, options);
             }
         }
-        __drawAfterFill(canvas, options) {
-            const { length } = this.children;
-            if (this.isOverflow) {
-                canvas.save();
-                canvas.clip();
-                if (length)
-                    this.__renderGroup(canvas, options);
-                canvas.restore();
-            }
-            else {
-                if (length)
-                    this.__renderGroup(canvas, options);
-            }
-            if (this.__.stroke && length) {
+        __drawContent(canvas, options) {
+            this.__renderGroup(canvas, options);
+            if (this.__.__hasStroke) {
                 canvas.setWorld(this.__nowWorld);
                 this.__drawRenderPath(canvas);
             }
@@ -8198,6 +8209,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType(false)
     ], exports.Box.prototype, "resizeChildren", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.Box.prototype, "textBox", void 0);
     __decorate([
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
@@ -8347,17 +8361,15 @@ var LeaferUI = (function (exports) {
                 if (data.__useArrow)
                     PathArrow.addArrows(this, false);
             }
-            else {
+            else
                 super.__updateRenderPath();
-            }
         }
         __updateBoxBounds() {
             if (this.points) {
                 toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
             }
-            else {
+            else
                 super.__updateBoxBounds();
-            }
         }
     };
     __decorate([
@@ -8495,7 +8507,6 @@ var LeaferUI = (function (exports) {
             super(data);
             this.canvas = Creator.canvas(this.__);
             this.context = this.canvas.context;
-            this.__.__isCanvas = this.__.__drawAfterFill = true;
             if (data && data.url)
                 this.drawImage(data.url);
         }
@@ -8508,8 +8519,7 @@ var LeaferUI = (function (exports) {
             });
         }
         draw(ui, offset, scale, rotation) {
-            ui.__layout.update();
-            const matrix = new Matrix(ui.__world).invert();
+            const matrix = new Matrix(ui.worldTransform).invert();
             const m = new Matrix();
             if (offset)
                 m.translate(offset.x, offset.y);
@@ -8524,17 +8534,9 @@ var LeaferUI = (function (exports) {
         paint() {
             this.forceRender();
         }
-        __drawAfterFill(canvas, _options) {
-            const { width, height, cornerRadius } = this.__, { view } = this.canvas;
-            if (cornerRadius || this.pathInputed) {
-                canvas.save();
-                canvas.clip();
-                canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
-                canvas.restore();
-            }
-            else {
-                canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
-            }
+        __drawContent(canvas, _options) {
+            const { width, height } = this.__, { view } = this.canvas;
+            canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
         }
         __updateSize() {
             const { canvas } = this;
@@ -8578,7 +8580,6 @@ var LeaferUI = (function (exports) {
     const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() { return 'Text'; }
-        get editInner() { return 'TextEditor'; }
         get textDrawData() {
             this.__layout.update();
             return this.__.__textDrawData;
@@ -8727,6 +8728,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType('top')
     ], exports.Text.prototype, "verticalAlign", void 0);
+    __decorate([
+        boundsType(true)
+    ], exports.Text.prototype, "autoSizeAlign", void 0);
     __decorate([
         boundsType('normal')
     ], exports.Text.prototype, "textWrap", void 0);
@@ -8741,7 +8745,6 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Path'; }
         constructor(data) {
             super(data);
-            this.__.__pathInputed = 2;
         }
     };
     __decorate([
@@ -8824,21 +8827,17 @@ var LeaferUI = (function (exports) {
                     this.tree = this.addLeafer(tree);
                 if (sky || editor)
                     this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
-                if (editor) {
-                    this.editor = Creator.editor(editor);
-                    this.sky.add(this.editor);
-                }
+                if (editor)
+                    this.sky.add(this.editor = Creator.editor(editor));
             }
         }
         __setApp() {
             const { canvas } = this;
             const { realCanvas, view } = this.config;
-            if (realCanvas || view === this.canvas.view || !canvas.parentView) {
+            if (realCanvas || view === this.canvas.view || !canvas.parentView)
                 this.realCanvas = true;
-            }
-            else {
+            else
                 canvas.unrealCanvas();
-            }
             this.leafer = this;
             this.watcher.disable();
             this.layouter.disable();
@@ -9244,10 +9243,7 @@ var LeaferUI = (function (exports) {
     leafer.getValidMove = function (moveX, moveY) {
         const { scroll, disabled } = this.app.config.move;
         if (scroll) {
-            if (Math.abs(moveX) > Math.abs(moveY))
-                moveY = 0;
-            else
-                moveX = 0;
+            Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
             if (scroll === 'limit') {
                 const { x, y, width, height } = new Bounds(this.__world).addPoint(this.zoomLayer);
                 const right = x + width - this.width, bottom = y + height - this.height;
@@ -9447,9 +9443,10 @@ var LeaferUI = (function (exports) {
             this.dragData = getDragEventData(data, data, data);
             this.canAnimate = this.canDragOut = true;
         }
-        getList() {
+        getList(realDraggable, hover) {
             const { proxy } = this.interaction.selector;
-            return this.dragging && (!proxy || !proxy.list.length) ? (exports.DragEvent.list || this.dragableList || emptyList) : emptyList;
+            const hasProxyList = proxy && proxy.list.length, dragList = exports.DragEvent.list || this.draggableList || emptyList;
+            return this.dragging && (hasProxyList ? (realDraggable ? emptyList : new LeafList(hover ? [...proxy.list, ...proxy.dragHoverExclude] : proxy.list)) : dragList);
         }
         checkDrag(data, canDrag) {
             const { interaction } = this;
@@ -9474,8 +9471,8 @@ var LeaferUI = (function (exports) {
                 this.dragging = canDrag && PointerButton.left(data);
                 if (this.dragging) {
                     this.interaction.emit(exports.DragEvent.START, this.dragData);
-                    this.getDragableList(this.dragData.path);
-                    this.setDragStartPoints(this.realDragableList = this.getList());
+                    this.getDraggableList(this.dragData.path);
+                    this.setDragStartPoints(this.realDraggableList = this.getList(true));
                 }
             }
         }
@@ -9483,12 +9480,12 @@ var LeaferUI = (function (exports) {
             this.dragStartPoints = {};
             list.forEach(leaf => this.dragStartPoints[leaf.innerId] = { x: leaf.x, y: leaf.y });
         }
-        getDragableList(path) {
+        getDraggableList(path) {
             let leaf;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                if ((leaf.__.draggable || leaf.__.editable) && leaf.__.hitSelf && !leaf.__.locked) {
-                    this.dragableList = new LeafList(leaf);
+                if ((leaf.draggable || leaf.editable) && leaf.hitSelf && !leaf.locked) {
+                    this.draggableList = new LeafList(leaf);
                     break;
                 }
             }
@@ -9513,7 +9510,7 @@ var LeaferUI = (function (exports) {
         }
         dragReal() {
             const { running } = this.interaction;
-            const list = this.realDragableList;
+            const list = this.realDraggableList;
             if (list.length && running) {
                 const { totalX, totalY } = this.dragData;
                 list.forEach(leaf => leaf.draggable && leaf.move(exports.DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
@@ -9602,7 +9599,7 @@ var LeaferUI = (function (exports) {
             this.interaction.emit(exports.DragEvent.LEAVE, data, dragEnterPath);
         }
         dragReset() {
-            exports.DragEvent.list = exports.DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
+            exports.DragEvent.list = exports.DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
         }
         checkDragOut(data) {
             const { interaction } = this;
@@ -9743,6 +9740,7 @@ var LeaferUI = (function (exports) {
         touch: {
             preventDefault: true
         },
+        multiTouch: {},
         cursor: true,
         keyEvent: true
     };
@@ -9869,6 +9867,8 @@ var LeaferUI = (function (exports) {
             this.pointerUp(data);
         }
         multiTouch(data, list) {
+            if (this.config.multiTouch.disabled)
+                return;
             const { move, angle, scale, center } = MultiTouchHelper.getData(list);
             this.rotate(getRotateEventData(center, angle, data));
             this.zoom(getZoomEventData(center, scale, data));
@@ -10058,7 +10058,7 @@ var LeaferUI = (function (exports) {
                 data = this.hoverData;
             if (!data)
                 return;
-            this.findPath(data, { exclude: this.dragger.getList(), name: exports.PointerEvent.MOVE });
+            this.findPath(data, { exclude: this.dragger.getList(false, true), name: exports.PointerEvent.MOVE });
             this.hoverData = data;
         }
         updateCursor(data) {
@@ -10080,7 +10080,7 @@ var LeaferUI = (function (exports) {
             const { path } = data;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                cursor = leaf.syncEventer ? leaf.syncEventer.cursor : leaf.cursor;
+                cursor = (leaf.syncEventer && leaf.syncEventer.cursor) || leaf.cursor;
                 if (cursor)
                     break;
             }
@@ -10262,7 +10262,7 @@ var LeaferUI = (function (exports) {
         if (isHitPixel) {
             const { renderBounds } = this.__layout;
             const size = Platform.image.hitCanvasSize;
-            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds, 0.5).a;
+            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
             const { x, y, width, height } = tempBounds$1.set(renderBounds).scale(scale);
             h.resize({ width, height, pixelRatio: 1 });
             h.clear();
@@ -10318,15 +10318,14 @@ var LeaferUI = (function (exports) {
         return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
     };
-    const ui$2 = new exports.UI();
-    const rect = exports.Rect.prototype;
-    rect.__updateHitCanvas = function () {
+    const ui$2 = exports.UI.prototype, rect = exports.Rect.prototype, box$1 = exports.Box.prototype;
+    rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
         if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
             ui$2.__updateHitCanvas.call(this);
         else if (this.__hitCanvas)
             this.__hitCanvas = null;
     };
-    rect.__hitFill = function (inner) {
+    rect.__hitFill = box$1.__hitFill = function (inner) {
         return this.__hitCanvas ? ui$2.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
@@ -10665,7 +10664,7 @@ var LeaferUI = (function (exports) {
         shape
     };
-    let origin = {};
+    let origin$1 = {};
     const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate: rotate$2 } = MatrixHelper;
     function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$3();
@@ -10705,11 +10704,11 @@ var LeaferUI = (function (exports) {
                 }
             }
         }
-        origin.x = box.x + x;
-        origin.y = box.y + y;
-        translate$1(transform, origin.x, origin.y);
+        origin$1.x = box.x + x;
+        origin$1.y = box.y + y;
+        translate$1(transform, origin$1.x, origin$1.y);
         if (scaleX)
-            scaleOfOuter$1(transform, origin, scaleX, scaleY);
+            scaleOfOuter$1(transform, origin$1, scaleX, scaleY);
         data.transform = transform;
     }
@@ -10825,9 +10824,10 @@ var LeaferUI = (function (exports) {
                 onLoadError(ui, event, image.error);
         }
         else {
-            ignoreRender(ui, true);
-            if (firstUse)
+            if (firstUse) {
+                ignoreRender(ui, true);
                 onLoad(ui, event);
+            }
             leafPaint.loadId = image.load(() => {
                 ignoreRender(ui, false);
                 if (!ui.destroyed) {
@@ -10975,7 +10975,7 @@ var LeaferUI = (function (exports) {
             }
             if (allowPaint) {
                 canvas.save();
-                canvas.clip();
+                ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
                 if (paint.blendMode)
                     canvas.blendMode = paint.blendMode;
                 if (data.opacity)
@@ -11439,14 +11439,15 @@ var LeaferUI = (function (exports) {
     const { Letter, Single, Before, After, Symbol, Break } = CharType;
     let word, row, wordWidth, rowWidth, realWidth;
     let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
-    let textDrawData, rows = [], bounds;
+    let textDrawData, rows = [], bounds$1, findMaxWidth;
     function createRows(drawData, content, style) {
         textDrawData = drawData;
         rows = drawData.rows;
-        bounds = drawData.bounds;
+        bounds$1 = drawData.bounds;
+        findMaxWidth = !bounds$1.width && !style.autoSizeAlign;
         const { __letterSpacing, paraIndent, textCase } = style;
         const { canvas } = Platform;
-        const { width, height } = bounds;
+        const { width, height } = bounds$1;
         const charMode = width || height || __letterSpacing || (textCase !== 'none');
         if (charMode) {
             const wrap = style.textWrap !== 'none';
@@ -11528,7 +11529,10 @@ var LeaferUI = (function (exports) {
         else {
             content.split('\n').forEach(content => {
                 textDrawData.paraNumber++;
-                rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
+                rowWidth = canvas.measureText(content).width;
+                rows.push({ x: paraIndent || 0, text: content, width: rowWidth, paraStart: true });
+                if (findMaxWidth)
+                    setMaxWidth();
             });
         }
     }
@@ -11557,12 +11561,18 @@ var LeaferUI = (function (exports) {
             startCharSize = 0;
         }
         row.width = rowWidth;
-        if (bounds.width)
+        if (bounds$1.width)
             trimRight(row);
+        else if (findMaxWidth)
+            setMaxWidth();
         rows.push(row);
         row = { words: [] };
         rowWidth = 0;
     }
+    function setMaxWidth() {
+        if (rowWidth > (textDrawData.maxWidth || 0))
+            textDrawData.maxWidth = rowWidth;
+    }
     const CharMode = 0;
     const WordMode = 1;
@@ -11634,34 +11644,32 @@ var LeaferUI = (function (exports) {
     function layoutText(drawData, style) {
         const { rows, bounds } = drawData;
-        const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
+        const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
         let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
         let starY = __baseLine;
         if (__clipText && realHeight > height) {
             realHeight = Math.max(height, __lineHeight);
             drawData.overflow = rows.length;
         }
-        else {
+        else if (height || autoSizeAlign) {
             switch (verticalAlign) {
                 case 'middle':
                     y += (height - realHeight) / 2;
                     break;
-                case 'bottom':
-                    y += (height - realHeight);
+                case 'bottom': y += (height - realHeight);
             }
         }
         starY += y;
-        let row, rowX, rowWidth;
+        let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
         for (let i = 0, len = rows.length; i < len; i++) {
             row = rows[i];
             row.x = x;
             if (row.width < width || (row.width > width && !__clipText)) {
                 switch (textAlign) {
                     case 'center':
-                        row.x += (width - row.width) / 2;
+                        row.x += (layoutWidth - row.width) / 2;
                         break;
-                    case 'right':
-                        row.x += width - row.width;
+                    case 'right': row.x += layoutWidth - row.width;
                 }
             }
             if (row.paraStart && paraSpacing && i > 0)
@@ -11766,14 +11774,14 @@ var LeaferUI = (function (exports) {
         let height = style.__getInput('height') || 0;
         const { textDecoration, __font, __padding: padding } = style;
         if (padding) {
-            if (width) {
+            if (width)
+                x = padding[left$3], width -= (padding[right$3] + padding[left$3]);
+            else if (!style.autoSizeAlign)
                 x = padding[left$3];
-                width -= (padding[right$3] + padding[left$3]);
-            }
-            if (height) {
+            if (height)
+                y = padding[top$2], height -= (padding[top$2] + padding[bottom$2]);
+            else if (!style.autoSizeAlign)
                 y = padding[top$2];
-                height -= (padding[top$2] + padding[bottom$2]);
-            }
         }
         const drawData = {
             bounds: { x, y, width, height },
@@ -11793,22 +11801,20 @@ var LeaferUI = (function (exports) {
         return drawData;
     }
     function padAutoText(padding, drawData, style, width, height) {
-        if (!width) {
+        if (!width && style.autoSizeAlign) {
             switch (style.textAlign) {
                 case 'left':
                     offsetText(drawData, 'x', padding[left$3]);
                     break;
-                case 'right':
-                    offsetText(drawData, 'x', -padding[right$3]);
+                case 'right': offsetText(drawData, 'x', -padding[right$3]);
             }
         }
-        if (!height) {
+        if (!height && style.autoSizeAlign) {
             switch (style.verticalAlign) {
                 case 'top':
                     offsetText(drawData, 'y', padding[top$2]);
                     break;
-                case 'bottom':
-                    offsetText(drawData, 'y', -padding[bottom$2]);
+                case 'bottom': offsetText(drawData, 'y', -padding[bottom$2]);
             }
         }
     }
@@ -12170,8 +12176,9 @@ var LeaferUI = (function (exports) {
         leaf.path = leaf.__.path;
     }
     function scaleResizePoints(leaf, scaleX, scaleY) {
-        PathScaler.scalePoints(leaf.__.points, scaleX, scaleY);
-        leaf.points = leaf.__.points;
+        const { points } = leaf;
+        typeof points[0] === 'object' ? points.forEach(p => { p.x *= scaleX, p.y *= scaleY; }) : PathScaler.scalePoints(points, scaleX, scaleY);
+        leaf.points = points;
     }
     function scaleResizeGroup(group, scaleX, scaleY) {
         const { children } = group;
@@ -12330,31 +12337,29 @@ var LeaferUI = (function (exports) {
             const { list } = this;
             if (list.length) {
                 let leaf;
-                const { stroke, strokeWidth, fill } = this.__;
-                const { bounds } = options;
+                const data = this.__, { stroke, strokeWidth, fill } = data, { bounds } = options;
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
-                    if (bounds && bounds.hit(leaf.__world, options.matrix)) {
-                        const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY);
+                    const { worldTransform, worldRenderBounds } = leaf;
+                    if (bounds && bounds.hit(worldRenderBounds, options.matrix)) {
+                        const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
                         if (aScaleX !== aScaleY) {
-                            copy$2(matrix, leaf.__world);
+                            copy$2(matrix, worldTransform);
                             scale$1(matrix, 1 / aScaleX, 1 / aScaleY);
                             canvas.setWorld(matrix, options.matrix);
                             canvas.beginPath();
-                            this.__.strokeWidth = strokeWidth;
+                            data.strokeWidth = strokeWidth;
                             const { x, y, width, height } = leaf.__layout.boxBounds;
                             canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
                         }
                         else {
-                            canvas.setWorld(leaf.__world, options.matrix);
+                            canvas.setWorld(worldTransform, options.matrix);
                             canvas.beginPath();
-                            if (leaf.__.__useArrow) {
+                            if (leaf.__.__useArrow)
                                 leaf.__drawPath(canvas);
-                            }
-                            else {
+                            else
                                 leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
-                            }
-                            this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX);
+                            data.strokeWidth = strokeWidth / abs(worldTransform.scaleX);
                         }
                         if (stroke)
                             typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas);
@@ -12362,7 +12367,7 @@ var LeaferUI = (function (exports) {
                             typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas);
                     }
                 }
-                this.__.strokeWidth = strokeWidth;
+                data.strokeWidth = strokeWidth;
             }
         }
         destroy() {
@@ -12913,7 +12918,6 @@ var LeaferUI = (function (exports) {
             this.editor = editor;
             this.visible = false;
             this.create();
-            this.rect.syncEventer = editor;
             this.__listenEvents();
         }
         create() {
@@ -12953,8 +12957,11 @@ var LeaferUI = (function (exports) {
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
             rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
             rect.hittable = !single && !!moveable;
-            element.syncEventer = (single && moveable) ? rect : null;
-            this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null;
+            rect.syncEventer = single && this.editor;
+            if (single && moveable) {
+                element.syncEventer = rect;
+                this.app.interaction.bottomList = [{ target: rect, proxy: element }];
+            }
         }
         update(bounds) {
             this.visible = !this.editor.element.locked;
@@ -13126,6 +13133,11 @@ var LeaferUI = (function (exports) {
             if (editor.single) {
                 const { element } = editor;
                 if (element.isBranch) {
+                    if (element.textBox) {
+                        const find = element.children.find(item => item.editable && item instanceof exports.Text);
+                        if (find)
+                            return editor.openInnerEditor(find);
+                    }
                     editor.openGroup(element);
                     editor.target = editor.selector.findDeepOne(e);
                 }
@@ -13271,12 +13283,12 @@ ${filterStyle}
         skewable: true
     };
+    const bounds = new Bounds();
     function simulate(editor) {
-        const { simulateTarget, leafList: targetList } = editor;
-        const { x, y, width, height } = new Bounds().setListWithFn(targetList.list, (leaf) => leaf.worldBoxBounds);
-        const parent = simulateTarget.parent = targetList.list[0].leafer.zoomLayer;
-        const { scaleX, scaleY, e: worldX, f: worldY } = parent.__world;
-        simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY });
+        const { simulateTarget, list } = editor;
+        const { zoomLayer } = list[0].leafer.zoomLayer;
+        simulateTarget.safeChange(() => simulateTarget.reset(bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page')).get()));
+        zoomLayer.add(simulateTarget);
     }
     function onTarget(editor, oldValue) {
@@ -13285,6 +13297,7 @@ ${filterStyle}
             editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
         }
         else {
+            editor.simulateTarget.remove();
             editor.leafList.reset();
             editor.closeInnerEditor();
         }
@@ -13339,7 +13352,7 @@ ${filterStyle}
             const ungroupList = [];
             app.lockLayout();
             list.forEach(leaf => {
-                if (leaf.isBranch) {
+                if (leaf.isBranch && !leaf.isBranchLeaf) {
                     const { parent, children } = leaf;
                     while (children.length) {
                         ungroupList.push(children[0]);
@@ -13410,17 +13423,77 @@ ${filterStyle}
     EditorGroupEvent.OPEN = 'editor.open_group';
     EditorGroupEvent.CLOSE = 'editor.close_group';
+    const { updateMatrix } = LeafHelper;
+    const checkMap = { x: 1, y: 1, scaleX: 1, scaleY: 1, rotation: 1, skewX: 1, skewY: 1 }, origin = 'top-left';
+    class SimulateElement extends exports.Rect {
+        get __tag() { return 'SimulateElement'; }
+        constructor(editor) {
+            super();
+            this.checkChange = true;
+            this.canChange = true;
+            this.visible = this.hittable = false;
+            this.on(PropertyEvent.CHANGE, (event) => {
+                if (this.checkChange && checkMap[event.attrName]) {
+                    const { attrName, newValue, oldValue } = event;
+                    const addValue = attrName[0] === 's' ? (newValue || 1) / (oldValue || 1) : (newValue || 0) - (oldValue || 0);
+                    this.canChange = false;
+                    const data = this.__;
+                    data[attrName] = oldValue;
+                    updateMatrix(this.parent);
+                    updateMatrix(this);
+                    const oldMatrix = new Matrix(this.__world);
+                    data[attrName] = newValue;
+                    this.__layout.rotationChange();
+                    updateMatrix(this);
+                    this.changedTransform = new Matrix(this.__world).divide(oldMatrix);
+                    switch (attrName) {
+                        case 'x':
+                            editor.move(addValue, 0);
+                            break;
+                        case 'y':
+                            editor.move(0, addValue);
+                            break;
+                        case 'rotation':
+                            editor.rotateOf(origin, addValue);
+                            break;
+                        case 'scaleX':
+                            editor.scaleOf(origin, addValue, 1);
+                            break;
+                        case 'scaleY':
+                            editor.scaleOf(origin, 1, addValue);
+                            break;
+                        case 'skewX':
+                            editor.skewOf(origin, addValue, 0);
+                            break;
+                        case 'skewY':
+                            editor.skewOf(origin, 0, addValue);
+                    }
+                    this.canChange = true;
+                }
+            });
+        }
+        safeChange(changeFn) {
+            if (this.canChange) {
+                this.checkChange = false;
+                changeFn();
+                this.checkChange = true;
+            }
+        }
+    }
     class Editor extends exports.Group {
         get mergeConfig() {
             const { element, config } = this;
             return this.single && element.editConfig ? Object.assign(Object.assign({}, config), element.editConfig) : config;
         }
         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 element() { return this.multiple ? this.simulateTarget : this.list[0]; }
         get buttons() { return this.editBox.buttons; }
         constructor(userConfig, data) {
@@ -13428,7 +13501,7 @@ ${filterStyle}
             this.config = DataHelper.clone(config);
             this.leafList = new LeafList();
             this.openedGroupList = new LeafList();
-            this.simulateTarget = new exports.Rect({ visible: false });
+            this.simulateTarget = new SimulateElement(this);
             this.editBox = new EditBox(this);
             this.editToolList = {};
             this.selector = new EditSelect(this);
@@ -13566,18 +13639,18 @@ ${filterStyle}
             this.skewOf(origin, skewX, skewY);
         }
         move(x, y = 0) {
-            if (!this.mergeConfig.moveable || this.element.locked)
+            if (!this.checkTransform('moveable'))
                 return;
             const { element } = this;
             const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
+            if (this.multiple)
+                element.safeChange(() => element.move(x, y));
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y });
             this.editTool.onMove(event);
             this.emitEvent(event);
-            if (this.multiple)
-                element.move(x, y);
         }
         scaleWithDrag(data) {
-            if (!this.mergeConfig.resizeable || this.element.locked)
+            if (!this.checkTransform('resizeable'))
                 return;
             const { element } = this;
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }));
@@ -13585,50 +13658,53 @@ ${filterStyle}
             this.emitEvent(event);
         }
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
-            if (!this.mergeConfig.resizeable || this.element.locked)
+            if (!this.checkTransform('resizeable'))
                 return;
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY));
+            const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.scaleOf(origin, scaleX, scaleY)));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform });
             this.editTool.onScale(event);
             this.emitEvent(event);
         }
         flip(axis) {
-            if (this.element.locked)
+            if (!this.checkTransform('resizeable'))
                 return;
             const { element } = this;
             const worldOrigin = this.getWorldOrigin('center');
-            const transform = this.multiple ? this.getChangedTransform(() => element.flip(axis)) : new Matrix(LeafHelper.getFlipTransform(element, axis));
+            const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform });
             this.editTool.onScale(event);
             this.emitEvent(event);
         }
         rotateOf(origin, rotation) {
-            if (!this.mergeConfig.rotateable || this.element.locked)
+            if (!this.checkTransform('rotateable'))
                 return;
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation));
+            const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform });
             this.editTool.onRotate(event);
             this.emitEvent(event);
         }
         skewOf(origin, skewX, skewY = 0, _resize) {
-            if (!this.mergeConfig.skewable || this.element.locked)
+            if (!this.checkTransform('skewable'))
                 return;
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY));
+            const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.skewOf(origin, skewX, skewY)));
             const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform });
             this.editTool.onSkew(event);
             this.emitEvent(event);
         }
+        checkTransform(type) { return this.element && !this.element.locked && this.mergeConfig[type]; }
         getWorldOrigin(origin) {
             return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin));
         }
         getChangedTransform(func) {
             const { element } = this;
+            if (this.multiple && !element.canChange)
+                return element.changedTransform;
             const oldMatrix = new Matrix(element.worldTransform);
             func();
             return new Matrix(element.worldTransform).divide(oldMatrix);
@@ -13685,11 +13761,11 @@ ${filterStyle}
             this.emitEvent(event);
             group.emitEvent(event);
         }
-        openInnerEditor(target) {
-            if (target)
+        openInnerEditor(target, select) {
+            if (target && select)
                 this.target = target;
             if (this.single) {
-                const editTarget = this.element;
+                const editTarget = target || this.element;
                 const tag = editTarget.editInner;
                 if (tag && EditToolCreator.list[tag]) {
                     this.editTool.unload();
@@ -13741,14 +13817,15 @@ ${filterStyle}
         }
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
-                const { leafer } = this.list[0];
+                const { app, leafer } = this;
                 this.targetEventIds = [
-                    this.app.on_(exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
-                    this.app.on_(exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
-                    this.app.on_(exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
                     leafer.on_(RenderEvent.START, this.update, this),
-                    leafer.on_([exports.KeyEvent.HOLD, exports.KeyEvent.UP], (e) => { updateCursor(this, e); }),
-                    leafer.on_(exports.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
+                    app.on_(RenderEvent.CHILD_START, this.forceRender, this),
+                    app.on_(exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                    app.on_(exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                    app.on_(exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
+                    app.on_([exports.KeyEvent.HOLD, exports.KeyEvent.UP], (e) => { updateCursor(this, e); }),
+                    app.on_(exports.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
                 ];
             }
         }
@@ -13764,7 +13841,8 @@ ${filterStyle}
                 this.simulateTarget.destroy();
                 Object.values(this.editToolList).forEach(item => item.destroy());
                 this.editToolList = {};
-                this.target = this.hoverTarget = this.simulateTarget = this.editTool = this.innerEditor = null;
+                this.target = this.hoverTarget = null;
+                this.simulateTarget = this.editTool = this.innerEditor = null;
                 super.destroy();
             }
         }
@@ -13881,10 +13959,7 @@ ${filterStyle}
         }
         update() {
             const { editor, editBox } = this;
-            const { simulateTarget, element } = editor;
-            if (editor.multiple)
-                simulateTarget.parent.updateLayout();
-            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = element.getLayoutBounds('box', editor, true);
+            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.onUpdate();
@@ -13899,7 +13974,7 @@ ${filterStyle}
     ], exports.EditTool);
     const { left, right } = exports.Direction9;
-    const { move, copy: copy$1 } = PointHelper;
+    const { move, copy: copy$1, toNumberPoints } = PointHelper;
     exports.LineEditTool = class LineEditTool extends exports.EditTool {
         constructor() {
             super(...arguments);
@@ -13941,14 +14016,8 @@ ${filterStyle}
         }
         getInnerMove(ui, event, lockRatio) {
             const movePoint = event.getInnerMove(ui);
-            if (lockRatio) {
-                if (Math.abs(movePoint.x) > Math.abs(movePoint.y)) {
-                    movePoint.y = 0;
-                }
-                else {
-                    movePoint.x = 0;
-                }
-            }
+            if (lockRatio)
+                Math.abs(movePoint.x) > Math.abs(movePoint.y) ? movePoint.y = 0 : movePoint.x = 0;
             return movePoint;
         }
         getFromToByPath(path) {
@@ -13957,7 +14026,8 @@ ${filterStyle}
                 to: { x: path[4], y: path[5] }
             };
         }
-        getFromToByPoints(points) {
+        getFromToByPoints(originPoints) {
+            const points = toNumberPoints(originPoints);
             return {
                 from: { x: points[0], y: points[1] },
                 to: { x: points[2], y: points[3] }
@@ -14010,6 +14080,15 @@ ${filterStyle}
     ], exports.LineEditTool);
     Creator.editor = function (options) { return new Editor(options); };
+    defineKey(exports.UI.prototype, 'editOuter', {
+        get() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
+    });
+    defineKey(exports.UI.prototype, 'editInner', {
+        get() { return 'PathEditor'; }
+    });
+    defineKey(exports.Text.prototype, 'editInner', {
+        get() { return 'TextEditor'; }
+    });
     exports.UI.setEditConfig = function (config) {
         defineKey(this.prototype, 'editConfig', {
             get() { return typeof config === 'function' ? config(this) : config; }
@@ -14573,18 +14652,7 @@ ${filterStyle}
             style.position = 'fixed';
             style.transformOrigin = 'left top';
             style.boxSizing = 'border-box';
-            if (this.isHTMLText) {
-                div.innerHTML = text.text;
-                this.textScale = 1;
-            }
-            else {
-                div.innerText = text.text;
-                const { scaleX, scaleY } = text.worldTransform;
-                this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-                const fontSize = text.fontSize * this.textScale;
-                if (fontSize < 12)
-                    this.textScale *= 12 / fontSize;
-            }
+            this.isHTMLText ? div.innerHTML = text.text : div.innerText = text.text;
             const { view } = editor.app;
             (this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
             this.eventIds = [
@@ -14633,16 +14701,46 @@ ${filterStyle}
                 this.editor.closeInnerEditor();
         }
         onUpdate() {
-            const { editTarget: text, textScale } = this;
-            const { style } = this.editDom;
-            const { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
+            const { editTarget: text } = this;
+            let textScale = 1;
+            if (!this.isHTMLText) {
+                const { scaleX, scaleY } = text.worldTransform;
+                textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+                const fontSize = text.fontSize * textScale;
+                if (fontSize < 12)
+                    textScale *= 12 / text.fontSize;
+            }
+            this.textScale = textScale;
             const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale);
+            let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
+            let { width, height } = text;
+            x -= window.scrollX, y -= window.scrollY, width *= textScale, height *= textScale;
+            const data = text.__;
+            if (data.__autoWidth && data.autoSizeAlign) {
+                width += 20;
+                switch (data.textAlign) {
+                    case 'center':
+                        x -= width / 2;
+                        break;
+                    case 'right': x -= width;
+                }
+            }
+            if (data.__autoHeight && data.autoSizeAlign) {
+                height += 20;
+                switch (data.verticalAlign) {
+                    case 'middle':
+                        y -= height / 2;
+                        break;
+                    case 'bottom': y -= height;
+                }
+            }
+            const { style } = this.editDom;
             style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
-            style.left = x - window.scrollX + 'px';
-            style.top = y - window.scrollY + 'px';
-            style.width = text.width * textScale + (text.__.__autoWidth ? 20 : 0) + 'px';
-            style.height = text.height * textScale + (text.__.__autoHeight ? 20 : 0) + 'px';
-            this.isHTMLText || updateStyle(this.editDom, text, this.textScale);
+            style.left = x + 'px';
+            style.top = y + 'px';
+            style.width = width + 'px';
+            style.height = height + 'px';
+            this.isHTMLText || updateStyle(this.editDom, text, textScale);
         }
         onUnload() {
             const { editTarget: text, editor, editDom: dom } = this;