leafer-ui 1.0.1 → 1.0.3

package/dist/web.module.js

@@ -111,6 +111,26 @@ const MathHelper = {
         const a = maxLength ? pow$1(10, maxLength) : 1000000000000;
         num = round(num * a) / a;
         return num === -0 ? 0 : num;
+    },
+    getScaleData(scale, size, originSize, scaleData) {
+        if (!scaleData)
+            scaleData = {};
+        if (size) {
+            scaleData.scaleX = (typeof size === 'number' ? size : size.width) / originSize.width;
+            scaleData.scaleY = (typeof size === 'number' ? size : size.height) / originSize.height;
+        }
+        else if (scale)
+            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;
@@ -409,7 +429,7 @@ const MatrixHelper = {
 };
 const M$6 = 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$4, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
 const PointHelper = {
     defaultPoint: getPointData(),
@@ -465,7 +485,7 @@ const PointHelper = {
     tempToOuterOf(t, matrix) {
         const { tempPoint: temp } = P$5;
         copy$b(temp, t);
-        toOuterPoint$2(matrix, temp, temp);
+        toOuterPoint$3(matrix, temp, temp);
         return temp;
     },
     tempToInnerRadiusPointOf(t, matrix) {
@@ -484,7 +504,7 @@ const PointHelper = {
         toInnerPoint$2(matrix, t, to);
     },
     toOuterOf(t, matrix, to) {
-        toOuterPoint$2(matrix, t, to);
+        toOuterPoint$3(matrix, t, to);
     },
     getCenter(t, to) {
         return { x: t.x + (to.x - t.x) / 2, y: t.y + (to.y - t.y) / 2 };
@@ -764,7 +784,7 @@ const TwoPointBoundsHelper = {
 const { addPoint: addPoint$4 } = TwoPointBoundsHelper;
 
 const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$3, 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$1, bottom$1, boundsRight, boundsBottom;
@@ -784,17 +804,24 @@ const BoundsHelper = {
         t.width = bounds.width;
         t.height = bounds.height;
     },
-    copyAndSpread(t, bounds, spread, isShrink) {
+    copyAndSpread(t, bounds, spread, isShrink, side) {
+        const { x, y, width, height } = bounds;
         if (spread instanceof Array) {
             const four = fourNumber(spread);
             isShrink
-                ? B.set(t, bounds.x + four[3], bounds.y + four[0], bounds.width - four[1] - four[3], bounds.height - four[2] - four[0])
-                : B.set(t, bounds.x - four[3], bounds.y - four[0], bounds.width + four[1] + four[3], bounds.height + four[2] + four[0]);
+                ? B.set(t, x + four[3], y + four[0], width - four[1] - four[3], height - four[2] - four[0])
+                : B.set(t, x - four[3], y - four[0], width + four[1] + four[3], height + four[2] + four[0]);
         }
         else {
             if (isShrink)
                 spread = -spread;
-            B.set(t, bounds.x - spread, bounds.y - spread, bounds.width + spread * 2, bounds.height + spread * 2);
+            B.set(t, x - spread, y - spread, width + spread * 2, height + spread * 2);
+        }
+        if (side) {
+            if (side === 'width')
+                t.y = y, t.height = height;
+            else
+                t.x = x, t.width = width;
         }
     },
     minX(t) { return t.width > 0 ? t.x : t.x + t.width; },
@@ -871,16 +898,16 @@ const BoundsHelper = {
         else {
             point.x = t.x;
             point.y = t.y;
-            toOuterPoint$1(matrix, point, toPoint$5);
+            toOuterPoint$2(matrix, point, toPoint$5);
             setPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.x = t.x + t.width;
-            toOuterPoint$1(matrix, point, toPoint$5);
+            toOuterPoint$2(matrix, point, toPoint$5);
             addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.y = t.y + t.height;
-            toOuterPoint$1(matrix, point, toPoint$5);
+            toOuterPoint$2(matrix, point, toPoint$5);
             addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.x = t.x;
-            toOuterPoint$1(matrix, point, toPoint$5);
+            toOuterPoint$2(matrix, point, toPoint$5);
             addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             toBounds$4(tempPointBounds$1, to);
         }
@@ -894,16 +921,16 @@ const BoundsHelper = {
         const scale = Math.min(baseScale, Math.min(t.width / put.width, t.height / put.height));
         return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
     },
-    getSpread(t, spread) {
+    getSpread(t, spread, side) {
         const n = {};
-        B.copyAndSpread(n, t, spread);
+        B.copyAndSpread(n, t, spread, false, side);
         return n;
     },
-    spread(t, spread) {
-        B.copyAndSpread(t, t, spread);
+    spread(t, spread, side) {
+        B.copyAndSpread(t, t, spread, false, side);
     },
-    shrink(t, shrink) {
-        B.copyAndSpread(t, t, shrink, true);
+    shrink(t, shrink, side) {
+        B.copyAndSpread(t, t, shrink, true, side);
     },
     ceil(t) {
         const { x, y } = t;
@@ -1086,12 +1113,12 @@ class Bounds {
     getFitMatrix(put, baseScale) {
         return BoundsHelper.getFitMatrix(this, put, baseScale);
     }
-    spread(fourNumber) {
-        BoundsHelper.spread(this, fourNumber);
+    spread(fourNumber, side) {
+        BoundsHelper.spread(this, fourNumber, side);
         return this;
     }
-    shrink(fourNumber) {
-        BoundsHelper.shrink(this, fourNumber);
+    shrink(fourNumber, side) {
+        BoundsHelper.shrink(this, fourNumber, side);
         return this;
     }
     ceil() {
@@ -1235,7 +1262,6 @@ const AroundHelper = {
     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;
@@ -1370,6 +1396,10 @@ const Run = {
 };
 const R = Run;
 
+function needPlugin(name) {
+    console.error('need plugin: @leafer-in/' + name);
+}
+
 const debug$f = Debug.get('UICreator');
 const UICreator = {
     list: {},
@@ -1632,6 +1662,9 @@ var Answer;
     Answer[Answer["YesAndSkip"] = 3] = "YesAndSkip";
 })(Answer || (Answer = {}));
 const emptyData = {};
+function isNull(value) {
+    return value === undefined || value === null;
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2397,7 +2430,7 @@ const BezierHelper = {
         let startY = y = rotationSin * radiusX * startCos + rotationCos * radiusY * startSin;
         let fromX = cx + x, fromY = cy + y;
         if (data)
-            data.push(L$6, fromX, fromY);
+            data.push(data.length ? L$6 : M$5, fromX, fromY);
         if (setPointBounds)
             setPoint$2(setPointBounds, fromX, fromY);
         if (setStartPoint)
@@ -2908,60 +2941,75 @@ class PathCreator {
     }
     beginPath() {
         beginPath(this.__path);
+        this.paint();
         return this;
     }
     moveTo(x, y) {
         moveTo$4(this.__path, x, y);
+        this.paint();
         return this;
     }
     lineTo(x, y) {
         lineTo$3(this.__path, x, y);
+        this.paint();
         return this;
     }
     bezierCurveTo(x1, y1, x2, y2, x, y) {
         bezierCurveTo(this.__path, x1, y1, x2, y2, x, y);
+        this.paint();
         return this;
     }
     quadraticCurveTo(x1, y1, x, y) {
         quadraticCurveTo(this.__path, x1, y1, x, y);
+        this.paint();
         return this;
     }
     closePath() {
         closePath$3(this.__path);
+        this.paint();
         return this;
     }
     rect(x, y, width, height) {
         rect$2(this.__path, x, y, width, height);
+        this.paint();
         return this;
     }
     roundRect(x, y, width, height, cornerRadius) {
         roundRect$1(this.__path, x, y, width, height, cornerRadius);
+        this.paint();
         return this;
     }
     ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         ellipse$2(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     arc(x, y, radius, startAngle, endAngle, anticlockwise) {
         arc$1(this.__path, x, y, radius, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     arcTo(x1, y1, x2, y2, radius) {
         arcTo$2(this.__path, x1, y1, x2, y2, radius);
+        this.paint();
         return this;
     }
     drawEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         drawEllipse(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     drawArc(x, y, radius, startAngle, endAngle, anticlockwise) {
         drawArc(this.__path, x, y, radius, startAngle, endAngle, anticlockwise);
+        this.paint();
         return this;
     }
     drawPoints(points, curve, close) {
         drawPoints$2(this.__path, points, curve, close);
+        this.paint();
         return this;
     }
+    paint() { }
 }
 
 const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
@@ -3051,8 +3099,7 @@ const PathBounds = {
     toTwoPointBounds(data, setPointBounds) {
         if (!data || !data.length)
             return setPoint$1(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];
@@ -3708,7 +3755,7 @@ function autoLayoutType(defaultValue) {
         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();
             }
@@ -3801,14 +3848,25 @@ function visibleType(defaultValue) {
     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) {
@@ -3892,7 +3950,16 @@ function defineDataProcessor(target, key, defaultValue) {
     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) {
@@ -3983,7 +4050,7 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$7, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const { copy: copy$7, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
 const matrix$1 = {};
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4048,10 +4115,9 @@ const LeafHelper = {
         }
         return true;
     },
-    moveWorld(t, x, y = 0) {
+    moveWorld(t, x, y = 0, isInnerPoint) {
         const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
-        if (t.parent)
-            toInnerPoint$1(t.parent.worldTransform, local, local, true);
+        isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
         L.moveLocal(t, local.x, local.y);
     },
     moveLocal(t, x, y = 0) {
@@ -4560,144 +4626,6 @@ class LeafLayout {
     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;
@@ -4732,7 +4660,10 @@ class ChildEvent extends Event {
 }
 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) {
@@ -4810,10 +4741,6 @@ LayoutEvent.AFTER = 'layout.after';
 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);
@@ -4846,6 +4773,157 @@ 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;
+        }
+    }
+}
+
+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');
 const LeafDataProxy = {
@@ -4857,9 +4935,7 @@ const LeafDataProxy = {
                 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) {
@@ -4877,12 +4953,18 @@ const LeafDataProxy = {
             }
         }
         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);
@@ -4918,7 +5000,7 @@ const LeafMatrix = {
 
 const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
 const { updateBounds: updateBounds$1 } = BranchHelper;
-const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
+const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$5 } = BoundsHelper;
 const { toBounds: toBounds$2 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
@@ -4985,6 +5067,8 @@ const LeafBounds = {
         layout.boundsChanged = false;
     },
     __updateLocalBoxBounds() {
+        if (this.__hasMotionPath)
+            this.__updateMotionPath();
         if (this.__hasAutoLayout)
             this.__updateAutoLayout();
         toOuterOf$1(this.__layout.boxBounds, this.__local, this.__local);
@@ -5019,7 +5103,7 @@ const LeafBounds = {
                 updateAllMatrix$2(this);
                 updateBounds$1(this, this);
                 if (this.__.__autoSide)
-                    this.__updateBoxBounds();
+                    this.__updateBoxBounds(true);
             }
             else {
                 updateAllMatrix$2(this);
@@ -5037,11 +5121,11 @@ const LeafBounds = {
     },
     __updateStrokeBounds() {
         const layout = this.__layout;
-        copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+        copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds() {
         const layout = this.__layout;
-        layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
+        layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
     }
 };
 
@@ -5137,7 +5221,7 @@ const BranchRender = {
 const { LEAF, create } = IncrementId;
 const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
 const { toOuterOf } = BoundsHelper;
-const { copy: copy$4 } = PointHelper;
+const { copy: copy$4, move: move$1 } = PointHelper;
 const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
@@ -5164,13 +5248,16 @@ let Leaf = class Leaf {
     get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
     get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
     get pathInputed() { return this.__.__pathInputed; }
-    set event(map) { let event; for (let key in map)
-        event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event); }
+    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 };
@@ -5192,12 +5279,12 @@ let Leaf = class Leaf {
     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));
@@ -5206,18 +5293,21 @@ let Leaf = class Leaf {
         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;
@@ -5226,7 +5316,7 @@ let Leaf = class Leaf {
             }
         }
     }
-    set(_data) { }
+    set(_data, _isTemp) { }
     get(_name) { return undefined; }
     setAttr(name, value) { this[name] = value; }
     getAttr(name) { return this[name]; }
@@ -5251,6 +5341,7 @@ let Leaf = class Leaf {
     findOne(_condition, _options) { return undefined; }
     findId(_id) { return undefined; }
     focus(_value) { }
+    updateState() { }
     updateLayout() {
         this.__layout.update();
     }
@@ -5358,11 +5449,24 @@ let Leaf = class Leaf {
         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$1(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$1(point, x, y);
+        return point;
+    }
     getInnerPointByLocal(local, _relative, distance, change) {
         return this.getInnerPoint(local, this.parent, distance, change);
     }
@@ -5374,20 +5478,23 @@ let Leaf = class Leaf {
     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);
@@ -5401,6 +5508,9 @@ let Leaf = class Leaf {
     move(x, y) {
         moveLocal(this, x, y);
     }
+    moveInner(x, y) {
+        moveWorld(this, x, y, true);
+    }
     scaleOf(origin, scaleX, scaleY, resize) {
         zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
     }
@@ -5453,6 +5563,17 @@ let Leaf = class Leaf {
     __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) {
@@ -5478,6 +5599,10 @@ let Leaf = class Leaf {
             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;
@@ -5485,11 +5610,10 @@ let Leaf = class Leaf {
                 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;
         }
     }
@@ -5555,8 +5679,8 @@ let Branch = class Branch extends Leaf {
             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)
@@ -5569,16 +5693,10 @@ let Branch = class Branch extends Leaf {
     }
     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);
@@ -5600,6 +5718,18 @@ let Branch = class Branch extends Leaf {
     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();
@@ -5609,6 +5739,7 @@ let Branch = class Branch extends Leaf {
         this.__layout.affectChildrenSort && this.__layout.childrenSortChange();
     }
     __realRemoveChild(child) {
+        child.__emitLifeEvent(ChildEvent.REMOVE);
         child.parent = null;
         if (this.leafer) {
             child.__bindLeafer(null);
@@ -5621,8 +5752,6 @@ let Branch = class Branch extends Leaf {
     }
     __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);
@@ -5785,8 +5914,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.1";
-const inviteCode = {};
+const version = "1.0.3";
 
 const debug$7 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6186,9 +6314,13 @@ function updateBounds(boundsList) {
     });
 }
 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();
     });
 }
@@ -6554,7 +6686,6 @@ class Renderer {
         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);
@@ -6899,36 +7030,6 @@ Object.assign(Creator, {
 });
 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) {
@@ -6963,10 +7064,33 @@ function zoomLayerType() {
     };
 }
 
+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$4 = 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) {
@@ -6985,9 +7109,10 @@ class UIData extends LeafData {
     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) {
@@ -7111,6 +7236,11 @@ class BoxData extends GroupData {
 }
 
 class LeaferData extends GroupData {
+    __getInputData() {
+        const data = super.__getInputData();
+        canvasSizeAttrs.forEach(key => delete data[key]);
+        return data;
+    }
 }
 
 class FrameData extends BoxData {
@@ -7173,7 +7303,7 @@ class ImageData extends RectData {
     __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();
@@ -7188,6 +7318,11 @@ class ImageData extends RectData {
 }
 
 class CanvasData extends RectData {
+    __getInputData() {
+        const data = super.__getInputData();
+        data.url = this.__leaf.canvas.toDataURL('image/png');
+        return data;
+    }
 }
 
 const UIBounds = {
@@ -7358,19 +7493,8 @@ var UI_1;
 let UI = UI_1 = class UI extends 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 || []);
@@ -7385,8 +7509,15 @@ let UI = UI_1 = class UI extends Leaf {
         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);
@@ -7449,11 +7580,18 @@ let UI = UI_1 = class UI extends Leaf {
             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);
@@ -7469,6 +7607,8 @@ let UI = UI_1 = class UI extends Leaf {
     static setEditInner(_editorName) { }
     destroy() {
         this.fill = this.stroke = null;
+        if (this.__animate)
+            this.killAnimate();
         super.destroy();
     }
 };
@@ -7496,12 +7636,6 @@ __decorate([
 __decorate([
     visibleType(true)
 ], UI.prototype, "visible", void 0);
-__decorate([
-    stateType(false)
-], UI.prototype, "selected", void 0);
-__decorate([
-    stateType(false)
-], UI.prototype, "disabled", void 0);
 __decorate([
     surfaceType(false)
 ], UI.prototype, "locked", void 0);
@@ -7574,45 +7708,9 @@ __decorate([
 __decorate([
     pathType(true)
 ], UI.prototype, "closed", void 0);
-__decorate([
-    autoLayoutType(false)
-], UI.prototype, "flow", void 0);
 __decorate([
     boundsType(0)
 ], UI.prototype, "padding", void 0);
-__decorate([
-    boundsType(0)
-], UI.prototype, "gap", void 0);
-__decorate([
-    boundsType('top-left')
-], UI.prototype, "flowAlign", void 0);
-__decorate([
-    boundsType(false)
-], UI.prototype, "flowWrap", void 0);
-__decorate([
-    boundsType('box')
-], UI.prototype, "itemBox", void 0);
-__decorate([
-    boundsType(true)
-], UI.prototype, "inFlow", void 0);
-__decorate([
-    boundsType()
-], UI.prototype, "autoWidth", void 0);
-__decorate([
-    boundsType()
-], UI.prototype, "autoHeight", void 0);
-__decorate([
-    boundsType()
-], UI.prototype, "lockRatio", void 0);
-__decorate([
-    boundsType()
-], UI.prototype, "autoBox", void 0);
-__decorate([
-    boundsType()
-], UI.prototype, "widthRange", void 0);
-__decorate([
-    boundsType()
-], UI.prototype, "heightRange", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "draggable", void 0);
@@ -7676,12 +7774,6 @@ __decorate([
 __decorate([
     strokeType(10)
 ], UI.prototype, "miterLimit", void 0);
-__decorate([
-    arrowType('none')
-], UI.prototype, "startArrow", void 0);
-__decorate([
-    arrowType('none')
-], UI.prototype, "endArrow", void 0);
 __decorate([
     pathType(0)
 ], UI.prototype, "cornerRadius", void 0);
@@ -7703,24 +7795,6 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "grayscale", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "normalStyle", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "hoverStyle", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "pressStyle", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "focusStyle", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "selectedStyle", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "disabledStyle", void 0);
 __decorate([
     dataType({})
 ], UI.prototype, "data", void 0);
@@ -7747,7 +7821,7 @@ let Group = class Group extends UI {
         if (!this.children)
             this.children = [];
     }
-    set(data) {
+    set(data, isTemp) {
         if (data.children) {
             const { children } = data;
             delete data.children;
@@ -7757,7 +7831,7 @@ let Group = class Group extends UI {
             else {
                 this.clear();
             }
-            super.set(data);
+            super.set(data, isTemp);
             let child;
             children.forEach(childData => {
                 child = childData.__ ? childData : UICreator.get(childData.tag, childData);
@@ -7766,7 +7840,7 @@ let Group = class Group extends UI {
             data.children = children;
         }
         else {
-            super.set(data);
+            super.set(data, isTemp);
         }
     }
     toJSON(options) {
@@ -8093,13 +8167,20 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         }
     }
     zoom(_zoomType, _padding, _fixedScale) {
-        return debug$3.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();
     }
@@ -8183,7 +8264,7 @@ Rect = __decorate([
 const rect$1 = Rect.prototype;
 const group$1 = Group.prototype;
 const childrenRenderBounds = {};
-const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
+const { copy: copy$3, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -8197,20 +8278,23 @@ let Box = class Box extends Group {
         return this.__updateRectRenderSpread() || -1;
     }
     __updateRectBoxBounds() { }
-    __updateBoxBounds() {
+    __updateBoxBounds(secondLayout) {
         const data = this.__;
         if (this.children.length) {
             if (data.__autoSide) {
                 if (this.leafer && this.leafer.ready)
                     this.leafer.layouter.addExtra(this);
                 super.__updateBoxBounds();
+                const { boxBounds } = this.__layout;
                 if (!data.__autoSize) {
-                    const b = this.__layout.boxBounds;
-                    if (!data.__autoWidth)
-                        b.height += b.y, b.width = data.width, b.x = b.y = 0;
-                    if (!data.__autoHeight)
-                        b.width += b.x, b.height = data.height, b.y = b.x = 0;
+                    if (data.__autoWidth)
+                        boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0;
+                    else
+                        boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0;
                 }
+                if (secondLayout && data.flow && data.padding)
+                    copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
+                this.__updateNaturalSize();
             }
             else {
                 this.__updateRectBoxBounds();
@@ -8230,13 +8314,13 @@ let Box = class Box extends Group {
             super.__updateRenderBounds();
             copy$3(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() { }
@@ -8570,14 +8654,26 @@ __decorate([
 Image$1 = __decorate([
     registerUI()
 ], Image$1);
+const MyImage = Image$1;
 
 let Canvas = class Canvas extends Rect {
     get __tag() { return 'Canvas'; }
+    get ready() { return !this.url; }
     constructor(data) {
         super(data);
         this.canvas = Creator.canvas(this.__);
         this.context = this.canvas.context;
         this.__.__isCanvas = this.__.__drawAfterFill = true;
+        if (data && data.url)
+            this.drawImage(data.url);
+    }
+    drawImage(url) {
+        new LeaferImage({ url }).load((image) => {
+            this.context.drawImage(image.view, 0, 0);
+            this.url = undefined;
+            this.paint();
+            this.emitEvent(new ImageEvent(ImageEvent.LOADED, { image }));
+        });
     }
     draw(ui, offset, scale, rotation) {
         ui.__layout.update();
@@ -8594,19 +8690,18 @@ let Canvas = class Canvas extends Rect {
         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() {
@@ -8636,7 +8731,7 @@ __decorate([
     resizeType(100)
 ], Canvas.prototype, "height", void 0);
 __decorate([
-    resizeType(Platform.devicePixelRatio)
+    resizeType(1)
 ], Canvas.prototype, "pixelRatio", void 0);
 __decorate([
     resizeType(true)
@@ -8660,13 +8755,13 @@ let Text = class Text extends UI {
         super(data);
     }
     __drawHitPath(canvas) {
-        const { __lineHeight, __baseLine, __textDrawData: data } = this.__;
+        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__;
         canvas.beginPath();
         if (this.__.__letterSpacing < 0) {
             this.__drawPathByData(canvas);
         }
         else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight));
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
         }
     }
     __drawPathByData(drawer, _data) {
@@ -8859,7 +8954,8 @@ let Pen = class Pen extends Group {
     drawPoints(_points, _curve, _close) { return this; }
     clearPath() { return this; }
     paint() {
-        this.pathElement.forceUpdate('path');
+        if (!this.pathElement.__layout.boxChanged)
+            this.pathElement.forceUpdate('path');
     }
 };
 __decorate([
@@ -8869,7 +8965,7 @@ __decorate([
     penPathType()
 ], Pen.prototype, "path", void 0);
 Pen = __decorate([
-    useModule(PathCreator, ['set', 'beginPath', 'path']),
+    useModule(PathCreator, ['set', 'beginPath', 'path', 'paint']),
     registerUI()
 ], Pen);
 function penPathType() {
@@ -9048,21 +9144,29 @@ class UIEvent extends Event {
     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);
     }
@@ -9092,6 +9196,7 @@ PointerEvent.MENU_TAP = 'pointer.menu_tap';
 PointerEvent = __decorate([
     registerUIEvent()
 ], PointerEvent);
+const MyPointerEvent = PointerEvent;
 
 const move = {};
 let DragEvent = class DragEvent extends PointerEvent {
@@ -9169,7 +9274,7 @@ let DragEvent = class DragEvent extends PointerEvent {
     }
     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);
@@ -9191,6 +9296,7 @@ DragEvent.LEAVE = 'drag.leave';
 DragEvent = __decorate([
     registerUIEvent()
 ], DragEvent);
+const MyDragEvent = DragEvent;
 
 let DropEvent = class DropEvent extends PointerEvent {
     static setList(data) {
@@ -9272,36 +9378,32 @@ function addInteractionWindow(leafer) {
 
 function document$1(leafer) {
     addInteractionWindow(leafer);
-    leafer.config.move.scroll = 'limit';
-    leafer.config.zoom.min = 1;
+    const { move, zoom } = leafer.config;
+    move.scroll = 'limit';
+    zoom.min = 1;
+}
+
+function block(leafer) {
+    const { config } = leafer;
+    (config.wheel || (config.wheel = {})).preventDefault = false;
+    (config.touch || (config.touch = {})).preventDefault = 'auto';
 }
 
 const debug$2 = Debug.get('LeaferTypeCreator');
 const LeaferTypeCreator = {
     list: {},
     register(name, fn) {
-        if (list[name]) {
-            debug$2.repeat(name);
-        }
-        else {
-            list[name] = fn;
-        }
+        list[name] ? debug$2.repeat(name) : list[name] = fn;
     },
     run(name, leafer) {
         const fn = list[name];
-        if (fn) {
-            fn(leafer);
-        }
-        else {
-            debug$2.error('no', name);
-        }
+        fn && fn(leafer);
     }
 };
 const { list, register } = LeaferTypeCreator;
-register('draw', () => { });
-register('custom', () => { });
 register('design', addInteractionWindow);
 register('document', document$1);
+register('block', block);
 
 const leafer = Leafer.prototype;
 leafer.initType = function (type) {
@@ -9490,7 +9592,13 @@ const InteractionHelper = {
                 find.add(list[i]);
         }
         return find;
-    }
+    },
+    pathCanDrag(path) {
+        return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(DragEvent.DRAG)));
+    },
+    pathHasOutside(path) {
+        return path && path.list.some(item => item.isOutside);
+    },
 };
 const I = InteractionHelper;
 
@@ -9750,7 +9858,7 @@ function emitEvent(leaf, type, data, capture, excludePath) {
     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);
@@ -9800,15 +9908,18 @@ const config = {
         swipeDistance: 20,
         preventDefaultMenu: true
     },
+    touch: {
+        preventDefault: true
+    },
     cursor: true,
     keyEvent: true
 };
 
-const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1 } = InteractionHelper;
+const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1, pathCanDrag: pathCanDrag$1, 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); }
@@ -9817,7 +9928,7 @@ class InteractionBase {
     get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
     get hitRadius() { return this.config.pointer.hitRadius; }
     constructor(target, canvas, selector, userConfig) {
-        this.config = config;
+        this.config = DataHelper.clone(config);
         this.tapCount = 0;
         this.downKeyMap = {};
         this.target = target;
@@ -9852,7 +9963,7 @@ class InteractionBase {
             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);
@@ -9880,7 +9991,7 @@ class InteractionBase {
             if (canDrag) {
                 if (this.waitTap)
                     this.pointerWaitCancel();
-                this.waitMenuTap = false;
+                this.waitRightTap = false;
             }
             this.dragger.checkDrag(data, canDrag);
         }
@@ -9934,10 +10045,15 @@ class InteractionBase {
     menu(data) {
         this.findPath(data);
         this.emit(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(PointerEvent.MENU_TAP, data);
+            this.waitRightTap = this.waitMenuTap = false;
+        }
     }
     move(data) {
         this.transformer.move(data);
@@ -10069,11 +10185,11 @@ class InteractionBase {
         return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree) && !data.target.syncEventer);
     }
     checkPath(data, useDefaultPath) {
-        if (useDefaultPath || this.canMove(data))
+        if (useDefaultPath || (this.moveMode && !pathHasOutside(data.path)))
             data.path = this.defaultPath;
     }
     canMove(data) {
-        return this.moveMode && data && data.path.list.every(item => !item.isOutside);
+        return data && (this.moveMode || (this.config.move.drag === 'auto' && !pathCanDrag$1(data.path))) && !pathHasOutside(data.path);
     }
     isDrag(leaf) {
         return this.dragger.getList().has(leaf);
@@ -10491,7 +10607,7 @@ const KeyEventHelper = {
     }
 };
 
-const { getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
+const { getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag } = InteractionHelper;
 class Interaction extends InteractionBase {
     __listenEvents() {
         super.__listenEvents();
@@ -10624,7 +10740,11 @@ class Interaction extends InteractionBase {
         this.pointerCancel();
     }
     onTouchStart(e) {
-        e.preventDefault();
+        const touch = PointerEventHelper.getTouch(e);
+        const local = this.getLocal(touch, true);
+        const { preventDefault } = this.config.touch;
+        if (preventDefault === true || (preventDefault === 'auto' && pathCanDrag(this.findPath(local))))
+            e.preventDefault();
         this.multiTouchStart(e);
         if (this.usePointer)
             return;
@@ -10633,8 +10753,7 @@ class Interaction extends InteractionBase {
             this.touchTimer = 0;
         }
         this.useTouch = true;
-        const touch = PointerEventHelper.getTouch(e);
-        this.pointerDown(PointerEventHelper.convertTouch(e, this.getLocal(touch, true)));
+        this.pointerDown(PointerEventHelper.convertTouch(e, local));
     }
     onTouchMove(e) {
         this.multiTouchMove(e);
@@ -11117,16 +11236,21 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
 const { get: get$2, translate } = MatrixHelper;
 const tempBox = new Bounds();
 const tempPoint = {};
+const tempScaleData = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode } = paint;
+    const { blendMode, sync } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
+    if (sync)
+        leafPaint.sync = sync;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
     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 };
@@ -11140,13 +11264,10 @@ function getPatternData(paint, box, image) {
             x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
         }
     }
-    else if (size) {
-        scaleX = (typeof size === 'number' ? size : size.width) / width;
-        scaleY = (typeof size === 'number' ? size : size.height) / height;
-    }
-    else if (scale) {
-        scaleX = typeof scale === 'number' ? scale : scale.x;
-        scaleY = typeof scale === 'number' ? scale : scale.y;
+    else if (scale || size) {
+        MathHelper.getScaleData(scale, size, image, tempScaleData);
+        scaleX = tempScaleData.scaleX;
+        scaleY = tempScaleData.scaleY;
     }
     if (align) {
         const imageBounds = { x, y, width: swapWidth, height: swapHeight };
@@ -11158,7 +11279,7 @@ function getPatternData(paint, box, image) {
     if (offset)
         x += offset.x, y += offset.y;
     switch (mode) {
-        case 'strench':
+        case 'stretch':
             if (!sameBox)
                 width = box.width, height = box.height;
             break;
@@ -11185,7 +11306,7 @@ function getPatternData(paint, box, image) {
             translate(data.transform, box.x, box.y);
         }
     }
-    if (scaleX && mode !== 'strench') {
+    if (scaleX && mode !== 'stretch') {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
@@ -11289,7 +11410,7 @@ const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
 const { ceil, abs: abs$1 } = 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$1(scaleX);
         scaleY = abs$1(scaleY);
@@ -11351,7 +11472,8 @@ function createPattern(ui, paint, pixelRatio) {
 const { abs } = 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 {
@@ -11359,8 +11481,8 @@ function checkImage(ui, canvas, paint, allowPaint) {
         if (allowPaint) {
             if (!data.repeat) {
                 let { width, height } = data;
-                width *= abs(scaleX) * canvas.pixelRatio;
-                height *= abs(scaleY) * canvas.pixelRatio;
+                width *= abs(scaleX) * pixelRatio;
+                height *= abs(scaleY) * pixelRatio;
                 if (data.scaleX) {
                     width *= data.scaleX;
                     height *= data.scaleY;
@@ -11385,15 +11507,15 @@ function checkImage(ui, canvas, paint, allowPaint) {
             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);
                 }
@@ -11457,14 +11579,16 @@ function linearGradient(paint, box) {
     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));
+            }
         }
     }
 }
@@ -12220,10 +12344,15 @@ const TextConvertModule = {
 };
 
 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 + ')';
@@ -12255,6 +12384,7 @@ const ExportModule = {
     export(leaf, filename, options) {
         this.running = true;
         const fileType = FileHelper.fileType(filename);
+        const isDownload = filename.includes('.');
         options = FileHelper.getExportOptions(options);
         return addTask((success) => new Promise((resolve) => {
             const over = (result) => {
@@ -12264,19 +12394,13 @@ const ExportModule = {
             };
             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) {
@@ -12285,14 +12409,8 @@ const ExportModule = {
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                     const { worldTransform, isLeafer, isFrame } = leaf;
                     const { slice, trim, onCanvas } = options;
-                    let scale = options.scale || 1;
-                    let pixelRatio = options.pixelRatio || 1;
                     const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
                     const contextSettings = options.contextSettings || leafer.config.contextSettings;
-                    if (leaf.isApp) {
-                        scale *= pixelRatio;
-                        pixelRatio = leaf.app.pixelRatio;
-                    }
                     const screenshot = options.screenshot || leaf.isApp;
                     const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                     const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
@@ -12326,9 +12444,17 @@ const ExportModule = {
                         }
                         renderBounds = leaf.getBounds('render', relative);
                     }
-                    const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
+                    const scaleData = { scaleX: 1, scaleY: 1 };
+                    MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                    let pixelRatio = options.pixelRatio || 1;
+                    if (leaf.isApp) {
+                        scaleData.scaleX *= pixelRatio;
+                        scaleData.scaleY *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
+                    const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                    const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
                     let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
-                    const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
                     let sliceLeaf;
                     if (slice) {
                         sliceLeaf = leaf;
@@ -12438,4 +12564,4 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, inviteCode, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, needPlugin, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };