@leafer-editor/worker 1.0.0 → 1.0.1

package/dist/worker.js

@@ -51,6 +51,8 @@ var LeaferUI = (function (exports) {
     const { round, pow: pow$1, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
+            if (typeof min === 'object')
+                max = min.max, min = min.min;
             if (min !== undefined && value < min)
                 value = min;
             if (max !== undefined && value > max)
@@ -153,10 +155,10 @@ var LeaferUI = (function (exports) {
             t.e += x;
             t.f += y;
         },
-        translateInner(t, x, y, isMoveOrigin) {
+        translateInner(t, x, y, hasOrigin) {
             t.e += t.a * x + t.c * y;
             t.f += t.b * x + t.d * y;
-            if (isMoveOrigin)
+            if (hasOrigin)
                 t.e -= x, t.f -= y;
         },
         scale(t, scaleX, scaleY = scaleX) {
@@ -315,7 +317,7 @@ var LeaferUI = (function (exports) {
                 to.y -= (f * a - e * b) * s;
             }
         },
-        setLayout(t, layout, origin, bcChanged) {
+        setLayout(t, layout, origin, around, bcChanged) {
             const { x, y, scaleX, scaleY } = layout;
             if (bcChanged === undefined)
                 bcChanged = layout.rotation || layout.skewX || layout.skewY;
@@ -347,10 +349,10 @@ var LeaferUI = (function (exports) {
             }
             t.e = x;
             t.f = y;
-            if (origin)
-                M$9.translateInner(t, -origin.x, -origin.y, true);
+            if (origin = origin || around)
+                M$9.translateInner(t, -origin.x, -origin.y, !around);
         },
-        getLayout(t, origin, firstSkewY) {
+        getLayout(t, origin, around, firstSkewY) {
             const { a, b, c, d, e, f } = t;
             let x = e, y = f, scaleX, scaleY, rotation, skewX, skewY;
             if (b || c) {
@@ -379,9 +381,11 @@ var LeaferUI = (function (exports) {
                 scaleY = d;
                 rotation = skewX = skewY = 0;
             }
-            if (origin) {
+            if (origin = around || origin) {
                 x += origin.x * a + origin.y * c;
                 y += origin.x * b + origin.y * d;
+                if (!around)
+                    x -= origin.x, y -= origin.y;
             }
             return { x, y, scaleX, scaleY, rotation, skewX, skewY };
         },
@@ -709,12 +713,12 @@ var LeaferUI = (function (exports) {
         toInnerPoint(outer, to, distance) {
             MatrixHelper.toInnerPoint(this, outer, to, distance);
         }
-        setLayout(data, origin) {
-            MatrixHelper.setLayout(this, data, origin);
+        setLayout(data, origin, around) {
+            MatrixHelper.setLayout(this, data, origin, around);
             return this;
         }
-        getLayout(origin, firstSkewY) {
-            return MatrixHelper.getLayout(this, origin, firstSkewY);
+        getLayout(origin, around, firstSkewY) {
+            return MatrixHelper.getLayout(this, origin, around, firstSkewY);
         }
         withScale(scaleX, scaleY) {
             return MatrixHelper.withScale(this, scaleX, scaleY);
@@ -2002,7 +2006,7 @@ var LeaferUI = (function (exports) {
             DataHelper.copyAttrs(this.size, size, canvasSizeAttrs);
             this.size.pixelRatio || (this.size.pixelRatio = 1);
             this.bounds = new Bounds(0, 0, this.width, this.height);
-            if (!this.unreal) {
+            if (this.context && !this.unreal) {
                 this.updateViewSize();
                 this.smooth = this.config.smooth;
             }
@@ -2175,7 +2179,7 @@ var LeaferUI = (function (exports) {
                 this.manager ? this.manager.recycle(this) : this.destroy();
             }
         }
-        updateRender() { }
+        updateRender(_bounds) { }
         unrealCanvas() { }
         destroy() {
             this.manager = this.view = this.parentView = null;
@@ -4069,8 +4073,13 @@ var LeaferUI = (function (exports) {
         zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
             copy$a(matrix$3, t.__localMatrix);
             scaleOfOuter$2(matrix$3, origin, scaleX, scaleY);
-            moveByMatrix(t, matrix$3);
-            t.scaleResize(scaleX, scaleY, resize !== true);
+            if (t.origin || t.around) {
+                L$3.setTransform(t, matrix$3, resize);
+            }
+            else {
+                moveByMatrix(t, matrix$3);
+                t.scaleResize(scaleX, scaleY, resize !== true);
+            }
         },
         rotateOfWorld(t, origin, angle) {
             L$3.rotateOfLocal(t, getTempLocal(t, origin), angle);
@@ -4078,8 +4087,13 @@ var LeaferUI = (function (exports) {
         rotateOfLocal(t, origin, angle) {
             copy$a(matrix$3, t.__localMatrix);
             rotateOfOuter$2(matrix$3, origin, angle);
-            moveByMatrix(t, matrix$3);
-            t.rotation = MathHelper.formatRotation(t.rotation + angle);
+            if (t.origin || t.around) {
+                L$3.setTransform(t, matrix$3);
+            }
+            else {
+                moveByMatrix(t, matrix$3);
+                t.rotation = MathHelper.formatRotation(t.rotation + angle);
+            }
         },
         skewOfWorld(t, origin, skewX, skewY, resize) {
             L$3.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
@@ -4102,7 +4116,7 @@ var LeaferUI = (function (exports) {
             L$3.setTransform(t, matrix$3, resize);
         },
         setTransform(t, transform, resize) {
-            const layout = getLayout(transform);
+            const layout = getLayout(transform, t.origin && L$3.getInnerOrigin(t, t.origin), t.around && L$3.getInnerOrigin(t, t.around));
             if (resize) {
                 const scaleX = layout.scaleX / t.scaleX;
                 const scaleY = layout.scaleY / t.scaleY;
@@ -4115,13 +4129,19 @@ var LeaferUI = (function (exports) {
                 t.set(layout);
             }
         },
+        getFlipTransform(t, axis) {
+            const m = getMatrixData();
+            const sign = axis === 'x' ? 1 : -1;
+            scaleOfOuter$2(m, L$3.getLocalOrigin(t, 'center'), -1 * sign, 1 * sign);
+            return m;
+        },
         getLocalOrigin(t, origin) {
             return PointHelper.tempToOuterOf(L$3.getInnerOrigin(t, origin), t.localTransform);
         },
         getInnerOrigin(t, origin) {
-            if (typeof origin === 'string')
-                AroundHelper.toPoint(origin, t.boxBounds, origin = {});
-            return origin;
+            const innerOrigin = {};
+            AroundHelper.toPoint(origin, t.boxBounds, innerOrigin);
+            return innerOrigin;
         },
         getRelativeWorld(t, relative, temp) {
             copy$a(matrix$3, t.worldTransform);
@@ -4548,7 +4568,10 @@ var LeaferUI = (function (exports) {
         on(type, listener, options) {
             let capture, once;
             if (options) {
-                if (typeof options === 'boolean') {
+                if (options === 'once') {
+                    once = true;
+                }
+                else if (typeof options === 'boolean') {
                     capture = options;
                 }
                 else {
@@ -4579,7 +4602,7 @@ var LeaferUI = (function (exports) {
                 if (listener) {
                     let capture;
                     if (options)
-                        capture = typeof options === 'boolean' ? options : options.capture;
+                        capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture);
                     let events, index;
                     const map = __getListenerMap(this, capture);
                     typeList.forEach(type => {
@@ -4881,7 +4904,7 @@ var LeaferUI = (function (exports) {
                 const layout = this.__layout, local = this.__local, data = this.__;
                 if (layout.affectScaleOrRotation) {
                     if (layout.scaleChanged || layout.rotationChanged) {
-                        setLayout(local, data, null, layout.affectRotation);
+                        setLayout(local, data, null, null, layout.affectRotation);
                         layout.scaleChanged = layout.rotationChanged = false;
                     }
                 }
@@ -4889,7 +4912,7 @@ var LeaferUI = (function (exports) {
                 local.f = data.y + data.offsetY;
                 if (data.around || data.origin) {
                     toPoint$4(data.around || data.origin, layout.boxBounds, tempPoint$1);
-                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
+                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, !data.around);
                 }
             }
             this.__layout.matrixChanged = false;
@@ -5118,7 +5141,7 @@ var LeaferUI = (function (exports) {
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
     const { copy: copy$7 } = PointHelper;
-    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
+    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
         set tag(_value) { }
@@ -5144,6 +5167,8 @@ var LeaferUI = (function (exports) {
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
         get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
         get pathInputed() { return this.__.__pathInputed; }
+        set event(map) { let event; for (let key in map)
+            event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event); }
         constructor(data) {
             this.innerId = create(LEAF);
             this.reset(data);
@@ -5403,6 +5428,9 @@ var LeaferUI = (function (exports) {
         skewOfWorld(worldOrigin, skewX, skewY, resize) {
             skewOfWorld(this, worldOrigin, skewX, skewY, resize);
         }
+        flip(axis) {
+            transform(this, getFlipTransform(this, axis));
+        }
         scaleResize(scaleX, scaleY = scaleX, _noResize) {
             this.scaleX *= scaleX;
             this.scaleY *= scaleY;
@@ -5760,7 +5788,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.0-rc.30";
+    const version = "1.0.1";
     const inviteCode = {};
 
     class LeaferCanvas extends LeaferCanvasBase {
@@ -5830,7 +5858,7 @@ var LeaferUI = (function (exports) {
     Platform.name = 'web';
     Platform.isWorker = true;
     Platform.requestRender = function (render) { requestAnimationFrame(render); };
-    Platform.devicePixelRatio = 1;
+    defineKey(Platform, 'devicePixelRatio', { get() { return 1; } });
     const { userAgent } = navigator;
     if (userAgent.indexOf("Firefox") > -1) {
         Platform.conicGradientRotate90 = true;
@@ -6326,14 +6354,14 @@ var LeaferUI = (function (exports) {
             if (Debug.showRepaint)
                 this.canvas.strokeWorld(bounds, 'red');
             this.target.__render(this.canvas, options);
-            this.renderBounds = realBounds || bounds;
+            this.renderBounds = realBounds = realBounds || bounds;
             this.renderOptions = options;
-            this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
+            this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
             if (Debug.showHitView)
                 this.renderHitView(options);
             if (Debug.showBoundsView)
                 this.renderBoundsView(options);
-            this.canvas.updateRender();
+            this.canvas.updateRender(realBounds);
         }
         renderHitView(_options) { }
         renderBoundsView(_options) { }
@@ -7655,7 +7683,7 @@ var LeaferUI = (function (exports) {
             this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
             if (this.isApp)
                 this.__setApp();
-            this.__checkAutoLayout(config);
+            this.__checkAutoLayout(config, parentApp);
             this.view = canvas.view;
             if (parentApp) {
                 this.__bindApp(parentApp);
@@ -7756,9 +7784,10 @@ var LeaferUI = (function (exports) {
             this.leafer = leafer;
             this.__level = 1;
         }
-        __checkAutoLayout(config) {
-            if (!config.width || !config.height) {
-                this.autoLayout = new AutoBounds(config);
+        __checkAutoLayout(config, parentApp) {
+            if (!parentApp) {
+                if (!config.width || !config.height)
+                    this.autoLayout = new AutoBounds(config);
                 this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
             }
         }
@@ -7893,7 +7922,9 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             }
         }
-        zoom(_zoomType, _padding, _fixedScale) { return undefined; }
+        zoom(_zoomType, _padding, _fixedScale) {
+            return debug$4.error('need @leafer-in/view');
+        }
         getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
         getValidScale(changeScale) { return changeScale; }
         getWorldPointByClient(clientPoint, updateClient) {
@@ -8420,8 +8451,7 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.canvas) {
                 this.canvas.destroy();
-                this.canvas = null;
-                this.context = null;
+                this.canvas = this.context = null;
             }
             super.destroy();
         }
@@ -8774,11 +8804,13 @@ var LeaferUI = (function (exports) {
                 this.renderer.update();
         }
         __render(canvas, options) {
-            if (options.matrix) {
-                const { a, b, c, d, e, f } = options.matrix;
-                canvas.setTransform(a, b, c, d, e, f);
+            if (canvas.context) {
+                if (options.matrix) {
+                    const { a, b, c, d, e, f } = options.matrix;
+                    canvas.setTransform(a, b, c, d, e, f);
+                }
+                this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
             }
-            this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
         }
         __onResize(event) {
             this.children.forEach(leafer => leafer.resize(event));
@@ -9145,11 +9177,14 @@ var LeaferUI = (function (exports) {
     };
 
     class Transformer {
+        get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
         constructor(interaction) {
             this.interaction = interaction;
         }
         move(data) {
             const { interaction } = this;
+            if (!data.moveType)
+                data.moveType = 'move';
             if (!this.moveData) {
                 const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
                 data.path = path;
@@ -9314,8 +9349,10 @@ var LeaferUI = (function (exports) {
                 return;
             }
             if (!this.moving && canDrag) {
-                if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty)
+                if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) {
+                    this.dragData.moveType = 'drag';
                     interaction.emit(exports.MoveEvent.START, this.dragData);
+                }
             }
             if (!this.moving) {
                 this.dragStart(data, canDrag);
@@ -9354,6 +9391,7 @@ var LeaferUI = (function (exports) {
                 this.dragData.throughPath = throughPath;
             this.dragData.path = path;
             if (this.moving) {
+                this.dragData.moveType = 'drag';
                 interaction.emit(exports.MoveEvent.BEFORE_MOVE, this.dragData);
                 interaction.emit(exports.MoveEvent.MOVE, this.dragData);
             }
@@ -9420,6 +9458,7 @@ var LeaferUI = (function (exports) {
             endDragData.path = path;
             if (this.moving) {
                 this.moving = false;
+                endDragData.moveType = 'drag';
                 interaction.emit(exports.MoveEvent.END, endDragData);
             }
             if (this.dragging) {
@@ -9478,7 +9517,7 @@ var LeaferUI = (function (exports) {
                 totalY += moveY;
                 PointHelper.move(downData, moveX, moveY);
                 PointHelper.move(this.dragData, moveX, moveY);
-                interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY }));
+                interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
                 interaction.pointerMoveReal(data);
             }, 10);
         }
@@ -9598,9 +9637,11 @@ var LeaferUI = (function (exports) {
     const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
     class InteractionBase {
         get dragging() { return this.dragger.dragging; }
+        get transforming() { return this.transformer.transforming; }
         get moveMode() { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+        get canHover() { return this.config.pointer.hover && !this.config.mobile; }
         get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
-        get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.config.pointer.hover && this.downData && this.isTreePath(this.downData); }
+        get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
         get isHoldMiddleKey() { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
         get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
         get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
@@ -9693,6 +9734,7 @@ var LeaferUI = (function (exports) {
             if (!downData)
                 return;
             PointerButton.defaultLeft(data);
+            data.multiTouch = downData.multiTouch;
             this.findPath(data);
             const upData = Object.assign(Object.assign({}, data), { path: data.path.clone() });
             data.path.addList(downData.path.list);
@@ -9765,7 +9807,7 @@ var LeaferUI = (function (exports) {
                 this.updateCursor();
         }
         pointerHover(data) {
-            if (this.config.pointer.hover) {
+            if (this.canHover) {
                 this.pointerOverOrOut(data);
                 this.pointerEnterOrLeave(data);
             }
@@ -9902,7 +9944,7 @@ var LeaferUI = (function (exports) {
             this.hoverData = data;
         }
         updateCursor(data) {
-            if (!this.config.cursor || !this.config.pointer.hover)
+            if (!this.config.cursor || !this.canHover)
                 return;
             if (!data) {
                 this.updateHoverData();
@@ -10790,7 +10832,7 @@ var LeaferUI = (function (exports) {
     const { abs: abs$1 } = Math;
     function checkImage(ui, canvas, paint, allowPaint) {
         const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-        if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+        if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
             return false;
         }
         else {
@@ -11768,7 +11810,10 @@ var LeaferUI = (function (exports) {
                         const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
                         let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
                         const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
+                        let sliceLeaf;
                         if (slice) {
+                            sliceLeaf = leaf;
+                            sliceLeaf.__worldOpacity = 0;
                             leaf = leafer;
                             renderOptions.bounds = canvas.bounds;
                         }
@@ -11783,6 +11828,8 @@ var LeaferUI = (function (exports) {
                             leaf.__render(canvas, renderOptions);
                         }
                         canvas.restore();
+                        if (sliceLeaf)
+                            sliceLeaf.__updateWorldOpacity();
                         if (trim) {
                             trimBounds = getTrimBounds(canvas);
                             const old = canvas, { width, height } = trimBounds;
@@ -12275,7 +12322,7 @@ var LeaferUI = (function (exports) {
         }
         onPointerMove(e) {
             const { app, editor } = this;
-            if (this.running && !this.isMoveMode && app.config.pointer.hover && !app.interaction.dragging) {
+            if (this.running && !this.isMoveMode && app.interaction.canHover && !app.interaction.dragging) {
                 const find = this.findUI(e);
                 editor.hoverTarget = editor.hasItem(find) ? null : find;
             }
@@ -12284,15 +12331,27 @@ var LeaferUI = (function (exports) {
             }
         }
         onBeforeDown(e) {
+            if (e.multiTouch)
+                return;
             const { select } = this.editor.mergeConfig;
-            if (select === 'press')
-                this.checkAndSelect(e);
+            if (select === 'press') {
+                if (this.app.config.mobile) {
+                    this.waitSelect = () => this.checkAndSelect(e);
+                }
+                else {
+                    this.checkAndSelect(e);
+                }
+            }
         }
         onTap(e) {
+            if (e.multiTouch)
+                return;
             const { editor } = this;
             const { select } = editor.mergeConfig;
             if (select === 'tap')
                 this.checkAndSelect(e);
+            else if (this.waitSelect)
+                this.waitSelect();
             if (this.needRemoveItem) {
                 editor.removeItem(this.needRemoveItem);
             }
@@ -12323,6 +12382,10 @@ var LeaferUI = (function (exports) {
             }
         }
         onDragStart(e) {
+            if (e.multiTouch)
+                return;
+            if (this.waitSelect)
+                this.waitSelect();
             if (this.allowDrag(e)) {
                 const { editor } = this;
                 const { stroke, area } = editor.mergeConfig;
@@ -12334,10 +12397,10 @@ var LeaferUI = (function (exports) {
             }
         }
         onDrag(e) {
-            if (this.editor.dragging) {
-                this.onDragEnd();
+            if (e.multiTouch)
                 return;
-            }
+            if (this.editor.dragging)
+                return this.onDragEnd(e);
             if (this.dragging) {
                 const { editor } = this;
                 const total = e.getInnerTotal(this);
@@ -12361,7 +12424,9 @@ var LeaferUI = (function (exports) {
                 }
             }
         }
-        onDragEnd() {
+        onDragEnd(e) {
+            if (e.multiTouch)
+                return;
             if (this.dragging)
                 this.originList = null, this.selectArea.visible = false;
         }
@@ -12407,7 +12472,7 @@ var LeaferUI = (function (exports) {
                     app.on_(exports.PointerEvent.MOVE, this.onPointerMove, this),
                     app.on_(exports.PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
                     app.on_(exports.PointerEvent.TAP, this.onTap, this),
-                    app.on_(exports.DragEvent.START, this.onDragStart, this),
+                    app.on_(exports.DragEvent.START, this.onDragStart, this, true),
                     app.on_(exports.DragEvent.DRAG, this.onDrag, this),
                     app.on_(exports.DragEvent.END, this.onDragEnd, this),
                     app.on_(exports.MoveEvent.MOVE, this.onAutoMove, this),
@@ -12430,22 +12495,32 @@ var LeaferUI = (function (exports) {
 
     const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = exports.Direction9;
     const { toPoint } = AroundHelper;
+    const { within } = MathHelper;
     const EditDataHelper = {
-        getScaleData(bounds, direction, pointMove, lockRatio, around) {
+        getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { width, height } = bounds;
+            const { boxBounds, widthRange, heightRange } = element;
+            const { width, height } = startBounds;
             if (around) {
-                pointMove.x *= 2;
-                pointMove.y *= 2;
-            }
-            if (Math.abs(pointMove.x) === width)
-                pointMove.x += 0.1;
-            if (Math.abs(pointMove.y) === height)
-                pointMove.y += 0.1;
-            const topScale = (-pointMove.y + height) / height;
-            const rightScale = (pointMove.x + width) / width;
-            const bottomScale = (pointMove.y + height) / height;
-            const leftScale = (-pointMove.x + width) / width;
+                totalMove.x *= 2;
+                totalMove.y *= 2;
+            }
+            const originChangedScaleX = element.scaleX / startBounds.scaleX;
+            const originChangedScaleY = element.scaleY / startBounds.scaleY;
+            const signX = originChangedScaleX < 0 ? -1 : 1;
+            const signY = originChangedScaleY < 0 ? -1 : 1;
+            const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
+            const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
+            totalMove.x *= scaleMode ? originChangedScaleX : signX;
+            totalMove.y *= scaleMode ? originChangedScaleY : signY;
+            if (Math.abs(totalMove.x) === width)
+                totalMove.x += 0.1;
+            if (Math.abs(totalMove.y) === height)
+                totalMove.y += 0.1;
+            const topScale = (-totalMove.y + height) / height;
+            const rightScale = (totalMove.x + width) / width;
+            const bottomScale = (totalMove.y + height) / height;
+            const leftScale = (-totalMove.x + width) / width;
             switch (direction) {
                 case top:
                     scaleY = topScale;
@@ -12491,7 +12566,24 @@ var LeaferUI = (function (exports) {
                     scaleY = scaleY < 0 ? -scale : scale;
                 }
             }
-            toPoint(around || align, bounds, origin);
+            scaleX /= changedScaleX;
+            scaleY /= changedScaleY;
+            if (!flipable) {
+                const { worldTransform } = element;
+                if (scaleX < 0)
+                    scaleX = 1 / boxBounds.width / worldTransform.scaleX;
+                if (scaleY < 0)
+                    scaleY = 1 / boxBounds.height / worldTransform.scaleY;
+            }
+            if (widthRange) {
+                const nowWidth = boxBounds.width * element.scaleX;
+                scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
+            }
+            if (heightRange) {
+                const nowHeight = boxBounds.height * element.scaleY;
+                scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
+            }
+            toPoint(around || align, boxBounds, origin);
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
         getRotateData(bounds, direction, current, last, around) {
@@ -12612,6 +12704,11 @@ var LeaferUI = (function (exports) {
             return;
         if (point.name === 'circle')
             return;
+        if (point.pointType === 'button') {
+            if (!point.cursor)
+                point.cursor = 'pointer';
+            return;
+        }
         let { rotation } = editBox;
         const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
         const { pointType } = point, { flippedX, flippedY } = editBox;
@@ -12680,9 +12777,8 @@ var LeaferUI = (function (exports) {
                 resizePoints.push(resizePoint);
                 this.listenPointEvents(resizePoint, 'resize', i);
             }
-            buttons.add(circle);
             this.listenPointEvents(circle, 'rotate', 2);
-            view.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints);
+            view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
             this.add(view);
         }
         load() {
@@ -12698,9 +12794,9 @@ var LeaferUI = (function (exports) {
                 if (!(i % 2))
                     resizeP.rotation = (i / 2) * 90;
             }
-            circle.set(this.getPointStyle(mergeConfig.rotatePoint || pointsStyle[0]));
+            circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
             rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
-            rect.hittable = !single && moveable;
+            rect.hittable = !single && !!moveable;
             element.syncEventer = (single && moveable) ? rect : null;
             this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null;
         }
@@ -12709,7 +12805,7 @@ var LeaferUI = (function (exports) {
             if (this.view.worldOpacity) {
                 const { mergeConfig } = this.editor;
                 const { width, height } = bounds;
-                const { rect, circle, resizePoints, rotatePoints, resizeLines } = this;
+                const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
                 const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig;
                 const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
                 const showPoints = !(hideOnSmall && width < smallSize && height < smallSize);
@@ -12739,19 +12835,25 @@ var LeaferUI = (function (exports) {
                         }
                     }
                 }
-                circle.visible = showPoints && rotateable && !!mergeConfig.rotatePoint;
+                circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
+                if (circle.visible)
+                    this.layoutCircle(mergeConfig);
                 if (rect.path)
                     rect.path = null;
                 rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
-                const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1);
-                this.buttons.visible = buttonVisible;
-                if (buttonVisible)
-                    this.layoutButtons();
+                buttons.visible = showPoints && buttons.children.length > 0;
+                if (buttons.visible)
+                    this.layoutButtons(mergeConfig);
             }
         }
-        layoutButtons() {
-            const { buttons, resizePoints } = this;
-            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.mergeConfig;
+        layoutCircle(config) {
+            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
+            const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
+            this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
+        }
+        layoutButtons(config) {
+            const { buttons } = this;
+            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config;
             const { flippedX, flippedY } = this;
             let index = fourDirection.indexOf(buttonsDirection);
             if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -12759,11 +12861,18 @@ var LeaferUI = (function (exports) {
                     index = (index + 2) % 4;
             }
             const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index;
-            const point = resizePoints[direction * 2 + 1];
+            this.setButtonPosition(buttons, direction, buttonsMargin, !!middlePoint);
+            if (buttonsFixed)
+                buttons.rotation = (direction - index) * 90;
+            buttons.scaleX = flippedX ? -1 : 1;
+            buttons.scaleY = flippedY ? -1 : 1;
+        }
+        setButtonPosition(buttons, direction, buttonsMargin, useMiddlePoint) {
+            const point = this.resizePoints[direction * 2 + 1];
             const useX = direction % 2;
             const sign = (!direction || direction === 3) ? -1 : 1;
-            const useWidth = index % 2;
-            const margin = (buttonsMargin + (useWidth ? ((middlePoint ? point.width : 0) + buttons.boxBounds.width) : ((middlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign;
+            const useWidth = direction % 2;
+            const margin = (buttonsMargin + (useWidth ? ((useMiddlePoint ? point.width : 0) + buttons.boxBounds.width) : ((useMiddlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign;
             if (useX) {
                 buttons.x = point.x + margin;
                 buttons.y = point.y;
@@ -12772,11 +12881,6 @@ var LeaferUI = (function (exports) {
                 buttons.x = point.x;
                 buttons.y = point.y + margin;
             }
-            if (buttonsFixed) {
-                buttons.rotation = (direction - index) * 90;
-                buttons.scaleX = flippedX ? -1 : 1;
-                buttons.scaleY = flippedY ? -1 : 1;
-            }
         }
         unload() {
             this.visible = false;
@@ -12803,12 +12907,15 @@ var LeaferUI = (function (exports) {
         }
         onDragStart(e) {
             this.dragging = true;
+            const { editor } = this;
             if (e.current.name === 'rect') {
-                const { editor } = this;
                 this.moving = true;
                 editor.dragStartPoint = { x: editor.element.x, y: editor.element.y };
                 editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
             }
+            else if (e.current.pointType === 'resize') {
+                editor.dragStartBounds = Object.assign({}, editor.element.getLayoutBounds('box', 'local'));
+            }
         }
         onDragEnd(e) {
             this.dragging = false;
@@ -12823,7 +12930,7 @@ var LeaferUI = (function (exports) {
                 if (editor.mergeConfig.rotateable)
                     editor.onRotate(e);
             }
-            else {
+            else if (point.pointType === 'resize') {
                 editor.onScale(e);
             }
             updateCursor(editor, e);
@@ -12887,8 +12994,6 @@ var LeaferUI = (function (exports) {
                 rect.on_(exports.DragEvent.START, this.onDragStart, this),
                 rect.on_(exports.DragEvent.DRAG, editor.onMove, editor),
                 rect.on_(exports.DragEvent.END, this.onDragEnd, this),
-                rect.on_(exports.ZoomEvent.BEFORE_ZOOM, editor.onScale, editor, true),
-                rect.on_(exports.RotateEvent.BEFORE_ROTATE, editor.onRotate, editor, true),
                 rect.on_(exports.PointerEvent.ENTER, () => updateMoveCursor(editor)),
                 rect.on_(exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
                 rect.on_(exports.PointerEvent.LONG_PRESS, this.onLongPress, this)
@@ -12918,7 +13023,7 @@ var LeaferUI = (function (exports) {
                 const { rect } = editor.editBox;
                 const { width, height } = rect.__;
                 canvas.resetTransform();
-                canvas.fillWorld(canvas.bounds, mask);
+                canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
                 canvas.setWorld(rect.__world, options.matrix);
                 canvas.clearRect(0, 0, width, height);
             }
@@ -13003,6 +13108,7 @@ ${filterStyle}
         boxSelect: true,
         moveable: true,
         resizeable: true,
+        flipable: true,
         rotateable: true,
         skewable: true
     };
@@ -13224,29 +13330,39 @@ ${filterStyle}
             return this.mergeConfig.editSize;
         }
         onMove(e) {
-            const total = { x: e.totalX, y: e.totalY };
-            if (e.shiftKey) {
-                if (Math.abs(total.x) > Math.abs(total.y))
-                    total.y = 0;
-                else
-                    total.x = 0;
+            if (e instanceof exports.MoveEvent) {
+                if (e.moveType !== 'drag') {
+                    const { moveable, resizeable } = this.mergeConfig;
+                    const move = e.getLocalMove(this.element);
+                    if (moveable === 'move')
+                        e.stop(), this.move(move.x, move.y);
+                    else if (resizeable === 'zoom')
+                        e.stop();
+                }
+            }
+            else {
+                const total = { x: e.totalX, y: e.totalY };
+                if (e.shiftKey) {
+                    if (Math.abs(total.x) > Math.abs(total.y))
+                        total.y = 0;
+                    else
+                        total.x = 0;
+                }
+                this.move(exports.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
             }
-            this.move(exports.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
         }
         onScale(e) {
             const { element } = this;
+            let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
             if (e instanceof exports.ZoomEvent) {
-                if (this.mergeConfig.resizeable === 'zoom') {
-                    e.stop();
-                    this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
-                }
+                if (resizeable === 'zoom')
+                    e.stop(), this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
             }
             else {
                 const { direction } = e.current;
-                let { around, lockRatio } = this.mergeConfig;
                 if (e.shiftKey || element.lockRatio)
                     lockRatio = true;
-                const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey));
+                const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
                 if (this.editTool.onScaleWithDrag) {
                     data.drag = e;
                     this.scaleWithDrag(data);
@@ -13257,23 +13373,21 @@ ${filterStyle}
             }
         }
         onRotate(e) {
-            const { skewable, around, rotateGap } = this.mergeConfig;
+            const { skewable, rotateable, around, rotateGap } = this.mergeConfig;
             const { direction, name } = e.current;
             if (skewable && name === 'resize-line')
                 return this.onSkew(e);
             const { element } = this;
             let origin, rotation;
             if (e instanceof exports.RotateEvent) {
-                if (this.mergeConfig.rotateable === 'rotate') {
-                    e.stop();
-                    rotation = e.rotation, origin = element.getInnerPoint(e);
-                }
+                if (rotateable === 'rotate')
+                    e.stop(), rotation = e.rotation, origin = element.getInnerPoint(e);
                 else
                     return;
             }
             else {
                 const last = { x: e.x - e.moveX, y: e.y - e.moveY };
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'));
+                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
                 rotation = data.rotation;
                 origin = data.origin;
             }
@@ -13307,8 +13421,7 @@ ${filterStyle}
             if (!this.mergeConfig.resizeable || this.element.locked)
                 return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(data.origin);
-            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin }));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }));
             this.editTool.onScaleWithDrag(event);
             this.emitEvent(event);
         }
@@ -13316,28 +13429,28 @@ ${filterStyle}
             if (!this.mergeConfig.resizeable || this.element.locked)
                 return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin));
-            let transform;
-            if (this.multiple) {
-                const oldMatrix = new Matrix(element.worldTransform);
-                element.scaleOf(origin, scaleX, scaleY);
-                transform = new Matrix(element.worldTransform).divide(oldMatrix);
-            }
+            const worldOrigin = this.getWorldOrigin(origin);
+            const transform = this.multiple && this.getChangedTransform(() => 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)
+                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 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)
                 return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin));
-            let transform;
-            if (this.multiple) {
-                const oldMatrix = new Matrix(element.worldTransform);
-                element.rotateOf(origin, rotation);
-                transform = new Matrix(element.worldTransform).divide(oldMatrix);
-            }
+            const worldOrigin = this.getWorldOrigin(origin);
+            const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform });
             this.editTool.onRotate(event);
             this.emitEvent(event);
@@ -13346,19 +13459,21 @@ ${filterStyle}
             if (!this.mergeConfig.skewable || this.element.locked)
                 return;
             const { element } = this;
-            const worldOrigin = element.getWorldPoint(LeafHelper.getInnerOrigin(element, origin));
-            let transform;
-            if (this.multiple) {
-                const oldMatrix = new Matrix(element.worldTransform);
-                element.skewOf(origin, skewX, skewY);
-                transform = new Matrix(element.worldTransform).divide(oldMatrix);
-            }
-            const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
-                target: element, editor: this, skewX, skewY, transform, worldOrigin
-            });
+            const worldOrigin = this.getWorldOrigin(origin);
+            const transform = this.multiple && this.getChangedTransform(() => 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);
         }
+        getWorldOrigin(origin) {
+            return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin));
+        }
+        getChangedTransform(func) {
+            const { element } = this;
+            const oldMatrix = new Matrix(element.worldTransform);
+            func();
+            return new Matrix(element.worldTransform).divide(oldMatrix);
+        }
         group(userGroup) {
             if (this.multiple) {
                 this.target = EditorHelper.group(this.list, this.element, userGroup);
@@ -13469,6 +13584,9 @@ ${filterStyle}
             if (!this.targetEventIds.length) {
                 const { leafer } = this.list[0];
                 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)
@@ -14192,6 +14310,169 @@ ${filterStyle}
 
     Object.assign(PathArrow, PathArrowModule);
 
+    const textCaseMap = {
+        'none': 'none',
+        'title': 'capitalize',
+        'upper': 'uppercase',
+        'lower': 'lowercase',
+        'small-caps': 'small-caps'
+    };
+    const verticalAlignMap = {
+        'top': 'flex-start',
+        'middle': 'center',
+        'bottom': 'flex-end'
+    };
+    function updateStyle(textDom, text, textScale) {
+        const { style } = textDom;
+        const { fill, padding, textWrap, textOverflow, textDecoration } = text;
+        style.fontFamily = text.fontFamily;
+        style.fontSize = text.fontSize * textScale + 'px';
+        setFill(style, fill);
+        style.fontStyle = text.italic ? 'italic' : 'normal';
+        style.fontWeight = text.fontWeight;
+        style.textDecoration = textDecoration === 'delete' ? 'line-through' : textDecoration;
+        style.textTransform = textCaseMap[text.textCase];
+        style.textAlign = text.textAlign;
+        style.display = 'flex';
+        style.flexDirection = 'column';
+        style.justifyContent = verticalAlignMap[text.verticalAlign];
+        style.lineHeight = (text.__.__lineHeight || 0) * textScale + 'px';
+        style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + 'px';
+        if (textWrap === 'none') {
+            style.whiteSpace = 'nowrap';
+        }
+        else if (textWrap === 'break') {
+            style.wordBreak = 'break-all';
+        }
+        style.textIndent = (text.paraIndent || 0) * textScale + 'px';
+        style.padding = padding instanceof Array ? padding.map(item => item * textScale + 'px').join(' ') : (padding || 0) * textScale + 'px';
+        style.textOverflow = textOverflow === 'show' ? '' : (textOverflow === 'hide' ? 'clip' : textOverflow);
+    }
+    function setFill(style, fill) {
+        let color = 'black';
+        if (fill instanceof Array)
+            fill = fill[0];
+        if (typeof fill === 'object') {
+            switch (fill.type) {
+                case 'solid':
+                    color = ColorConvert.string(fill.color);
+                    break;
+                case 'image':
+                    break;
+                case 'linear':
+                case 'radial':
+                case 'angular':
+                    const stop = fill.stops[0];
+                    color = ColorConvert.string(typeof stop === 'string' ? stop : stop.color);
+                    break;
+                default:
+                    if (fill.r !== undefined)
+                        color = ColorConvert.string(fill);
+            }
+        }
+        else {
+            color = fill;
+        }
+        style.color = color;
+    }
+
+    exports.TextEditor = class TextEditor extends InnerEditor {
+        constructor() {
+            super(...arguments);
+            this.config = {
+                selectAll: true
+            };
+            this.eventIds = [];
+        }
+        get tag() { return 'TextEditor'; }
+        onLoad() {
+            const { editor } = this;
+            const { config } = editor.app;
+            this._keyEvent = config.keyEvent;
+            config.keyEvent = false;
+            const text = this.editTarget;
+            text.visible = false;
+            const div = this.editDom = document.createElement('div');
+            const { style } = div;
+            div.contentEditable = 'true';
+            div.innerText = text.text;
+            style.position = 'fixed';
+            style.transformOrigin = 'left top';
+            style.boxSizing = 'border-box';
+            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;
+            editor.app.view.appendChild(div);
+            this.eventIds = [
+                editor.app.on_(exports.PointerEvent.DOWN, (e) => { if (e.origin.target !== div)
+                    editor.closeInnerEditor(); })
+            ];
+            this.onFocus = this.onFocus.bind(this);
+            this.onInput = this.onInput.bind(this);
+            this.onUpdate = this.onUpdate.bind(this);
+            this.onEscape = this.onEscape.bind(this);
+            div.addEventListener("focus", this.onFocus);
+            div.addEventListener("input", this.onInput);
+            window.addEventListener('keydown', this.onEscape);
+            window.addEventListener('scroll', this.onUpdate);
+            const selection = window.getSelection();
+            const range = document.createRange();
+            if (this.config.selectAll) {
+                range.selectNodeContents(div);
+            }
+            else {
+                const node = div.childNodes[0];
+                range.setStartAfter(node);
+                range.setEndAfter(node);
+                range.collapse(true);
+            }
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        onInput() {
+            this.editTarget.text = this.editDom.innerText.replace(/\n\n/, '\n');
+        }
+        onFocus() {
+            this.editDom.style.outline = 'none';
+        }
+        onEscape(e) {
+            if (e.code === 'Escape')
+                this.editor.closeInnerEditor();
+        }
+        onUpdate() {
+            const { editTarget: text, textScale } = this;
+            const { style } = this.editDom;
+            const { x, y } = text.app.tree.clientBounds;
+            const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale);
+            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';
+            updateStyle(this.editDom, text, this.textScale);
+        }
+        onUnload() {
+            const { editTarget: text, editor, editDom: dom } = this;
+            if (text) {
+                this.onInput();
+                text.visible = true;
+                editor.app.config.keyEvent = this._keyEvent;
+                editor.off_(this.eventIds);
+                dom.removeEventListener("focus", this.onFocus);
+                dom.removeEventListener("input", this.onInput);
+                window.removeEventListener('keydown', this.onEscape);
+                window.removeEventListener('scroll', this.onUpdate);
+                dom.remove();
+                this.editDom = this.eventIds = undefined;
+            }
+        }
+    };
+    exports.TextEditor = __decorate([
+        registerInnerEditor()
+    ], exports.TextEditor);
+
     class HTMLTextData extends ImageData {
         setText(value) {
             this._text = value;