@leafer-editor/worker 1.0.4 → 1.0.5

package/dist/worker.module.js

@@ -4056,7 +4056,7 @@ const LeafHelper = {
     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++) {
@@ -4226,7 +4226,7 @@ const LeafHelper = {
     }
 };
 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;
@@ -4755,6 +4755,7 @@ class RenderEvent extends Event {
     }
 }
 RenderEvent.REQUEST = 'render.request';
+RenderEvent.CHILD_START = 'render.child_start';
 RenderEvent.START = 'render.start';
 RenderEvent.BEFORE = 'render.before';
 RenderEvent.RENDER = 'render';
@@ -4930,7 +4931,7 @@ const { isFinite } = Number;
 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);
@@ -5000,9 +5001,9 @@ const LeafMatrix = {
     }
 };
 
-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() {
@@ -5085,7 +5086,7 @@ const LeafBounds = {
         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;
@@ -5097,7 +5098,7 @@ const LeafBounds = {
     __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)
@@ -5113,7 +5114,7 @@ const LeafBounds = {
             }
         }
         else {
-            updateMatrix$1(this);
+            updateMatrix$2(this);
         }
     },
     __updateNaturalSize() {
@@ -5123,11 +5124,11 @@ const LeafBounds = {
     },
     __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);
     }
 };
 
@@ -5232,6 +5233,8 @@ let Leaf = class Leaf {
     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; }
@@ -5673,6 +5676,7 @@ let Branch = class Branch extends Leaf {
     add(child, index) {
         if (child === this)
             return;
+        child.__ || (child = UICreator.get(child.tag, child));
         if (child.parent)
             child.parent.remove(child);
         child.parent = this;
@@ -5695,10 +5699,14 @@ let Branch = class Branch extends Leaf {
     }
     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);
@@ -5916,7 +5924,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.4";
+const version = "1.0.5";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6102,7 +6110,7 @@ class Watcher {
 
 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;
@@ -6270,7 +6278,7 @@ class Layouter {
         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)
@@ -6385,6 +6393,7 @@ class Renderer {
         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);
@@ -6682,7 +6691,7 @@ class Picker {
             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);
                 }
             }
@@ -7392,12 +7401,7 @@ let UI = UI_1 = class UI extends Leaf {
         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;
@@ -7405,9 +7409,8 @@ let UI = UI_1 = class UI extends Leaf {
             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');
@@ -8090,10 +8093,9 @@ Rect = __decorate([
     registerUI()
 ], Rect);
 
-const rect$1 = Rect.prototype;
-const group$1 = Group.prototype;
+const { copy: copy$6, add, includes: includes$1 } = BoundsHelper;
+const rect$1 = Rect.prototype, group$1 = Group.prototype;
 const childrenRenderBounds = {};
-const { copy: copy$6, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -8107,29 +8109,27 @@ let Box = class Box extends Group {
         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 {
                 this.__updateRectBoxBounds();
             }
-            if (data.flow)
-                this.__updateContentBounds();
         }
         else {
             this.__updateRectBoxBounds();
@@ -8195,6 +8195,9 @@ __decorate([
 __decorate([
     dataType(false)
 ], Box.prototype, "resizeChildren", void 0);
+__decorate([
+    dataType(false)
+], Box.prototype, "textBox", void 0);
 __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
@@ -8724,6 +8727,9 @@ __decorate([
 __decorate([
     boundsType('top')
 ], Text.prototype, "verticalAlign", void 0);
+__decorate([
+    boundsType(true)
+], Text.prototype, "autoSizeAlign", void 0);
 __decorate([
     boundsType('normal')
 ], Text.prototype, "textWrap", void 0);
@@ -9444,9 +9450,10 @@ class Dragger {
         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) ? (DragEvent.list || this.dragableList || emptyList) : emptyList;
+        const hasProxyList = proxy && proxy.list.length, dragList = 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;
@@ -9471,8 +9478,8 @@ class Dragger {
             this.dragging = canDrag && PointerButton.left(data);
             if (this.dragging) {
                 this.interaction.emit(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));
             }
         }
     }
@@ -9480,12 +9487,12 @@ class Dragger {
         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;
             }
         }
@@ -9510,7 +9517,7 @@ class Dragger {
     }
     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(DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
@@ -9599,7 +9606,7 @@ class Dragger {
         this.interaction.emit(DragEvent.LEAVE, data, dragEnterPath);
     }
     dragReset() {
-        DragEvent.list = DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
+        DragEvent.list = DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
     }
     checkDragOut(data) {
         const { interaction } = this;
@@ -9740,6 +9747,7 @@ const config$1 = {
     touch: {
         preventDefault: true
     },
+    multiTouch: {},
     cursor: true,
     keyEvent: true
 };
@@ -9866,6 +9874,8 @@ class InteractionBase {
         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));
@@ -10055,7 +10065,7 @@ class InteractionBase {
             data = this.hoverData;
         if (!data)
             return;
-        this.findPath(data, { exclude: this.dragger.getList(), name: PointerEvent.MOVE });
+        this.findPath(data, { exclude: this.dragger.getList(false, true), name: PointerEvent.MOVE });
         this.hoverData = data;
     }
     updateCursor(data) {
@@ -10077,7 +10087,7 @@ class InteractionBase {
         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;
         }
@@ -10259,7 +10269,7 @@ ui$3.__updateHitCanvas = function () {
     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();
@@ -10315,15 +10325,14 @@ ui$3.__hit = function (inner) {
     return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
 };
 
-const ui$2 = new UI();
-const rect = Rect.prototype;
-rect.__updateHitCanvas = function () {
+const ui$2 = UI.prototype, rect = Rect.prototype, box$1 = Box.prototype;
+rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
     if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
         ui$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);
 };
 
@@ -10662,7 +10671,7 @@ const PaintModule = {
     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();
@@ -10702,11 +10711,11 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
             }
         }
     }
-    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;
 }
 
@@ -10822,9 +10831,10 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             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) {
@@ -11436,14 +11446,15 @@ const { trimRight } = TextRowHelper;
 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';
@@ -11525,7 +11536,10 @@ function createRows(drawData, content, style) {
     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();
         });
     }
 }
@@ -11554,12 +11568,18 @@ function addRow() {
         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;
@@ -11631,34 +11651,32 @@ function toChar(data, charX, rowData, isOverflow) {
 
 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)
@@ -11763,14 +11781,14 @@ function getDrawData(content, style) {
     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 },
@@ -11790,22 +11808,20 @@ function getDrawData(content, style) {
     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]);
         }
     }
 }
