@leafer-editor/worker 1.0.1 → 1.0.3

package/dist/worker.js

@@ -114,6 +114,26 @@ var LeaferUI = (function (exports) {
             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)
+                MathHelper.assignScale(scaleData, scale);
+            return scaleData;
+        },
+        assignScale(scaleData, scale) {
+            if (typeof scale === 'number') {
+                scaleData.scaleX = scaleData.scaleY = scale;
+            }
+            else {
+                scaleData.scaleX = scale.x;
+                scaleData.scaleY = scale.y;
+            }
         }
     };
     const OneRadian = PI$4 / 180;
@@ -412,7 +432,7 @@ var LeaferUI = (function (exports) {
     };
     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(),
@@ -468,7 +488,7 @@ var LeaferUI = (function (exports) {
         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) {
@@ -487,7 +507,7 @@ var LeaferUI = (function (exports) {
             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 };
@@ -767,10 +787,10 @@ var LeaferUI = (function (exports) {
     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 = {
@@ -787,17 +807,24 @@ var LeaferUI = (function (exports) {
             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; },
@@ -874,16 +901,16 @@ var LeaferUI = (function (exports) {
             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);
             }
@@ -897,16 +924,16 @@ var LeaferUI = (function (exports) {
             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;
@@ -932,20 +959,20 @@ var LeaferUI = (function (exports) {
             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);
@@ -1019,16 +1046,16 @@ var LeaferUI = (function (exports) {
             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) {
@@ -1089,12 +1116,12 @@ var LeaferUI = (function (exports) {
         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() {
@@ -1238,7 +1265,6 @@ var LeaferUI = (function (exports) {
         tempPoint: {},
         get: get$4,
         toPoint(around, bounds, to, onlySize, pointBounds) {
-            to || (to = {});
             const point = get$4(around);
             to.x = point.x;
             to.y = point.y;
@@ -1373,6 +1399,10 @@ var LeaferUI = (function (exports) {
     };
     const R = Run;
 
+    function needPlugin(name) {
+        console.error('need plugin: @leafer-in/' + name);
+    }
+
     const debug$f = Debug.get('UICreator');
     const UICreator = {
         list: {},
@@ -1635,6 +1665,9 @@ var LeaferUI = (function (exports) {
         Answer[Answer["YesAndSkip"] = 3] = "YesAndSkip";
     })(exports.Answer || (exports.Answer = {}));
     const emptyData = {};
+    function isNull(value) {
+        return value === undefined || value === null;
+    }
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -2400,7 +2433,7 @@ var LeaferUI = (function (exports) {
             let startY = y = rotationSin * radiusX * startCos + rotationCos * radiusY * startSin;
             let fromX = cx + x, fromY = cy + y;
             if (data)
-                data.push(L$9, fromX, fromY);
+                data.push(data.length ? L$9 : M$8, fromX, fromY);
             if (setPointBounds)
                 setPoint$4(setPointBounds, fromX, fromY);
             if (setStartPoint)
@@ -2911,60 +2944,75 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -3054,8 +3102,7 @@ var LeaferUI = (function (exports) {
         toTwoPointBounds(data, setPointBounds) {
             if (!data || !data.length)
                 return setPoint$3(setPointBounds, 0, 0);
-            let command;
-            let i = 0, x = 0, y = 0, x1, y1, toX, toY;
+            let i = 0, x = 0, y = 0, x1, y1, toX, toY, command;
             const len = data.length;
             while (i < len) {
                 command = data[i];
@@ -3711,7 +3758,7 @@ var LeaferUI = (function (exports) {
             set(value) {
                 if (this.__setAttr(key, value)) {
                     this.__layout.matrixChanged || this.__layout.matrixChange();
-                    this.__hasAutoLayout = !!value;
+                    this.__hasAutoLayout = !!(this.origin || this.around || this.flow);
                     if (!this.__local)
                         this.__layout.createLocal();
                 }
@@ -3804,14 +3851,25 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 const oldValue = this.visible;
-                if (this.__setAttr(key, value)) {
-                    this.__layout.opacityChanged || this.__layout.opacityChange();
-                    if (oldValue === 0 || value === 0)
-                        doBoundsType(this);
+                if (oldValue === true && value === 0) {
+                    if (this.animationOut)
+                        return this.__runAnimation('out', () => doVisible(this, key, value, oldValue));
                 }
+                else if (oldValue === 0 && value === true) {
+                    if (this.animation)
+                        this.__runAnimation('in');
+                }
+                doVisible(this, key, value, oldValue);
             }
         }));
     }
+    function doVisible(leaf, key, value, oldValue) {
+        if (leaf.__setAttr(key, value)) {
+            leaf.__layout.opacityChanged || leaf.__layout.opacityChange();
+            if (oldValue === 0 || value === 0)
+                doBoundsType(leaf);
+        }
+    }
     function sortType(defaultValue) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
@@ -3895,7 +3953,16 @@ var LeaferUI = (function (exports) {
         if (defaultValue === undefined) {
             property.get = function () { return this[computedKey]; };
         }
-        else if (key === 'width') {
+        else if (typeof defaultValue === 'object') {
+            const { clone } = DataHelper;
+            property.get = function () {
+                let v = this[computedKey];
+                if (v === undefined)
+                    this[computedKey] = v = clone(defaultValue);
+                return v;
+            };
+        }
+        if (key === 'width') {
             property.get = function () {
                 const v = this[computedKey];
                 if (v === undefined) {
@@ -3986,7 +4053,7 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    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) {
@@ -4051,10 +4118,9 @@ var LeaferUI = (function (exports) {
             }
             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) {
@@ -4563,144 +4629,6 @@ var LeaferUI = (function (exports) {
         destroy() { }
     }
 
-    const empty = {};
-    const LeafEventer = {
-        on(type, listener, options) {
-            let capture, once;
-            if (options) {
-                if (options === 'once') {
-                    once = true;
-                }
-                else if (typeof options === 'boolean') {
-                    capture = options;
-                }
-                else {
-                    capture = options.capture;
-                    once = options.once;
-                }
-            }
-            let events;
-            const map = __getListenerMap(this, capture, true);
-            const typeList = typeof type === 'string' ? type.split(' ') : type;
-            const item = once ? { listener, once } : { listener };
-            typeList.forEach(type => {
-                if (type) {
-                    events = map[type];
-                    if (events) {
-                        if (events.findIndex(item => item.listener === listener) === -1)
-                            events.push(item);
-                    }
-                    else {
-                        map[type] = [item];
-                    }
-                }
-            });
-        },
-        off(type, listener, options) {
-            if (type) {
-                const typeList = typeof type === 'string' ? type.split(' ') : type;
-                if (listener) {
-                    let capture;
-                    if (options)
-                        capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture);
-                    let events, index;
-                    const map = __getListenerMap(this, capture);
-                    typeList.forEach(type => {
-                        if (type) {
-                            events = map[type];
-                            if (events) {
-                                index = events.findIndex(item => item.listener === listener);
-                                if (index > -1)
-                                    events.splice(index, 1);
-                                if (!events.length)
-                                    delete map[type];
-                            }
-                        }
-                    });
-                }
-                else {
-                    const { __bubbleMap: b, __captureMap: c } = this;
-                    typeList.forEach(type => {
-                        if (b)
-                            delete b[type];
-                        if (c)
-                            delete c[type];
-                    });
-                }
-            }
-            else {
-                this.__bubbleMap = this.__captureMap = undefined;
-            }
-        },
-        on_(type, listener, bind, options) {
-            if (bind)
-                listener = listener.bind(bind);
-            this.on(type, listener, options);
-            return { type, current: this, listener, options };
-        },
-        off_(id) {
-            if (!id)
-                return;
-            const list = id instanceof Array ? id : [id];
-            list.forEach(item => item.current.off(item.type, item.listener, item.options));
-            list.length = 0;
-        },
-        once(type, listener, capture) {
-            this.on(type, listener, { once: true, capture });
-        },
-        emit(type, event, capture) {
-            if (!event && EventCreator.has(type))
-                event = EventCreator.get(type, { type, target: this, current: this });
-            const map = __getListenerMap(this, capture);
-            const list = map[type];
-            if (list) {
-                let item;
-                for (let i = 0, len = list.length; i < len; i++) {
-                    item = list[i];
-                    item.listener(event);
-                    if (item.once) {
-                        this.off(type, item.listener, capture);
-                        i--, len--;
-                    }
-                    if (event && event.isStopNow)
-                        break;
-                }
-            }
-            this.syncEventer && this.syncEventer.emitEvent(event, capture);
-        },
-        emitEvent(event, capture) {
-            event.current = this;
-            this.emit(event.type, event, capture);
-        },
-        hasEvent(type, capture) {
-            if (this.syncEventer && this.syncEventer.hasEvent(type, capture))
-                return true;
-            const { __bubbleMap: b, __captureMap: c } = this;
-            const hasB = b && b[type], hasC = c && c[type];
-            return !!(capture === undefined ? (hasB || hasC) : (capture ? hasC : hasB));
-        },
-    };
-    function __getListenerMap(eventer, capture, create) {
-        if (capture) {
-            const { __captureMap: c } = eventer;
-            if (c) {
-                return c;
-            }
-            else {
-                return create ? eventer.__captureMap = {} : empty;
-            }
-        }
-        else {
-            const { __bubbleMap: b } = eventer;
-            if (b) {
-                return b;
-            }
-            else {
-                return create ? eventer.__bubbleMap = {} : empty;
-            }
-        }
-    }
-
     class Event {
         constructor(type, target) {
             this.bubbles = false;
@@ -4735,7 +4663,10 @@ var LeaferUI = (function (exports) {
     }
     ChildEvent.ADD = 'child.add';
     ChildEvent.REMOVE = 'child.remove';
-    ChildEvent.DESTROY = 'child.destroy';
+    ChildEvent.CREATED = 'created';
+    ChildEvent.MOUNTED = 'mounted';
+    ChildEvent.UNMOUNTED = 'unmounted';
+    ChildEvent.DESTROY = 'destroy';
 
     class PropertyEvent extends Event {
         constructor(type, target, attrName, oldValue, newValue) {
@@ -4813,10 +4744,6 @@ var LeaferUI = (function (exports) {
     LayoutEvent.AGAIN = 'layout.again';
     LayoutEvent.END = 'layout.end';
 
-    class AnimateEvent extends Event {
-    }
-    AnimateEvent.FRAME = 'animate.frame';
-
     class RenderEvent extends Event {
         constructor(type, times, bounds, options) {
             super(type);
@@ -4828,26 +4755,177 @@ var LeaferUI = (function (exports) {
             }
         }
     }
-    RenderEvent.REQUEST = 'render.request';
-    RenderEvent.START = 'render.start';
-    RenderEvent.BEFORE = 'render.before';
-    RenderEvent.RENDER = 'render';
-    RenderEvent.AFTER = 'render.after';
-    RenderEvent.AGAIN = 'render.again';
-    RenderEvent.END = 'render.end';
-    RenderEvent.NEXT = 'render.next';
+    RenderEvent.REQUEST = 'render.request';
+    RenderEvent.START = 'render.start';
+    RenderEvent.BEFORE = 'render.before';
+    RenderEvent.RENDER = 'render';
+    RenderEvent.AFTER = 'render.after';
+    RenderEvent.AGAIN = 'render.again';
+    RenderEvent.END = 'render.end';
+    RenderEvent.NEXT = 'render.next';
+
+    class LeaferEvent extends Event {
+    }
+    LeaferEvent.START = 'leafer.start';
+    LeaferEvent.BEFORE_READY = 'leafer.before_ready';
+    LeaferEvent.READY = 'leafer.ready';
+    LeaferEvent.AFTER_READY = 'leafer.after_ready';
+    LeaferEvent.VIEW_READY = 'leafer.view_ready';
+    LeaferEvent.VIEW_COMPLETED = 'leafer.view_completed';
+    LeaferEvent.STOP = 'leafer.stop';
+    LeaferEvent.RESTART = 'leafer.restart';
+    LeaferEvent.END = 'leafer.end';
+
+    const empty = {};
+    class Eventer {
+        set event(map) { this.on(map); }
+        on(type, listener, options) {
+            if (!listener) {
+                let event, map = type;
+                for (let key in map)
+                    event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event);
+                return;
+            }
+            let capture, once;
+            if (options) {
+                if (options === 'once') {
+                    once = true;
+                }
+                else if (typeof options === 'boolean') {
+                    capture = options;
+                }
+                else {
+                    capture = options.capture;
+                    once = options.once;
+                }
+            }
+            let events;
+            const map = __getListenerMap(this, capture, true);
+            const typeList = typeof type === 'string' ? type.split(' ') : type;
+            const item = once ? { listener, once } : { listener };
+            typeList.forEach(type => {
+                if (type) {
+                    events = map[type];
+                    if (events) {
+                        if (events.findIndex(item => item.listener === listener) === -1)
+                            events.push(item);
+                    }
+                    else {
+                        map[type] = [item];
+                    }
+                }
+            });
+        }
+        off(type, listener, options) {
+            if (type) {
+                const typeList = typeof type === 'string' ? type.split(' ') : type;
+                if (listener) {
+                    let capture;
+                    if (options)
+                        capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture);
+                    let events, index;
+                    const map = __getListenerMap(this, capture);
+                    typeList.forEach(type => {
+                        if (type) {
+                            events = map[type];
+                            if (events) {
+                                index = events.findIndex(item => item.listener === listener);
+                                if (index > -1)
+                                    events.splice(index, 1);
+                                if (!events.length)
+                                    delete map[type];
+                            }
+                        }
+                    });
+                }
+                else {
+                    const { __bubbleMap: b, __captureMap: c } = this;
+                    typeList.forEach(type => {
+                        if (b)
+                            delete b[type];
+                        if (c)
+                            delete c[type];
+                    });
+                }
+            }
+            else {
+                this.__bubbleMap = this.__captureMap = undefined;
+            }
+        }
+        on_(type, listener, bind, options) {
+            if (bind)
+                listener = listener.bind(bind);
+            this.on(type, listener, options);
+            return { type, current: this, listener, options };
+        }
+        off_(id) {
+            if (!id)
+                return;
+            const list = id instanceof Array ? id : [id];
+            list.forEach(item => item.current.off(item.type, item.listener, item.options));
+            list.length = 0;
+        }
+        once(type, listener, capture) {
+            this.on(type, listener, { once: true, capture });
+        }
+        emit(type, event, capture) {
+            if (!event && EventCreator.has(type))
+                event = EventCreator.get(type, { type, target: this, current: this });
+            const map = __getListenerMap(this, capture);
+            const list = map[type];
+            if (list) {
+                let item;
+                for (let i = 0, len = list.length; i < len; i++) {
+                    item = list[i];
+                    item.listener(event);
+                    if (item.once) {
+                        this.off(type, item.listener, capture);
+                        i--, len--;
+                    }
+                    if (event && event.isStopNow)
+                        break;
+                }
+            }
+            this.syncEventer && this.syncEventer.emitEvent(event, capture);
+        }
+        emitEvent(event, capture) {
+            event.current = this;
+            this.emit(event.type, event, capture);
+        }
+        hasEvent(type, capture) {
+            if (this.syncEventer && this.syncEventer.hasEvent(type, capture))
+                return true;
+            const { __bubbleMap: b, __captureMap: c } = this;
+            const hasB = b && b[type], hasC = c && c[type];
+            return !!(capture === undefined ? (hasB || hasC) : (capture ? hasC : hasB));
+        }
+        destroy() {
+            this.__captureMap = this.__bubbleMap = this.syncEventer = null;
+        }
+    }
+    function __getListenerMap(eventer, capture, create) {
+        if (capture) {
+            const { __captureMap: c } = eventer;
+            if (c) {
+                return c;
+            }
+            else {
+                return create ? eventer.__captureMap = {} : empty;
+            }
+        }
+        else {
+            const { __bubbleMap: b } = eventer;
+            if (b) {
+                return b;
+            }
+            else {
+                return create ? eventer.__bubbleMap = {} : empty;
+            }
+        }
+    }
 
-    class LeaferEvent extends Event {
-    }
-    LeaferEvent.START = 'leafer.start';
-    LeaferEvent.BEFORE_READY = 'leafer.before_ready';
-    LeaferEvent.READY = 'leafer.ready';
-    LeaferEvent.AFTER_READY = 'leafer.after_ready';
-    LeaferEvent.VIEW_READY = 'leafer.view_ready';
-    LeaferEvent.VIEW_COMPLETED = 'leafer.view_completed';
-    LeaferEvent.STOP = 'leafer.stop';
-    LeaferEvent.RESTART = 'leafer.restart';
-    LeaferEvent.END = 'leafer.end';
+    const { on, on_, off, off_, once, emit: emit$2, emitEvent: emitEvent$1, hasEvent, destroy } = Eventer.prototype;
+    const LeafEventer = { on, on_, off, off_, once, emit: emit$2, emitEvent: emitEvent$1, hasEvent, destroyEventer: destroy };
 
     const { isFinite } = Number;
     const debug$8 = Debug.get('setAttr');
@@ -4860,9 +4938,7 @@ var LeaferUI = (function (exports) {
                     newValue = undefined;
                 }
                 if (typeof newValue === 'object' || oldValue !== newValue) {
-                    this.__[name] = newValue;
-                    if (this.__proxyData)
-                        this.setProxyAttr(name, newValue);
+                    this.__realSetAttr(name, newValue);
                     const { CHANGE } = PropertyEvent;
                     const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
                     if (this.isLeafer) {
@@ -4880,12 +4956,18 @@ var LeaferUI = (function (exports) {
                 }
             }
             else {
-                this.__[name] = newValue;
-                if (this.__proxyData)
-                    this.setProxyAttr(name, newValue);
+                this.__realSetAttr(name, newValue);
                 return true;
             }
         },
+        __realSetAttr(name, newValue) {
+            const data = this.__;
+            data[name] = newValue;
+            if (this.__proxyData)
+                this.setProxyAttr(name, newValue);
+            if (data.normalStyle)
+                this.lockNormalStyle || data.normalStyle[name] === undefined || (data.normalStyle[name] = newValue);
+        },
         __getAttr(name) {
             if (this.__proxyData)
                 return this.getProxyAttr(name);
@@ -4921,7 +5003,7 @@ var LeaferUI = (function (exports) {
 
     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() {
@@ -4988,6 +5070,8 @@ var LeaferUI = (function (exports) {
             layout.boundsChanged = false;
         },
         __updateLocalBoxBounds() {
+            if (this.__hasMotionPath)
+                this.__updateMotionPath();
             if (this.__hasAutoLayout)
                 this.__updateAutoLayout();
             toOuterOf$1(this.__layout.boxBounds, this.__local, this.__local);
@@ -5022,7 +5106,7 @@ var LeaferUI = (function (exports) {
                     updateAllMatrix$2(this);
                     updateBounds$1(this, this);
                     if (this.__.__autoSide)
-                        this.__updateBoxBounds();
+                        this.__updateBoxBounds(true);
                 }
                 else {
                     updateAllMatrix$2(this);
@@ -5040,11 +5124,11 @@ var LeaferUI = (function (exports) {
         },
         __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);
         }
     };
 
@@ -5140,7 +5224,7 @@ var LeaferUI = (function (exports) {
     const { LEAF, create } = IncrementId;
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
-    const { copy: copy$7 } = PointHelper;
+    const { copy: copy$7, move: move$2 } = PointHelper;
     const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
@@ -5167,13 +5251,16 @@ var LeaferUI = (function (exports) {
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
         get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
         get pathInputed() { return this.__.__pathInputed; }
-        set event(map) { let event; for (let key in map)
-            event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event); }
+        set event(map) { this.on(map); }
         constructor(data) {
             this.innerId = create(LEAF);
             this.reset(data);
+            if (this.__bubbleMap)
+                this.__emitLifeEvent(ChildEvent.CREATED);
         }
         reset(data) {
+            if (this.leafer)
+                this.leafer.forceRender(this.__world);
             this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1 };
             if (data !== null)
                 this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
@@ -5195,12 +5282,12 @@ var LeaferUI = (function (exports) {
         waitParent(item, bind) {
             if (bind)
                 item = item.bind(bind);
-            this.parent ? item() : (this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]);
+            this.parent ? item() : this.on(ChildEvent.ADD, item, 'once');
         }
         waitLeafer(item, bind) {
             if (bind)
                 item = item.bind(bind);
-            this.leafer ? item() : (this.__leaferWait ? this.__leaferWait.push(item) : this.__leaferWait = [item]);
+            this.leafer ? item() : this.on(ChildEvent.MOUNTED, item, 'once');
         }
         nextRender(item, bind, off) {
             this.leafer ? this.leafer.nextRender(item, bind, off) : this.waitLeafer(() => this.leafer.nextRender(item, bind, off));
@@ -5209,18 +5296,21 @@ var LeaferUI = (function (exports) {
             this.nextRender(item, null, 'off');
         }
         __bindLeafer(leafer) {
-            if (this.isLeafer) {
-                if (leafer !== null)
-                    leafer = this;
-            }
+            if (this.isLeafer && leafer !== null)
+                leafer = this;
             if (this.leafer && !leafer)
                 this.leafer.leafs--;
             this.leafer = leafer;
             if (leafer) {
                 leafer.leafs++;
                 this.__level = this.parent ? this.parent.__level + 1 : 1;
-                if (this.__leaferWait)
-                    WaitHelper.run(this.__leaferWait);
+                if (this.animation)
+                    this.__runAnimation('in');
+                if (this.__bubbleMap)
+                    this.__emitLifeEvent(ChildEvent.MOUNTED);
+            }
+            else {
+                this.__emitLifeEvent(ChildEvent.UNMOUNTED);
             }
             if (this.isBranch) {
                 const { children } = this;
@@ -5229,7 +5319,7 @@ var LeaferUI = (function (exports) {
                 }
             }
         }
-        set(_data) { }
+        set(_data, _isTemp) { }
         get(_name) { return undefined; }
         setAttr(name, value) { this[name] = value; }
         getAttr(name) { return this[name]; }
@@ -5254,6 +5344,7 @@ var LeaferUI = (function (exports) {
         findOne(_condition, _options) { return undefined; }
         findId(_id) { return undefined; }
         focus(_value) { }
+        updateState() { }
         updateLayout() {
             this.__layout.update();
         }
@@ -5361,11 +5452,24 @@ var LeaferUI = (function (exports) {
             if (relative)
                 relative.worldToInner(to ? to : inner, null, distance);
         }
+        getBoxPoint(world, relative, distance, change) {
+            return this.getBoxPointByInner(this.getInnerPoint(world, relative, distance, change), null, null, true);
+        }
+        getBoxPointByInner(inner, _relative, _distance, change) {
+            const point = change ? inner : Object.assign({}, inner), { x, y } = this.boxBounds;
+            move$2(point, -x, -y);
+            return point;
+        }
         getInnerPoint(world, relative, distance, change) {
             const point = change ? world : {};
             this.worldToInner(world, point, distance, relative);
             return point;
         }
+        getInnerPointByBox(box, _relative, _distance, change) {
+            const point = change ? box : Object.assign({}, box), { x, y } = this.boxBounds;
+            move$2(point, x, y);
+            return point;
+        }
         getInnerPointByLocal(local, _relative, distance, change) {
             return this.getInnerPoint(local, this.parent, distance, change);
         }
@@ -5377,20 +5481,23 @@ var LeaferUI = (function (exports) {
         getLocalPointByInner(inner, _relative, distance, change) {
             return this.getWorldPoint(inner, this.parent, distance, change);
         }
+        getPagePoint(world, relative, distance, change) {
+            const layer = this.leafer ? this.leafer.zoomLayer : this;
+            return layer.getInnerPoint(world, relative, distance, change);
+        }
         getWorldPoint(inner, relative, distance, change) {
             const point = change ? inner : {};
             this.innerToWorld(inner, point, distance, relative);
             return point;
         }
+        getWorldPointByBox(box, relative, distance, change) {
+            return this.getWorldPoint(this.getInnerPointByBox(box, null, null, change), relative, distance, true);
+        }
         getWorldPointByLocal(local, relative, distance, change) {
             const point = change ? local : {};
             this.localToWorld(local, point, distance, relative);
             return point;
         }
-        getPagePoint(world, relative, distance, change) {
-            const layer = this.leafer ? this.leafer.zoomLayer : this;
-            return layer.getInnerPoint(world, relative, distance, change);
-        }
         getWorldPointByPage(page, relative, distance, change) {
             const layer = this.leafer ? this.leafer.zoomLayer : this;
             return layer.getWorldPoint(page, relative, distance, change);
@@ -5404,6 +5511,9 @@ var LeaferUI = (function (exports) {
         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);
         }
@@ -5456,6 +5566,17 @@ var LeaferUI = (function (exports) {
         __drawRenderPath(_canvas) { }
         __updatePath() { }
         __updateRenderPath() { }
+        getMotionPathData() {
+            return needPlugin('path');
+        }
+        getMotionPoint(_motionDistance) {
+            return needPlugin('path');
+        }
+        getMotionTotal() {
+            return 0;
+        }
+        __updateMotionPath() { }
+        __runAnimation(_type, _complete) { }
         __updateSortChildren() { }
         add(_child, _index) { }
         remove(_child, destroy) {
@@ -5481,6 +5602,10 @@ var LeaferUI = (function (exports) {
                 fn = boundsType;
             fn(defaultValue)(this.prototype, attrName);
         }
+        __emitLifeEvent(type) {
+            if (this.hasEvent(type))
+                this.emitEvent(new ChildEvent(type, this, this.parent));
+        }
         destroy() {
             if (!this.destroyed) {
                 const { parent } = this;
@@ -5488,11 +5613,10 @@ var LeaferUI = (function (exports) {
                     this.remove();
                 if (this.children)
                     this.removeAll(true);
-                if (this.hasEvent(ChildEvent.DESTROY))
-                    this.emitEvent(new ChildEvent(ChildEvent.DESTROY, this, parent));
+                this.__emitLifeEvent(ChildEvent.DESTROY);
                 this.__.destroy();
                 this.__layout.destroy();
-                this.__captureMap = this.__bubbleMap = this.__parentWait = this.__leaferWait = null;
+                this.destroyEventer();
                 this.destroyed = true;
             }
         }
@@ -5558,8 +5682,8 @@ var LeaferUI = (function (exports) {
                 this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
             child.__layout.boxChanged || child.__layout.boxChange();
             child.__layout.matrixChanged || child.__layout.matrixChange();
-            if (child.__parentWait)
-                WaitHelper.run(child.__parentWait);
+            if (child.__bubbleMap)
+                child.__emitLifeEvent(ChildEvent.ADD);
             if (this.leafer) {
                 child.__bindLeafer(this.leafer);
                 if (this.leafer.created)
@@ -5572,16 +5696,10 @@ var LeaferUI = (function (exports) {
         }
         remove(child, destroy) {
             if (child) {
-                const index = this.children.indexOf(child);
-                if (index > -1) {
-                    this.children.splice(index, 1);
-                    if (child.isBranch)
-                        this.__.__childBranchNumber = (this.__.__childBranchNumber || 1) - 1;
-                    this.__preRemove();
-                    this.__realRemoveChild(child);
-                    if (destroy)
-                        child.destroy();
-                }
+                if (child.animationOut)
+                    child.__runAnimation('out', () => this.__remove(child, destroy));
+                else
+                    this.__remove(child, destroy);
             }
             else if (child === undefined) {
                 super.remove(null, destroy);
@@ -5603,6 +5721,18 @@ var LeaferUI = (function (exports) {
         clear() {
             this.removeAll(true);
         }
+        __remove(child, destroy) {
+            const index = this.children.indexOf(child);
+            if (index > -1) {
+                this.children.splice(index, 1);
+                if (child.isBranch)
+                    this.__.__childBranchNumber = (this.__.__childBranchNumber || 1) - 1;
+                this.__preRemove();
+                this.__realRemoveChild(child);
+                if (destroy)
+                    child.destroy();
+            }
+        }
         __preRemove() {
             if (this.__hasMask)
                 this.__updateMask();
@@ -5612,6 +5742,7 @@ var LeaferUI = (function (exports) {
             this.__layout.affectChildrenSort && this.__layout.childrenSortChange();
         }
         __realRemoveChild(child) {
+            child.__emitLifeEvent(ChildEvent.REMOVE);
             child.parent = null;
             if (this.leafer) {
                 child.__bindLeafer(null);
@@ -5624,8 +5755,6 @@ var LeaferUI = (function (exports) {
         }
         __emitChildEvent(type, child) {
             const event = new ChildEvent(type, child, this);
-            if (child.hasEvent(type))
-                child.emitEvent(event);
             if (this.hasEvent(type) && !this.isLeafer)
                 this.emitEvent(event);
             this.leafer.emitEvent(event);
@@ -5788,8 +5917,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.1";
-    const inviteCode = {};
+    const version = "1.0.3";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6016,9 +6144,13 @@ var LeaferUI = (function (exports) {
         });
     }
     function updateChange(updateList) {
+        let layout;
         updateList.list.forEach(leaf => {
-            if (leaf.__layout.opacityChanged)
+            layout = leaf.__layout;
+            if (layout.opacityChanged)
                 updateAllWorldOpacity(leaf);
+            if (layout.stateStyleChanged)
+                setTimeout(() => layout.stateStyleChanged && leaf.updateState());
             leaf.__updateChange();
         });
     }
@@ -6384,7 +6516,6 @@ var LeaferUI = (function (exports) {
             Platform.requestRender(() => {
                 this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
                 if (this.running) {
-                    this.target.emit(AnimateEvent.FRAME);
                     if (this.changed && this.canvas.view)
                         this.render();
                     this.target.emit(RenderEvent.NEXT);
@@ -6729,36 +6860,6 @@ var LeaferUI = (function (exports) {
     });
     Platform.layout = Layouter.fullLayout;
 
-    const TextConvert = {};
-    const ColorConvert = {};
-    const PathArrow = {};
-    const Paint = {};
-    const PaintImage = {};
-    const PaintGradient = {};
-    const Effect = {};
-    const Export = {};
-    const State = {};
-
-    function stateType(defaultValue) {
-        return decorateLeafAttr(defaultValue, (key) => attr({
-            set(value) {
-                this.__setAttr(key, value);
-                this.waitLeafer(() => { if (State.setStyle)
-                    State.setStyle(this, key + 'Style', value); });
-            }
-        }));
-    }
-    function arrowType(defaultValue) {
-        return decorateLeafAttr(defaultValue, (key) => attr({
-            set(value) {
-                if (this.__setAttr(key, value)) {
-                    const data = this.__;
-                    data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-                    doStrokeType(this);
-                }
-            }
-        }));
-    }
     function effectType(defaultValue) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
@@ -6793,10 +6894,33 @@ var LeaferUI = (function (exports) {
         };
     }
 
+    const TextConvert = {};
+    const ColorConvert = {};
+    const PathArrow = {};
+    const Paint = {};
+    const PaintImage = {};
+    const PaintGradient = {};
+    const Effect = {};
+    const Export = {};
+    const State = {
+        setStyleName(_leaf, _styleName, _value) { return needPlugin('state'); },
+        set(_leaf, _stateName) { return needPlugin('state'); }
+    };
+    const Transition = {
+        list: {},
+        register(attrName, fn) {
+            Transition.list[attrName] = fn;
+        },
+        get(attrName) {
+            return Transition.list[attrName];
+        }
+    };
+
     const { parse } = PathConvert;
     const emptyPaint = {};
     const debug$5 = Debug.get('UIData');
     class UIData extends LeafData {
+        get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
         get __strokeWidth() {
             const { strokeWidth, strokeWidthFixed } = this;
             if (strokeWidthFixed) {
@@ -6815,9 +6939,10 @@ var LeaferUI = (function (exports) {
         get __autoSide() { return !this._width || !this._height; }
         get __autoSize() { return !this._width && !this._height; }
         setVisible(value) {
-            if (this.__leaf.leafer)
-                this.__leaf.leafer.watcher.hasVisible = true;
             this._visible = value;
+            const { leafer } = this.__leaf;
+            if (leafer)
+                leafer.watcher.hasVisible = true;
         }
         setWidth(value) {
             if (value < 0) {
@@ -6941,6 +7066,11 @@ var LeaferUI = (function (exports) {
     }
 
     class LeaferData extends GroupData {
+        __getInputData() {
+            const data = super.__getInputData();
+            canvasSizeAttrs.forEach(key => delete data[key]);
+            return data;
+        }
     }
 
     class FrameData extends BoxData {
@@ -7003,7 +7133,7 @@ var LeaferUI = (function (exports) {
         __setImageFill(value) {
             if (this.__leaf.image)
                 this.__leaf.image = null;
-            this.fill = value ? { type: 'image', mode: 'strench', url: value } : undefined;
+            this.fill = value ? { type: 'image', mode: 'stretch', url: value } : undefined;
         }
         __getData() {
             const data = super.__getData();
@@ -7018,6 +7148,11 @@ var LeaferUI = (function (exports) {
     }
 
     class CanvasData extends RectData {
+        __getInputData() {
+            const data = super.__getInputData();
+            data.url = this.__leaf.canvas.toDataURL('image/png');
+            return data;
+        }
     }
 
     const UIBounds = {
@@ -7188,19 +7323,8 @@ var LeaferUI = (function (exports) {
     exports.UI = UI_1 = class UI extends exports.Leaf {
         get app() { return this.leafer && this.leafer.app; }
         get isFrame() { return false; }
-        set scale(value) {
-            if (typeof value === 'number') {
-                this.scaleX = this.scaleY = value;
-            }
-            else {
-                this.scaleX = value.x;
-                this.scaleY = value.y;
-            }
-        }
-        get scale() {
-            const { scaleX, scaleY } = this;
-            return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
-        }
+        set scale(value) { MathHelper.assignScale(this, value); }
+        get scale() { return this.__.scale; }
         get pen() {
             const { path } = this.__;
             pen.set(this.path = path || []);
@@ -7215,8 +7339,15 @@ var LeaferUI = (function (exports) {
             super(data);
         }
         reset(_data) { }
-        set(data) {
-            Object.assign(this, data);
+        set(data, isTemp) {
+            if (isTemp) {
+                this.lockNormalStyle = true;
+                Object.assign(this, data);
+                this.lockNormalStyle = false;
+            }
+            else {
+                Object.assign(this, data);
+            }
         }
         get(name) {
             return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -7279,11 +7410,18 @@ var LeaferUI = (function (exports) {
                 drawer.rect(x, y, width, height);
             }
         }
+        animate(_keyframe, _options, _type, _isTemp) {
+            return needPlugin('animate');
+        }
+        killAnimate(_type) { }
         export(filename, options) {
             return Export.export(this, filename, options);
         }
-        clone() {
-            return UI_1.one(this.toJSON());
+        clone(newData) {
+            const json = this.toJSON();
+            if (newData)
+                Object.assign(json, newData);
+            return UI_1.one(json);
         }
         static one(data, x, y, width, height) {
             return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
@@ -7299,6 +7437,8 @@ var LeaferUI = (function (exports) {
         static setEditInner(_editorName) { }
         destroy() {
             this.fill = this.stroke = null;
+            if (this.__animate)
+                this.killAnimate();
             super.destroy();
         }
     };
@@ -7326,12 +7466,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         visibleType(true)
     ], exports.UI.prototype, "visible", void 0);
-    __decorate([
-        stateType(false)
-    ], exports.UI.prototype, "selected", void 0);
-    __decorate([
-        stateType(false)
-    ], exports.UI.prototype, "disabled", void 0);
     __decorate([
         surfaceType(false)
     ], exports.UI.prototype, "locked", void 0);
@@ -7404,45 +7538,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         pathType(true)
     ], exports.UI.prototype, "closed", void 0);
-    __decorate([
-        autoLayoutType(false)
-    ], exports.UI.prototype, "flow", void 0);
     __decorate([
         boundsType(0)
     ], exports.UI.prototype, "padding", void 0);
-    __decorate([
-        boundsType(0)
-    ], exports.UI.prototype, "gap", void 0);
-    __decorate([
-        boundsType('top-left')
-    ], exports.UI.prototype, "flowAlign", void 0);
-    __decorate([
-        boundsType(false)
-    ], exports.UI.prototype, "flowWrap", void 0);
-    __decorate([
-        boundsType('box')
-    ], exports.UI.prototype, "itemBox", void 0);
-    __decorate([
-        boundsType(true)
-    ], exports.UI.prototype, "inFlow", void 0);
-    __decorate([
-        boundsType()
-    ], exports.UI.prototype, "autoWidth", void 0);
-    __decorate([
-        boundsType()
-    ], exports.UI.prototype, "autoHeight", void 0);
-    __decorate([
-        boundsType()
-    ], exports.UI.prototype, "lockRatio", void 0);
-    __decorate([
-        boundsType()
-    ], exports.UI.prototype, "autoBox", void 0);
-    __decorate([
-        boundsType()
-    ], exports.UI.prototype, "widthRange", void 0);
-    __decorate([
-        boundsType()
-    ], exports.UI.prototype, "heightRange", void 0);
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "draggable", void 0);
@@ -7506,12 +7604,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         strokeType(10)
     ], exports.UI.prototype, "miterLimit", void 0);
-    __decorate([
-        arrowType('none')
-    ], exports.UI.prototype, "startArrow", void 0);
-    __decorate([
-        arrowType('none')
-    ], exports.UI.prototype, "endArrow", void 0);
     __decorate([
         pathType(0)
     ], exports.UI.prototype, "cornerRadius", void 0);
@@ -7533,24 +7625,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         effectType()
     ], exports.UI.prototype, "grayscale", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "normalStyle", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "hoverStyle", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "pressStyle", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "focusStyle", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "selectedStyle", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "disabledStyle", void 0);
     __decorate([
         dataType({})
     ], exports.UI.prototype, "data", void 0);
@@ -7577,7 +7651,7 @@ var LeaferUI = (function (exports) {
             if (!this.children)
                 this.children = [];
         }
-        set(data) {
+        set(data, isTemp) {
             if (data.children) {
                 const { children } = data;
                 delete data.children;
@@ -7587,7 +7661,7 @@ var LeaferUI = (function (exports) {
                 else {
                     this.clear();
                 }
-                super.set(data);
+                super.set(data, isTemp);
                 let child;
                 children.forEach(childData => {
                     child = childData.__ ? childData : UICreator.get(childData.tag, childData);
@@ -7596,7 +7670,7 @@ var LeaferUI = (function (exports) {
                 data.children = children;
             }
             else {
-                super.set(data);
+                super.set(data, isTemp);
             }
         }
         toJSON(options) {
@@ -7923,13 +7997,20 @@ var LeaferUI = (function (exports) {
             }
         }
         zoom(_zoomType, _padding, _fixedScale) {
-            return debug$4.error('need @leafer-in/view');
+            return needPlugin('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();
         }
@@ -8013,7 +8094,7 @@ var LeaferUI = (function (exports) {
     const rect$1 = exports.Rect.prototype;
     const group$1 = exports.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;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
         get isBranchLeaf() { return true; }
@@ -8027,20 +8108,23 @@ var LeaferUI = (function (exports) {
             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();
@@ -8060,13 +8144,13 @@ var LeaferUI = (function (exports) {
                 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() { }
@@ -8400,14 +8484,26 @@ var LeaferUI = (function (exports) {
     exports.Image = __decorate([
         registerUI()
     ], exports.Image);
+    const MyImage = exports.Image;
 
     exports.Canvas = class Canvas extends exports.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();
@@ -8424,19 +8520,18 @@ var LeaferUI = (function (exports) {
             this.paint();
         }
         paint() {
-            this.forceUpdate('fill');
+            this.forceRender();
         }
         __drawAfterFill(canvas, _options) {
-            const origin = this.canvas.view;
-            const { width, height } = this;
-            if (this.__.cornerRadius || this.pathInputed) {
+            const { width, height, cornerRadius } = this.__, { view } = this.canvas;
+            if (cornerRadius || this.pathInputed) {
                 canvas.save();
                 canvas.clip();
-                canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
+                canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
                 canvas.restore();
             }
             else {
-                canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
+                canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
             }
         }
         __updateSize() {
@@ -8466,7 +8561,7 @@ var LeaferUI = (function (exports) {
         resizeType(100)
     ], exports.Canvas.prototype, "height", void 0);
     __decorate([
-        resizeType(Platform.devicePixelRatio)
+        resizeType(1)
     ], exports.Canvas.prototype, "pixelRatio", void 0);
     __decorate([
         resizeType(true)
@@ -8490,13 +8585,13 @@ var LeaferUI = (function (exports) {
             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) {
@@ -8689,7 +8784,8 @@ var LeaferUI = (function (exports) {
         drawPoints(_points, _curve, _close) { return this; }
         clearPath() { return this; }
         paint() {
-            this.pathElement.forceUpdate('path');
+            if (!this.pathElement.__layout.boxChanged)
+                this.pathElement.forceUpdate('path');
         }
     };
     __decorate([
@@ -8699,7 +8795,7 @@ var LeaferUI = (function (exports) {
         penPathType()
     ], exports.Pen.prototype, "path", void 0);
     exports.Pen = __decorate([
-        useModule(PathCreator, ['set', 'beginPath', 'path']),
+        useModule(PathCreator, ['set', 'beginPath', 'path', 'paint']),
         registerUI()
     ], exports.Pen);
     function penPathType() {
@@ -8878,21 +8974,29 @@ var LeaferUI = (function (exports) {
         constructor(params) {
             super(params.type);
             this.bubbles = true;
+            this.getInner = this.getInnerPoint;
+            this.getLocal = this.getLocalPoint;
+            this.getPage = this.getPagePoint;
             Object.assign(this, params);
         }
-        getPage() {
-            return this.current.getPagePoint(this);
+        getBoxPoint(relative) {
+            if (!relative)
+                relative = this.current;
+            return relative.getBoxPoint(this);
         }
-        getInner(relative) {
+        getInnerPoint(relative) {
             if (!relative)
                 relative = this.current;
             return relative.getInnerPoint(this);
         }
-        getLocal(relative) {
+        getLocalPoint(relative) {
             if (!relative)
                 relative = this.current;
             return relative.getLocalPoint(this);
         }
+        getPagePoint() {
+            return this.current.getPagePoint(this);
+        }
         static changeName(oldName, newName) {
             EventCreator.changeName(oldName, newName);
         }
@@ -8922,6 +9026,7 @@ var LeaferUI = (function (exports) {
     exports.PointerEvent = __decorate([
         registerUIEvent()
     ], exports.PointerEvent);
+    const MyPointerEvent = exports.PointerEvent;
 
     const move$1 = {};
     exports.DragEvent = class DragEvent extends exports.PointerEvent {
@@ -8999,7 +9104,7 @@ var LeaferUI = (function (exports) {
         }
         getPageBounds() {
             const total = this.getPageTotal();
-            const start = this.getPage();
+            const start = this.getPagePoint();
             const bounds = {};
             BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
             BoundsHelper.unsign(bounds);
@@ -9021,6 +9126,7 @@ var LeaferUI = (function (exports) {
     exports.DragEvent = __decorate([
         registerUIEvent()
     ], exports.DragEvent);
+    const MyDragEvent = exports.DragEvent;
 
     exports.DropEvent = class DropEvent extends exports.PointerEvent {
         static setList(data) {
@@ -9102,36 +9208,32 @@ var LeaferUI = (function (exports) {
 
     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 = exports.Leafer.prototype;
     leafer.initType = function (type) {
@@ -9320,7 +9422,13 @@ var LeaferUI = (function (exports) {
                     find.add(list[i]);
             }
             return find;
-        }
+        },
+        pathCanDrag(path) {
+            return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(exports.DragEvent.DRAG)));
+        },
+        pathHasOutside(path) {
+            return path && path.list.some(item => item.isOutside);
+        },
     };
     const I = InteractionHelper;
 
@@ -9580,7 +9688,7 @@ var LeaferUI = (function (exports) {
         if (leaf.destroyed)
             return false;
         if (leaf.__.hitSelf && !exclude(leaf, excludePath)) {
-            if (State.updateEventStyle)
+            if (State.updateEventStyle && !capture)
                 State.updateEventStyle(leaf, type);
             if (leaf.hasEvent(type, capture)) {
                 data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3);
@@ -9630,15 +9738,18 @@ var LeaferUI = (function (exports) {
             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 transforming() { return this.transformer.transforming; }
-        get moveMode() { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+        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.canHover && this.downData && this.isTreePath(this.downData); }
@@ -9647,7 +9758,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -9682,7 +9793,7 @@ var LeaferUI = (function (exports) {
                 this.tapWait();
                 this.longPressWait(data);
             }
-            this.waitMenuTap = PointerButton.right(data);
+            this.waitRightTap = PointerButton.right(data);
             this.dragger.setDragData(data);
             if (!this.isHoldRightKey)
                 this.updateCursor(data);
@@ -9710,7 +9821,7 @@ var LeaferUI = (function (exports) {
                 if (canDrag) {
                     if (this.waitTap)
                         this.pointerWaitCancel();
-                    this.waitMenuTap = false;
+                    this.waitRightTap = false;
                 }
                 this.dragger.checkDrag(data, canDrag);
             }
@@ -9764,10 +9875,15 @@ var LeaferUI = (function (exports) {
         menu(data) {
             this.findPath(data);
             this.emit(exports.PointerEvent.MENU, data);
+            this.waitMenuTap = true;
+            if (!this.downData && this.waitRightTap)
+                this.menuTap(data);
         }
         menuTap(data) {
-            if (this.waitMenuTap)
+            if (this.waitRightTap && this.waitMenuTap) {
                 this.emit(exports.PointerEvent.MENU_TAP, data);
+                this.waitRightTap = this.waitMenuTap = false;
+            }
         }
         move(data) {
             this.transformer.move(data);
@@ -9899,11 +10015,11 @@ var LeaferUI = (function (exports) {
             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);
@@ -10132,8 +10248,8 @@ var LeaferUI = (function (exports) {
         this.__drawRenderPath(canvas); };
 
     const matrix$2 = new Matrix();
-    const ui$2 = exports.UI.prototype;
-    ui$2.__updateHitCanvas = function () {
+    const ui$3 = exports.UI.prototype;
+    ui$3.__updateHitCanvas = function () {
         const data = this.__, { hitCanvasManager } = this.leafer;
         const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
         const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
@@ -10160,7 +10276,7 @@ var LeaferUI = (function (exports) {
         this.__drawHitPath(h);
         h.setStrokeOptions(data);
     };
-    ui$2.__hit = function (inner) {
+    ui$3.__hit = function (inner) {
         if (Platform.name === 'miniapp')
             this.__drawHitPath(this.__hitCanvas);
         const data = this.__;
@@ -10200,23 +10316,23 @@ var LeaferUI = (function (exports) {
         return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
     };
 
-    const ui$1 = new exports.UI();
+    const ui$2 = new exports.UI();
     const rect = exports.Rect.prototype;
     rect.__updateHitCanvas = function () {
         if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
-            ui$1.__updateHitCanvas.call(this);
+            ui$2.__updateHitCanvas.call(this);
         else if (this.__hitCanvas)
             this.__hitCanvas = null;
     };
     rect.__hitFill = function (inner) {
-        return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+        return this.__hitCanvas ? ui$2.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
 
-    const ui = exports.UI.prototype, group = exports.Group.prototype;
-    ui.find = function (condition, options) {
+    const ui$1 = exports.UI.prototype, group = exports.Group.prototype;
+    ui$1.find = function (condition, options) {
         return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
     };
-    ui.findOne = function (condition, options) {
+    ui$1.findOne = function (condition, options) {
         return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
     };
     group.pick = function (hitPoint, options) {
@@ -10598,16 +10714,21 @@ var LeaferUI = (function (exports) {
     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) {
         let { width, height } = image;
         if (paint.padding)
             box = tempBox.set(box).shrink(paint.padding);
+        if (paint.mode === 'strench')
+            paint.mode = 'stretch';
         const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
         const sameBox = box.width === width && box.height === height;
         const data = { mode };
@@ -10621,13 +10742,10 @@ var LeaferUI = (function (exports) {
                 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 };
@@ -10639,7 +10757,7 @@ var LeaferUI = (function (exports) {
         if (offset)
             x += offset.x, y += offset.y;
         switch (mode) {
-            case 'strench':
+            case 'stretch':
                 if (!sameBox)
                     width = box.width, height = box.height;
                 break;
@@ -10666,7 +10784,7 @@ var LeaferUI = (function (exports) {
                 translate(data.transform, box.x, box.y);
             }
         }
-        if (scaleX && mode !== 'strench') {
+        if (scaleX && mode !== 'stretch') {
             data.scaleX = scaleX;
             data.scaleY = scaleY;
         }
@@ -10770,7 +10888,7 @@ var LeaferUI = (function (exports) {
     const { ceil, abs: abs$2 } = Math;
     function createPattern(ui, paint, pixelRatio) {
         let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-        const id = scaleX + '-' + scaleY;
+        const id = scaleX + '-' + scaleY + '-' + pixelRatio;
         if (paint.patternId !== id && !ui.destroyed) {
             scaleX = abs$2(scaleX);
             scaleY = abs$2(scaleY);
@@ -10832,7 +10950,8 @@ var LeaferUI = (function (exports) {
     const { abs: abs$1 } = Math;
     function checkImage(ui, canvas, paint, allowPaint) {
         const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-        if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
+        const { pixelRatio } = canvas;
+        if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
             return false;
         }
         else {
@@ -10840,8 +10959,8 @@ var LeaferUI = (function (exports) {
             if (allowPaint) {
                 if (!data.repeat) {
                     let { width, height } = data;
-                    width *= abs$1(scaleX) * canvas.pixelRatio;
-                    height *= abs$1(scaleY) * canvas.pixelRatio;
+                    width *= abs$1(scaleX) * pixelRatio;
+                    height *= abs$1(scaleY) * pixelRatio;
                     if (data.scaleX) {
                         width *= data.scaleX;
                         height *= data.scaleY;
@@ -10866,15 +10985,15 @@ var LeaferUI = (function (exports) {
                 return true;
             }
             else {
-                if (!paint.style || Export.running) {
-                    createPattern(ui, paint, canvas.pixelRatio);
+                if (!paint.style || paint.sync || Export.running) {
+                    createPattern(ui, paint, pixelRatio);
                 }
                 else {
                     if (!paint.patternTask) {
                         paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
                             paint.patternTask = null;
                             if (canvas.bounds.hit(ui.__nowWorld))
-                                createPattern(ui, paint, canvas.pixelRatio);
+                                createPattern(ui, paint, pixelRatio);
                             ui.forceUpdate('surface');
                         }), 300);
                     }
@@ -10938,14 +11057,16 @@ var LeaferUI = (function (exports) {
         return data;
     }
     function applyStops(gradient, stops, opacity) {
-        let stop;
-        for (let i = 0, len = stops.length; i < len; i++) {
-            stop = stops[i];
-            if (typeof stop === 'string') {
-                gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
-            }
-            else {
-                gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+        if (stops) {
+            let stop;
+            for (let i = 0, len = stops.length; i < len; i++) {
+                stop = stops[i];
+                if (typeof stop === 'string') {
+                    gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
+                }
+                else {
+                    gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+                }
             }
         }
     }
@@ -11634,7 +11755,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { top: top$1, right: right$2, bottom: bottom$1, left: left$2 } = exports.Direction4;
+    const { top: top$2, right: right$3, bottom: bottom$2, left: left$3 } = exports.Direction4;
     function getDrawData(content, style) {
         if (typeof content !== 'string')
             content = String(content);
@@ -11644,12 +11765,12 @@ var LeaferUI = (function (exports) {
         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 = {
@@ -11673,19 +11794,19 @@ var LeaferUI = (function (exports) {
         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]);
             }
         }
     }
@@ -11701,10 +11822,15 @@ var LeaferUI = (function (exports) {
     };
 
     function string(color, opacity) {
-        if (typeof color === 'string')
-            return color;
+        const doOpacity = typeof opacity === 'number' && opacity !== 1;
+        if (typeof color === 'string') {
+            if (doOpacity && ColorConvert.object)
+                color = ColorConvert.object(color);
+            else
+                return color;
+        }
         let a = color.a === undefined ? 1 : color.a;
-        if (opacity)
+        if (doOpacity)
             a *= opacity;
         const rgb = color.r + ',' + color.g + ',' + color.b;
         return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
@@ -11736,6 +11862,7 @@ var LeaferUI = (function (exports) {
         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) => {
@@ -11745,19 +11872,13 @@ var LeaferUI = (function (exports) {
                 };
                 const { toURL } = Platform;
                 const { download } = Platform.origin;
-                if (filename === 'json') {
-                    return over({ data: leaf.toJSON(options.json) });
-                }
-                else if (fileType === 'json') {
-                    download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
-                    return over({ data: true });
+                if (fileType === 'json') {
+                    isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                    return over({ data: isDownload ? true : leaf.toJSON(options.json) });
                 }
-                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) {
@@ -11766,14 +11887,8 @@ var LeaferUI = (function (exports) {
                         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();
@@ -11807,9 +11922,17 @@ var LeaferUI = (function (exports) {
                             }
                             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;
@@ -11930,9 +12053,6 @@ var LeaferUI = (function (exports) {
                 command = data[i];
                 switch (command) {
                     case M$2:
-                        scalePoints(data, scaleX, scaleY, i, 1);
-                        i += 3;
-                        break;
                     case L$2:
                         scalePoints(data, scaleX, scaleY, i, 1);
                         i += 3;
@@ -11999,6 +12119,7 @@ var LeaferUI = (function (exports) {
     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 } = exports.Direction9;
     function scaleResize(leaf, scaleX, scaleY) {
         if (leaf.pathInputed) {
             scaleResizePath(leaf, scaleX, scaleY);
@@ -12011,15 +12132,36 @@ var LeaferUI = (function (exports) {
         }
     }
     function scaleResizeFontSize(leaf, scaleX, scaleY) {
-        const { width, height } = leaf.__localBoxBounds;
-        if (scaleX !== 1) {
-            leaf.fontSize *= scaleX;
-            leaf.y -= height * (scaleX - scaleY) / 2;
-        }
-        else if (scaleY !== 1) {
-            leaf.fontSize *= scaleY;
-            leaf.x -= width * (scaleY - scaleX) / 2;
+        const { app } = leaf;
+        const editor = app && app.editor;
+        let fontScale = scaleX;
+        if (editor.editing) {
+            const layout = leaf.__layout;
+            let { width, height } = layout.boxBounds;
+            width *= scaleY - scaleX;
+            height *= scaleX - scaleY;
+            switch (editor.resizeDirection) {
+                case top$1:
+                case bottom$1:
+                    fontScale = scaleY;
+                    layout.affectScaleOrRotation ? leaf.moveInner(-width / 2, 0) : leaf.x -= width / 2;
+                    break;
+                case left$2:
+                case right$2:
+                    layout.affectScaleOrRotation ? leaf.moveInner(0, -height / 2) : leaf.y -= height / 2;
+                    break;
+                case topLeft$1:
+                case topRight$1:
+                    layout.affectScaleOrRotation ? leaf.moveInner(0, -height) : leaf.y -= height;
+                    break;
+            }
         }
+        leaf.fontSize *= fontScale;
+        const data = leaf.__;
+        if (!data.__autoWidth)
+            leaf.width *= fontScale;
+        if (!data.__autoHeight)
+            leaf.height *= fontScale;
     }
     function scaleResizePath(leaf, scaleX, scaleY) {
         PathScaler.scale(leaf.__.path, scaleX, scaleY);
@@ -12065,7 +12207,7 @@ var LeaferUI = (function (exports) {
         this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
     };
     exports.Text.prototype.__scaleResize = function (scaleX, scaleY) {
-        if (this.__.__autoSize && (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size'))) {
+        if (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size')) {
             scaleResizeFontSize(this, scaleX, scaleY);
         }
         else {
@@ -12389,7 +12531,7 @@ var LeaferUI = (function (exports) {
             if (this.allowDrag(e)) {
                 const { editor } = this;
                 const { stroke, area } = editor.mergeConfig;
-                const { x, y } = e.getInner(this);
+                const { x, y } = e.getInnerPoint(this);
                 this.bounds.set(x, y);
                 this.selectArea.setStyle({ visible: true, stroke, x, y }, area);
                 this.selectArea.setBounds(this.bounds.get());
@@ -12561,7 +12703,19 @@ var LeaferUI = (function (exports) {
             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;
                 }
@@ -12583,7 +12737,8 @@ var LeaferUI = (function (exports) {
                 const nowHeight = boxBounds.height * element.scaleY;
                 scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
             }
-            toPoint(around || align, boxBounds, origin);
+            toPoint(around || align, boxBounds, origin, true);
+            console.log({ origin, scaleX, scaleY, direction, lockRatio, around });
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
         getRotateData(bounds, direction, current, last, around) {
@@ -12604,7 +12759,7 @@ var LeaferUI = (function (exports) {
                 default:
                     align = 'center';
             }
-            toPoint(around || align, bounds, origin);
+            toPoint(around || align, bounds, origin, true);
             return { origin, rotation: PointHelper.getRotation(last, origin, current) };
         },
         getSkewData(bounds, direction, move, around) {
@@ -12631,10 +12786,10 @@ var LeaferUI = (function (exports) {
                     align = 'left';
                     skewY = 1;
             }
-            const { x, y, width, height } = bounds;
-            last.x = x + last.x * width;
-            last.y = y + last.y * height;
-            toPoint(around || align, bounds, origin);
+            const { width, height } = bounds;
+            last.x = last.x * width;
+            last.y = last.y * height;
+            toPoint(around || align, bounds, origin, true);
             const rotation = PointHelper.getRotation(last, origin, { x: last.x + (skewX ? move.x : 0), y: last.y + (skewY ? move.y : 0) });
             skewX ? skewX = -rotation : skewY = rotation;
             return { origin, skewX, skewY };
@@ -12915,6 +13070,7 @@ var LeaferUI = (function (exports) {
             }
             else if (e.current.pointType === 'resize') {
                 editor.dragStartBounds = Object.assign({}, editor.element.getLayoutBounds('box', 'local'));
+                editor.resizeDirection = e.current.direction;
             }
         }
         onDragEnd(e) {
@@ -12922,6 +13078,7 @@ var LeaferUI = (function (exports) {
             this.moving = false;
             if (e.current.name === 'rect')
                 this.editor.opacity = 1;
+            this.editor.resizeDirection = undefined;
         }
         onDrag(e) {
             const { editor } = this;
@@ -13128,6 +13285,7 @@ ${filterStyle}
         }
         else {
             editor.leafList.reset();
+            editor.closeInnerEditor();
         }
         editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
         editor.checkOpenedGroups();
@@ -13266,7 +13424,7 @@ ${filterStyle}
         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 exports.Rect({ visible: false });
@@ -13356,7 +13514,7 @@ ${filterStyle}
             let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
             if (e instanceof exports.ZoomEvent) {
                 if (resizeable === 'zoom')
-                    e.stop(), this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
+                    e.stop(), this.scaleOf(element.getBoxPoint(e), e.scale, e.scale);
             }
             else {
                 const { direction } = e.current;
@@ -13381,13 +13539,13 @@ ${filterStyle}
             let origin, rotation;
             if (e instanceof exports.RotateEvent) {
                 if (rotateable === 'rotate')
-                    e.stop(), rotation = e.rotation, origin = element.getInnerPoint(e);
+                    e.stop(), rotation = e.rotation, origin = element.getBoxPoint(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 : (element.around || element.origin || around || 'center'));
+                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
                 rotation = data.rotation;
                 origin = data.origin;
             }
@@ -14308,6 +14466,21 @@ ${filterStyle}
         data[startIndex + 1] = point.y;
     }
 
+    function arrowType(defaultValue) {
+        return decorateLeafAttr(defaultValue, (key) => attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const data = this.__;
+                    data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                    doStrokeType(this);
+                }
+            }
+        }));
+    }
+
+    const ui = exports.UI.prototype;
+    arrowType('none')(ui, 'startArrow');
+    arrowType('none')(ui, 'endArrow');
     Object.assign(PathArrow, PathArrowModule);
 
     const textCaseMap = {
@@ -14388,26 +14561,42 @@ ${filterStyle}
         onLoad() {
             const { editor } = this;
             const { config } = editor.app;
-            this._keyEvent = config.keyEvent;
-            config.keyEvent = false;
             const text = this.editTarget;
             text.visible = false;
+            this.isHTMLText = !(text instanceof exports.Text);
+            this._keyEvent = config.keyEvent;
+            config.keyEvent = false;
             const div = this.editDom = document.createElement('div');
             const { style } = div;
             div.contentEditable = 'true';
-            div.innerText = text.text;
             style.position = 'fixed';
             style.transformOrigin = 'left top';
             style.boxSizing = 'border-box';
-            const { scaleX, scaleY } = text.worldTransform;
-            this.textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-            const fontSize = text.fontSize * this.textScale;
-            if (fontSize < 12)
-                this.textScale *= 12 / fontSize;
-            editor.app.view.appendChild(div);
+            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_(exports.PointerEvent.DOWN, (e) => { if (e.origin.target !== div)
-                    editor.closeInnerEditor(); })
+                editor.app.on_(exports.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);
@@ -14432,7 +14621,8 @@ ${filterStyle}
             selection.addRange(range);
         }
         onInput() {
-            this.editTarget.text = this.editDom.innerText.replace(/\n\n/, '\n');
+            const { editDom } = this;
+            this.editTarget.text = this.isHTMLText ? editDom.innerHTML : editDom.innerText.replace(/\n\n/, '\n');
         }
         onFocus() {
             this.editDom.style.outline = 'none';
@@ -14444,14 +14634,14 @@ ${filterStyle}
         onUpdate() {
             const { editTarget: text, textScale } = this;
             const { style } = this.editDom;
-            const { x, y } = text.app.tree.clientBounds;
+            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';
-            updateStyle(this.editDom, text, this.textScale);
+            this.isHTMLText || updateStyle(this.editDom, text, this.textScale);
         }
         onUnload() {
             const { editTarget: text, editor, editDom: dom } = this;
@@ -14482,11 +14672,13 @@ ${filterStyle}
 
     exports.HTMLText = class HTMLText extends exports.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';
@@ -14495,9 +14687,9 @@ ${filterStyle}
                 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;
@@ -14510,8 +14702,10 @@ ${filterStyle}
                             </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();
@@ -14528,7 +14722,6 @@ ${filterStyle}
     ], exports.HTMLText);
 
     exports.AlignHelper = AlignHelper;
-    exports.AnimateEvent = AnimateEvent;
     exports.AroundHelper = AroundHelper;
     exports.ArrowData = ArrowData;
     exports.AutoBounds = AutoBounds;
@@ -14565,6 +14758,7 @@ ${filterStyle}
     exports.EllipseHelper = EllipseHelper;
     exports.Event = Event;
     exports.EventCreator = EventCreator;
+    exports.Eventer = Eventer;
     exports.Export = Export;
     exports.FileHelper = FileHelper;
     exports.FrameData = FrameData;
@@ -14604,6 +14798,9 @@ ${filterStyle}
     exports.Matrix = Matrix;
     exports.MatrixHelper = MatrixHelper;
     exports.MultiTouchHelper = MultiTouchHelper;
+    exports.MyDragEvent = MyDragEvent;
+    exports.MyImage = MyImage;
+    exports.MyPointerEvent = MyPointerEvent;
     exports.NeedConvertToCanvasCommandMap = NeedConvertToCanvasCommandMap;
     exports.OneRadian = OneRadian;
     exports.PI2 = PI2;
@@ -14651,6 +14848,7 @@ ${filterStyle}
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert;
     exports.TextData = TextData;
+    exports.Transition = Transition;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;
     exports.UIBounds = UIBounds;
     exports.UICreator = UICreator;
@@ -14687,10 +14885,11 @@ ${filterStyle}
     exports.getMatrixData = getMatrixData;
     exports.getPointData = getPointData;
     exports.hitType = hitType;
-    exports.inviteCode = inviteCode;
+    exports.isNull = isNull;
     exports.layoutProcessor = layoutProcessor;
     exports.maskType = maskType;
     exports.naturalBoundsType = naturalBoundsType;
+    exports.needPlugin = needPlugin;
     exports.opacityType = opacityType;
     exports.pathInputType = pathInputType;
     exports.pathType = pathType;
@@ -14711,7 +14910,6 @@ ${filterStyle}
     exports.scaleResizePoints = scaleResizePoints;
     exports.scaleType = scaleType;
     exports.sortType = sortType;
-    exports.stateType = stateType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
     exports.tempBounds = tempBounds$1;