@leafer-editor/worker 1.0.0 → 1.0.2

package/dist/worker.module.js

@@ -48,6 +48,8 @@ const I$2 = IncrementId;
 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)
@@ -109,6 +111,19 @@ const MathHelper = {
         const a = maxLength ? pow$1(10, maxLength) : 1000000000000;
         num = round(num * a) / a;
         return num === -0 ? 0 : num;
+    },
+    getScaleData(scale, size, originSize, scaleData) {
+        if (!scaleData)
+            scaleData = {};
+        if (size) {
+            scaleData.scaleX = (typeof size === 'number' ? size : size.width) / originSize.width;
+            scaleData.scaleY = (typeof size === 'number' ? size : size.height) / originSize.height;
+        }
+        else if (scale) {
+            scaleData.scaleX = typeof scale === 'number' ? scale : scale.x;
+            scaleData.scaleY = typeof scale === 'number' ? scale : scale.y;
+        }
+        return scaleData;
     }
 };
 const OneRadian = PI$4 / 180;
@@ -150,10 +165,10 @@ const MatrixHelper = {
         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) {
@@ -312,7 +327,7 @@ const MatrixHelper = {
             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;
@@ -344,10 +359,10 @@ const MatrixHelper = {
         }
         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) {
@@ -376,9 +391,11 @@ const MatrixHelper = {
             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 };
     },
@@ -405,7 +422,7 @@ const MatrixHelper = {
 };
 const M$9 = MatrixHelper;
 
-const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$2 } = MatrixHelper;
+const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
 const { sin: sin$4, cos: cos$4, abs: abs$5, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
 const PointHelper = {
     defaultPoint: getPointData(),
@@ -461,7 +478,7 @@ const PointHelper = {
     tempToOuterOf(t, matrix) {
         const { tempPoint: temp } = P$7;
         copy$e(temp, t);
-        toOuterPoint$2(matrix, temp, temp);
+        toOuterPoint$3(matrix, temp, temp);
         return temp;
     },
     tempToInnerRadiusPointOf(t, matrix) {
@@ -480,7 +497,7 @@ const PointHelper = {
         toInnerPoint$2(matrix, t, to);
     },
     toOuterOf(t, matrix, to) {
-        toOuterPoint$2(matrix, t, to);
+        toOuterPoint$3(matrix, t, to);
     },
     getCenter(t, to) {
         return { x: t.x + (to.x - t.x) / 2, y: t.y + (to.y - t.y) / 2 };
@@ -706,12 +723,12 @@ class Matrix {
     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);
@@ -760,10 +777,10 @@ const TwoPointBoundsHelper = {
 const { addPoint: addPoint$4 } = TwoPointBoundsHelper;
 
 const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$5, addPoint: addPoint$3, toBounds: toBounds$4 } = TwoPointBoundsHelper;
-const { toOuterPoint: toOuterPoint$1 } = MatrixHelper;
+const { toOuterPoint: toOuterPoint$2 } = MatrixHelper;
 const { float, fourNumber } = MathHelper;
 const { floor, ceil: ceil$2 } = Math;
-let right$3, bottom$2, boundsRight, boundsBottom;
+let right$4, bottom$3, boundsRight, boundsBottom;
 const point$1 = {};
 const toPoint$6 = {};
 const BoundsHelper = {
@@ -780,17 +797,24 @@ const BoundsHelper = {
         t.width = bounds.width;
         t.height = bounds.height;
     },
-    copyAndSpread(t, bounds, spread, isShrink) {
+    copyAndSpread(t, bounds, spread, isShrink, side) {
+        const { x, y, width, height } = bounds;
         if (spread instanceof Array) {
             const four = fourNumber(spread);
             isShrink
-                ? B.set(t, bounds.x + four[3], bounds.y + four[0], bounds.width - four[1] - four[3], bounds.height - four[2] - four[0])
-                : B.set(t, bounds.x - four[3], bounds.y - four[0], bounds.width + four[1] + four[3], bounds.height + four[2] + four[0]);
+                ? B.set(t, x + four[3], y + four[0], width - four[1] - four[3], height - four[2] - four[0])
+                : B.set(t, x - four[3], y - four[0], width + four[1] + four[3], height + four[2] + four[0]);
         }
         else {
             if (isShrink)
                 spread = -spread;
-            B.set(t, bounds.x - spread, bounds.y - spread, bounds.width + spread * 2, bounds.height + spread * 2);
+            B.set(t, x - spread, y - spread, width + spread * 2, height + spread * 2);
+        }
+        if (side) {
+            if (side === 'width')
+                t.y = y, t.height = height;
+            else
+                t.x = x, t.width = width;
         }
     },
     minX(t) { return t.width > 0 ? t.x : t.x + t.width; },
@@ -867,16 +891,16 @@ const BoundsHelper = {
         else {
             point$1.x = t.x;
             point$1.y = t.y;
-            toOuterPoint$1(matrix, point$1, toPoint$6);
+            toOuterPoint$2(matrix, point$1, toPoint$6);
             setPoint$5(tempPointBounds$1, toPoint$6.x, toPoint$6.y);
             point$1.x = t.x + t.width;
-            toOuterPoint$1(matrix, point$1, toPoint$6);
+            toOuterPoint$2(matrix, point$1, toPoint$6);
             addPoint$3(tempPointBounds$1, toPoint$6.x, toPoint$6.y);
             point$1.y = t.y + t.height;
-            toOuterPoint$1(matrix, point$1, toPoint$6);
+            toOuterPoint$2(matrix, point$1, toPoint$6);
             addPoint$3(tempPointBounds$1, toPoint$6.x, toPoint$6.y);
             point$1.x = t.x;
-            toOuterPoint$1(matrix, point$1, toPoint$6);
+            toOuterPoint$2(matrix, point$1, toPoint$6);
             addPoint$3(tempPointBounds$1, toPoint$6.x, toPoint$6.y);
             toBounds$4(tempPointBounds$1, to);
         }
@@ -890,16 +914,16 @@ const BoundsHelper = {
         const scale = Math.min(baseScale, Math.min(t.width / put.width, t.height / put.height));
         return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
     },
-    getSpread(t, spread) {
+    getSpread(t, spread, side) {
         const n = {};
-        B.copyAndSpread(n, t, spread);
+        B.copyAndSpread(n, t, spread, false, side);
         return n;
     },
-    spread(t, spread) {
-        B.copyAndSpread(t, t, spread);
+    spread(t, spread, side) {
+        B.copyAndSpread(t, t, spread, false, side);
     },
-    shrink(t, shrink) {
-        B.copyAndSpread(t, t, shrink, true);
+    shrink(t, shrink, side) {
+        B.copyAndSpread(t, t, shrink, true, side);
     },
     ceil(t) {
         const { x, y } = t;
@@ -925,20 +949,20 @@ const BoundsHelper = {
         t.height = float(t.height, maxLength);
     },
     add(t, bounds, isPoint) {
-        right$3 = t.x + t.width;
-        bottom$2 = t.y + t.height;
+        right$4 = t.x + t.width;
+        bottom$3 = t.y + t.height;
         boundsRight = bounds.x;
         boundsBottom = bounds.y;
         if (!isPoint) {
             boundsRight += bounds.width;
             boundsBottom += bounds.height;
         }
-        right$3 = right$3 > boundsRight ? right$3 : boundsRight;
-        bottom$2 = bottom$2 > boundsBottom ? bottom$2 : boundsBottom;
+        right$4 = right$4 > boundsRight ? right$4 : boundsRight;
+        bottom$3 = bottom$3 > boundsBottom ? bottom$3 : boundsBottom;
         t.x = t.x < bounds.x ? t.x : bounds.x;
         t.y = t.y < bounds.y ? t.y : bounds.y;
-        t.width = right$3 - t.x;
-        t.height = bottom$2 - t.y;
+        t.width = right$4 - t.x;
+        t.height = bottom$3 - t.y;
     },
     addList(t, list) {
         B.setListWithFn(t, list, undefined, true);
@@ -1012,16 +1036,16 @@ const BoundsHelper = {
         if (!B.hit(t, other))
             return getBoundsData();
         let { x, y, width, height } = other;
-        right$3 = x + width;
-        bottom$2 = y + height;
+        right$4 = x + width;
+        bottom$3 = y + height;
         boundsRight = t.x + t.width;
         boundsBottom = t.y + t.height;
         x = x > t.x ? x : t.x;
         y = y > t.y ? y : t.y;
-        right$3 = right$3 < boundsRight ? right$3 : boundsRight;
-        bottom$2 = bottom$2 < boundsBottom ? bottom$2 : boundsBottom;
-        width = right$3 - x;
-        height = bottom$2 - y;
+        right$4 = right$4 < boundsRight ? right$4 : boundsRight;
+        bottom$3 = bottom$3 < boundsBottom ? bottom$3 : boundsBottom;
+        width = right$4 - x;
+        height = bottom$3 - y;
         return { x, y, width, height };
     },
     intersect(t, other, otherMatrix) {
@@ -1082,12 +1106,12 @@ class Bounds {
     getFitMatrix(put, baseScale) {
         return BoundsHelper.getFitMatrix(this, put, baseScale);
     }
-    spread(fourNumber) {
-        BoundsHelper.spread(this, fourNumber);
+    spread(fourNumber, side) {
+        BoundsHelper.spread(this, fourNumber, side);
         return this;
     }
-    shrink(fourNumber) {
-        BoundsHelper.shrink(this, fourNumber);
+    shrink(fourNumber, side) {
+        BoundsHelper.shrink(this, fourNumber, side);
         return this;
     }
     ceil() {
@@ -1999,7 +2023,7 @@ class LeaferCanvasBase extends Canvas$1 {
         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;
         }
@@ -2172,7 +2196,7 @@ class LeaferCanvasBase extends Canvas$1 {
             this.manager ? this.manager.recycle(this) : this.destroy();
         }
     }
-    updateRender() { }
+    updateRender(_bounds) { }
     unrealCanvas() { }
     destroy() {
         this.manager = this.view = this.parentView = null;
@@ -2904,60 +2928,75 @@ class PathCreator {
     }
     beginPath() {
         beginPath(this.__path);
+        this.paint();
         return this;
     }
     moveTo(x, y) {
         moveTo$4(this.__path, x, y);
+        this.paint();
         return this;
     }
     lineTo(x, y) {
         lineTo$3(this.__path, x, y);
+        this.paint();
         return this;
     }
     bezierCurveTo(x1, y1, x2, y2, x, y) {
         bezierCurveTo(this.__path, x1, y1, x2, y2, x, y);
+        this.paint();
         return this;
     }
     quadraticCurveTo(x1, y1, x, y) {
         quadraticCurveTo(this.__path, x1, y1, x, y);
+        this.paint();
         return this;
     }
     closePath() {
         closePath$3(this.__path);
+        this.paint();
         return this;
     }
     rect(x, y, width, height) {
         rect$2(this.__path, x, y, width, height);
+        this.paint();
         return this;
     }
     roundRect(x, y, width, height, cornerRadius) {
         roundRect$1(this.__path, x, y, width, height, cornerRadius);
+        this.paint();
         return this;
     }
     ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         ellipse$2(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     arc(x, y, radius, startAngle, endAngle, anticlockwise) {
         arc$1(this.__path, x, y, radius, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     arcTo(x1, y1, x2, y2, radius) {
         arcTo$2(this.__path, x1, y1, x2, y2, radius);
+        this.paint();
         return this;
     }
     drawEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         drawEllipse(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     drawArc(x, y, radius, startAngle, endAngle, anticlockwise) {
         drawArc(this.__path, x, y, radius, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     drawPoints(points, curve, close) {
         drawPoints$2(this.__path, points, curve, close);
+        this.paint();
         return this;
     }
+    paint() { }
 }
 
 const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$4, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3 } = PathCommandMap;
@@ -3979,7 +4018,7 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$a, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const { copy: copy$a, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
 const matrix$3 = {};
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4044,10 +4083,9 @@ const LeafHelper = {
         }
         return true;
     },
-    moveWorld(t, x, y = 0) {
+    moveWorld(t, x, y = 0, isInnerPoint) {
         const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
-        if (t.parent)
-            toInnerPoint$1(t.parent.worldTransform, local, local, true);
+        isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
         L$3.moveLocal(t, local.x, local.y);
     },
     moveLocal(t, x, y = 0) {
@@ -4066,8 +4104,13 @@ const LeafHelper = {
     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);
@@ -4075,8 +4118,13 @@ const LeafHelper = {
     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);
@@ -4099,7 +4147,7 @@ const LeafHelper = {
         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;
@@ -4112,13 +4160,19 @@ const LeafHelper = {
             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);
@@ -4545,7 +4599,10 @@ const LeafEventer = {
     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 {
@@ -4576,7 +4633,7 @@ const LeafEventer = {
             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 => {
@@ -4878,7 +4935,7 @@ const LeafMatrix = {
             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;
                 }
             }
@@ -4886,7 +4943,7 @@ const LeafMatrix = {
             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;
@@ -4895,7 +4952,7 @@ const LeafMatrix = {
 
 const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
 const { updateBounds: updateBounds$1 } = BranchHelper;
-const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$8 } = BoundsHelper;
+const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$8 } = BoundsHelper;
 const { toBounds: toBounds$2 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
@@ -4996,7 +5053,7 @@ const LeafBounds = {
                 updateAllMatrix$2(this);
                 updateBounds$1(this, this);
                 if (this.__.__autoSide)
-                    this.__updateBoxBounds();
+                    this.__updateBoxBounds(true);
             }
             else {
                 updateAllMatrix$2(this);
@@ -5014,11 +5071,11 @@ const LeafBounds = {
     },
     __updateStrokeBounds() {
         const layout = this.__layout;
-        copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+        copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds() {
         const layout = this.__layout;
-        layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$8(layout.renderBounds, layout.strokeBounds);
+        layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$8(layout.renderBounds, layout.strokeBounds);
     }
 };
 
@@ -5115,7 +5172,7 @@ const { LEAF, create } = IncrementId;
 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;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
     set tag(_value) { }
@@ -5141,6 +5198,8 @@ let Leaf = class Leaf {
     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);
@@ -5376,6 +5435,9 @@ let Leaf = class Leaf {
     move(x, y) {
         moveLocal(this, x, y);
     }
+    moveInner(x, y) {
+        moveWorld(this, x, y, true);
+    }
     scaleOf(origin, scaleX, scaleY, resize) {
         zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
     }
@@ -5400,6 +5462,9 @@ let Leaf = class Leaf {
     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;
@@ -5757,7 +5822,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.0-rc.30";
+const version = "1.0.1";
 const inviteCode = {};
 
 class LeaferCanvas extends LeaferCanvasBase {
@@ -5827,7 +5892,7 @@ function useCanvas(_canvasType, _power) {
 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;
@@ -6323,14 +6388,14 @@ class Renderer {
         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) { }
@@ -6910,6 +6975,11 @@ class BoxData extends GroupData {
 }
 
 class LeaferData extends GroupData {
+    __getInputData() {
+        const data = super.__getInputData();
+        canvasSizeAttrs.forEach(key => delete data[key]);
+        return data;
+    }
 }
 
 class FrameData extends BoxData {
@@ -6987,6 +7057,11 @@ class ImageData extends RectData {
 }
 
 class CanvasData extends RectData {
+    __getInputData() {
+        const data = super.__getInputData();
+        data.url = this.__leaf.canvas.toDataURL('image/png');
+        return data;
+    }
 }
 
 const UIBounds = {
@@ -7652,7 +7727,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         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);
@@ -7753,9 +7828,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         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));
         }
     }
@@ -7890,12 +7966,21 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             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) {
         return this.interaction && this.interaction.getLocal(clientPoint, updateClient);
     }
+    getPagePointByClient(clientPoint, updateClient) {
+        return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient));
+    }
+    updateClientBounds() {
+        this.canvas && this.canvas.updateClientBounds();
+    }
+    receiveEvent(_event) { }
     __checkUpdateLayout() {
         this.__layout.update();
     }
@@ -7979,7 +8064,7 @@ Rect = __decorate([
 const rect$1 = Rect.prototype;
 const group$1 = Group.prototype;
 const childrenRenderBounds = {};
-const { copy: copy$6, add, includes: includes$1 } = BoundsHelper;
+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; }
@@ -7993,20 +8078,23 @@ let Box = class Box extends Group {
         return this.__updateRectRenderSpread() || -1;
     }
     __updateRectBoxBounds() { }
-    __updateBoxBounds() {
+    __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) {
-                    const b = this.__layout.boxBounds;
-                    if (!data.__autoWidth)
-                        b.height += b.y, b.width = data.width, b.x = b.y = 0;
-                    if (!data.__autoHeight)
-                        b.width += b.x, b.height = data.height, b.y = b.x = 0;
+                    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 (secondLayout && data.flow && data.padding)
+                    copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
+                this.__updateNaturalSize();
             }
             else {
                 this.__updateRectBoxBounds();
@@ -8026,13 +8114,13 @@ let Box = class Box extends Group {
             super.__updateRenderBounds();
             copy$6(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius;
         }
         else {
             this.__updateRectRenderBounds();
         }
         this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
-        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide'))
+        if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow)
             add(renderBounds, childrenRenderBounds);
     }
     __updateRectRenderBounds() { }
@@ -8366,14 +8454,26 @@ __decorate([
 Image = __decorate([
     registerUI()
 ], Image);
+const MyImage = Image;
 
 let Canvas = class Canvas extends Rect {
     get __tag() { return 'Canvas'; }
+    get ready() { return !this.url; }
     constructor(data) {
         super(data);
         this.canvas = Creator.canvas(this.__);
         this.context = this.canvas.context;
         this.__.__isCanvas = this.__.__drawAfterFill = true;
+        if (data && data.url)
+            this.drawImage(data.url);
+    }
+    drawImage(url) {
+        new LeaferImage({ url }).load((image) => {
+            this.context.drawImage(image.view, 0, 0);
+            this.url = undefined;
+            this.paint();
+            this.emitEvent(new ImageEvent(ImageEvent.LOADED, { image }));
+        });
     }
     draw(ui, offset, scale, rotation) {
         ui.__layout.update();
@@ -8417,8 +8517,7 @@ let Canvas = class Canvas extends Rect {
     destroy() {
         if (this.canvas) {
             this.canvas.destroy();
-            this.canvas = null;
-            this.context = null;
+            this.canvas = this.context = null;
         }
         super.destroy();
     }
@@ -8433,7 +8532,7 @@ __decorate([
     resizeType(100)
 ], Canvas.prototype, "height", void 0);
 __decorate([
-    resizeType(Platform.devicePixelRatio)
+    resizeType(1)
 ], Canvas.prototype, "pixelRatio", void 0);
 __decorate([
     resizeType(true)
@@ -8457,13 +8556,13 @@ let Text = class Text extends UI {
         super(data);
     }
     __drawHitPath(canvas) {
-        const { __lineHeight, __baseLine, __textDrawData: data } = this.__;
+        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__;
         canvas.beginPath();
         if (this.__.__letterSpacing < 0) {
             this.__drawPathByData(canvas);
         }
         else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight));
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
         }
     }
     __drawPathByData(drawer, _data) {
@@ -8656,7 +8755,8 @@ let Pen = class Pen extends Group {
     drawPoints(_points, _curve, _close) { return this; }
     clearPath() { return this; }
     paint() {
-        this.pathElement.forceUpdate('path');
+        if (!this.pathElement.__layout.boxChanged)
+            this.pathElement.forceUpdate('path');
     }
 };
 __decorate([
@@ -8666,7 +8766,7 @@ __decorate([
     penPathType()
 ], Pen.prototype, "path", void 0);
 Pen = __decorate([
-    useModule(PathCreator, ['set', 'beginPath', 'path']),
+    useModule(PathCreator, ['set', 'beginPath', 'path', 'paint']),
     registerUI()
 ], Pen);
 function penPathType() {
@@ -8771,11 +8871,13 @@ let App = class App extends Leafer {
             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));
@@ -8887,6 +8989,7 @@ PointerEvent.MENU_TAP = 'pointer.menu_tap';
 PointerEvent = __decorate([
     registerUIEvent()
 ], PointerEvent);
+const MyPointerEvent = PointerEvent;
 
 const move$1 = {};
 let DragEvent = class DragEvent extends PointerEvent {
@@ -8986,6 +9089,7 @@ DragEvent.LEAVE = 'drag.leave';
 DragEvent = __decorate([
     registerUIEvent()
 ], DragEvent);
+const MyDragEvent = DragEvent;
 
 let DropEvent = class DropEvent extends PointerEvent {
     static setList(data) {
@@ -9067,36 +9171,32 @@ function addInteractionWindow(leafer) {
 
 function document$1(leafer) {
     addInteractionWindow(leafer);
-    leafer.config.move.scroll = 'limit';
-    leafer.config.zoom.min = 1;
+    const { move, zoom } = leafer.config;
+    move.scroll = 'limit';
+    zoom.min = 1;
+}
+
+function block(leafer) {
+    const { config } = leafer;
+    (config.wheel || (config.wheel = {})).preventDefault = false;
+    (config.touch || (config.touch = {})).preventDefault = 'auto';
 }
 
 const debug$3 = Debug.get('LeaferTypeCreator');
 const LeaferTypeCreator = {
     list: {},
     register(name, fn) {
-        if (list$1[name]) {
-            debug$3.repeat(name);
-        }
-        else {
-            list$1[name] = fn;
-        }
+        list$1[name] ? debug$3.repeat(name) : list$1[name] = fn;
     },
     run(name, leafer) {
         const fn = list$1[name];
-        if (fn) {
-            fn(leafer);
-        }
-        else {
-            debug$3.error('no', name);
-        }
+        fn && fn(leafer);
     }
 };
 const { list: list$1, register } = LeaferTypeCreator;
-register('draw', () => { });
-register('custom', () => { });
 register('design', addInteractionWindow);
 register('document', document$1);
+register('block', block);
 
 const leafer = Leafer.prototype;
 leafer.initType = function (type) {
@@ -9142,11 +9242,14 @@ leafer.getValidScale = function (changeScale) {
 };
 
 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;
@@ -9282,7 +9385,13 @@ const InteractionHelper = {
                 find.add(list[i]);
         }
         return find;
-    }
+    },
+    pathCanDrag(path) {
+        return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(DragEvent.DRAG)));
+    },
+    pathHasOutside(path) {
+        return path && path.list.some(item => item.isOutside);
+    },
 };
 const I = InteractionHelper;
 
@@ -9311,8 +9420,10 @@ class Dragger {
             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(MoveEvent.START, this.dragData);
+            }
         }
         if (!this.moving) {
             this.dragStart(data, canDrag);
@@ -9351,6 +9462,7 @@ class Dragger {
             this.dragData.throughPath = throughPath;
         this.dragData.path = path;
         if (this.moving) {
+            this.dragData.moveType = 'drag';
             interaction.emit(MoveEvent.BEFORE_MOVE, this.dragData);
             interaction.emit(MoveEvent.MOVE, this.dragData);
         }
@@ -9417,6 +9529,7 @@ class Dragger {
         endDragData.path = path;
         if (this.moving) {
             this.moving = false;
+            endDragData.moveType = 'drag';
             interaction.emit(MoveEvent.END, endDragData);
         }
         if (this.dragging) {
@@ -9475,7 +9588,7 @@ class Dragger {
             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);
     }
@@ -9588,22 +9701,27 @@ const config$1 = {
         swipeDistance: 20,
         preventDefaultMenu: true
     },
+    touch: {
+        preventDefault: true
+    },
     cursor: true,
     keyEvent: true
 };
 
-const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
+const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag, pathHasOutside } = InteractionHelper;
 class InteractionBase {
     get dragging() { return this.dragger.dragging; }
-    get moveMode() { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+    get transforming() { return this.transformer.transforming; }
+    get moveMode() { return this.config.move.drag === true || 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(); }
     get hitRadius() { return this.config.pointer.hitRadius; }
     constructor(target, canvas, selector, userConfig) {
-        this.config = config$1;
+        this.config = DataHelper.clone(config$1);
         this.tapCount = 0;
         this.downKeyMap = {};
         this.target = target;
@@ -9690,6 +9808,7 @@ class InteractionBase {
         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);
@@ -9762,7 +9881,7 @@ class InteractionBase {
             this.updateCursor();
     }
     pointerHover(data) {
-        if (this.config.pointer.hover) {
+        if (this.canHover) {
             this.pointerOverOrOut(data);
             this.pointerEnterOrLeave(data);
         }
@@ -9854,11 +9973,11 @@ class InteractionBase {
         return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree) && !data.target.syncEventer);
     }
     checkPath(data, useDefaultPath) {
-        if (useDefaultPath || this.canMove(data))
+        if (useDefaultPath || (this.moveMode && !pathHasOutside(data.path)))
             data.path = this.defaultPath;
     }
     canMove(data) {
-        return this.moveMode && data && data.path.list.every(item => !item.isOutside);
+        return data && (this.moveMode || (this.config.move.drag === 'auto' && !pathCanDrag(data.path))) && !pathHasOutside(data.path);
     }
     isDrag(leaf) {
         return this.dragger.getList().has(leaf);
@@ -9899,7 +10018,7 @@ class InteractionBase {
         this.hoverData = data;
     }
     updateCursor(data) {
-        if (!this.config.cursor || !this.config.pointer.hover)
+        if (!this.config.cursor || !this.canHover)
             return;
         if (!data) {
             this.updateHoverData();
@@ -10553,10 +10672,13 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
 const { get: get$2, translate } = MatrixHelper;
 const tempBox = new Bounds();
 const tempPoint = {};
+const tempScaleData = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode } = paint;
+    const { blendMode, sync } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
+    if (sync)
+        leafPaint.sync = sync;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
@@ -10576,13 +10698,10 @@ function getPatternData(paint, box, image) {
             x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
         }
     }
-    else if (size) {
-        scaleX = (typeof size === 'number' ? size : size.width) / width;
-        scaleY = (typeof size === 'number' ? size : size.height) / height;
-    }
-    else if (scale) {
-        scaleX = typeof scale === 'number' ? scale : scale.x;
-        scaleY = typeof scale === 'number' ? scale : scale.y;
+    else if (scale || size) {
+        MathHelper.getScaleData(scale, size, image, tempScaleData);
+        scaleX = tempScaleData.scaleX;
+        scaleY = tempScaleData.scaleY;
     }
     if (align) {
         const imageBounds = { x, y, width: swapWidth, height: swapHeight };
@@ -10787,7 +10906,7 @@ function createPattern(ui, paint, pixelRatio) {
 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 {
@@ -10821,7 +10940,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
             return true;
         }
         else {
-            if (!paint.style || Export.running) {
+            if (!paint.style || paint.sync || Export.running) {
                 createPattern(ui, paint, canvas.pixelRatio);
             }
             else {
@@ -11589,7 +11708,7 @@ function decorationText(drawData, style) {
     }
 }
 
-const { top: top$1, right: right$2, bottom: bottom$1, left: left$2 } = Direction4;
+const { top: top$2, right: right$3, bottom: bottom$2, left: left$3 } = Direction4;
 function getDrawData(content, style) {
     if (typeof content !== 'string')
         content = String(content);
@@ -11599,12 +11718,12 @@ function getDrawData(content, style) {
     const { textDecoration, __font, __padding: padding } = style;
     if (padding) {
         if (width) {
-            x = padding[left$2];
-            width -= (padding[right$2] + padding[left$2]);
+            x = padding[left$3];
+            width -= (padding[right$3] + padding[left$3]);
         }
         if (height) {
-            y = padding[top$1];
-            height -= (padding[top$1] + padding[bottom$1]);
+            y = padding[top$2];
+            height -= (padding[top$2] + padding[bottom$2]);
         }
     }
     const drawData = {
@@ -11628,19 +11747,19 @@ function padAutoText(padding, drawData, style, width, height) {
     if (!width) {
         switch (style.textAlign) {
             case 'left':
-                offsetText(drawData, 'x', padding[left$2]);
+                offsetText(drawData, 'x', padding[left$3]);
                 break;
             case 'right':
-                offsetText(drawData, 'x', -padding[right$2]);
+                offsetText(drawData, 'x', -padding[right$3]);
         }
     }
     if (!height) {
         switch (style.verticalAlign) {
             case 'top':
-                offsetText(drawData, 'y', padding[top$1]);
+                offsetText(drawData, 'y', padding[top$2]);
                 break;
             case 'bottom':
-                offsetText(drawData, 'y', -padding[bottom$1]);
+                offsetText(drawData, 'y', -padding[bottom$2]);
         }
     }
 }
@@ -11691,6 +11810,7 @@ const ExportModule = {
     export(leaf, filename, options) {
         this.running = true;
         const fileType = FileHelper.fileType(filename);
+        const isDownload = filename.includes('.');
         options = FileHelper.getExportOptions(options);
         return addTask((success) => new Promise((resolve) => {
             const over = (result) => {
@@ -11700,19 +11820,13 @@ const ExportModule = {
             };
             const { toURL } = Platform;
             const { download } = Platform.origin;
-            if (filename === 'json') {
-                return over({ data: leaf.toJSON(options.json) });
+            if (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
             }
-            else if (fileType === 'json') {
-                download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
-                return over({ data: true });
-            }
-            if (filename === 'svg') {
-                return over({ data: leaf.toSVG() });
-            }
-            else if (fileType === 'svg') {
-                download(toURL(leaf.toSVG(), 'svg'), filename);
-                return over({ data: true });
+            if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                return over({ data: isDownload ? true : leaf.toSVG() });
             }
             const { leafer } = leaf;
             if (leafer) {
@@ -11721,14 +11835,8 @@ const ExportModule = {
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                     const { worldTransform, isLeafer, isFrame } = leaf;
                     const { slice, trim, onCanvas } = options;
-                    let scale = options.scale || 1;
-                    let pixelRatio = options.pixelRatio || 1;
                     const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
                     const contextSettings = options.contextSettings || leafer.config.contextSettings;
-                    if (leaf.isApp) {
-                        scale *= pixelRatio;
-                        pixelRatio = leaf.app.pixelRatio;
-                    }
                     const screenshot = options.screenshot || leaf.isApp;
                     const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                     const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
@@ -11762,10 +11870,21 @@ const ExportModule = {
                         }
                         renderBounds = leaf.getBounds('render', relative);
                     }
-                    const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
+                    const scaleData = { scaleX: 1, scaleY: 1 };
+                    MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                    let pixelRatio = options.pixelRatio || 1;
+                    if (leaf.isApp) {
+                        scaleData.scaleX *= pixelRatio;
+                        scaleData.scaleY *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
+                    const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                    const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
                     let canvas = Creator.canvas({ width: Math.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;
                     }
@@ -11780,6 +11899,8 @@ const ExportModule = {
                         leaf.__render(canvas, renderOptions);
                     }
                     canvas.restore();
+                    if (sliceLeaf)
+                        sliceLeaf.__updateWorldOpacity();
                     if (trim) {
                         trimBounds = getTrimBounds(canvas);
                         const old = canvas, { width, height } = trimBounds;
@@ -11949,6 +12070,7 @@ const PathScaler = {
 const { scalePoints } = PathScaler;
 
 const matrix$1 = MatrixHelper.get();
+const { topLeft: topLeft$1, top: top$1, topRight: topRight$1, right: right$2, bottom: bottom$1, left: left$2 } = Direction9;
 function scaleResize(leaf, scaleX, scaleY) {
     if (leaf.pathInputed) {
         scaleResizePath(leaf, scaleX, scaleY);
@@ -11961,14 +12083,35 @@ function scaleResize(leaf, scaleX, scaleY) {
     }
 }
 function scaleResizeFontSize(leaf, scaleX, scaleY) {
-    const { width, height } = leaf.__localBoxBounds;
-    if (scaleX !== 1) {
-        leaf.fontSize *= scaleX;
-        leaf.y -= height * (scaleX - scaleY) / 2;
+    const { app } = leaf;
+    const editor = app && app.editor;
+    if (editor.editing) {
+        const layout = leaf.__layout;
+        let { width, height } = layout.boxBounds;
+        width *= (scaleY - scaleX) * (leaf.scaleX < 0 ? -1 : 1);
+        height *= (scaleX - scaleY) * (leaf.scaleY < 0 ? -1 : 1);
+        switch (editor.resizeDirection) {
+            case top$1:
+            case bottom$1:
+                leaf.fontSize *= scaleY;
+                layout.affectScaleOrRotation ? leaf.moveInner(-width / 2, 0) : leaf.x -= width / 2;
+                break;
+            case left$2:
+            case right$2:
+                leaf.fontSize *= scaleX;
+                layout.affectScaleOrRotation ? leaf.moveInner(0, -height / 2) : leaf.y -= height / 2;
+                break;
+            case topLeft$1:
+            case topRight$1:
+                leaf.fontSize *= scaleX;
+                layout.affectScaleOrRotation ? leaf.moveInner(0, -height) : leaf.y -= height;
+                break;
+            default:
+                leaf.fontSize *= scaleX;
+        }
     }
-    else if (scaleY !== 1) {
-        leaf.fontSize *= scaleY;
-        leaf.x -= width * (scaleY - scaleX) / 2;
+    else {
+        leaf.fontSize *= scaleX;
     }
 }
 function scaleResizePath(leaf, scaleX, scaleY) {
@@ -12272,7 +12415,7 @@ class EditSelect extends Group {
     }
     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;
         }
@@ -12281,15 +12424,27 @@ class EditSelect extends Group {
         }
     }
     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);
         }
@@ -12320,6 +12475,10 @@ class EditSelect extends Group {
         }
     }
     onDragStart(e) {
+        if (e.multiTouch)
+            return;
+        if (this.waitSelect)
+            this.waitSelect();
         if (this.allowDrag(e)) {
             const { editor } = this;
             const { stroke, area } = editor.mergeConfig;
@@ -12331,10 +12490,10 @@ class EditSelect extends Group {
         }
     }
     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);
@@ -12358,7 +12517,9 @@ class EditSelect extends Group {
             }
         }
     }
-    onDragEnd() {
+    onDragEnd(e) {
+        if (e.multiTouch)
+            return;
         if (this.dragging)
             this.originList = null, this.selectArea.visible = false;
     }
@@ -12404,7 +12565,7 @@ class EditSelect extends Group {
                 app.on_(PointerEvent.MOVE, this.onPointerMove, this),
                 app.on_(PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
                 app.on_(PointerEvent.TAP, this.onTap, this),
-                app.on_(DragEvent.START, this.onDragStart, this),
+                app.on_(DragEvent.START, this.onDragStart, this, true),
                 app.on_(DragEvent.DRAG, this.onDrag, this),
                 app.on_(DragEvent.END, this.onDragEnd, this),
                 app.on_(MoveEvent.MOVE, this.onAutoMove, this),
@@ -12427,22 +12588,32 @@ class EditSelect extends Group {
 
 const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = 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;
@@ -12483,12 +12654,41 @@ const EditDataHelper = {
         if (lockRatio) {
             const unlockSide = lockRatio === 'corner' && direction % 2;
             if (!unlockSide) {
-                const scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                let scale;
+                switch (direction) {
+                    case top:
+                    case bottom:
+                        scale = scaleY;
+                        break;
+                    case left$1:
+                    case right$1:
+                        scale = scaleX;
+                        break;
+                    default:
+                        scale = Math.sqrt(Math.abs(scaleX * scaleY));
+                }
                 scaleX = scaleX < 0 ? -scale : scale;
                 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) {
@@ -12609,6 +12809,11 @@ function updateCursor(editor, e) {
         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;
@@ -12677,9 +12882,8 @@ class EditBox extends Group {
             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() {
@@ -12695,9 +12899,9 @@ class EditBox extends Group {
             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;
     }
@@ -12706,7 +12910,7 @@ class EditBox extends Group {
         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);
@@ -12736,19 +12940,25 @@ class EditBox extends Group {
                     }
                 }
             }
-            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)) {
@@ -12756,11 +12966,18 @@ class EditBox extends Group {
                 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;
@@ -12769,11 +12986,6 @@ class EditBox extends Group {
             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;
@@ -12800,18 +13012,23 @@ class EditBox extends Group {
     }
     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'));
+            editor.resizeDirection = e.current.direction;
+        }
     }
     onDragEnd(e) {
         this.dragging = false;
         this.moving = false;
         if (e.current.name === 'rect')
             this.editor.opacity = 1;
+        this.editor.resizeDirection = undefined;
     }
     onDrag(e) {
         const { editor } = this;
@@ -12820,7 +13037,7 @@ class EditBox extends Group {
             if (editor.mergeConfig.rotateable)
                 editor.onRotate(e);
         }
-        else {
+        else if (point.pointType === 'resize') {
             editor.onScale(e);
         }
         updateCursor(editor, e);
@@ -12884,8 +13101,6 @@ class EditBox extends Group {
             rect.on_(DragEvent.START, this.onDragStart, this),
             rect.on_(DragEvent.DRAG, editor.onMove, editor),
             rect.on_(DragEvent.END, this.onDragEnd, this),
-            rect.on_(ZoomEvent.BEFORE_ZOOM, editor.onScale, editor, true),
-            rect.on_(RotateEvent.BEFORE_ROTATE, editor.onRotate, editor, true),
             rect.on_(PointerEvent.ENTER, () => updateMoveCursor(editor)),
             rect.on_(PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
             rect.on_(PointerEvent.LONG_PRESS, this.onLongPress, this)
@@ -12915,7 +13130,7 @@ class EditMask extends UI {
             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);
         }
@@ -13000,6 +13215,7 @@ const config = {
     boxSelect: true,
     moveable: true,
     resizeable: true,
+    flipable: true,
     rotateable: true,
     skewable: true
 };
@@ -13157,7 +13373,7 @@ class Editor extends Group {
     get buttons() { return this.editBox.buttons; }
     constructor(userConfig, data) {
         super(data);
-        this.config = config;
+        this.config = DataHelper.clone(config);
         this.leafList = new LeafList();
         this.openedGroupList = new LeafList();
         this.simulateTarget = new Rect({ visible: false });
@@ -13221,29 +13437,39 @@ class Editor extends Group {
         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 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(DragEvent.getValidMove(this.element, this.dragStartPoint, total));
         }
-        this.move(DragEvent.getValidMove(this.element, this.dragStartPoint, total));
     }
     onScale(e) {
         const { element } = this;
+        let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
         if (e instanceof 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);
@@ -13254,23 +13480,21 @@ class Editor extends Group {
         }
     }
     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 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;
         }
@@ -13304,8 +13528,7 @@ class Editor extends Group {
         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);
     }
@@ -13313,28 +13536,28 @@ class Editor extends Group {
         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);
@@ -13343,19 +13566,21 @@ class Editor extends Group {
         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);
@@ -13466,6 +13691,9 @@ class Editor extends Group {
         if (!this.targetEventIds.length) {
             const { leafer } = this.list[0];
             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)
@@ -14189,6 +14417,186 @@ function setPoint(data, point, startIndex) {
 
 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;
+}
+
+let 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;
+        const text = this.editTarget;
+        text.visible = false;
+        this.isHTMLText = !(text instanceof Text);
+        this._keyEvent = config.keyEvent;
+        config.keyEvent = false;
+        const div = this.editDom = document.createElement('div');
+        const { style } = div;
+        div.contentEditable = 'true';
+        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;
+        }
+        const { view } = editor.app;
+        (this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
+        this.eventIds = [
+            editor.app.on_(PointerEvent.DOWN, (e) => {
+                let { target } = e.origin, find;
+                while (target) {
+                    if (target === div)
+                        find = true;
+                    target = target.parentElement;
+                }
+                if (!find)
+                    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() {
+        const { editDom } = this;
+        this.editTarget.text = this.isHTMLText ? editDom.innerHTML : 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 } = this.inBody ? text.app.clientBounds : 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';
+        this.isHTMLText || 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;
+        }
+    }
+};
+TextEditor = __decorate([
+    registerInnerEditor()
+], TextEditor);
+
 class HTMLTextData extends ImageData {
     setText(value) {
         this._text = value;
@@ -14198,11 +14606,13 @@ class HTMLTextData extends ImageData {
 
 let HTMLText = class HTMLText extends Image {
     get __tag() { return 'HTMLText'; }
+    get editInner() { return 'TextEditor'; }
     constructor(data) {
         super(data);
     }
     __updateBoxBounds() {
-        if (this.__.__htmlChanged) {
+        const data = this.__;
+        if (data.__htmlChanged) {
             const div = document.createElement('div');
             const { style } = div;
             style.all = 'initial';
@@ -14211,9 +14621,9 @@ let HTMLText = class HTMLText extends Image {
             div.innerHTML = this.text;
             document.body.appendChild(div);
             const { width, height } = div.getBoundingClientRect();
-            const italicWidth = 10;
-            const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width + italicWidth}" height="${height}">
-                        <foreignObject width="${width + italicWidth}" height="${height}">
+            const realWidth = width + 10;
+            const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${realWidth}" height="${height}">
+                        <foreignObject width="${realWidth}" height="${height}">
                             <style>
                                 * {
                                     margin: 0;
@@ -14226,8 +14636,10 @@ let HTMLText = class HTMLText extends Image {
                             </body>
                         </foreignObject>
                     </svg>`;
-            this.__.__setImageFill('data:image/svg+xml,' + encodeURIComponent(svg));
-            this.__.__htmlChanged = false;
+            data.__setImageFill('data:image/svg+xml,' + encodeURIComponent(svg));
+            data.__naturalWidth = realWidth / data.pixelRatio;
+            data.__naturalHeight = height / data.pixelRatio;
+            data.__htmlChanged = false;
             div.remove();
         }
         super.__updateBoxBounds();
@@ -14243,4 +14655,4 @@ HTMLText = __decorate([
     registerUI()
 ], HTMLText);
 
-export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, inviteCode, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, inviteCode, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };