leafer-ui 1.0.0-rc.19 → 1.0.0-rc.20

package/dist/web.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$a(temp, t);
+        copy$b(temp, t);
         toInnerPoint$2(matrix, temp, temp);
         return temp;
     },
     tempToOuterOf(t, matrix) {
         const { tempPoint: temp } = P$5;
-        copy$a(temp, t);
+        copy$b(temp, t);
         toOuterPoint$2(matrix, temp, temp);
         return temp;
     },
     tempToInnerRadiusPointOf(t, matrix) {
         const { tempRadiusPoint: temp } = P$5;
-        copy$a(temp, t);
+        copy$b(temp, t);
         P$5.toInnerRadiusPointOf(t, matrix, temp);
         return temp;
     },
@@ -525,7 +526,7 @@ const PointHelper = {
     }
 };
 const P$5 = PointHelper;
-const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
+const { getDistanceFrom, copy: copy$b, 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$9(to, t);
+            copy$a(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$9(t, bounds);
+                        copy$a(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$9 } = B;
+const { add: add$1, copy: copy$a } = 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) {
@@ -1260,7 +1293,7 @@ function getNameList(name) {
 }
 const D$4 = Debug;
 
-const debug$f = Debug.get('RunTime');
+const debug$g = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -1278,7 +1311,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$f.log(name, duration, 'ms');
+        debug$g.log(name, duration, 'ms');
     },
     endOfName(name, microsecond) {
         const id = R.nameToIdMap[name];
@@ -1288,13 +1321,13 @@ const Run = {
 };
 const R = Run;
 
-const debug$e = Debug.get('UICreator');
+const debug$f = Debug.get('UICreator');
 const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
         if (list$2[tag]) {
-            debug$e.repeat(tag);
+            debug$f.repeat(tag);
         }
         else {
             list$2[tag] = UI;
@@ -1316,7 +1349,7 @@ const UICreator = {
 };
 const { list: list$2 } = UICreator;
 
-const debug$d = Debug.get('EventCreator');
+const debug$e = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1324,7 +1357,7 @@ const EventCreator = {
         Object.keys(Event).forEach(key => {
             name = Event[key];
             if (typeof name === 'string')
-                nameList[name] ? debug$d.repeat(name) : nameList[name] = Event;
+                nameList[name] ? debug$e.repeat(name) : nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -1535,36 +1568,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 +1892,8 @@ __decorate([
     contextMethod()
 ], Canvas$1.prototype, "strokeText", null);
 
-const { copy: copy$8 } = MatrixHelper;
-const temp = new Bounds();
+const { copy: copy$9 } = MatrixHelper;
 const minSize = { width: 1, height: 1, pixelRatio: 1 };
-const debug$c = Debug.get('LeaferCanvasBase');
 const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
 class LeaferCanvasBase extends Canvas$1 {
     get width() { return this.size.width; }
@@ -1918,44 +1920,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$c.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$c.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 +1996,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 +2057,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 +2066,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 +2096,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$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+            copy$9(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
         if (useSameSmooth)
             canvas.smooth = this.smooth;
         return canvas;
@@ -2497,10 +2466,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$b = Debug.get('PathConvert');
+const debug$d = Debug.get('PathConvert');
 const setEndPoint$1 = {};
 const PathConvert = {
     current: { dot: 0 },
@@ -2712,7 +2681,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 +2706,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$b.error(`command: ${command} [index:${i}]`, old);
+                    debug$d.error(`command: ${command} [index:${i}]`, old);
                     return data;
             }
             lastCommand = command;
@@ -2761,7 +2730,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 +2772,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 +2822,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 +2892,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$a = 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$c = Debug.get('PathDrawer');
 const PathDrawer = {
     drawPathByData(drawer, data) {
         if (!data)
@@ -2969,7 +2939,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 +2956,17 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$a.error(`command: ${command} [index:${i}]`, data);
+                    debug$c.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$7, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-const debug$9 = Debug.get('PathBounds');
+const { addPointBounds, copy: copy$8, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
+const debug$b = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
 const setPointBounds = {};
@@ -3068,12 +3038,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$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$8(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 +3054,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$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 7;
@@ -3099,13 +3069,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$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                    i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                     x = setEndPoint.x;
                     y = setEndPoint.y;
                     i += 6;
                     break;
                 default:
-                    debug$9.error(`command: ${command} [index:${i}]`, data);
+                    debug$b.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3191,7 +3161,37 @@ function canvasPatch(drawer) {
     roundRect(drawer);
 }
 
-const debug$8 = 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$a = Debug.get('TaskProcessor');
 class TaskItem {
     constructor(task) {
         this.parallel = true;
@@ -3206,7 +3206,7 @@ class TaskItem {
                     yield this.task();
             }
             catch (error) {
-                debug$8.error(error);
+                debug$a.error(error);
             }
         });
     }
@@ -3490,6 +3490,7 @@ const ImageManager = {
     },
     destroy() {
         I$1.map = {};
+        I$1.recycledList = [];
     }
 };
 const I$1 = ImageManager;
@@ -3604,84 +3605,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 +3681,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 +3705,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 +3836,7 @@ function defineDataProcessor(target, key, defaultValue) {
     Object.defineProperty(data, key, property);
 }
 
-const debug$7 = new Debug('rewrite');
+const debug$9 = new Debug('rewrite');
 const list$1 = [];
 const excludeNames = ['destroy', 'constructor'];
 function rewrite(method) {
@@ -3882,7 +3853,7 @@ function doRewrite(error) {
     if (list$1.length) {
         list$1.forEach(item => {
             if (error)
-                debug$7.error(item.name, '需在Class上装饰@rewriteAble()');
+                debug$9.error(item.name, '需在Class上装饰@rewriteAble()');
             item.run();
         });
         list$1.length = 0;
@@ -3918,8 +3889,8 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$6, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-const matrix = {};
+const { copy: copy$7, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const matrix$1 = {};
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
         if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
@@ -3997,39 +3968,39 @@ const LeafHelper = {
         L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
     },
     zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
-        copy$6(matrix, t.__localMatrix);
-        scaleOfOuter$3(matrix, origin, scaleX, scaleY);
-        moveByMatrix(t, matrix);
+        copy$7(matrix$1, t.__localMatrix);
+        scaleOfOuter$3(matrix$1, origin, scaleX, scaleY);
+        moveByMatrix(t, matrix$1);
         t.scaleResize(scaleX, scaleY, resize !== true);
     },
     rotateOfWorld(t, origin, angle) {
         L.rotateOfLocal(t, getTempLocal(t, origin), angle);
     },
     rotateOfLocal(t, origin, angle) {
-        copy$6(matrix, t.__localMatrix);
-        rotateOfOuter$3(matrix, origin, angle);
-        moveByMatrix(t, matrix);
+        copy$7(matrix$1, t.__localMatrix);
+        rotateOfOuter$3(matrix$1, origin, angle);
+        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);
     },
     skewOfLocal(t, origin, skewX, skewY = 0, resize) {
-        copy$6(matrix, t.__localMatrix);
-        skewOfOuter(matrix, origin, skewX, skewY);
-        L.setTransform(t, matrix, resize);
+        copy$7(matrix$1, t.__localMatrix);
+        skewOfOuter(matrix$1, origin, skewX, skewY);
+        L.setTransform(t, matrix$1, resize);
     },
     transformWorld(t, transform, resize) {
-        copy$6(matrix, t.worldTransform);
-        multiplyParent$2(matrix, transform);
+        copy$7(matrix$1, t.worldTransform);
+        multiplyParent$2(matrix$1, transform);
         if (t.parent)
-            divideParent(matrix, t.parent.worldTransform);
-        L.setTransform(t, matrix, resize);
+            divideParent(matrix$1, t.parent.worldTransform);
+        L.setTransform(t, matrix$1, resize);
     },
     transform(t, transform, resize) {
-        copy$6(matrix, t.localTransform);
-        multiplyParent$2(matrix, transform);
-        L.setTransform(t, matrix, resize);
+        copy$7(matrix$1, t.localTransform);
+        multiplyParent$2(matrix$1, transform);
+        L.setTransform(t, matrix$1, resize);
     },
     setTransform(t, transform, resize) {
         const layout = getLayout(transform);
@@ -4041,9 +4012,9 @@ const LeafHelper = {
         t.set(layout);
     },
     getRelativeWorld(t, relative, temp) {
-        copy$6(matrix, t.worldTransform);
-        divideParent(matrix, relative.worldTransform);
-        return temp ? matrix : Object.assign({}, matrix);
+        copy$7(matrix$1, t.worldTransform);
+        divideParent(matrix$1, relative.worldTransform);
+        return temp ? matrix$1 : Object.assign({}, matrix$1);
     },
     drop(t, parent, index, resize) {
         t.setTransform(L.getRelativeWorld(t, parent, true), resize);
@@ -4183,7 +4154,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 +4165,7 @@ const WaitHelper = {
 };
 
 const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
-const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
+const { toOuterOf: toOuterOf$2, getPoints, copy: copy$6 } = BoundsHelper;
 class LeafLayout {
     get strokeBounds() { return this._strokeBounds || this.boxBounds; }
     get renderBounds() { return this._renderBounds || this.boxBounds; }
@@ -4339,7 +4310,7 @@ class LeafLayout {
                 matrix = getRelativeWorld$1(leaf, relative, true);
         }
         const layoutBounds = MatrixHelper.getLayout(matrix);
-        copy$5(layoutBounds, bounds);
+        copy$6(layoutBounds, bounds);
         PointHelper.copy(layoutBounds, point);
         if (unscale) {
             const { scaleX, scaleY } = layoutBounds;
@@ -4733,10 +4704,16 @@ LeaferEvent.STOP = 'leafer.stop';
 LeaferEvent.RESTART = 'leafer.restart';
 LeaferEvent.END = 'leafer.end';
 
+const { isFinite } = Number;
+const debug$8 = 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$8.warn(this.innerName, name, newValue);
+                newValue = undefined;
+            }
             if (typeof newValue === 'object' || oldValue !== newValue) {
                 this.__[name] = newValue;
                 if (this.__proxyData)
@@ -4751,12 +4728,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 +4776,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$5 } = BoundsHelper;
 const { toBounds: toBounds$2 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
@@ -4912,7 +4894,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$5(renderBounds, strokeBounds);
     },
 };
 
@@ -5098,7 +5081,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 +5265,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) { }
@@ -5638,7 +5613,7 @@ class LeafLevelList {
     }
 }
 
-const debug$6 = Debug.get('LeaferCanvas');
+const debug$7 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
     init() {
         const { view } = this.config;
@@ -5691,7 +5666,7 @@ class LeaferCanvas extends LeaferCanvasBase {
             }
         }
         else {
-            debug$6.error(`no id: ${inputView}`);
+            debug$7.error(`no id: ${inputView}`);
             this.__createView();
         }
     }
@@ -5797,9 +5772,13 @@ function useCanvas(_canvasType, _power) {
         canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
         canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
+            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            return Platform.origin.download(url, filename);
+        },
+        download(url, filename) {
             return new Promise((resolve) => {
                 let el = document.createElement('a');
-                el.href = canvas.toDataURL(mineType(fileType(filename)), quality);
+                el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
                 el.click();
@@ -6036,7 +6015,7 @@ class LayoutBlockData {
 }
 
 const { updateAllMatrix, updateAllChange } = LeafHelper;
-const debug$5 = Debug.get('Layouter');
+const debug$6 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
@@ -6071,7 +6050,7 @@ class Layouter {
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
         }
         catch (e) {
-            debug$5.error(e);
+            debug$6.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -6085,9 +6064,9 @@ class Layouter {
     }
     layoutOnce() {
         if (this.layouting)
-            return debug$5.warn('layouting');
+            return debug$6.warn('layouting');
         if (this.times > 3)
-            return debug$5.warn('layout max times');
+            return debug$6.warn('layout max times');
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -6191,7 +6170,7 @@ class Layouter {
     }
 }
 
-const debug$4 = Debug.get('Renderer');
+const debug$5 = Debug.get('Renderer');
 class Renderer {
     get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
     constructor(target, canvas, userConfig) {
@@ -6229,7 +6208,7 @@ class Renderer {
         const { target } = this;
         this.times = 0;
         this.totalBounds = new Bounds();
-        debug$4.log(target.innerName, '--->');
+        debug$5.log(target.innerName, '--->');
         try {
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
@@ -6238,9 +6217,9 @@ class Renderer {
         }
         catch (e) {
             this.rendering = false;
-            debug$4.error(e);
+            debug$5.error(e);
         }
-        debug$4.log('-------------|');
+        debug$5.log('-------------|');
     }
     renderAgain() {
         if (this.rendering) {
@@ -6252,9 +6231,9 @@ class Renderer {
     }
     renderOnce(callback) {
         if (this.rendering)
-            return debug$4.warn('rendering');
+            return debug$5.warn('rendering');
         if (this.times > 3)
-            return debug$4.warn('render max times');
+            return debug$5.warn('render max times');
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -6291,7 +6270,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug$4.warn('PartRender: need update attr');
+            return debug$5.warn('PartRender: need update attr');
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -6391,7 +6370,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$4.tip(leaf.innerName, ': empty');
+                                debug$5.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -6686,51 +6665,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) => {
@@ -6745,12 +6715,13 @@ function zoomLayerType() {
 
 const { parse } = PathConvert;
 const emptyPaint = {};
-const debug$3 = Debug.get('UIData');
+const debug$4 = 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;
@@ -6772,7 +6743,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._width = -value;
             this.__leaf.scaleX *= -1;
-            debug$3.warn('width < 0, instead -scaleX ', this);
+            debug$4.warn('width < 0, instead -scaleX ', this);
         }
         else {
             this._width = value;
@@ -6782,7 +6753,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._height = -value;
             this.__leaf.scaleY *= -1;
-            debug$3.warn('height < 0, instead -scaleY', this);
+            debug$4.warn('height < 0, instead -scaleY', this);
         }
         else {
             this._height = value;
@@ -7069,14 +7040,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);
         }
     }
@@ -7174,10 +7145,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() {
@@ -7279,31 +7247,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()
@@ -7317,6 +7285,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);
@@ -7383,6 +7354,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);
@@ -7502,14 +7476,17 @@ Group = __decorate([
     registerUI()
 ], Group);
 
-const debug$2 = Debug.get('Leafer');
-let Leafer = class Leafer extends Group {
+var Leafer_1;
+const debug$3 = Debug.get('Leafer');
+let Leafer = Leafer_1 = class Leafer extends Group {
+    static get version() { return '1.0.0-rc.20'; }
     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);
@@ -7518,6 +7495,7 @@ let Leafer = class Leafer extends Group {
             start: true,
             hittable: true,
             smooth: true,
+            lazySpeard: 100,
             zoom: {
                 min: 0.01,
                 max: 256
@@ -7538,6 +7516,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)
@@ -7548,19 +7527,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();
@@ -7570,23 +7550,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);
@@ -7631,11 +7605,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) {
@@ -7673,7 +7652,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))
@@ -7740,6 +7719,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);
@@ -7779,14 +7765,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();
     }
@@ -7805,9 +7785,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));
@@ -7832,19 +7813,21 @@ let Leafer = class Leafer extends Group {
                     setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                 }
                 catch (e) {
-                    debug$2.error(e);
+                    debug$3.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);
 
@@ -7877,11 +7860,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() {
@@ -8075,7 +8056,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);
@@ -8085,7 +8066,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);
         }
@@ -8117,6 +8098,9 @@ __decorate([
 __decorate([
     pathType(0)
 ], Line.prototype, "curve", void 0);
+__decorate([
+    pathType(false)
+], Line.prototype, "closed", void 0);
 Line = __decorate([
     registerUI()
 ], Line);
@@ -8128,7 +8112,6 @@ let Polygon = class Polygon extends UI {
     get __tag() { return 'Polygon'; }
     constructor(data) {
         super(data);
-        this.pathClosed = true;
     }
     __updatePath() {
         const path = this.__.path = [];
@@ -8298,6 +8281,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);
@@ -8374,6 +8360,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;
@@ -8511,6 +8499,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');
     }
@@ -8522,7 +8511,7 @@ __decorate([
     penPathType()
 ], Pen.prototype, "path", void 0);
 Pen = __decorate([
-    useModule(PathCreator, ['beginPath', 'path']),
+    useModule(PathCreator, ['set', 'beginPath', 'path']),
     registerUI()
 ], Pen);
 function penPathType() {
@@ -8533,6 +8522,8 @@ function penPathType() {
     };
 }
 
+const version = "1.0.0-rc.20";
+
 let App = class App extends Leafer {
     get __tag() { return 'App'; }
     get isApp() { return true; }
@@ -8624,7 +8615,8 @@ let App = class App extends Leafer {
         if (this.viewReady)
             this.renderer.update();
     }
-    __render(canvas, _options) {
+    __render(canvas, options) {
+        canvas.setWorld(options.matrix || this.__world);
         this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
     }
     __onResize(event) {
@@ -8657,11 +8649,6 @@ App = __decorate([
     registerUI()
 ], App);
 
-function draw(leafer) {
-    const { config } = leafer;
-    config.move.dragOut = false;
-}
-
 const downKeyMap = {};
 const Keyboard = {
     isHoldSpaceKey() {
@@ -8856,21 +8843,16 @@ KeyEvent = __decorate([
     registerUIEvent()
 ], KeyEvent);
 
-function design(leafer) {
+function addInteractionWindow(leafer) {
     if (leafer.isApp)
         return;
     leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => {
-        let { moveX, moveY } = e;
-        if (leafer.config.move.scroll) {
-            if (Math.abs(moveX) > Math.abs(moveY))
-                moveY = 0;
-            else
-                moveX = 0;
-        }
-        leafer.zoomLayer.move(moveX, moveY);
+        const { x, y } = leafer.getValidMove(e.moveX, e.moveY);
+        if (x || y)
+            leafer.zoomLayer.move(x, y);
     }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
         const { zoomLayer } = leafer;
-        const changeScale = leafer.validScale(e.scale);
+        const changeScale = leafer.getValidScale(e.scale);
         if (changeScale !== 1) {
             PointHelper.scaleOf(zoomLayer, e, changeScale);
             zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
@@ -8878,12 +8860,18 @@ function design(leafer) {
     }));
 }
 
-const debug$1 = Debug.get('LeaferTypeCreator');
+function document$1(leafer) {
+    addInteractionWindow(leafer);
+    leafer.config.move.scroll = 'limit';
+    leafer.config.zoom.min = 1;
+}
+
+const debug$2 = Debug.get('LeaferTypeCreator');
 const LeaferTypeCreator = {
     list: {},
     register(name, fn) {
         if (list[name]) {
-            debug$1.repeat(name);
+            debug$2.repeat(name);
         }
         else {
             list[name] = fn;
@@ -8895,17 +8883,56 @@ const LeaferTypeCreator = {
             fn(leafer);
         }
         else {
-            debug$1.error('no', name);
+            debug$2.error('no', name);
         }
     }
 };
 const { list, register } = LeaferTypeCreator;
-register('draw', draw);
-register('design', design);
+register('draw', () => { });
+register('design', addInteractionWindow);
+register('document', document$1);
 
 Leafer.prototype.initType = function (type) {
     LeaferTypeCreator.run(type, this);
 };
+Leafer.prototype.getValidMove = function (moveX, moveY) {
+    const { scroll, disabled } = this.app.config.move;
+    if (scroll) {
+        if (Math.abs(moveX) > Math.abs(moveY))
+            moveY = 0;
+        else
+            moveX = 0;
+        if (scroll === 'limit') {
+            const { x, y, width, height } = new Bounds(this.__world).addPoint(this.zoomLayer);
+            const right = x + width - this.width, bottom = y + height - this.height;
+            if (x >= 0 && right <= 0)
+                moveX = 0;
+            else if (moveX > 0) {
+                if (x + moveX > 0)
+                    moveX = -x;
+            }
+            else if (moveX < 0 && right + moveX < 0)
+                moveX = -right;
+            if (y >= 0 && bottom <= 0)
+                moveY = 0;
+            else if (moveY > 0) {
+                if (y + moveY > 0)
+                    moveY = -y;
+            }
+            else if (moveY < 0 && bottom + moveY < 0)
+                moveY = -bottom;
+        }
+    }
+    return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
+};
+Leafer.prototype.getValidScale = function (changeScale) {
+    const { scaleX } = this.zoomLayer.__, { min, max, disabled } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
+    if (absScale < min)
+        changeScale = min / scaleX;
+    else if (absScale > max)
+        changeScale = max / scaleX;
+    return disabled ? 1 : changeScale;
+};
 
 class Transformer {
     constructor(interaction) {
@@ -9077,7 +9104,7 @@ class Dragger {
             return;
         }
         if (!this.moving && canDrag) {
-            if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey)
+            if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty)
                 interaction.emit(MoveEvent.START, this.dragData);
         }
         if (!this.moving) {
@@ -9126,7 +9153,7 @@ class Dragger {
         const list = this.getList();
         if (list.length && running) {
             const { moveX, moveY } = this.dragData;
-            list.forEach(leaf => leaf.moveWorld(moveX, moveY));
+            list.forEach(leaf => leaf.draggable && leaf.moveWorld(moveX, moveY));
         }
     }
     dragOverOrOut(data) {
@@ -9153,7 +9180,7 @@ class Dragger {
         this.dragEnterPath = path;
     }
     dragEnd(data, speed) {
-        if (!this.dragData)
+        if (!this.dragging && !this.moving)
             return;
         const { moveX, moveY } = this.dragData;
         if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
@@ -9176,12 +9203,16 @@ class Dragger {
         if (throughPath)
             endDragData.throughPath = throughPath;
         endDragData.path = path;
-        if (this.moving)
+        if (this.moving) {
+            this.moving = false;
             interaction.emit(MoveEvent.END, endDragData);
+        }
         if (this.dragging) {
+            const dropList = this.getList();
+            this.dragging = false;
             interaction.emit(DragEvent.END, endDragData);
-            this.swipe(data, endDragData);
-            this.drop(data);
+            this.swipe(data, downData, dragData, endDragData);
+            this.drop(data, dropList, this.dragEnterPath);
         }
         this.autoMoveCancel();
         this.dragReset();
@@ -9193,22 +9224,21 @@ class Dragger {
             this.interaction.target.nextRender(animateWait, null, off);
         this.animateWait = func;
     }
-    swipe(data, endDragData) {
-        const { interaction, downData } = this;
+    swipe(data, downData, dragData, endDragData) {
+        const { interaction } = this;
         if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
-            const swipeData = getSwipeEventData(downData, this.dragData, endDragData);
+            const swipeData = getSwipeEventData(downData, dragData, endDragData);
             this.interaction.emit(swipeData.type, swipeData);
         }
     }
-    drop(data) {
-        const dropData = getDropEventData(data, this.getList(), DragEvent.data);
-        dropData.path = this.dragEnterPath;
+    drop(data, dropList, dragEnterPath) {
+        const dropData = getDropEventData(data, dropList, DragEvent.data);
+        dropData.path = dragEnterPath;
         this.interaction.emit(DropEvent.DROP, dropData);
-        this.interaction.emit(DragEvent.LEAVE, data, this.dragEnterPath);
+        this.interaction.emit(DragEvent.LEAVE, data, dragEnterPath);
     }
     dragReset() {
         DragEvent.list = DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
-        this.dragging = this.moving = false;
     }
     checkDragOut(data) {
         const { interaction } = this;
@@ -9248,7 +9278,7 @@ class Dragger {
     }
 }
 
-const debug = Debug.get('emit');
+const debug$1 = Debug.get('emit');
 function emit$1(type, data, path, excludePath) {
     if (!path && !data.path)
         return;
@@ -9278,7 +9308,7 @@ function emit$1(type, data, path, excludePath) {
         }
     }
     catch (e) {
-        debug.error(e);
+        debug$1.error(e);
     }
 }
 const allowTypes = ['move', 'zoom', 'rotate', 'key'];
@@ -9340,6 +9370,7 @@ const config = {
         tapTime: 120,
         longPressTime: 800,
         transformTime: 500,
+        hover: true,
         dragHover: true,
         dragDistance: 2,
         swipeDistance: 20,
@@ -9351,9 +9382,12 @@ const config = {
 const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1 } = 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 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 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 moveMode() { return this.config.move.drag || (this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey()) || (this.downData && ((this.config.move.holdMiddleKey && PointerButton.middle(this.downData)) || (this.isHoldRightKey && this.dragger.moving))) || this.isDragEmpty; }
+    get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
     get hitRadius() { return this.config.pointer.hitRadius; }
     constructor(target, canvas, selector, userConfig) {
         this.config = config;
@@ -9395,7 +9429,8 @@ class InteractionBase {
             this.waitMenuTap = true;
         }
         this.dragger.setDragData(data);
-        this.updateCursor(data);
+        if (!this.isHoldRightKey)
+            this.updateCursor(data);
     }
     pointerMove(data) {
         if (!data)
@@ -9413,9 +9448,10 @@ class InteractionBase {
         }
     }
     pointerMoveReal(data) {
+        const { dragHover, dragDistance } = this.config.pointer;
         this.emit(PointerEvent.BEFORE_MOVE, data, this.defaultPath);
         if (this.downData) {
-            const canDrag = PointHelper.getDistance(this.downData, data) > this.config.pointer.dragDistance;
+            const canDrag = PointHelper.getDistance(this.downData, data) > dragDistance;
             if (canDrag) {
                 if (this.waitTap)
                     this.pointerWaitCancel();
@@ -9427,7 +9463,7 @@ class InteractionBase {
             this.updateHoverData(data);
             this.checkPath(data);
             this.emit(PointerEvent.MOVE, data);
-            if (!(this.dragging && !this.config.pointer.dragHover))
+            if (!(this.dragging && !dragHover))
                 this.pointerHover(data);
             if (this.dragger.dragging) {
                 this.dragger.dragOverOrOut(data);
@@ -9443,20 +9479,25 @@ class InteractionBase {
         if (!downData)
             return;
         PointerButton.defaultLeft(data);
-        this.downData = null;
         this.findPath(data);
+        const upData = Object.assign(Object.assign({}, data), { path: data.path.clone() });
         data.path.addList(downData.path.list);
         this.checkPath(data);
+        this.downData = null;
         this.emit(PointerEvent.BEFORE_UP, data);
         this.emit(PointerEvent.UP, data);
         this.touchLeave(data);
-        this.tap(data);
-        this.menuTap(data);
+        if (!data.isCancel) {
+            this.tap(data);
+            this.menuTap(data);
+        }
         this.dragger.dragEnd(data);
-        this.updateCursor(data);
+        this.updateCursor(upData);
     }
     pointerCancel() {
-        this.pointerUp(this.dragger.dragData);
+        const data = Object.assign({}, this.dragger.dragData);
+        data.isCancel = true;
+        this.pointerUp(data);
     }
     multiTouch(data, list) {
         const { move, angle, scale, center } = MultiTouchHelper.getData(list);
@@ -9506,8 +9547,10 @@ class InteractionBase {
             this.updateCursor();
     }
     pointerHover(data) {
-        this.pointerOverOrOut(data);
-        this.pointerEnterOrLeave(data);
+        if (this.config.pointer.hover) {
+            this.pointerOverOrOut(data);
+            this.pointerEnterOrLeave(data);
+        }
     }
     pointerOverOrOut(data) {
         const { path } = data;
@@ -9588,6 +9631,12 @@ class InteractionBase {
     isRootPath(data) {
         return data && data.path.list[0].isLeafer;
     }
+    isTreePath(data) {
+        const app = this.target.app;
+        if (!app || !app.isApp)
+            return false;
+        return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree));
+    }
     checkPath(data, useDefaultPath) {
         if (useDefaultPath || this.canMove(data))
             data.path = this.defaultPath;
@@ -9634,7 +9683,7 @@ class InteractionBase {
         this.hoverData = data;
     }
     updateCursor(data) {
-        if (this.config.cursor.stop)
+        if (this.config.cursor.stop || !this.config.pointer.hover)
             return;
         if (!data) {
             this.updateHoverData();
@@ -9744,22 +9793,25 @@ Cursor.custom = {};
 class HitCanvasManager extends CanvasManager {
     constructor() {
         super(...arguments);
-        this.pathTypeList = new LeafList();
-        this.imageTypeList = new LeafList();
+        this.maxTotal = 1000;
+        this.pathList = new LeafList();
+        this.pixelList = new LeafList();
     }
-    getImageType(leaf, size) {
-        this.imageTypeList.add(leaf);
-        return Creator.hitCanvas(size);
+    getPixelType(leaf, config) {
+        this.__autoClear();
+        this.pixelList.add(leaf);
+        return Creator.hitCanvas(config);
     }
     getPathType(leaf) {
-        this.pathTypeList.add(leaf);
+        this.__autoClear();
+        this.pathList.add(leaf);
         return Creator.hitCanvas();
     }
     clearImageType() {
-        this.__clearLeafList(this.imageTypeList);
+        this.__clearLeafList(this.pixelList);
     }
     clearPathType() {
-        this.__clearLeafList(this.pathTypeList);
+        this.__clearLeafList(this.pathList);
     }
     __clearLeafList(leafList) {
         if (leafList.length) {
@@ -9772,56 +9824,117 @@ class HitCanvasManager extends CanvasManager {
             leafList.reset();
         }
     }
+    __autoClear() {
+        if (this.pathList.length + this.pixelList.length > this.maxTotal)
+            this.clear();
+    }
     clear() {
         this.clearPathType();
         this.clearImageType();
     }
 }
 
+const canvas$1 = LeaferCanvasBase.prototype;
+canvas$1.hitFill = function (point, fillRule) {
+    return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
+};
+canvas$1.hitStroke = function (point, strokeWidth) {
+    this.strokeWidth = strokeWidth;
+    return this.context.isPointInStroke(point.x, point.y);
+};
+canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
+    let { x, y, radiusX, radiusY } = radiusPoint;
+    if (offset)
+        x -= offset.x, y -= offset.y;
+    tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+    const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
+    for (let i = 0, len = data.length; i < len; i += 4) {
+        if (data[i + 3] > 0)
+            return true;
+    }
+    return data[3] > 0;
+};
+
 const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
 const inner = {};
-Leaf.prototype.__hitWorld = function (point) {
-    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
-        this.__updateHitCanvas();
-        if (!this.__layout.boundsChanged)
-            this.__layout.hitCanvasChanged = false;
-    }
+const leaf = Leaf.prototype;
+leaf.__hitWorld = function (point) {
     if (this.__.hitRadius) {
         copy$2(inner, point), point = inner;
         setRadius(point, this.__.hitRadius);
     }
     toInnerRadiusPointOf(point, this.__world, inner);
-    if (this.__.hitBox) {
+    const { width, height } = this.__world;
+    const isSmall = width < 10 && height < 10;
+    if (this.__.hitBox || isSmall) {
         if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner))
             return true;
+        if (isSmall)
+            return false;
+    }
+    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
+        this.__updateHitCanvas();
+        if (!this.__layout.boundsChanged)
+            this.__layout.hitCanvasChanged = false;
     }
     return this.__hit(inner);
 };
-
-UI.prototype.__updateHitCanvas = function () {
+leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
+leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
+leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+leaf.__drawHitPath = function (canvas) { if (canvas)
+    this.__drawRenderPath(canvas); };
+
+const matrix = new Matrix();
+const ui$1 = UI.prototype;
+ui$1.__updateHitCanvas = function () {
+    const data = this.__, { hitCanvasManager } = this.leafer;
+    const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel';
+    const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
+    const isHitPixel = isHitPixelFill || isHitPixelStroke;
     if (!this.__hitCanvas)
-        this.__hitCanvas = this.leafer.hitCanvasManager.getPathType(this);
+        this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this);
     const h = this.__hitCanvas;
+    if (isHitPixel) {
+        const { renderBounds } = this.__layout;
+        const size = Platform.image.hitCanvasSize;
+        const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds, 0.5).a;
+        const { x, y, width, height } = tempBounds$1.set(renderBounds).scale(scale);
+        h.resize({ width, height, pixelRatio: 1 });
+        h.clear();
+        ImageManager.patternLocked = true;
+        this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+        ImageManager.patternLocked = false;
+        h.resetTransform();
+        data.__isHitPixel = true;
+    }
+    else {
+        data.__isHitPixel && (data.__isHitPixel = false);
+    }
     this.__drawHitPath(h);
-    h.setStrokeOptions(this.__);
+    h.setStrokeOptions(data);
 };
-UI.prototype.__hit = function (inner) {
+ui$1.__hit = function (inner) {
     if (Platform.name === 'miniapp')
         this.__drawHitPath(this.__hitCanvas);
-    const { fill, hitFill, windingRule } = this.__;
-    const needHitFill = (fill && hitFill === 'path') || hitFill === 'all';
-    const isHitFill = this.__hitFill(inner, windingRule);
-    if (needHitFill && isHitFill)
+    const data = this.__;
+    if (data.__isHitPixel && this.__hitPixel(inner))
+        return true;
+    const { hitFill } = data;
+    const needHitFillPath = ((data.fill && hitFill == 'path') || hitFill === 'all');
+    if (needHitFillPath && this.__hitFill(inner))
         return true;
-    const { stroke, hitStroke, __strokeWidth, strokeAlign } = this.__;
-    const needHitStroke = (stroke && hitStroke === 'path') || hitStroke === 'all';
+    const { hitStroke, __strokeWidth } = data;
+    const needHitStrokePath = ((data.stroke && hitStroke == 'path') || hitStroke === 'all');
+    if (!needHitFillPath && !needHitStrokePath)
+        return false;
     const radiusWidth = inner.radiusX * 2;
     let hitWidth = radiusWidth;
-    if (needHitStroke) {
-        switch (strokeAlign) {
+    if (needHitStrokePath) {
+        switch (data.strokeAlign) {
             case 'inside':
                 hitWidth += __strokeWidth * 2;
-                if (!needHitFill && (isHitFill && this.__hitStroke(inner, hitWidth)))
+                if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
                     return true;
                 hitWidth = radiusWidth;
                 break;
@@ -9830,8 +9943,8 @@ UI.prototype.__hit = function (inner) {
                 break;
             case 'outside':
                 hitWidth += __strokeWidth * 2;
-                if (!needHitFill) {
-                    if (!isHitFill && this.__hitStroke(inner, hitWidth))
+                if (!needHitFillPath) {
+                    if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
                         return true;
                     hitWidth = radiusWidth;
                 }
@@ -9846,8 +9959,8 @@ Rect.prototype.__updateHitCanvas = function () {
     if (this.stroke || this.cornerRadius)
         ui.__updateHitCanvas.call(this);
 };
-Rect.prototype.__hitFill = function (inner, windingRule) {
-    return this.__hitCanvas ? ui.__hitFill.call(this, inner, windingRule) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+Rect.prototype.__hitFill = function (inner) {
+    return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
 };
 
 UI.prototype.find = function (condition, options) {
@@ -10571,8 +10684,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)
@@ -10656,8 +10772,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;
@@ -10711,7 +10830,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);
@@ -10773,7 +10892,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;
     }
@@ -11678,7 +11797,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;
@@ -11689,10 +11808,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;
@@ -11703,7 +11822,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;
@@ -11712,7 +11831,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;
@@ -11758,6 +11877,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);
@@ -11772,5 +11929,11 @@ Object.assign(Creator, {
     hitCanvasManager: () => new HitCanvasManager()
 });
 useCanvas();
+window.addEventListener('unload', () => {
+    const { list } = Leafer;
+    list.forEach(leafer => leafer.destroy(true));
+    list.destroy();
+    ImageManager.destroy();
+});
 
-export { AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, 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, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, 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 };