@leafer-draw/miniapp 1.0.0-rc.19 → 1.0.0-rc.21

package/dist/miniapp.module.js

@@ -1,5 +1,6 @@
 const Platform = {
     image: {
+        hitCanvasSize: 100,
         maxCacheSize: 2560 * 1600,
         maxPatternSize: 4096 * 2160,
         suffix: 'leaf',
@@ -41,7 +42,7 @@ const MathHelper = {
     minus(value, isFourNumber) {
         if (value instanceof Array) {
             if (isFourNumber)
-                value = MathHelper.fourNumber(value);
+                value = MathHelper.fourNumber(value, 0);
             for (let i = 0; i < value.length; i++)
                 value[i] = -value[i];
         }
@@ -55,7 +56,7 @@ const MathHelper = {
         if (num instanceof Array) {
             switch (num.length) {
                 case 4:
-                    data = num;
+                    data = maxValue === undefined ? num : [...num];
                     break;
                 case 2:
                     data = [num[0], num[1], num[0], num[1]];
@@ -116,7 +117,7 @@ function getMatrixData() { return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }; }
 
 const { sin: sin$5, cos: cos$5, acos, sqrt: sqrt$3 } = Math;
 const { float: float$1 } = MathHelper;
-const tempPoint$2 = {};
+const tempPoint$3 = {};
 function getWorld() {
     return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), { scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
 }
@@ -157,8 +158,8 @@ const MatrixHelper = {
         t.d *= scaleY;
     },
     scaleOfOuter(t, origin, scaleX, scaleY) {
-        M$6.toInnerPoint(t, origin, tempPoint$2);
-        M$6.scaleOfInner(t, tempPoint$2, scaleX, scaleY);
+        M$6.toInnerPoint(t, origin, tempPoint$3);
+        M$6.scaleOfInner(t, tempPoint$3, scaleX, scaleY);
     },
     scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -176,8 +177,8 @@ const MatrixHelper = {
         t.d = c * sinR + d * cosR;
     },
     rotateOfOuter(t, origin, rotation) {
-        M$6.toInnerPoint(t, origin, tempPoint$2);
-        M$6.rotateOfInner(t, tempPoint$2, rotation);
+        M$6.toInnerPoint(t, origin, tempPoint$3);
+        M$6.rotateOfInner(t, tempPoint$3, rotation);
     },
     rotateOfInner(t, origin, rotation) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -198,8 +199,8 @@ const MatrixHelper = {
         }
     },
     skewOfOuter(t, origin, skewX, skewY) {
-        M$6.toInnerPoint(t, origin, tempPoint$2);
-        M$6.skewOfInner(t, tempPoint$2, skewX, skewY);
+        M$6.toInnerPoint(t, origin, tempPoint$3);
+        M$6.skewOfInner(t, tempPoint$3, skewX, skewY);
     },
     skewOfInner(t, origin, skewX, skewY = 0) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -446,19 +447,19 @@ const PointHelper = {
     },
     tempToInnerOf(t, matrix) {
         const { tempPoint: temp } = P$5;
-        copy$9(temp, t);
+        copy$a(temp, t);
         toInnerPoint$2(matrix, temp, temp);
         return temp;
     },
     tempToOuterOf(t, matrix) {
         const { tempPoint: temp } = P$5;
-        copy$9(temp, t);
+        copy$a(temp, t);
         toOuterPoint$2(matrix, temp, temp);
         return temp;
     },
     tempToInnerRadiusPointOf(t, matrix) {
         const { tempRadiusPoint: temp } = P$5;
-        copy$9(temp, t);
+        copy$a(temp, t);
         P$5.toInnerRadiusPointOf(t, matrix, temp);
         return temp;
     },
@@ -525,7 +526,7 @@ const PointHelper = {
     }
 };
 const P$5 = PointHelper;
-const { getDistanceFrom, copy: copy$9, getAtan2 } = P$5;
+const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
 
 class Point {
     constructor(x, y) {
@@ -593,6 +594,7 @@ class Point {
         return this;
     }
 }
+const tempPoint$2 = new Point();
 
 class Matrix {
     constructor(a, b, c, d, e, f) {
@@ -602,6 +604,12 @@ class Matrix {
         typeof a === 'object' ? MatrixHelper.copy(this, a) : MatrixHelper.set(this, a, b, c, d, e, f);
         return this;
     }
+    setWith(dataWithScale) {
+        MatrixHelper.copy(this, dataWithScale);
+        this.scaleX = dataWithScale.scaleX;
+        this.scaleY = dataWithScale.scaleY;
+        return this;
+    }
     get() {
         const { a, b, c, d, e, f } = this;
         return { a, b, c, d, e, f };
@@ -621,6 +629,12 @@ class Matrix {
         MatrixHelper.scale(this, x, y);
         return this;
     }
+    scaleWith(x, y) {
+        MatrixHelper.scale(this, x, y);
+        this.scaleX *= x;
+        this.scaleY *= y || x;
+        return this;
+    }
     scaleOfOuter(origin, x, y) {
         MatrixHelper.scaleOfOuter(this, origin, x, y);
         return this;
@@ -673,6 +687,12 @@ class Matrix {
         MatrixHelper.invert(this);
         return this;
     }
+    invertWith() {
+        MatrixHelper.invert(this);
+        this.scaleX = 1 / this.scaleX;
+        this.scaleY = 1 / this.scaleY;
+        return this;
+    }
     toOuterPoint(inner, to, distance) {
         MatrixHelper.toOuterPoint(this, inner, to, distance);
     }
@@ -693,6 +713,7 @@ class Matrix {
         MatrixHelper.reset(this);
     }
 }
+const tempMatrix = new Matrix();
 
 const TwoPointBoundsHelper = {
     tempPointBounds: {},
@@ -781,7 +802,7 @@ const BoundsHelper = {
             to = t;
         }
         else {
-            copy$8(to, t);
+            copy$9(to, t);
         }
         if (parent) {
             to.offsetX = -(B.maxX(parent) - t.x);
@@ -856,8 +877,8 @@ const BoundsHelper = {
         B.move(to, -matrix.e, -matrix.f);
         B.scale(to, 1 / matrix.a, 1 / matrix.d);
     },
-    getFitMatrix(t, put) {
-        const scale = Math.min(1, Math.min(t.width / put.width, t.height / put.height));
+    getFitMatrix(t, put, baseScale = 1) {
+        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, spreadX, spreadY) {
@@ -891,11 +912,15 @@ const BoundsHelper = {
         t.width = float(t.width, maxLength);
         t.height = float(t.height, maxLength);
     },
-    add(t, bounds) {
+    add(t, bounds, isPoint) {
         right$1 = t.x + t.width;
         bottom$1 = t.y + t.height;
-        boundsRight = bounds.x + bounds.width;
-        boundsBottom = bounds.y + bounds.height;
+        boundsRight = bounds.x;
+        boundsBottom = bounds.y;
+        if (!isPoint) {
+            boundsRight += bounds.width;
+            boundsBottom += bounds.height;
+        }
         right$1 = right$1 > boundsRight ? right$1 : boundsRight;
         bottom$1 = bottom$1 > boundsBottom ? bottom$1 : boundsBottom;
         t.x = t.x < bounds.x ? t.x : bounds.x;
@@ -920,7 +945,7 @@ const BoundsHelper = {
                 if (first) {
                     first = false;
                     if (!addMode)
-                        copy$8(t, bounds);
+                        copy$9(t, bounds);
                 }
                 else {
                     add$1(t, bounds);
@@ -934,6 +959,9 @@ const BoundsHelper = {
         points.forEach((point, index) => index === 0 ? setPoint$3(tempPointBounds$1, point.x, point.y) : addPoint$3(tempPointBounds$1, point.x, point.y));
         toBounds$4(tempPointBounds$1, t);
     },
+    addPoint(t, point) {
+        add$1(t, point, true);
+    },
     getPoints(t) {
         const { x, y, width, height } = t;
         return [
@@ -995,7 +1023,7 @@ const BoundsHelper = {
     }
 };
 const B = BoundsHelper;
-const { add: add$1, copy: copy$8 } = B;
+const { add: add$1, copy: copy$9 } = B;
 
 class Bounds {
     get minX() { return BoundsHelper.minX(this); }
@@ -1036,8 +1064,8 @@ class Bounds {
         BoundsHelper.toInnerOf(this, matrix, to);
         return this;
     }
-    getFitMatrix(put) {
-        return BoundsHelper.getFitMatrix(this, put);
+    getFitMatrix(put, baseScale) {
+        return BoundsHelper.getFitMatrix(this, put, baseScale);
     }
     spread(fourNumber, spreadY) {
         BoundsHelper.spread(this, fourNumber, spreadY);
@@ -1083,6 +1111,10 @@ class Bounds {
         BoundsHelper.setPoints(this, points);
         return this;
     }
+    addPoint(point) {
+        BoundsHelper.addPoint(this, point);
+        return this;
+    }
     getPoints() {
         return BoundsHelper.getPoints(this);
     }
@@ -1115,6 +1147,7 @@ class Bounds {
         BoundsHelper.reset(this);
     }
 }
+const tempBounds$1 = new Bounds();
 
 class AutoBounds {
     constructor(top, right, bottom, left, width, height) {
@@ -1232,7 +1265,8 @@ class Debug {
             this.warn(...messages);
     }
     warn(...messages) {
-        console.warn(this.name, ...messages);
+        if (D$4.showWarn)
+            console.warn(this.name, ...messages);
     }
     repeat(name, ...messages) {
         if (!this.repeatMap[name]) {
@@ -1251,6 +1285,7 @@ class Debug {
 }
 Debug.filterList = [];
 Debug.excludeList = [];
+Debug.showWarn = true;
 function getNameList(name) {
     if (!name)
         name = [];
@@ -1260,7 +1295,7 @@ function getNameList(name) {
 }
 const D$4 = Debug;
 
-const debug$c = Debug.get('RunTime');
+const debug$d = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -1278,7 +1313,7 @@ const Run = {
         const time = R.idMap[id], name = R.nameMap[id];
         const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
         R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-        debug$c.log(name, duration, 'ms');
+        debug$d.log(name, duration, 'ms');
     },
     endOfName(name, microsecond) {
         const id = R.nameToIdMap[name];
@@ -1288,13 +1323,13 @@ const Run = {
 };
 const R = Run;
 
-const debug$b = Debug.get('UICreator');
+const debug$c = Debug.get('UICreator');
 const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
         if (list$1[tag]) {
-            debug$b.repeat(tag);
+            debug$c.repeat(tag);
         }
         else {
             list$1[tag] = UI;
@@ -1316,7 +1351,7 @@ const UICreator = {
 };
 const { list: list$1 } = UICreator;
 
-const debug$a = Debug.get('EventCreator');
+const debug$b = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1324,7 +1359,7 @@ const EventCreator = {
         Object.keys(Event).forEach(key => {
             name = Event[key];
             if (typeof name === 'string')
-                nameList[name] ? debug$a.repeat(name) : nameList[name] = Event;
+                nameList[name] ? debug$b.repeat(name) : nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -1535,36 +1570,7 @@ var Answer;
     Answer[Answer["NoAndSkip"] = 2] = "NoAndSkip";
     Answer[Answer["YesAndSkip"] = 3] = "YesAndSkip";
 })(Answer || (Answer = {}));
-
-const FileHelper = {
-    opacityTypes: ['png', 'webp', 'svg'],
-    upperCaseTypeMap: {},
-    mineType(type) {
-        if (!type || type.startsWith('image'))
-            return type;
-        if (type === 'jpg')
-            type = 'jpeg';
-        return 'image/' + type;
-    },
-    fileType(filename) {
-        const l = filename.split('.');
-        return l[l.length - 1];
-    },
-    isOpaqueImage(filename) {
-        const type = F$4.fileType(filename);
-        return ['jpg', 'jpeg'].some(item => item === type);
-    },
-    getExportOptions(options) {
-        switch (typeof options) {
-            case 'object': return options;
-            case 'number': return { quality: options };
-            case 'boolean': return { blob: options };
-            default: return {};
-        }
-    }
-};
-const F$4 = FileHelper;
-F$4.opacityTypes.forEach(type => F$4.upperCaseTypeMap[type] = type.toUpperCase());
+const emptyData = {};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1888,10 +1894,8 @@ __decorate([
     contextMethod()
 ], Canvas$1.prototype, "strokeText", null);
 
-const { copy: copy$7 } = MatrixHelper;
-const temp = new Bounds();
+const { copy: copy$8 } = MatrixHelper;
 const minSize = { width: 1, height: 1, pixelRatio: 1 };
-const debug$9 = Debug.get('LeaferCanvasBase');
 const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
 class LeaferCanvasBase extends Canvas$1 {
     get width() { return this.size.width; }
@@ -1918,44 +1922,15 @@ class LeaferCanvasBase extends Canvas$1 {
     }
     init() { }
     __createContext() {
-        this.context = this.view.getContext('2d');
+        const { view } = this;
+        const { contextSettings } = this.config;
+        this.context = contextSettings ? view.getContext('2d', contextSettings) : view.getContext('2d');
         this.__bindContext();
     }
-    export(filename, options) {
-        const { quality, blob } = FileHelper.getExportOptions(options);
-        if (filename.includes('.')) {
-            return this.saveAs(filename, quality);
-        }
-        else if (blob) {
-            return this.toBlob(filename, quality);
-        }
-        else {
-            return this.toDataURL(filename, quality);
-        }
-    }
-    toBlob(type, quality) {
-        return new Promise((resolve) => {
-            Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
-                resolve(blob);
-            }).catch((e) => {
-                debug$9.error(e);
-                resolve(null);
-            });
-        });
-    }
-    toDataURL(type, quality) {
-        return Platform.origin.canvasToDataURL(this.view, type, quality);
-    }
-    saveAs(filename, quality) {
-        return new Promise((resolve) => {
-            Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
-                resolve(true);
-            }).catch((e) => {
-                debug$9.error(e);
-                resolve(false);
-            });
-        });
-    }
+    export(_filename, _options) { return undefined; }
+    toBlob(_type, _quality) { return undefined; }
+    toDataURL(_type, _quality) { return undefined; }
+    saveAs(_filename, _quality) { return undefined; }
     resize(size) {
         if (this.isSameSize(size))
             return;
@@ -2023,13 +1998,9 @@ class LeaferCanvasBase extends Canvas$1 {
     restoreBlendMode() {
         this.blendMode = this.savedBlendMode;
     }
-    hitFill(point, fillRule) {
-        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
-    }
-    hitStroke(point, strokeWidth) {
-        this.strokeWidth = strokeWidth;
-        return this.context.isPointInStroke(point.x, point.y);
-    }
+    hitFill(_point, _fillRule) { return true; }
+    hitStroke(_point, _strokeWidth) { return true; }
+    hitPixel(_radiusPoint, _offset, _scale = 1) { return true; }
     setWorldShadow(x, y, blur, color) {
         const { pixelRatio } = this;
         this.shadowOffsetX = x * pixelRatio;
@@ -2088,8 +2059,8 @@ class LeaferCanvasBase extends Canvas$1 {
         if (blendMode)
             this.blendMode = blendMode;
         this.fillStyle = color;
-        temp.set(bounds).scale(this.pixelRatio);
-        this.fillRect(temp.x, temp.y, temp.width, temp.height);
+        tempBounds$1.set(bounds).scale(this.pixelRatio);
+        this.fillRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         if (blendMode)
             this.blendMode = 'source-over';
     }
@@ -2097,23 +2068,23 @@ class LeaferCanvasBase extends Canvas$1 {
         if (blendMode)
             this.blendMode = blendMode;
         this.strokeStyle = color;
-        temp.set(bounds).scale(this.pixelRatio);
-        this.strokeRect(temp.x, temp.y, temp.width, temp.height);
+        tempBounds$1.set(bounds).scale(this.pixelRatio);
+        this.strokeRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         if (blendMode)
             this.blendMode = 'source-over';
     }
     clearWorld(bounds, ceilPixel) {
-        temp.set(bounds).scale(this.pixelRatio);
+        tempBounds$1.set(bounds).scale(this.pixelRatio);
         if (ceilPixel)
-            temp.ceil();
-        this.clearRect(temp.x, temp.y, temp.width, temp.height);
+            tempBounds$1.ceil();
+        this.clearRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
     }
     clipWorld(bounds, ceilPixel) {
         this.beginPath();
-        temp.set(bounds).scale(this.pixelRatio);
+        tempBounds$1.set(bounds).scale(this.pixelRatio);
         if (ceilPixel)
-            temp.ceil();
-        this.rect(temp.x, temp.y, temp.width, temp.height);
+            tempBounds$1.ceil();
+        this.rect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         this.clip();
     }
     clear() {
@@ -2127,7 +2098,7 @@ class LeaferCanvasBase extends Canvas$1 {
         const canvas = this.manager ? this.manager.get(this.size) : Creator.canvas(Object.assign({}, this.size));
         canvas.save();
         if (useSameWorldTransform)
-            copy$7(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+            copy$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
         if (useSameSmooth)
             canvas.smooth = this.smooth;
         return canvas;
@@ -2497,10 +2468,10 @@ const EllipseHelper = {
     }
 };
 
-const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$3, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
+const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
 const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
 const { ellipticalArc } = EllipseHelper;
-const debug$8 = Debug.get('PathConvert');
+const debug$a = Debug.get('PathConvert');
 const setEndPoint$1 = {};
 const PathConvert = {
     current: { dot: 0 },
@@ -2712,7 +2683,7 @@ const PathConvert = {
                     y = setEndPoint$1.y;
                     i += 9;
                     break;
-                case F$3:
+                case F$4:
                     curveMode ? ellipse$4(data, old[i + 1], old[i + 2], old[i + 3], old[i + 4], 0, 0, 360, false) : copyData(data, old, i, 5);
                     x = old[i + 1] + old[i + 3];
                     y = old[i + 2];
@@ -2737,7 +2708,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$8.error(`command: ${command} [index:${i}]`, old);
+                    debug$a.error(`command: ${command} [index:${i}]`, old);
                     return data;
             }
             lastCommand = command;
@@ -2761,7 +2732,7 @@ const PathConvert = {
 };
 const { current, pushData, copyData } = PathConvert;
 
-const { M: M$3, L: L$4, C: C$3, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$2, O: O$2, P: P$2, U: U$2 } = PathCommandMap;
+const { M: M$3, L: L$4, C: C$3, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$2, P: P$2, U: U$2 } = PathCommandMap;
 const { getMinDistanceFrom, getRadianFrom } = PointHelper;
 const { tan, min, abs: abs$2 } = Math;
 const startPoint = {};
@@ -2803,7 +2774,7 @@ const PathCommandDataHelper = {
     },
     ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         if (rotation === undefined) {
-            data.push(F$2, x, y, radiusX, radiusY);
+            data.push(F$3, x, y, radiusX, radiusY);
         }
         else {
             if (startAngle === undefined)
@@ -2853,6 +2824,7 @@ class PathCreator {
     set path(value) { this.__path = value; }
     get path() { return this.__path; }
     constructor(path) {
+        this.clearPath = this.beginPath;
         this.set(path);
     }
     set(path) {
@@ -2922,8 +2894,8 @@ class PathCreator {
     }
 }
 
-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$1, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
-const debug$7 = Debug.get('PathDrawer');
+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;
+const debug$9 = Debug.get('PathDrawer');
 const PathDrawer = {
     drawPathByData(drawer, data) {
         if (!data)
@@ -2969,7 +2941,7 @@ const PathDrawer = {
                     drawer.ellipse(data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5] * OneRadian, data[i + 6] * OneRadian, data[i + 7] * OneRadian, data[i + 8]);
                     i += 9;
                     break;
-                case F$1:
+                case F$2:
                     drawer.ellipse(data[i + 1], data[i + 2], data[i + 3], data[i + 4], 0, 0, PI2, false);
                     i += 5;
                     break;
@@ -2986,17 +2958,17 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$7.error(`command: ${command} [index:${i}]`, data);
+                    debug$9.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
     }
 };
 
-const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F, O, P, U } = PathCommandMap;
+const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F: F$1, O, P, U } = PathCommandMap;
 const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
-const { addPointBounds, copy: copy$6, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-const debug$6 = Debug.get('PathBounds');
+const { addPointBounds, copy: copy$7, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
+const debug$8 = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
 const setPointBounds = {};
@@ -3068,12 +3040,12 @@ const PathBounds = {
                     break;
                 case G:
                     ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 9;
                     break;
-                case F:
+                case F$1:
                     x = data[i + 1];
                     y = data[i + 2];
                     radiusX = data[i + 3];
@@ -3084,7 +3056,7 @@ const PathBounds = {
                     break;
                 case O:
                     arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 7;
@@ -3099,13 +3071,13 @@ const PathBounds = {
                     break;
                 case U:
                     arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                    i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 6;
                     break;
                 default:
-                    debug$6.error(`command: ${command} [index:${i}]`, data);
+                    debug$8.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3191,7 +3163,37 @@ function canvasPatch(drawer) {
     roundRect(drawer);
 }
 
-const debug$5 = Debug.get('TaskProcessor');
+const FileHelper = {
+    opacityTypes: ['png', 'webp', 'svg'],
+    upperCaseTypeMap: {},
+    mineType(type) {
+        if (!type || type.startsWith('image'))
+            return type;
+        if (type === 'jpg')
+            type = 'jpeg';
+        return 'image/' + type;
+    },
+    fileType(filename) {
+        const l = filename.split('.');
+        return l[l.length - 1];
+    },
+    isOpaqueImage(filename) {
+        const type = F.fileType(filename);
+        return ['jpg', 'jpeg'].some(item => item === type);
+    },
+    getExportOptions(options) {
+        switch (typeof options) {
+            case 'object': return options;
+            case 'number': return { quality: options };
+            case 'boolean': return { blob: options };
+            default: return {};
+        }
+    }
+};
+const F = FileHelper;
+F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
+
+const debug$7 = Debug.get('TaskProcessor');
 class TaskItem {
     constructor(task) {
         this.parallel = true;
@@ -3206,7 +3208,7 @@ class TaskItem {
                     yield this.task();
             }
             catch (error) {
-                debug$5.error(error);
+                debug$7.error(error);
             }
         });
     }
@@ -3490,6 +3492,7 @@ const ImageManager = {
     },
     destroy() {
         I.map = {};
+        I.recycledList = [];
     }
 };
 const I = ImageManager;
@@ -3604,84 +3607,75 @@ function getNames(object) {
     return Object.getOwnPropertyNames(object);
 }
 
-function defineLeafAttr(target, key, defaultValue, mergeDescriptor) {
+function decorateLeafAttr(defaultValue, descriptorFn) {
+    return (target, key) => defineLeafAttr(target, key, defaultValue, descriptorFn && descriptorFn(key));
+}
+function attr(partDescriptor) {
+    return partDescriptor;
+}
+function defineLeafAttr(target, key, defaultValue, partDescriptor) {
     const defaultDescriptor = {
         get() { return this.__getAttr(key); },
         set(value) { this.__setAttr(key, value); },
         configurable: true,
         enumerable: true
     };
-    defineKey(target, key, Object.assign(defaultDescriptor, mergeDescriptor || {}));
+    defineKey(target, key, Object.assign(defaultDescriptor, partDescriptor || {}));
     defineDataProcessor(target, key, defaultValue);
 }
 function dataType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue);
-    };
+    return decorateLeafAttr(defaultValue);
 }
-function positionType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.matrixChanged || this.__layout.matrixChange();
-            }
-        });
-    };
+function positionType(defaultValue, checkFiniteNumber) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value, checkFiniteNumber);
+            this.__layout.matrixChanged || this.__layout.matrixChange();
+        }
+    }));
 }
 function autoLayoutType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.matrixChanged || this.__layout.matrixChange();
-                this.__hasAutoLayout = !!value;
-                if (!this.__local)
-                    this.__layout.createLocal();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.matrixChanged || this.__layout.matrixChange();
+            this.__hasAutoLayout = !!value;
+            if (!this.__local)
+                this.__layout.createLocal();
+        }
+    }));
 }
-function scaleType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.scaleChanged || this.__layout.scaleChange();
-            }
-        });
-    };
+function scaleType(defaultValue, checkFiniteNumber) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value, checkFiniteNumber);
+            this.__layout.scaleChanged || this.__layout.scaleChange();
+        }
+    }));
 }
-function rotationType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.rotationChanged || this.__layout.rotationChange();
-            }
-        });
-    };
+function rotationType(defaultValue, checkFiniteNumber) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value, checkFiniteNumber);
+            this.__layout.rotationChanged || this.__layout.rotationChange();
+        }
+    }));
 }
-function boundsType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                doBoundsType(this);
-            }
-        });
-    };
+function boundsType(defaultValue, checkFiniteNumber) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value, checkFiniteNumber) && doBoundsType(this);
+        }
+    }));
 }
 function naturalBoundsType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                doBoundsType(this);
-                this.__.__removeNaturalSize();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            doBoundsType(this);
+            this.__.__removeNaturalSize();
+        }
+    }));
 }
 function doBoundsType(leaf) {
     leaf.__layout.boxChanged || leaf.__layout.boxChange();
@@ -3689,27 +3683,22 @@ function doBoundsType(leaf) {
         leaf.__layout.matrixChanged || leaf.__layout.matrixChange();
 }
 function pathInputType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                if (this.__.__pathInputed !== 2)
-                    this.__.__pathInputed = value ? 1 : 0;
-                this.__setAttr(key, value);
-                doBoundsType(this);
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            if (this.__.__pathInputed !== 2)
+                this.__.__pathInputed = value ? 1 : 0;
+            this.__setAttr(key, value);
+            doBoundsType(this);
+        }
+    }));
 }
 const pathType = boundsType;
 function affectStrokeBoundsType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                doStrokeType(this);
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value) && doStrokeType(this);
+        }
+    }));
 }
 function doStrokeType(leaf) {
     leaf.__layout.strokeChanged || leaf.__layout.strokeChange();
@@ -3718,91 +3707,75 @@ function doStrokeType(leaf) {
 }
 const strokeType = affectStrokeBoundsType;
 function affectRenderBoundsType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.renderChanged || this.__layout.renderChange();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.renderChanged || this.__layout.renderChange();
+        }
+    }));
 }
 function surfaceType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.surfaceChanged || this.__layout.surfaceChange();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.surfaceChanged || this.__layout.surfaceChange();
+        }
+    }));
 }
 function opacityType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.opacityChanged || this.__layout.opacityChange();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.opacityChanged || this.__layout.opacityChange();
+        }
+    }));
 }
 function sortType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.surfaceChanged || this.__layout.surfaceChange();
-                this.waitParent(() => { this.parent.__layout.childrenSortChange(); });
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.surfaceChanged || this.__layout.surfaceChange();
+            this.waitParent(() => { this.parent.__layout.childrenSortChange(); });
+        }
+    }));
 }
 function maskType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.boxChanged || this.__layout.boxChange();
-                this.waitParent(() => { this.parent.__updateMask(value); });
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.boxChanged || this.__layout.boxChange();
+            this.waitParent(() => { this.parent.__updateMask(value); });
+        }
+    }));
 }
 function eraserType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.waitParent(() => { this.parent.__updateEraser(value); });
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.waitParent(() => { this.parent.__updateEraser(value); });
+        }
+    }));
 }
 function hitType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                if (Debug.showHitView) {
-                    this.__layout.surfaceChanged || this.__layout.surfaceChange();
-                }
-                if (this.leafer)
-                    this.leafer.updateCursor();
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            if (Debug.showHitView) {
+                this.__layout.surfaceChanged || this.__layout.surfaceChange();
             }