@@ -12327,31 +12343,29 @@ class Stroker extends UI {
         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);
@@ -12359,7 +12373,7 @@ class Stroker extends UI {
                         typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas);
                 }
             }
-            this.__.strokeWidth = strokeWidth;
+            data.strokeWidth = strokeWidth;
         }
     }
     destroy() {
@@ -12910,7 +12924,6 @@ class EditBox extends Group {
         this.editor = editor;
         this.visible = false;
         this.create();
-        this.rect.syncEventer = editor;
         this.__listenEvents();
     }
     create() {
@@ -12950,8 +12963,11 @@ class EditBox extends Group {
         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;
@@ -13123,6 +13139,11 @@ class EditBox extends Group {
         if (editor.single) {
             const { element } = editor;
             if (element.isBranch) {
+                if (element.textBox) {
+                    const find = element.children.find(item => item.editable && item instanceof Text);
+                    if (find)
+                        return editor.openInnerEditor(find);
+                }
                 editor.openGroup(element);
                 editor.target = editor.selector.findDeepOne(e);
             }
@@ -13268,12 +13289,12 @@ const config = {
     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) {
@@ -13282,6 +13303,7 @@ function onTarget(editor, oldValue) {
         editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
     }
     else {
+        editor.simulateTarget.remove();
         editor.leafList.reset();
         editor.closeInnerEditor();
     }
@@ -13336,7 +13358,7 @@ const EditorHelper = {
         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]);
@@ -13407,17 +13429,77 @@ EditorGroupEvent.UNGROUP = 'editor.ungroup';
 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 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 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) {
@@ -13425,7 +13507,7 @@ class Editor extends Group {
         this.config = DataHelper.clone(config);
         this.leafList = new LeafList();
         this.openedGroupList = new LeafList();
-        this.simulateTarget = new Rect({ visible: false });
+        this.simulateTarget = new SimulateElement(this);
         this.editBox = new EditBox(this);
         this.editToolList = {};
         this.selector = new EditSelect(this);
@@ -13563,18 +13645,18 @@ class Editor extends Group {
         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) }));
@@ -13582,50 +13664,53 @@ class Editor extends Group {
         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);
@@ -13682,11 +13767,11 @@ class Editor extends Group {
         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();
@@ -13738,14 +13823,15 @@ class Editor extends Group {
     }
     listenTargetEvents() {
         if (!this.targetEventIds.length) {
-            const { leafer } = this.list[0];
+            const { app, leafer } = this;
             this.targetEventIds = [
-                this.app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
-                this.app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
-                this.app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
                 leafer.on_(RenderEvent.START, this.update, this),
-                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e); }),
-                leafer.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
+                app.on_(RenderEvent.CHILD_START, this.forceRender, this),
+                app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
+                app.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e); }),
+                app.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
             ];
         }
     }
@@ -13878,10 +13964,7 @@ let EditTool = class EditTool extends InnerEditor {
     }
     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();
@@ -14570,18 +14653,7 @@ let TextEditor = class TextEditor extends InnerEditor {
         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 = [
@@ -14630,16 +14702,46 @@ let TextEditor = class TextEditor extends InnerEditor {
             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;