leafer-ui 1.0.0 → 1.0.2

package/dist/web.js

@@ -51,6 +51,8 @@ var LeaferUI = (function (exports) {
     const { round, pow: pow$1, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
+            if (typeof min === 'object')
+                max = min.max, min = min.min;
             if (min !== undefined && value < min)
                 value = min;
             if (max !== undefined && value > max)
@@ -112,6 +114,19 @@ 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) {
+                scaleData.scaleX = typeof scale === 'number' ? scale : scale.x;
+                scaleData.scaleY = typeof scale === 'number' ? scale : scale.y;
+            }
+            return scaleData;
         }
     };
     const OneRadian = PI$4 / 180;
@@ -153,10 +168,10 @@ var LeaferUI = (function (exports) {
             t.e += x;
             t.f += y;
         },
-        translateInner(t, x, y, isMoveOrigin) {
+        translateInner(t, x, y, hasOrigin) {
             t.e += t.a * x + t.c * y;
             t.f += t.b * x + t.d * y;
-            if (isMoveOrigin)
+            if (hasOrigin)
                 t.e -= x, t.f -= y;
         },
         scale(t, scaleX, scaleY = scaleX) {
@@ -315,7 +330,7 @@ var LeaferUI = (function (exports) {
                 to.y -= (f * a - e * b) * s;
             }
         },
-        setLayout(t, layout, origin, bcChanged) {
+        setLayout(t, layout, origin, around, bcChanged) {
             const { x, y, scaleX, scaleY } = layout;
             if (bcChanged === undefined)
                 bcChanged = layout.rotation || layout.skewX || layout.skewY;
@@ -347,10 +362,10 @@ var LeaferUI = (function (exports) {
             }
             t.e = x;
             t.f = y;
-            if (origin)
-                M$6.translateInner(t, -origin.x, -origin.y, true);
+            if (origin = origin || around)
+                M$6.translateInner(t, -origin.x, -origin.y, !around);
         },
-        getLayout(t, origin, firstSkewY) {
+        getLayout(t, origin, around, firstSkewY) {
             const { a, b, c, d, e, f } = t;
             let x = e, y = f, scaleX, scaleY, rotation, skewX, skewY;
             if (b || c) {
@@ -379,9 +394,11 @@ var LeaferUI = (function (exports) {
                 scaleY = d;
                 rotation = skewX = skewY = 0;
             }
-            if (origin) {
+            if (origin = around || origin) {
                 x += origin.x * a + origin.y * c;
                 y += origin.x * b + origin.y * d;
+                if (!around)
+                    x -= origin.x, y -= origin.y;
             }
             return { x, y, scaleX, scaleY, rotation, skewX, skewY };
         },
@@ -408,7 +425,7 @@ var LeaferUI = (function (exports) {
     };
     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(),
@@ -464,7 +481,7 @@ var LeaferUI = (function (exports) {
         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) {
@@ -483,7 +500,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 };
@@ -709,12 +726,12 @@ var LeaferUI = (function (exports) {
         toInnerPoint(outer, to, distance) {
             MatrixHelper.toInnerPoint(this, outer, to, distance);
         }
-        setLayout(data, origin) {
-            MatrixHelper.setLayout(this, data, origin);
+        setLayout(data, origin, around) {
+            MatrixHelper.setLayout(this, data, origin, around);
             return this;
         }
-        getLayout(origin, firstSkewY) {
-            return MatrixHelper.getLayout(this, origin, firstSkewY);
+        getLayout(origin, around, firstSkewY) {
+            return MatrixHelper.getLayout(this, origin, around, firstSkewY);
         }
         withScale(scaleX, scaleY) {
             return MatrixHelper.withScale(this, scaleX, scaleY);
@@ -763,7 +780,7 @@ var LeaferUI = (function (exports) {
     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;
@@ -783,17 +800,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; },
@@ -870,16 +894,16 @@ var LeaferUI = (function (exports) {
             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);
             }
@@ -893,16 +917,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;
@@ -1085,12 +1109,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() {
@@ -2002,7 +2026,7 @@ var LeaferUI = (function (exports) {
             DataHelper.copyAttrs(this.size, size, canvasSizeAttrs);
             this.size.pixelRatio || (this.size.pixelRatio = 1);
             this.bounds = new Bounds(0, 0, this.width, this.height);
-            if (!this.unreal) {
+            if (this.context && !this.unreal) {
                 this.updateViewSize();
                 this.smooth = this.config.smooth;
             }
@@ -2175,7 +2199,7 @@ var LeaferUI = (function (exports) {
                 this.manager ? this.manager.recycle(this) : this.destroy();
             }
         }
-        updateRender() { }
+        updateRender(_bounds) { }
         unrealCanvas() { }
         destroy() {
             this.manager = this.view = this.parentView = null;
@@ -2907,60 +2931,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$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;
@@ -3982,7 +4021,7 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    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) {
@@ -4047,10 +4086,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.moveLocal(t, local.x, local.y);
         },
         moveLocal(t, x, y = 0) {
@@ -4069,8 +4107,13 @@ var LeaferUI = (function (exports) {
         zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
             copy$7(matrix$1, t.__localMatrix);
             scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
-            moveByMatrix(t, matrix$1);
-            t.scaleResize(scaleX, scaleY, resize !== true);
+            if (t.origin || t.around) {
+                L.setTransform(t, matrix$1, resize);
+            }
+            else {
+                moveByMatrix(t, matrix$1);
+                t.scaleResize(scaleX, scaleY, resize !== true);
+            }
         },
         rotateOfWorld(t, origin, angle) {
             L.rotateOfLocal(t, getTempLocal(t, origin), angle);
@@ -4078,8 +4121,13 @@ var LeaferUI = (function (exports) {
         rotateOfLocal(t, origin, angle) {
             copy$7(matrix$1, t.__localMatrix);
             rotateOfOuter$2(matrix$1, origin, angle);
-            moveByMatrix(t, matrix$1);
-            t.rotation = MathHelper.formatRotation(t.rotation + angle);
+            if (t.origin || t.around) {
+                L.setTransform(t, matrix$1);
+            }
+            else {
+                moveByMatrix(t, matrix$1);
+                t.rotation = MathHelper.formatRotation(t.rotation + angle);
+            }
         },
         skewOfWorld(t, origin, skewX, skewY, resize) {
             L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
@@ -4102,7 +4150,7 @@ var LeaferUI = (function (exports) {
             L.setTransform(t, matrix$1, resize);
         },
         setTransform(t, transform, resize) {
-            const layout = getLayout(transform);
+            const layout = getLayout(transform, t.origin && L.getInnerOrigin(t, t.origin), t.around && L.getInnerOrigin(t, t.around));
             if (resize) {
                 const scaleX = layout.scaleX / t.scaleX;
                 const scaleY = layout.scaleY / t.scaleY;
@@ -4115,13 +4163,19 @@ var LeaferUI = (function (exports) {
                 t.set(layout);
             }
         },
+        getFlipTransform(t, axis) {
+            const m = getMatrixData();
+            const sign = axis === 'x' ? 1 : -1;
+            scaleOfOuter$2(m, L.getLocalOrigin(t, 'center'), -1 * sign, 1 * sign);
+            return m;
+        },
         getLocalOrigin(t, origin) {
             return PointHelper.tempToOuterOf(L.getInnerOrigin(t, origin), t.localTransform);
         },
         getInnerOrigin(t, origin) {
-            if (typeof origin === 'string')
-                AroundHelper.toPoint(origin, t.boxBounds, origin = {});
-            return origin;
+            const innerOrigin = {};
+            AroundHelper.toPoint(origin, t.boxBounds, innerOrigin);
+            return innerOrigin;
         },
         getRelativeWorld(t, relative, temp) {
             copy$7(matrix$1, t.worldTransform);
@@ -4548,7 +4602,10 @@ var LeaferUI = (function (exports) {
         on(type, listener, options) {
             let capture, once;
             if (options) {
-                if (typeof options === 'boolean') {
+                if (options === 'once') {
+                    once = true;
+                }
+                else if (typeof options === 'boolean') {
                     capture = options;
                 }
                 else {
@@ -4579,7 +4636,7 @@ var LeaferUI = (function (exports) {
                 if (listener) {
                     let capture;
                     if (options)
-                        capture = typeof options === 'boolean' ? options : options.capture;
+                        capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture);
                     let events, index;
                     const map = __getListenerMap(this, capture);
                     typeList.forEach(type => {
@@ -4881,7 +4938,7 @@ var LeaferUI = (function (exports) {
                 const layout = this.__layout, local = this.__local, data = this.__;
                 if (layout.affectScaleOrRotation) {
                     if (layout.scaleChanged || layout.rotationChanged) {
-                        setLayout(local, data, null, layout.affectRotation);
+                        setLayout(local, data, null, null, layout.affectRotation);
                         layout.scaleChanged = layout.rotationChanged = false;
                     }
                 }
@@ -4889,7 +4946,7 @@ var LeaferUI = (function (exports) {
                 local.f = data.y + data.offsetY;
                 if (data.around || data.origin) {
                     toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$1);
-                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
+                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, !data.around);
                 }
             }
             this.__layout.matrixChanged = false;
@@ -4898,7 +4955,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$5 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$5 } = BoundsHelper;
     const { toBounds: toBounds$2 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
@@ -4999,7 +5056,7 @@ var LeaferUI = (function (exports) {
                     updateAllMatrix$2(this);
                     updateBounds$1(this, this);
                     if (this.__.__autoSide)
-                        this.__updateBoxBounds();
+                        this.__updateBoxBounds(true);
                 }
                 else {
                     updateAllMatrix$2(this);
@@ -5017,11 +5074,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$5(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$2(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
         }
     };
 
@@ -5118,7 +5175,7 @@ var LeaferUI = (function (exports) {
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
     const { copy: copy$4 } = PointHelper;
-    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
+    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
         set tag(_value) { }
@@ -5144,6 +5201,8 @@ var LeaferUI = (function (exports) {
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
         get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
         get pathInputed() { return this.__.__pathInputed; }
+        set event(map) { let event; for (let key in map)
+            event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event); }
         constructor(data) {
             this.innerId = create(LEAF);
             this.reset(data);
@@ -5379,6 +5438,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);
         }
@@ -5403,6 +5465,9 @@ var LeaferUI = (function (exports) {
         skewOfWorld(worldOrigin, skewX, skewY, resize) {
             skewOfWorld(this, worldOrigin, skewX, skewY, resize);
         }
+        flip(axis) {
+            transform(this, getFlipTransform(this, axis));
+        }
         scaleResize(scaleX, scaleY = scaleX, _noResize) {
             this.scaleX *= scaleX;
             this.scaleY *= scaleY;
@@ -5760,7 +5825,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.0-rc.30";
+    const version = "1.0.1";
     const inviteCode = {};
 
     const debug$7 = Debug.get('LeaferCanvas');
@@ -5784,7 +5849,8 @@ var LeaferUI = (function (exports) {
             }
         }
         init() {
-            const { view } = this.config;
+            const { config } = this;
+            const view = config.view || config.canvas;
             view ? this.__createViewFrom(view) : this.__createView();
             const { style } = this.view;
             style.display || (style.display = 'block');
@@ -5799,7 +5865,7 @@ var LeaferUI = (function (exports) {
             }
             this.__createContext();
             if (!this.autoLayout)
-                this.resize(this.config);
+                this.resize(config);
         }
         set backgroundColor(color) { this.view.style.backgroundColor = color; }
         get backgroundColor() { return this.view.style.backgroundColor; }
@@ -5855,26 +5921,37 @@ var LeaferUI = (function (exports) {
             this.clientBounds = this.view.getBoundingClientRect();
         }
         startAutoLayout(autoBounds, listener) {
-            this.autoBounds = autoBounds;
             this.resizeListener = listener;
-            try {
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    this.updateClientBounds();
-                    for (const entry of entries)
-                        this.checkAutoBounds(entry.contentRect);
-                });
-                const parent = this.parentView;
-                if (parent) {
-                    this.resizeObserver.observe(parent);
-                    this.checkAutoBounds(parent.getBoundingClientRect());
+            if (autoBounds) {
+                this.autoBounds = autoBounds;
+                try {
+                    this.resizeObserver = new ResizeObserver((entries) => {
+                        this.updateClientBounds();
+                        for (const entry of entries)
+                            this.checkAutoBounds(entry.contentRect);
+                    });
+                    const parent = this.parentView;
+                    if (parent) {
+                        this.resizeObserver.observe(parent);
+                        this.checkAutoBounds(parent.getBoundingClientRect());
+                    }
+                    else {
+                        this.checkAutoBounds(this.view);
+                        debug$7.warn('no parent');
+                    }
                 }
-                else {
-                    this.checkAutoBounds(this.view);
-                    debug$7.warn('no parent');
+                catch (_a) {
+                    this.imitateResizeObserver();
                 }
             }
-            catch (_a) {
-                this.imitateResizeObserver();
+            else {
+                window.addEventListener('resize', () => {
+                    const pixelRatio = Platform.devicePixelRatio;
+                    if (this.pixelRatio !== pixelRatio) {
+                        const { width, height } = this;
+                        this.emitResize({ width, height, pixelRatio });
+                    }
+                });
             }
         }
         imitateResizeObserver() {
@@ -5887,17 +5964,12 @@ var LeaferUI = (function (exports) {
         checkAutoBounds(parentSize) {
             const view = this.view;
             const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize);
-            if (width !== this.width || height !== this.height) {
+            const size = { width, height, pixelRatio: Platform.devicePixelRatio };
+            if (!this.isSameSize(size)) {
                 const { style } = view;
-                const { pixelRatio } = this;
                 style.marginLeft = x + 'px';
                 style.marginTop = y + 'px';
-                const size = { width, height, pixelRatio };
-                const oldSize = {};
-                DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
-                this.resize(size);
-                if (this.width !== undefined)
-                    this.resizeListener(new ResizeEvent(size, oldSize));
+                this.emitResize(size);
             }
         }
         stopAutoLayout() {
@@ -5908,6 +5980,13 @@ var LeaferUI = (function (exports) {
                 this.resizeObserver = null;
             }
         }
+        emitResize(size) {
+            const oldSize = {};
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+            this.resize(size);
+            if (this.width !== undefined)
+                this.resizeListener(new ResizeEvent(size, oldSize));
+        }
         unrealCanvas() {
             if (!this.unreal && this.parentView) {
                 const view = this.view;
@@ -5988,7 +6067,7 @@ var LeaferUI = (function (exports) {
     Platform.name = 'web';
     Platform.isMobile = 'ontouchstart' in window;
     Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-    Platform.devicePixelRatio = Math.max(1, devicePixelRatio);
+    defineKey(Platform, 'devicePixelRatio', { get() { return Math.max(1, devicePixelRatio); } });
     const { userAgent } = navigator;
     if (userAgent.indexOf("Firefox") > -1) {
         Platform.conicGradientRotate90 = true;
@@ -6485,14 +6564,14 @@ var LeaferUI = (function (exports) {
             if (Debug.showRepaint)
                 this.canvas.strokeWorld(bounds, 'red');
             this.target.__render(this.canvas, options);
-            this.renderBounds = realBounds || bounds;
+            this.renderBounds = realBounds = realBounds || bounds;
             this.renderOptions = options;
-            this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
+            this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
             if (Debug.showHitView)
                 this.renderHitView(options);
             if (Debug.showBoundsView)
                 this.renderBoundsView(options);
-            this.canvas.updateRender();
+            this.canvas.updateRender(realBounds);
         }
         renderHitView(_options) { }
         renderBoundsView(_options) { }
@@ -7072,6 +7151,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 {
@@ -7149,6 +7233,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 = {
@@ -7814,7 +7903,7 @@ var LeaferUI = (function (exports) {
             this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
             if (this.isApp)
                 this.__setApp();
-            this.__checkAutoLayout(config);
+            this.__checkAutoLayout(config, parentApp);
             this.view = canvas.view;
             if (parentApp) {
                 this.__bindApp(parentApp);
@@ -7915,9 +8004,10 @@ var LeaferUI = (function (exports) {
             this.leafer = leafer;
             this.__level = 1;
         }
-        __checkAutoLayout(config) {
-            if (!config.width || !config.height) {
-                this.autoLayout = new AutoBounds(config);
+        __checkAutoLayout(config, parentApp) {
+            if (!parentApp) {
+                if (!config.width || !config.height)
+                    this.autoLayout = new AutoBounds(config);
                 this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
             }
         }
@@ -8052,12 +8142,21 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             }
         }
-        zoom(_zoomType, _padding, _fixedScale) { return undefined; }
+        zoom(_zoomType, _padding, _fixedScale) {
+            return debug$3.error('need @leafer-in/view');
+        }
         getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
         getValidScale(changeScale) { return changeScale; }
         getWorldPointByClient(clientPoint, updateClient) {
             return this.interaction && this.interaction.getLocal(clientPoint, updateClient);
         }
+        getPagePointByClient(clientPoint, updateClient) {
+            return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient));
+        }
+        updateClientBounds() {
+            this.canvas && this.canvas.updateClientBounds();
+        }
+        receiveEvent(_event) { }
         __checkUpdateLayout() {
             this.__layout.update();
         }
@@ -8141,7 +8240,7 @@ var LeaferUI = (function (exports) {
     const rect$1 = exports.Rect.prototype;
     const group$1 = exports.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;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
         get isBranchLeaf() { return true; }
@@ -8155,20 +8254,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();
@@ -8188,13 +8290,13 @@ var LeaferUI = (function (exports) {
                 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() { }
@@ -8528,14 +8630,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();
@@ -8579,8 +8693,7 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.canvas) {
                 this.canvas.destroy();
-                this.canvas = null;
-                this.context = null;
+                this.canvas = this.context = null;
             }
             super.destroy();
         }
@@ -8595,7 +8708,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)
@@ -8619,13 +8732,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) {
@@ -8818,7 +8931,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([
@@ -8828,7 +8942,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() {
@@ -8933,11 +9047,13 @@ var LeaferUI = (function (exports) {
                 this.renderer.update();
         }
         __render(canvas, options) {
-            if (options.matrix) {
-                const { a, b, c, d, e, f } = options.matrix;
-                canvas.setTransform(a, b, c, d, e, f);
+            if (canvas.context) {
+                if (options.matrix) {
+                    const { a, b, c, d, e, f } = options.matrix;
+                    canvas.setTransform(a, b, c, d, e, f);
+                }
+                this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
             }
-            this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
         }
         __onResize(event) {
             this.children.forEach(leafer => leafer.resize(event));
@@ -9049,6 +9165,7 @@ var LeaferUI = (function (exports) {
     exports.PointerEvent = __decorate([
         registerUIEvent()
     ], exports.PointerEvent);
+    const MyPointerEvent = exports.PointerEvent;
 
     const move = {};
     exports.DragEvent = class DragEvent extends exports.PointerEvent {
@@ -9148,6 +9265,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) {
@@ -9229,36 +9347,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$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 = exports.Leafer.prototype;
     leafer.initType = function (type) {
@@ -9304,11 +9418,14 @@ var LeaferUI = (function (exports) {
     };
 
     class Transformer {
+        get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
         constructor(interaction) {
             this.interaction = interaction;
         }
         move(data) {
             const { interaction } = this;
+            if (!data.moveType)
+                data.moveType = 'move';
             if (!this.moveData) {
                 const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
                 data.path = path;
@@ -9444,7 +9561,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;
 
@@ -9473,8 +9596,10 @@ var LeaferUI = (function (exports) {
                 return;
             }
             if (!this.moving && canDrag) {
-                if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty)
+                if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) {
+                    this.dragData.moveType = 'drag';
                     interaction.emit(exports.MoveEvent.START, this.dragData);
+                }
             }
             if (!this.moving) {
                 this.dragStart(data, canDrag);
@@ -9513,6 +9638,7 @@ var LeaferUI = (function (exports) {
                 this.dragData.throughPath = throughPath;
             this.dragData.path = path;
             if (this.moving) {
+                this.dragData.moveType = 'drag';
                 interaction.emit(exports.MoveEvent.BEFORE_MOVE, this.dragData);
                 interaction.emit(exports.MoveEvent.MOVE, this.dragData);
             }
@@ -9579,6 +9705,7 @@ var LeaferUI = (function (exports) {
             endDragData.path = path;
             if (this.moving) {
                 this.moving = false;
+                endDragData.moveType = 'drag';
                 interaction.emit(exports.MoveEvent.END, endDragData);
             }
             if (this.dragging) {
@@ -9637,7 +9764,7 @@ var LeaferUI = (function (exports) {
                 totalY += moveY;
                 PointHelper.move(downData, moveX, moveY);
                 PointHelper.move(this.dragData, moveX, moveY);
-                interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY }));
+                interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
                 interaction.pointerMoveReal(data);
             }, 10);
         }
@@ -9750,22 +9877,27 @@ var LeaferUI = (function (exports) {
             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 moveMode() { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+        get transforming() { return this.transformer.transforming; }
+        get moveMode() { return this.config.move.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+        get canHover() { return this.config.pointer.hover && !this.config.mobile; }
         get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
-        get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.config.pointer.hover && this.downData && this.isTreePath(this.downData); }
+        get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
         get isHoldMiddleKey() { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
         get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
         get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
         get hitRadius() { return this.config.pointer.hitRadius; }
         constructor(target, canvas, selector, userConfig) {
-            this.config = config;
+            this.config = DataHelper.clone(config);
             this.tapCount = 0;
             this.downKeyMap = {};
             this.target = target;
@@ -9852,6 +9984,7 @@ var LeaferUI = (function (exports) {
             if (!downData)
                 return;
             PointerButton.defaultLeft(data);
+            data.multiTouch = downData.multiTouch;
             this.findPath(data);
             const upData = Object.assign(Object.assign({}, data), { path: data.path.clone() });
             data.path.addList(downData.path.list);
@@ -9924,7 +10057,7 @@ var LeaferUI = (function (exports) {
                 this.updateCursor();
         }
         pointerHover(data) {
-            if (this.config.pointer.hover) {
+            if (this.canHover) {
                 this.pointerOverOrOut(data);
                 this.pointerEnterOrLeave(data);
             }
@@ -10016,11 +10149,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$1(data.path))) && !pathHasOutside(data.path);
         }
         isDrag(leaf) {
             return this.dragger.getList().has(leaf);
@@ -10061,7 +10194,7 @@ var LeaferUI = (function (exports) {
             this.hoverData = data;
         }
         updateCursor(data) {
-            if (!this.config.cursor || !this.config.pointer.hover)
+            if (!this.config.cursor || !this.canHover)
                 return;
             if (!data) {
                 this.updateHoverData();
@@ -10383,7 +10516,7 @@ var LeaferUI = (function (exports) {
         convertTouch(e, local) {
             const touch = PointerEventHelper.getTouch(e);
             const base = InteractionHelper.getBase(e);
-            return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'touch', pressure: touch.force });
+            return Object.assign(Object.assign({}, base), { x: local.x, y: local.y, width: 1, height: 1, pointerType: 'touch', multiTouch: e.touches.length > 1, pressure: touch.force });
         },
         getTouch(e) {
             return e.targetTouches[0] || e.changedTouches[0];
@@ -10438,7 +10571,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
+    const { getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag } = InteractionHelper;
     class Interaction extends InteractionBase {
         __listenEvents() {
             super.__listenEvents();
@@ -10524,21 +10657,21 @@ var LeaferUI = (function (exports) {
         }
         onPointerDown(e) {
             this.preventDefaultPointer(e);
-            this.usePointer || (this.usePointer = true);
-            if (this.useMultiTouch)
+            if (this.config.pointer.touch || this.useMultiTouch)
                 return;
+            this.usePointer || (this.usePointer = true);
             this.pointerDown(PointerEventHelper.convert(e, this.getLocal(e)));
         }
         onPointerMove(e) {
-            this.usePointer || (this.usePointer = true);
-            if (this.useMultiTouch || this.preventWindowPointer(e))
+            if (this.config.pointer.touch || this.useMultiTouch || this.preventWindowPointer(e))
                 return;
+            this.usePointer || (this.usePointer = true);
             this.pointerMove(PointerEventHelper.convert(e, this.getLocal(e, true)));
         }
         onPointerUp(e) {
             if (this.downData)
                 this.preventDefaultPointer(e);
-            if (this.useMultiTouch || this.preventWindowPointer(e))
+            if (this.config.pointer.touch || this.useMultiTouch || this.preventWindowPointer(e))
                 return;
             this.pointerUp(PointerEventHelper.convert(e, this.getLocal(e)));
         }
@@ -10571,7 +10704,11 @@ var LeaferUI = (function (exports) {
             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;
@@ -10580,8 +10717,7 @@ var LeaferUI = (function (exports) {
                 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);
@@ -10608,7 +10744,7 @@ var LeaferUI = (function (exports) {
             this.pointerCancel();
         }
         multiTouchStart(e) {
-            this.useMultiTouch = (e.touches.length >= 2);
+            this.useMultiTouch = (e.touches.length > 1);
             this.touches = this.useMultiTouch ? this.getTouches(e.touches) : undefined;
             if (this.useMultiTouch)
                 this.pointerCancel();
@@ -11064,10 +11200,13 @@ 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) {
@@ -11087,13 +11226,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 };
@@ -11298,7 +11434,7 @@ var LeaferUI = (function (exports) {
     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) {
+        if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
             return false;
         }
         else {
@@ -11332,7 +11468,7 @@ var LeaferUI = (function (exports) {
                 return true;
             }
             else {
-                if (!paint.style || Export.running) {
+                if (!paint.style || paint.sync || Export.running) {
                     createPattern(ui, paint, canvas.pixelRatio);
                 }
                 else {
@@ -12202,6 +12338,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) => {
@@ -12211,19 +12348,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) {
@@ -12232,14 +12363,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();
@@ -12273,10 +12398,21 @@ 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;
+                            sliceLeaf.__worldOpacity = 0;
                             leaf = leafer;
                             renderOptions.bounds = canvas.bounds;
                         }
@@ -12291,6 +12427,8 @@ var LeaferUI = (function (exports) {
                             leaf.__render(canvas, renderOptions);
                         }
                         canvas.restore();
+                        if (sliceLeaf)
+                            sliceLeaf.__updateWorldOpacity();
                         if (trim) {
                             trimBounds = getTrimBounds(canvas);
                             const old = canvas, { width, height } = trimBounds;
@@ -12440,6 +12578,9 @@ var LeaferUI = (function (exports) {
     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;