-        });
-    };
+            if (this.leafer)
+                this.leafer.updateCursor();
+        }
+    }));
 }
 function cursorType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                if (this.leafer)
-                    this.leafer.updateCursor();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            if (this.leafer)
+                this.leafer.updateCursor();
+        }
+    }));
 }
 function dataProcessor(processor) {
     return (target, _key) => {
@@ -3865,7 +3838,7 @@ function defineDataProcessor(target, key, defaultValue) {
     Object.defineProperty(data, key, property);
 }
 
-const debug$4 = new Debug('rewrite');
+const debug$6 = new Debug('rewrite');
 const list = [];
 const excludeNames = ['destroy', 'constructor'];
 function rewrite(method) {
@@ -3882,7 +3855,7 @@ function doRewrite(error) {
     if (list.length) {
         list.forEach(item => {
             if (error)
-                debug$4.error(item.name, '需在Class上装饰@rewriteAble()');
+                debug$6.error(item.name, '需在Class上装饰@rewriteAble()');
             item.run();
         });
         list.length = 0;
@@ -3918,7 +3891,7 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const { copy: copy$6, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
 const matrix = {};
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -3997,7 +3970,7 @@ const LeafHelper = {
         L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
     },
     zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
-        copy$5(matrix, t.__localMatrix);
+        copy$6(matrix, t.__localMatrix);
         scaleOfOuter$3(matrix, origin, scaleX, scaleY);
         moveByMatrix(t, matrix);
         t.scaleResize(scaleX, scaleY, resize !== true);
@@ -4006,7 +3979,7 @@ const LeafHelper = {
         L.rotateOfLocal(t, getTempLocal(t, origin), angle);
     },
     rotateOfLocal(t, origin, angle) {
-        copy$5(matrix, t.__localMatrix);
+        copy$6(matrix, t.__localMatrix);
         rotateOfOuter$3(matrix, origin, angle);
         moveByMatrix(t, matrix);
         t.rotation = MathHelper.formatRotation(t.rotation + angle);
@@ -4015,19 +3988,19 @@ const LeafHelper = {
         L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
     },
     skewOfLocal(t, origin, skewX, skewY = 0, resize) {
-        copy$5(matrix, t.__localMatrix);
+        copy$6(matrix, t.__localMatrix);
         skewOfOuter(matrix, origin, skewX, skewY);
         L.setTransform(t, matrix, resize);
     },
     transformWorld(t, transform, resize) {
-        copy$5(matrix, t.worldTransform);
+        copy$6(matrix, t.worldTransform);
         multiplyParent$2(matrix, transform);
         if (t.parent)
             divideParent(matrix, t.parent.worldTransform);
         L.setTransform(t, matrix, resize);
     },
     transform(t, transform, resize) {
-        copy$5(matrix, t.localTransform);
+        copy$6(matrix, t.localTransform);
         multiplyParent$2(matrix, transform);
         L.setTransform(t, matrix, resize);
     },
@@ -4041,7 +4014,7 @@ const LeafHelper = {
         t.set(layout);
     },
     getRelativeWorld(t, relative, temp) {
-        copy$5(matrix, t.worldTransform);
+        copy$6(matrix, t.worldTransform);
         divideParent(matrix, relative.worldTransform);
         return temp ? matrix : Object.assign({}, matrix);
     },
@@ -4183,7 +4156,7 @@ const { pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack, updateBoun
 
 const WaitHelper = {
     run(wait) {
-        if (wait.length) {
+        if (wait && wait.length) {
             const len = wait.length;
             for (let i = 0; i < len; i++) {
                 wait[i]();
@@ -4194,7 +4167,7 @@ const WaitHelper = {
 };
 
 const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
-const { toOuterOf: toOuterOf$2, getPoints, copy: copy$4 } = BoundsHelper;
+const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
 class LeafLayout {
     get strokeBounds() { return this._strokeBounds || this.boxBounds; }
     get renderBounds() { return this._renderBounds || this.boxBounds; }
@@ -4339,7 +4312,7 @@ class LeafLayout {
                 matrix = getRelativeWorld$1(leaf, relative, true);
         }
         const layoutBounds = MatrixHelper.getLayout(matrix);
-        copy$4(layoutBounds, bounds);
+        copy$5(layoutBounds, bounds);
         PointHelper.copy(layoutBounds, point);
         if (unscale) {
             const { scaleX, scaleY } = layoutBounds;
@@ -4733,10 +4706,16 @@ LeaferEvent.STOP = 'leafer.stop';
 LeaferEvent.RESTART = 'leafer.restart';
 LeaferEvent.END = 'leafer.end';
 
+const { isFinite } = Number;
+const debug$5 = Debug.get('setAttr');
 const LeafDataProxy = {
-    __setAttr(name, newValue) {
+    __setAttr(name, newValue, checkFiniteNumber) {
         if (this.leafer && this.leafer.created) {
             const oldValue = this.__.__getInput(name);
+            if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
+                debug$5.warn(this.innerName, name, newValue);
+                newValue = undefined;
+            }
             if (typeof newValue === 'object' || oldValue !== newValue) {
                 this.__[name] = newValue;
                 if (this.__proxyData)
@@ -4751,12 +4730,17 @@ const LeafDataProxy = {
                         this.emitEvent(event);
                 }
                 this.leafer.emitEvent(event);
+                return true;
+            }
+            else {
+                return false;
             }
         }
         else {
             this.__[name] = newValue;
             if (this.__proxyData)
                 this.setProxyAttr(name, newValue);
+            return true;
         }
     },
     __getAttr(name) {
@@ -4794,7 +4778,7 @@ const LeafMatrix = {
 
 const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2, hasParentAutoLayout } = LeafHelper;
 const { updateBounds: updateBounds$1 } = BranchHelper;
-const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
+const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
 const { toBounds: toBounds$2 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
@@ -4912,7 +4896,8 @@ const LeafBounds = {
         copyAndSpread$1(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread);
     },
     __updateRenderBounds() {
-        copyAndSpread$1(this.__layout.renderBounds, this.__layout.strokeBounds, this.__layout.renderSpread);
+        const { renderSpread, strokeBounds, renderBounds } = this.__layout;
+        renderSpread > 0 ? copyAndSpread$1(renderBounds, strokeBounds, renderSpread) : copy$4(renderBounds, strokeBounds);
     },
 };
 
@@ -5098,7 +5083,7 @@ let Leaf = class Leaf {
     toString() {
         return JSON.stringify(this.toJSON());
     }
-    __setAttr(_attrName, _newValue) { }
+    __setAttr(_attrName, _newValue) { return true; }
     __getAttr(_attrName) { return undefined; }
     setProxyAttr(_attrName, _newValue) { }
     getProxyAttr(_attrName) { return undefined; }
@@ -5282,24 +5267,16 @@ let Leaf = class Leaf {
     __scaleResize(_scaleX, _scaleY) { }
     __hitWorld(_point) { return true; }
     __hit(_local) { return true; }
-    __hitFill(inner, windingRule) {
-        var _a;
-        return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, windingRule);
-    }
-    __hitStroke(inner, strokeWidth) {
-        var _a;
-        return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth);
-    }
-    __drawHitPath(canvas) {
-        if (canvas)
-            this.__drawRenderPath(canvas);
-    }
+    __hitFill(_inner) { return true; }
+    __hitStroke(_inner, _strokeWidth) { return true; }
+    __hitPixel(_inner) { return true; }
+    __drawHitPath(_canvas) { }
     __updateHitCanvas() { }
     __render(_canvas, _options) { }
     __drawFast(_canvas, _options) { }
     __draw(_canvas, _options) { }
     __clip(_canvas, _options) { }
-    __renderShape(_canvas, _options) { }
+    __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
     __updateWorldOpacity() { }
     __updateChange() { }
     __drawPath(_canvas) { }
@@ -5740,9 +5717,12 @@ function useCanvas(_canvasType, app) {
             canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
             canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
             canvasSaveAs: (canvas, filePath, quality) => {
+                let data = canvas.toDataURL(mineType(fileType(filePath)), quality);
+                data = data.substring(data.indexOf('64,') + 3);
+                return Platform.origin.download(data, filePath);
+            },
+            download(data, filePath) {
                 return new Promise((resolve, reject) => {
-                    let data = canvas.toDataURL(mineType(fileType(filePath)), quality);
-                    data = data.substring(data.indexOf('64,') + 3);
                     let toAlbum;
                     if (!filePath.includes('/')) {
                         filePath = `${app.env.USER_DATA_PATH}/` + filePath;
@@ -6024,7 +6004,7 @@ class LayoutBlockData {
 }
 
 const { updateAllMatrix, updateAllChange } = LeafHelper;
-const debug$3 = Debug.get('Layouter');
+const debug$4 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
@@ -6059,7 +6039,7 @@ class Layouter {
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
         }
         catch (e) {
-            debug$3.error(e);
+            debug$4.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -6073,9 +6053,9 @@ class Layouter {
     }
     layoutOnce() {
         if (this.layouting)
-            return debug$3.warn('layouting');
+            return debug$4.warn('layouting');
         if (this.times > 3)
-            return debug$3.warn('layout max times');
+            return debug$4.warn('layout max times');
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -6179,7 +6159,7 @@ class Layouter {
     }
 }
 
-const debug$2 = Debug.get('Renderer');
+const debug$3 = Debug.get('Renderer');
 class Renderer {
     get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
     constructor(target, canvas, userConfig) {
@@ -6217,7 +6197,7 @@ class Renderer {
         const { target } = this;
         this.times = 0;
         this.totalBounds = new Bounds();
-        debug$2.log(target.innerName, '--->');
+        debug$3.log(target.innerName, '--->');
         try {
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
@@ -6226,9 +6206,9 @@ class Renderer {
         }
         catch (e) {
             this.rendering = false;
-            debug$2.error(e);
+            debug$3.error(e);
         }
-        debug$2.log('-------------|');
+        debug$3.log('-------------|');
     }
     renderAgain() {
         if (this.rendering) {
@@ -6240,9 +6220,9 @@ class Renderer {
     }
     renderOnce(callback) {
         if (this.rendering)
-            return debug$2.warn('rendering');
+            return debug$3.warn('rendering');
         if (this.times > 3)
-            return debug$2.warn('render max times');
+            return debug$3.warn('render max times');
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -6279,7 +6259,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug$2.warn('PartRender: need update attr');
+            return debug$3.warn('PartRender: need update attr');
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -6379,7 +6359,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$2.tip(leaf.innerName, ': empty');
+                                debug$3.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -6431,51 +6411,42 @@ const Export = {};
 const State = {};
 
 function stateType(defaultValue) {
-    return (target, key) => {
-        const stateType = key + 'Style';
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.waitLeafer(() => { if (State.setStyle)
-                    State.setStyle(this, stateType, value); });
-            }
-        });
-    };
+    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 (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                const data = this.__;
-                data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-                doStrokeType(this);
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            const data = this.__;
+            data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+            doStrokeType(this);
+        }
+    }));
 }
 function effectType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                if (value)
-                    this.__.__useEffect = true;
-                this.__layout.renderChanged || this.__layout.renderChange();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            if (value)
+                this.__.__useEffect = true;
+            this.__layout.renderChanged || this.__layout.renderChange();
+        }
+    }));
 }
 function resizeType(defaultValue) {
-    return (target, key) => {
-        defineLeafAttr(target, key, defaultValue, {
-            set(value) {
-                this.__setAttr(key, value);
-                this.__layout.boxChanged || this.__layout.boxChange();
-                this.__updateSize();
-            }
-        });
-    };
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            this.__setAttr(key, value);
+            this.__layout.boxChanged || this.__layout.boxChange();
+            this.__updateSize();
+        }
+    }));
 }
 function zoomLayerType() {
     return (target, key) => {
@@ -6490,12 +6461,13 @@ function zoomLayerType() {
 
 const { parse } = PathConvert;
 const emptyPaint = {};
-const debug$1 = Debug.get('UIData');
+const debug$2 = Debug.get('UIData');
 class UIData extends LeafData {
     get __strokeWidth() {
         const { strokeWidth, strokeWidthFixed } = this;
         if (strokeWidthFixed) {
-            let { scaleX } = this.__leaf.__nowWorld;
+            const ui = this.__leaf;
+            let { scaleX } = ui.__nowWorld || ui.__world;
             if (scaleX < 0)
                 scaleX = -scaleX;
             return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
@@ -6517,7 +6489,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._width = -value;
             this.__leaf.scaleX *= -1;
-            debug$1.warn('width < 0, instead -scaleX ', this);
+            debug$2.warn('width < 0, instead -scaleX ', this);
         }
         else {
             this._width = value;
@@ -6527,7 +6499,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._height = -value;
             this.__leaf.scaleY *= -1;
-            debug$1.warn('height < 0, instead -scaleY', this);
+            debug$2.warn('height < 0, instead -scaleY', this);
         }
         else {
             this._height = value;
@@ -6814,14 +6786,14 @@ const UIRender = {
             }
         }
     },
-    __renderShape(canvas, options) {
+    __renderShape(canvas, options, ignoreFill, ignoreStroke) {
         if (this.__worldOpacity) {
             canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
             const { fill, stroke } = this.__;
             this.__drawRenderPath(canvas);
-            if (fill)
+            if (fill && !ignoreFill)
                 this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-            if (stroke)
+            if (stroke && !ignoreStroke)
                 this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
         }
     }
@@ -6919,10 +6891,7 @@ let UI = UI_1 = class UI extends Leaf {
     __onUpdateSize() {
         if (this.__.__input) {
             const data = this.__;
-            data.__needComputePaint = true;
-            if (data.lazy && this.leafer && !this.leafer.canvas.bounds.hit(this.__world))
-                return;
-            data.__computePaint();
+            (data.lazy && this.leafer && this.leafer.created && !this.leafer.lazyBounds.hit(this.__world)) ? data.__needComputePaint = true : data.__computePaint();
         }
     }
     __updateRenderPath() {
@@ -7024,31 +6993,31 @@ __decorate([
     eraserType(false)
 ], UI.prototype, "eraser", void 0);
 __decorate([
-    positionType(0)
+    positionType(0, true)
 ], UI.prototype, "x", void 0);
 __decorate([
-    positionType(0)
+    positionType(0, true)
 ], UI.prototype, "y", void 0);
 __decorate([
-    boundsType(100)
+    boundsType(100, true)
 ], UI.prototype, "width", void 0);
 __decorate([
-    boundsType(100)
+    boundsType(100, true)
 ], UI.prototype, "height", void 0);
 __decorate([
-    scaleType(1)
+    scaleType(1, true)
 ], UI.prototype, "scaleX", void 0);
 __decorate([
-    scaleType(1)
+    scaleType(1, true)
 ], UI.prototype, "scaleY", void 0);
 __decorate([
-    rotationType(0)
+    rotationType(0, true)
 ], UI.prototype, "rotation", void 0);
 __decorate([
-    rotationType(0)
+    rotationType(0, true)
 ], UI.prototype, "skewX", void 0);
 __decorate([
-    rotationType(0)
+    rotationType(0, true)
 ], UI.prototype, "skewY", void 0);
 __decorate([
     autoLayoutType()
@@ -7062,6 +7031,9 @@ __decorate([
 __decorate([
     dataType('size')
 ], UI.prototype, "editSize", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "editorStyle", void 0);
 __decorate([
     hitType(true)
 ], UI.prototype, "hittable", void 0);
@@ -7128,6 +7100,9 @@ __decorate([
 __decorate([
     pathType()
 ], UI.prototype, "windingRule", void 0);
+__decorate([
+    pathType(true)
+], UI.prototype, "closed", void 0);
 __decorate([
     arrowType('none')
 ], UI.prototype, "startArrow", void 0);
@@ -7247,14 +7222,17 @@ Group = __decorate([
     registerUI()
 ], Group);
 
-const debug = Debug.get('Leafer');
-let Leafer = class Leafer extends Group {
+var Leafer_1;
+const debug$1 = Debug.get('Leafer');
+let Leafer = Leafer_1 = class Leafer extends Group {
+    static get version() { return '1.0.0-rc.21'; }
     get __tag() { return 'Leafer'; }
     get isApp() { return false; }
     get app() { return this.parent || this; }
     get isLeafer() { return true; }
     get imageReady() { return this.viewReady && ImageManager.isComplete; }
     get layoutLocked() { return !this.layouter.running; }
+    get FPS() { return this.renderer ? this.renderer.FPS : 60; }
     get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
     constructor(userConfig, data) {
         super(data);
@@ -7263,6 +7241,7 @@ let Leafer = class Leafer extends Group {
             start: true,
             hittable: true,
             smooth: true,
+            lazySpeard: 100,
             zoom: {
                 min: 0.01,
                 max: 256
@@ -7283,6 +7262,7 @@ let Leafer = class Leafer extends Group {
         this.userConfig = userConfig;
         if (userConfig && (userConfig.view || userConfig.width))
             this.init(userConfig);
+        Leafer_1.list.add(this);
     }
     init(userConfig, parentApp) {
         if (this.canvas)
@@ -7293,19 +7273,20 @@ let Leafer = class Leafer extends Group {
         let start;
         const { config } = this;
         this.initType(config.type);
-        this.canvas = Creator.canvas(config);
-        this.__controllers.push(this.renderer = Creator.renderer(this, this.canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
+        const canvas = this.canvas = Creator.canvas(config);
+        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.view = this.canvas.view;
+        this.updateLazyBounds();
+        this.view = canvas.view;
         if (parentApp) {
             this.__bindApp(parentApp);
             start = parentApp.running;
         }
         else {
             this.selector = Creator.selector(this);
-            this.interaction = Creator.interaction(this, this.canvas, this.selector, config);
+            this.interaction = Creator.interaction(this, canvas, this.selector, config);
             if (this.interaction) {
                 this.__controllers.unshift(this.interaction);
                 this.hitCanvasManager = Creator.hitCanvasManager();
@@ -7315,23 +7296,17 @@ let Leafer = class Leafer extends Group {
         }
         this.hittable = config.hittable;
         this.fill = config.fill;
-        this.canvasManager.add(this.canvas);
+        this.canvasManager.add(canvas);
         this.__listenEvents();
         if (start)
             this.__startTimer = setTimeout(this.start.bind(this));
+        WaitHelper.run(this.__initWait);
         this.onInit();
     }
     onInit() { }
     initType(_type) { }
     set(data) {
-        if (!this.children) {
-            setTimeout(() => {
-                super.set(data);
-            });
-        }
-        else {
-            super.set(data);
-        }
+        this.waitInit(() => { super.set(data); });
     }
     start() {
         clearTimeout(this.__startTimer);
@@ -7376,11 +7351,16 @@ let Leafer = class Leafer extends Group {
         if (i)
             cursor ? i.setCursor(cursor) : i.updateCursor();
     }
+    updateLazyBounds() {
+        this.lazyBounds = this.canvas.bounds.clone().spread(this.config.lazySpeard);
+    }
     __doResize(size) {
-        if (!this.canvas || this.canvas.isSameSize(size))
+        const { canvas } = this;
+        if (!canvas || canvas.isSameSize(size))
             return;
         const old = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs);
-        this.canvas.resize(size);
+        canvas.resize(size);
+        this.updateLazyBounds();
         this.__onResize(new ResizeEvent(size, old));
     }
     __onResize(event) {
@@ -7418,7 +7398,7 @@ let Leafer = class Leafer extends Group {
                 this.canvas.hittable = newValue;
             }
         }
-        super.__setAttr(attrName, newValue);
+        return super.__setAttr(attrName, newValue);
     }
     __getAttr(attrName) {
         if (this.canvas && canvasSizeAttrs.includes(attrName))
@@ -7485,6 +7465,13 @@ let Leafer = class Leafer extends Group {
             this.nextRender(() => this.interaction.updateCursor());
         }
     }
+    waitInit(item, bind) {
+        if (bind)
+            item = item.bind(bind);
+        if (!this.__initWait)
+            this.__initWait = [];
+        this.canvas ? item() : this.__initWait.push(item);
+    }
     waitReady(item, bind) {
         if (bind)
             item = item.bind(bind);
@@ -7524,14 +7511,8 @@ let Leafer = class Leafer extends Group {
         }
     }
     zoom(_zoomType, _padding, _fixedScale) { return undefined; }
-    validScale(changeScale) {
-        const { scaleX } = this.zoomLayer.__, { min, max } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
-        if (absScale < min)
-            changeScale = min / scaleX;
-        else if (absScale > max)
-            changeScale = max / scaleX;
-        return changeScale;
-    }
+    getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
+    getValidScale(changeScale) { return changeScale; }
     __checkUpdateLayout() {
         this.__layout.update();
     }
@@ -7550,9 +7531,10 @@ let Leafer = class Leafer extends Group {
         this.off_(this.__eventIds);
         this.__eventIds.length = 0;
     }
-    destroy() {
-        setTimeout(() => {
+    destroy(sync) {
+        const doDestory = () => {
             if (!this.destroyed) {
+                Leafer_1.list.remove(this);
                 try {
                     this.stop();
                     this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
@@ -7577,19 +7559,21 @@ let Leafer = class Leafer extends Group {
                     setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                 }
                 catch (e) {
-                    debug.error(e);
+                    debug$1.error(e);
                 }
             }
-        });
+        };
+        sync ? doDestory() : setTimeout(doDestory);
     }
 };
+Leafer.list = new LeafList();
 __decorate([
     dataProcessor(LeaferData)
 ], Leafer.prototype, "__", void 0);
 __decorate([
     boundsType()
 ], Leafer.prototype, "pixelRatio", void 0);
-Leafer = __decorate([
+Leafer = Leafer_1 = __decorate([
     registerUI()
 ], Leafer);
 
@@ -7622,11 +7606,9 @@ let Box = class Box extends Group {
     __updateStrokeSpread() { return 0; }
     __updateRectRenderSpread() { return 0; }
     __updateRenderSpread() {
-        let width = this.__updateRectRenderSpread() || super.__updateRenderSpread();
-        this.__.__drawAfterFill = this.__.overflow === 'hide';
-        if (!width)
-            width = this.__.__drawAfterFill ? 0 : 1;
-        return width;
+        const width = this.__updateRectRenderSpread();
+        const hide = this.__.__drawAfterFill = this.__.overflow === 'hide';
+        return (width || hide) ? width : -1;
     }
     __updateRectBoxBounds() { }
     __updateBoxBounds() {
@@ -7820,7 +7802,7 @@ let Line = class Line extends UI {
     __updatePath() {
         const path = this.__.path = [];
         if (this.__.points) {
-            drawPoints$1(path, this.__.points, false);
+            drawPoints$1(path, this.__.points, this.__.closed);
         }
         else {
             moveTo$2(path, 0, 0);
@@ -7830,7 +7812,7 @@ let Line = class Line extends UI {
     __updateRenderPath() {
         const data = this.__;
         if (!this.pathInputed && data.points && data.curve) {
-            drawPoints$1(data.__pathForRender = [], data.points, data.curve, this.pathClosed);
+            drawPoints$1(data.__pathForRender = [], data.points, data.curve, data.closed);
             if (data.__useArrow)
                 PathArrow.addArrows(this, false);
         }
@@ -7862,6 +7844,9 @@ __decorate([
 __decorate([
     pathType(0)
 ], Line.prototype, "curve", void 0);
+__decorate([
+    pathType(false)
+], Line.prototype, "closed", void 0);
 Line = __decorate([
     registerUI()
 ], Line);
@@ -7873,7 +7858,6 @@ let Polygon = class Polygon extends UI {
     get __tag() { return 'Polygon'; }
     constructor(data) {
         super(data);
-        this.pathClosed = true;
     }
     __updatePath() {
         const path = this.__.path = [];
@@ -8043,6 +8027,9 @@ __decorate([
 __decorate([
     resizeType(true)
 ], Canvas.prototype, "smooth", void 0);
+__decorate([
+    resizeType()
+], Canvas.prototype, "contextSettings", void 0);
 __decorate([
     hitType('all')
 ], Canvas.prototype, "hitFill", void 0);
@@ -8119,6 +8106,8 @@ let Text = class Text extends UI {
         else {
             super.__updateBoxBounds();
         }
+        if (italic)
+            b.width += fontSize * 0.16;
         const contentBounds = includes(b, bounds) ? b : bounds;
         if (contentBounds !== layout.contentBounds) {
             layout.contentBounds = contentBounds;
@@ -8256,6 +8245,7 @@ let Pen = class Pen extends Group {
     drawEllipse(_x, _y, _radiusX, _radiusY, _rotation, _startAngle, _endAngle, _anticlockwise) { return this; }
     drawArc(_x, _y, _radius, _startAngle, _endAngle, _anticlockwise) { return this; }
     drawPoints(_points, _curve, _close) { return this; }
+    clearPath() { return this; }
     paint() {
         this.pathElement.forceUpdate('path');
     }
@@ -8267,7 +8257,7 @@ __decorate([
     penPathType()
 ], Pen.prototype, "path", void 0);
 Pen = __decorate([
-    useModule(PathCreator, ['beginPath', 'path']),
+    useModule(PathCreator, ['set', 'beginPath', 'path']),
     registerUI()
 ], Pen);
 function penPathType() {
@@ -8278,6 +8268,8 @@ function penPathType() {
     };
 }
 
+const version = "1.0.0-rc.21";
+
 function fillText(ui, canvas) {
     let row;
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
@@ -8639,8 +8631,11 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation) {
 }
 
 const { get: get$3, translate } = MatrixHelper;
+const tempBox = new Bounds();
 function createData(leafPaint, image, paint, box) {
     let { width, height } = image;
+    if (paint.padding)
+        box = tempBox.set(box).shrink(paint.padding);
     const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint;
     const sameBox = box.width === width && box.height === height;
     if (blendMode)
@@ -8724,8 +8719,11 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
         leafPaint.loadId = image.load(() => {
             ignoreRender(ui, false);
             if (!ui.destroyed) {
-                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds))
+                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
+                    if (image.hasOpacityPixel)
+                        ui.__layout.hitCanvasChanged = true;
                     ui.forceUpdate('surface');
+                }
                 onLoadSuccess(ui, event);
             }
             leafPaint.loadId = null;
@@ -8779,7 +8777,7 @@ function ignoreRender(ui, value) {
 const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
 const { ceil, abs: abs$1 } = Math;
 function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = ui.__nowWorld;
+    let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
     const id = scaleX + '-' + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         scaleX = abs$1(scaleX);
@@ -8841,7 +8839,7 @@ function createPattern(ui, paint, pixelRatio) {
 
 const { abs } = Math;
 function checkImage(ui, canvas, paint, allowPaint) {
-    const { scaleX, scaleY } = ui.__nowWorld;
+    const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
     if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
         return false;
     }
@@ -9746,7 +9744,7 @@ const ExportModule = {
                     const scale = options.scale || 1;
                     const pixelRatio = options.pixelRatio || 1;
                     const screenshot = options.screenshot || leaf.isApp;
-                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : undefined) : options.fill;
+                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                     const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
                     if (screenshot) {
                         renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
@@ -9757,10 +9755,10 @@ const ExportModule = {
                         scaleY = worldTransform.scaleY;
                         switch (relative) {
                             case 'inner':
-                                matrix.set(worldTransform).invert();
+                                matrix.set(worldTransform);
                                 break;
                             case 'local':
-                                matrix.set(worldTransform).divide(leaf.localTransform).invert();
+                                matrix.set(worldTransform).divide(leaf.localTransform);
                                 scaleX /= leaf.scaleX;
                                 scaleY /= leaf.scaleY;
                                 break;
@@ -9771,7 +9769,7 @@ const ExportModule = {
                             case 'page':
                                 relative = leaf.leafer;
                             default:
-                                matrix.set(worldTransform).divide(leaf.getTransform(relative)).invert();
+                                matrix.set(worldTransform).divide(leaf.getTransform(relative));
                                 const l = relative.worldTransform;
                                 scaleX /= scaleX / l.scaleX;
                                 scaleY /= scaleY / l.scaleY;
@@ -9780,7 +9778,7 @@ const ExportModule = {
                     }
                     const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
                     let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio });
-                    const renderOptions = { matrix: matrix.scale(scale).translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
+                    const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
                     if (slice) {
                         leaf = leafer;
                         renderOptions.bounds = canvas.bounds;
@@ -9826,6 +9824,44 @@ function addTask(task) {
     });
 }
 
+const canvas = LeaferCanvasBase.prototype;
+const debug = Debug.get('@leafer-ui/export');
+canvas.export = function (filename, options) {
+    const { quality, blob } = FileHelper.getExportOptions(options);
+    if (filename.includes('.')) {
+        return this.saveAs(filename, quality);
+    }
+    else if (blob) {
+        return this.toBlob(filename, quality);
+    }
+    else {
+        return this.toDataURL(filename, quality);
+    }
+};
+canvas.toBlob = function (type, quality) {
+    return new Promise((resolve) => {
+        Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+            resolve(blob);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(null);
+        });
+    });
+};
+canvas.toDataURL = function (type, quality) {
+    return Platform.origin.canvasToDataURL(this.view, type, quality);
+};
+canvas.saveAs = function (filename, quality) {
+    return new Promise((resolve) => {
+        Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+            resolve(true);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(false);
+        });
+    });
+};
+
 Object.assign(TextConvert, TextConvertModule);
 Object.assign(ColorConvert, ColorConvertModule);
 Object.assign(Paint, PaintModule);
@@ -9839,4 +9875,4 @@ try {
 }
 catch (_a) { }
 
-export { AnimateEvent, Answer, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, DataHelper, Debug, Direction4, Direction9, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, Image, ImageData, ImageEvent, ImageManager, IncrementId, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, 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, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Run, Star, StarData, State, StringNumberMap, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, affectRenderBoundsType, affectStrokeBoundsType, arrowType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, useCanvas, useModule, zoomLayerType };
+export { AnimateEvent, Answer, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, DataHelper, Debug, Direction4, Direction9, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, Image, ImageData, ImageEvent, ImageManager, IncrementId, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, 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, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Run, Star, StarData, State, StringNumberMap, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, 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, 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$2 as tempPoint, useCanvas, useModule, version, zoomLayerType };