@leafer-draw/worker 1.0.0-rc.19 → 1.0.0-rc.20

package/dist/worker.js

@@ -3,6 +3,7 @@ var LeaferUI = (function (exports) {
 
     const Platform = {
         image: {
+            hitCanvasSize: 100,
             maxCacheSize: 2560 * 1600,
             maxPatternSize: 4096 * 2160,
             suffix: 'leaf',
@@ -44,7 +45,7 @@ var LeaferUI = (function (exports) {
         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];
             }
@@ -58,7 +59,7 @@ var LeaferUI = (function (exports) {
             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]];
@@ -119,7 +120,7 @@ var LeaferUI = (function (exports) {
 
     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 });
     }
@@ -160,8 +161,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -179,8 +180,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -201,8 +202,8 @@ var LeaferUI = (function (exports) {
             }
         },
         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);
@@ -449,19 +450,19 @@ var LeaferUI = (function (exports) {
         },
         tempToInnerOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            copy$9(temp, t);
+            copy$a(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            copy$9(temp, t);
+            copy$a(temp, t);
             toOuterPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
             const { tempRadiusPoint: temp } = P$5;
-            copy$9(temp, t);
+            copy$a(temp, t);
             P$5.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
@@ -528,7 +529,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const P$5 = PointHelper;
-    const { getDistanceFrom, copy: copy$9, getAtan2 } = P$5;
+    const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
 
     class Point {
         constructor(x, y) {
@@ -596,6 +597,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
     }
+    const tempPoint$2 = new Point();
 
     class Matrix {
         constructor(a, b, c, d, e, f) {
@@ -605,6 +607,12 @@ var LeaferUI = (function (exports) {
             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 };
@@ -624,6 +632,12 @@ var LeaferUI = (function (exports) {
             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;
@@ -676,6 +690,12 @@ var LeaferUI = (function (exports) {
             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);
         }
@@ -696,6 +716,7 @@ var LeaferUI = (function (exports) {
             MatrixHelper.reset(this);
         }
     }
+    const tempMatrix = new Matrix();
 
     const TwoPointBoundsHelper = {
         tempPointBounds: {},
@@ -784,7 +805,7 @@ var LeaferUI = (function (exports) {
                 to = t;
             }
             else {
-                copy$8(to, t);
+                copy$9(to, t);
             }
             if (parent) {
                 to.offsetX = -(B.maxX(parent) - t.x);
@@ -859,8 +880,8 @@ var LeaferUI = (function (exports) {
             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) {
@@ -894,11 +915,15 @@ var LeaferUI = (function (exports) {
             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;
@@ -923,7 +948,7 @@ var LeaferUI = (function (exports) {
                     if (first) {
                         first = false;
                         if (!addMode)
-                            copy$8(t, bounds);
+                            copy$9(t, bounds);
                     }
                     else {
                         add$1(t, bounds);
@@ -937,6 +962,9 @@ var LeaferUI = (function (exports) {
             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 [
@@ -998,7 +1026,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const B = BoundsHelper;
-    const { add: add$1, copy: copy$8 } = B;
+    const { add: add$1, copy: copy$9 } = B;
 
     class Bounds {
         get minX() { return BoundsHelper.minX(this); }
@@ -1039,8 +1067,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -1086,6 +1114,10 @@ var LeaferUI = (function (exports) {
             BoundsHelper.setPoints(this, points);
             return this;
         }
+        addPoint(point) {
+            BoundsHelper.addPoint(this, point);
+            return this;
+        }
         getPoints() {
             return BoundsHelper.getPoints(this);
         }
@@ -1118,6 +1150,7 @@ var LeaferUI = (function (exports) {
             BoundsHelper.reset(this);
         }
     }
+    const tempBounds$1 = new Bounds();
 
     class AutoBounds {
         constructor(top, right, bottom, left, width, height) {
@@ -1263,7 +1296,7 @@ var LeaferUI = (function (exports) {
     }
     const D$4 = Debug;
 
-    const debug$c = Debug.get('RunTime');
+    const debug$d = Debug.get('RunTime');
     const Run = {
         currentId: 0,
         currentName: '',
@@ -1281,7 +1314,7 @@ var LeaferUI = (function (exports) {
             const time = R.idMap[id], name = R.nameMap[id];
             const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
             R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-            debug$c.log(name, duration, 'ms');
+            debug$d.log(name, duration, 'ms');
         },
         endOfName(name, microsecond) {
             const id = R.nameToIdMap[name];
@@ -1291,13 +1324,13 @@ var LeaferUI = (function (exports) {
     };
     const R = Run;
 
-    const debug$b = Debug.get('UICreator');
+    const debug$c = Debug.get('UICreator');
     const UICreator = {
         list: {},
         register(UI) {
             const { __tag: tag } = UI.prototype;
             if (list$1[tag]) {
-                debug$b.repeat(tag);
+                debug$c.repeat(tag);
             }
             else {
                 list$1[tag] = UI;
@@ -1319,7 +1352,7 @@ var LeaferUI = (function (exports) {
     };
     const { list: list$1 } = UICreator;
 
-    const debug$a = Debug.get('EventCreator');
+    const debug$b = Debug.get('EventCreator');
     const EventCreator = {
         nameList: {},
         register(Event) {
@@ -1327,7 +1360,7 @@ var LeaferUI = (function (exports) {
             Object.keys(Event).forEach(key => {
                 name = Event[key];
                 if (typeof name === 'string')
-                    nameList[name] ? debug$a.repeat(name) : nameList[name] = Event;
+                    nameList[name] ? debug$b.repeat(name) : nameList[name] = Event;
             });
         },
         changeName(oldName, newName) {
@@ -1538,36 +1571,7 @@ var LeaferUI = (function (exports) {
         Answer[Answer["NoAndSkip"] = 2] = "NoAndSkip";
         Answer[Answer["YesAndSkip"] = 3] = "YesAndSkip";
     })(exports.Answer || (exports.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.
@@ -1891,10 +1895,8 @@ var LeaferUI = (function (exports) {
         contextMethod()
     ], Canvas.prototype, "strokeText", null);
 
-    const { copy: copy$7 } = MatrixHelper;
-    const temp = new Bounds();
+    const { copy: copy$8 } = MatrixHelper;
     const minSize = { width: 1, height: 1, pixelRatio: 1 };
-    const debug$9 = Debug.get('LeaferCanvasBase');
     const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
     class LeaferCanvasBase extends Canvas {
         get width() { return this.size.width; }
@@ -1921,44 +1923,15 @@ var LeaferUI = (function (exports) {
         }
         init() { }
         __createContext() {
-            this.context = this.view.getContext('2d');
+            const { view } = this;
+            const { contextSettings } = this.config;
+            this.context = contextSettings ? view.getContext('2d', contextSettings) : view.getContext('2d');
             this.__bindContext();
         }
-        export(filename, options) {
-            const { quality, blob } = FileHelper.getExportOptions(options);
-            if (filename.includes('.')) {
-                return this.saveAs(filename, quality);
-            }
-            else if (blob) {
-                return this.toBlob(filename, quality);
-            }
-            else {
-                return this.toDataURL(filename, quality);
-            }
-        }
-        toBlob(type, quality) {
-            return new Promise((resolve) => {
-                Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
-                    resolve(blob);
-                }).catch((e) => {
-                    debug$9.error(e);
-                    resolve(null);
-                });
-            });
-        }
-        toDataURL(type, quality) {
-            return Platform.origin.canvasToDataURL(this.view, type, quality);
-        }
-        saveAs(filename, quality) {
-            return new Promise((resolve) => {
-                Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
-                    resolve(true);
-                }).catch((e) => {
-                    debug$9.error(e);
-                    resolve(false);
-                });
-            });
-        }
+        export(_filename, _options) { return undefined; }
+        toBlob(_type, _quality) { return undefined; }
+        toDataURL(_type, _quality) { return undefined; }
+        saveAs(_filename, _quality) { return undefined; }
         resize(size) {
             if (this.isSameSize(size))
                 return;
@@ -2026,13 +1999,9 @@ var LeaferUI = (function (exports) {
         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;
@@ -2091,8 +2060,8 @@ var LeaferUI = (function (exports) {
             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';
         }
@@ -2100,23 +2069,23 @@ var LeaferUI = (function (exports) {
             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() {
@@ -2130,7 +2099,7 @@ var LeaferUI = (function (exports) {
             const canvas = this.manager ? this.manager.get(this.size) : Creator.canvas(Object.assign({}, this.size));
             canvas.save();
             if (useSameWorldTransform)
-                copy$7(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+                copy$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
             if (useSameSmooth)
                 canvas.smooth = this.smooth;
             return canvas;
@@ -2500,10 +2469,10 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$3, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
+    const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
     const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
     const { ellipticalArc } = EllipseHelper;
-    const debug$8 = Debug.get('PathConvert');
+    const debug$a = Debug.get('PathConvert');
     const setEndPoint$1 = {};
     const PathConvert = {
         current: { dot: 0 },
@@ -2715,7 +2684,7 @@ var LeaferUI = (function (exports) {
                         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];
@@ -2740,7 +2709,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$8.error(`command: ${command} [index:${i}]`, old);
+                        debug$a.error(`command: ${command} [index:${i}]`, old);
                         return data;
                 }
                 lastCommand = command;
@@ -2764,7 +2733,7 @@ var LeaferUI = (function (exports) {
     };
     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 = {};
@@ -2806,7 +2775,7 @@ var LeaferUI = (function (exports) {
         },
         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)
@@ -2856,6 +2825,7 @@ var LeaferUI = (function (exports) {
         set path(value) { this.__path = value; }
         get path() { return this.__path; }
         constructor(path) {
+            this.clearPath = this.beginPath;
             this.set(path);
         }
         set(path) {
@@ -2925,8 +2895,8 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$1, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
-    const debug$7 = Debug.get('PathDrawer');
+    const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
+    const debug$9 = Debug.get('PathDrawer');
     const PathDrawer = {
         drawPathByData(drawer, data) {
             if (!data)
@@ -2972,7 +2942,7 @@ var LeaferUI = (function (exports) {
                         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;
@@ -2989,17 +2959,17 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$7.error(`command: ${command} [index:${i}]`, data);
+                        debug$9.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
         }
     };
 
-    const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F, O, P, U } = PathCommandMap;
+    const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F: F$1, O, P, U } = PathCommandMap;
     const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
-    const { addPointBounds, copy: copy$6, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-    const debug$6 = Debug.get('PathBounds');
+    const { addPointBounds, copy: copy$7, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
+    const debug$8 = Debug.get('PathBounds');
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
     const setPointBounds = {};
@@ -3071,12 +3041,12 @@ var LeaferUI = (function (exports) {
                         break;
                     case G:
                         ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 9;
                         break;
-                    case F:
+                    case F$1:
                         x = data[i + 1];
                         y = data[i + 2];
                         radiusX = data[i + 3];
@@ -3087,7 +3057,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case O:
                         arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 7;
@@ -3102,13 +3072,13 @@ var LeaferUI = (function (exports) {
                         break;
                     case U:
                         arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$6(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 6;
                         break;
                     default:
-                        debug$6.error(`command: ${command} [index:${i}]`, data);
+                        debug$8.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3194,7 +3164,37 @@ var LeaferUI = (function (exports) {
         roundRect(drawer);
     }
 
-    const debug$5 = Debug.get('TaskProcessor');
+    const FileHelper = {
+        opacityTypes: ['png', 'webp', 'svg'],
+        upperCaseTypeMap: {},
+        mineType(type) {
+            if (!type || type.startsWith('image'))
+                return type;
+            if (type === 'jpg')
+                type = 'jpeg';
+            return 'image/' + type;
+        },
+        fileType(filename) {
+            const l = filename.split('.');
+            return l[l.length - 1];
+        },
+        isOpaqueImage(filename) {
+            const type = F.fileType(filename);
+            return ['jpg', 'jpeg'].some(item => item === type);
+        },
+        getExportOptions(options) {
+            switch (typeof options) {
+                case 'object': return options;
+                case 'number': return { quality: options };
+                case 'boolean': return { blob: options };
+                default: return {};
+            }
+        }
+    };
+    const F = FileHelper;
+    F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
+
+    const debug$7 = Debug.get('TaskProcessor');
     class TaskItem {
         constructor(task) {
             this.parallel = true;
@@ -3209,7 +3209,7 @@ var LeaferUI = (function (exports) {
                         yield this.task();
                 }
                 catch (error) {
-                    debug$5.error(error);
+                    debug$7.error(error);
                 }
             });
         }
@@ -3493,6 +3493,7 @@ var LeaferUI = (function (exports) {
         },
         destroy() {
             I.map = {};
+            I.recycledList = [];
         }
     };
     const I = ImageManager;
@@ -3607,84 +3608,75 @@ var LeaferUI = (function (exports) {
         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();
@@ -3692,27 +3684,22 @@ var LeaferUI = (function (exports) {
             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();
@@ -3721,91 +3708,75 @@ var LeaferUI = (function (exports) {
     }
     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) => {
@@ -3868,7 +3839,7 @@ var LeaferUI = (function (exports) {
         Object.defineProperty(data, key, property);
     }
 
-    const debug$4 = new Debug('rewrite');
+    const debug$6 = new Debug('rewrite');
     const list = [];
     const excludeNames = ['destroy', 'constructor'];
     function rewrite(method) {
@@ -3885,7 +3856,7 @@ var LeaferUI = (function (exports) {
         if (list.length) {
             list.forEach(item => {
                 if (error)
-                    debug$4.error(item.name, '需在Class上装饰@rewriteAble()');
+                    debug$6.error(item.name, '需在Class上装饰@rewriteAble()');
                 item.run();
             });
             list.length = 0;
@@ -3921,7 +3892,7 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+    const { copy: copy$6, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
     const matrix = {};
     const LeafHelper = {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4000,7 +3971,7 @@ var LeaferUI = (function (exports) {
             L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
         },
         zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
-            copy$5(matrix, t.__localMatrix);
+            copy$6(matrix, t.__localMatrix);
             scaleOfOuter$3(matrix, origin, scaleX, scaleY);
             moveByMatrix(t, matrix);
             t.scaleResize(scaleX, scaleY, resize !== true);
@@ -4009,7 +3980,7 @@ var LeaferUI = (function (exports) {
             L.rotateOfLocal(t, getTempLocal(t, origin), angle);
         },
         rotateOfLocal(t, origin, angle) {
-            copy$5(matrix, t.__localMatrix);
+            copy$6(matrix, t.__localMatrix);
             rotateOfOuter$3(matrix, origin, angle);
             moveByMatrix(t, matrix);
             t.rotation = MathHelper.formatRotation(t.rotation + angle);
@@ -4018,19 +3989,19 @@ var LeaferUI = (function (exports) {
             L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
         },
         skewOfLocal(t, origin, skewX, skewY = 0, resize) {
-            copy$5(matrix, t.__localMatrix);
+            copy$6(matrix, t.__localMatrix);
             skewOfOuter(matrix, origin, skewX, skewY);
             L.setTransform(t, matrix, resize);
         },
         transformWorld(t, transform, resize) {
-            copy$5(matrix, t.worldTransform);
+            copy$6(matrix, t.worldTransform);
             multiplyParent$2(matrix, transform);
             if (t.parent)
                 divideParent(matrix, t.parent.worldTransform);
             L.setTransform(t, matrix, resize);
         },
         transform(t, transform, resize) {
-            copy$5(matrix, t.localTransform);
+            copy$6(matrix, t.localTransform);
             multiplyParent$2(matrix, transform);
             L.setTransform(t, matrix, resize);
         },
@@ -4044,7 +4015,7 @@ var LeaferUI = (function (exports) {
             t.set(layout);
         },
         getRelativeWorld(t, relative, temp) {
-            copy$5(matrix, t.worldTransform);
+            copy$6(matrix, t.worldTransform);
             divideParent(matrix, relative.worldTransform);
             return temp ? matrix : Object.assign({}, matrix);
         },
@@ -4186,7 +4157,7 @@ var LeaferUI = (function (exports) {
 
     const WaitHelper = {
         run(wait) {
-            if (wait.length) {
+            if (wait && wait.length) {
                 const len = wait.length;
                 for (let i = 0; i < len; i++) {
                     wait[i]();
@@ -4197,7 +4168,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
-    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$4 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
     class LeafLayout {
         get strokeBounds() { return this._strokeBounds || this.boxBounds; }
         get renderBounds() { return this._renderBounds || this.boxBounds; }
@@ -4342,7 +4313,7 @@ var LeaferUI = (function (exports) {
                     matrix = getRelativeWorld$1(leaf, relative, true);
             }
             const layoutBounds = MatrixHelper.getLayout(matrix);
-            copy$4(layoutBounds, bounds);
+            copy$5(layoutBounds, bounds);
             PointHelper.copy(layoutBounds, point);
             if (unscale) {
                 const { scaleX, scaleY } = layoutBounds;
@@ -4736,10 +4707,16 @@ var LeaferUI = (function (exports) {
     LeaferEvent.RESTART = 'leafer.restart';
     LeaferEvent.END = 'leafer.end';
 
+    const { isFinite } = Number;
+    const debug$5 = Debug.get('setAttr');
     const LeafDataProxy = {
-        __setAttr(name, newValue) {
+        __setAttr(name, newValue, checkFiniteNumber) {
             if (this.leafer && this.leafer.created) {
                 const oldValue = this.__.__getInput(name);
+                if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
+                    debug$5.warn(this.innerName, name, newValue);
+                    newValue = undefined;
+                }
                 if (typeof newValue === 'object' || oldValue !== newValue) {
                     this.__[name] = newValue;
                     if (this.__proxyData)
@@ -4754,12 +4731,17 @@ var LeaferUI = (function (exports) {
                             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) {
@@ -4797,7 +4779,7 @@ var LeaferUI = (function (exports) {
 
     const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2, hasParentAutoLayout } = LeafHelper;
     const { updateBounds: updateBounds$1 } = BranchHelper;
-    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
     const { toBounds: toBounds$2 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
@@ -4915,7 +4897,8 @@ var LeaferUI = (function (exports) {
             copyAndSpread$1(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread);
         },
         __updateRenderBounds() {
-            copyAndSpread$1(this.__layout.renderBounds, this.__layout.strokeBounds, this.__layout.renderSpread);
+            const { renderSpread, strokeBounds, renderBounds } = this.__layout;
+            renderSpread > 0 ? copyAndSpread$1(renderBounds, strokeBounds, renderSpread) : copy$4(renderBounds, strokeBounds);
         },
     };
 
@@ -5101,7 +5084,7 @@ var LeaferUI = (function (exports) {
         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; }
@@ -5285,24 +5268,16 @@ var LeaferUI = (function (exports) {
         __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) { }
@@ -5684,6 +5659,7 @@ var LeaferUI = (function (exports) {
             },
             canvasToBolb: (canvas, type, quality) => canvas.convertToBlob({ type: mineType(type), quality }),
             canvasSaveAs: (_canvas, _filename, _quality) => new Promise((resolve) => resolve()),
+            download(_url, _filename) { return undefined; },
             loadImage(src) {
                 return new Promise((resolve, reject) => {
                     if (!src.startsWith('data:') && Platform.image.suffix)
@@ -5910,7 +5886,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { updateAllMatrix, updateAllChange } = LeafHelper;
-    const debug$3 = Debug.get('Layouter');
+    const debug$4 = Debug.get('Layouter');
     class Layouter {
         constructor(target, userConfig) {
             this.totalTimes = 0;
@@ -5945,7 +5921,7 @@ var LeaferUI = (function (exports) {
                 target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
             }
             catch (e) {
-                debug$3.error(e);
+                debug$4.error(e);
             }
             this.layoutedBlocks = null;
         }
@@ -5959,9 +5935,9 @@ var LeaferUI = (function (exports) {
         }
         layoutOnce() {
             if (this.layouting)
-                return debug$3.warn('layouting');
+                return debug$4.warn('layouting');
             if (this.times > 3)
-                return debug$3.warn('layout max times');
+                return debug$4.warn('layout max times');
             this.times++;
             this.totalTimes++;
             this.layouting = true;
@@ -6065,7 +6041,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const debug$2 = Debug.get('Renderer');
+    const debug$3 = Debug.get('Renderer');
     class Renderer {
         get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
         constructor(target, canvas, userConfig) {
@@ -6103,7 +6079,7 @@ var LeaferUI = (function (exports) {
             const { target } = this;
             this.times = 0;
             this.totalBounds = new Bounds();
-            debug$2.log(target.innerName, '--->');
+            debug$3.log(target.innerName, '--->');
             try {
                 this.emitRender(RenderEvent.START);
                 this.renderOnce(callback);
@@ -6112,9 +6088,9 @@ var LeaferUI = (function (exports) {
             }
             catch (e) {
                 this.rendering = false;
-                debug$2.error(e);
+                debug$3.error(e);
             }
-            debug$2.log('-------------|');
+            debug$3.log('-------------|');
         }
         renderAgain() {
             if (this.rendering) {
@@ -6126,9 +6102,9 @@ var LeaferUI = (function (exports) {
         }
         renderOnce(callback) {
             if (this.rendering)
-                return debug$2.warn('rendering');
+                return debug$3.warn('rendering');
             if (this.times > 3)
-                return debug$2.warn('render max times');
+                return debug$3.warn('render max times');
             this.times++;
             this.totalTimes++;
             this.rendering = true;
@@ -6165,7 +6141,7 @@ var LeaferUI = (function (exports) {
         partRender() {
             const { canvas, updateBlocks: list } = this;
             if (!list)
-                return debug$2.warn('PartRender: need update attr');
+                return debug$3.warn('PartRender: need update attr');
             this.mergeBlocks();
             list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
                 this.clipRender(block); });
@@ -6265,7 +6241,7 @@ var LeaferUI = (function (exports) {
                             empty = (!leaf.__world.width || !leaf.__world.height);
                             if (empty) {
                                 if (!leaf.isLeafer)
-                                    debug$2.tip(leaf.innerName, ': empty');
+                                    debug$3.tip(leaf.innerName, ': empty');
                                 empty = (!leaf.isBranch || leaf.isBranchLeaf);
                             }
                             return empty;
@@ -6317,51 +6293,42 @@ var LeaferUI = (function (exports) {
     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) => {
@@ -6376,12 +6343,13 @@ var LeaferUI = (function (exports) {
 
     const { parse } = PathConvert;
     const emptyPaint = {};
-    const debug$1 = Debug.get('UIData');
+    const debug$2 = Debug.get('UIData');
     class UIData extends LeafData {
         get __strokeWidth() {
             const { strokeWidth, strokeWidthFixed } = this;
             if (strokeWidthFixed) {
-                let { scaleX } = this.__leaf.__nowWorld;
+                const ui = this.__leaf;
+                let { scaleX } = ui.__nowWorld || ui.__world;
                 if (scaleX < 0)
                     scaleX = -scaleX;
                 return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
@@ -6403,7 +6371,7 @@ var LeaferUI = (function (exports) {
             if (value < 0) {
                 this._width = -value;
                 this.__leaf.scaleX *= -1;
-                debug$1.warn('width < 0, instead -scaleX ', this);
+                debug$2.warn('width < 0, instead -scaleX ', this);
             }
             else {
                 this._width = value;
@@ -6413,7 +6381,7 @@ var LeaferUI = (function (exports) {
             if (value < 0) {
                 this._height = -value;
                 this.__leaf.scaleY *= -1;
-                debug$1.warn('height < 0, instead -scaleY', this);
+                debug$2.warn('height < 0, instead -scaleY', this);
             }
             else {
                 this._height = value;
@@ -6700,14 +6668,14 @@ var LeaferUI = (function (exports) {
                 }
             }
         },
-        __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);
             }
         }
@@ -6805,10 +6773,7 @@ var LeaferUI = (function (exports) {
         __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() {
@@ -6910,31 +6875,31 @@ var LeaferUI = (function (exports) {
         eraserType(false)
     ], exports.UI.prototype, "eraser", void 0);
     __decorate([
-        positionType(0)
+        positionType(0, true)
     ], exports.UI.prototype, "x", void 0);
     __decorate([
-        positionType(0)
+        positionType(0, true)
     ], exports.UI.prototype, "y", void 0);
     __decorate([
-        boundsType(100)
+        boundsType(100, true)
     ], exports.UI.prototype, "width", void 0);
     __decorate([
-        boundsType(100)
+        boundsType(100, true)
     ], exports.UI.prototype, "height", void 0);
     __decorate([
-        scaleType(1)
+        scaleType(1, true)
     ], exports.UI.prototype, "scaleX", void 0);
     __decorate([
-        scaleType(1)
+        scaleType(1, true)
     ], exports.UI.prototype, "scaleY", void 0);
     __decorate([
-        rotationType(0)
+        rotationType(0, true)
     ], exports.UI.prototype, "rotation", void 0);
     __decorate([
-        rotationType(0)
+        rotationType(0, true)
     ], exports.UI.prototype, "skewX", void 0);
     __decorate([
-        rotationType(0)
+        rotationType(0, true)
     ], exports.UI.prototype, "skewY", void 0);
     __decorate([
         autoLayoutType()
@@ -6948,6 +6913,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType('size')
     ], exports.UI.prototype, "editSize", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "editorStyle", void 0);
     __decorate([
         hitType(true)
     ], exports.UI.prototype, "hittable", void 0);
@@ -7014,6 +6982,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         pathType()
     ], exports.UI.prototype, "windingRule", void 0);
+    __decorate([
+        pathType(true)
+    ], exports.UI.prototype, "closed", void 0);
     __decorate([
         arrowType('none')
     ], exports.UI.prototype, "startArrow", void 0);
@@ -7133,14 +7104,17 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Group);
 
-    const debug = Debug.get('Leafer');
-    exports.Leafer = class Leafer extends exports.Group {
+    var Leafer_1;
+    const debug$1 = Debug.get('Leafer');
+    exports.Leafer = Leafer_1 = class Leafer extends exports.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);
@@ -7149,6 +7123,7 @@ var LeaferUI = (function (exports) {
                 start: true,
                 hittable: true,
                 smooth: true,
+                lazySpeard: 100,
                 zoom: {
                     min: 0.01,
                     max: 256
@@ -7169,6 +7144,7 @@ var LeaferUI = (function (exports) {
             this.userConfig = userConfig;
             if (userConfig && (userConfig.view || userConfig.width))
                 this.init(userConfig);
+            Leafer_1.list.add(this);
         }
         init(userConfig, parentApp) {
             if (this.canvas)
@@ -7179,19 +7155,20 @@ var LeaferUI = (function (exports) {
             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();
@@ -7201,23 +7178,17 @@ var LeaferUI = (function (exports) {
             }
             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);
@@ -7262,11 +7233,16 @@ var LeaferUI = (function (exports) {
             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) {
@@ -7304,7 +7280,7 @@ var LeaferUI = (function (exports) {
                     this.canvas.hittable = newValue;
                 }
             }
-            super.__setAttr(attrName, newValue);
+            return super.__setAttr(attrName, newValue);
         }
         __getAttr(attrName) {
             if (this.canvas && canvasSizeAttrs.includes(attrName))
@@ -7371,6 +7347,13 @@ var LeaferUI = (function (exports) {
                 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);
@@ -7410,14 +7393,8 @@ var LeaferUI = (function (exports) {
             }
         }
         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();
         }
@@ -7436,9 +7413,10 @@ var LeaferUI = (function (exports) {
             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));
@@ -7463,19 +7441,21 @@ var LeaferUI = (function (exports) {
                         setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                     }
                     catch (e) {
-                        debug.error(e);
+                        debug$1.error(e);
                     }
                 }
-            });
+            };
+            sync ? doDestory() : setTimeout(doDestory);
         }
     };
+    exports.Leafer.list = new LeafList();
     __decorate([
         dataProcessor(LeaferData)
     ], exports.Leafer.prototype, "__", void 0);
     __decorate([
         boundsType()
     ], exports.Leafer.prototype, "pixelRatio", void 0);
-    exports.Leafer = __decorate([
+    exports.Leafer = Leafer_1 = __decorate([
         registerUI()
     ], exports.Leafer);
 
@@ -7508,11 +7488,9 @@ var LeaferUI = (function (exports) {
         __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() {
@@ -7706,7 +7684,7 @@ var LeaferUI = (function (exports) {
         __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);
@@ -7716,7 +7694,7 @@ var LeaferUI = (function (exports) {
         __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);
             }
@@ -7748,6 +7726,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         pathType(0)
     ], exports.Line.prototype, "curve", void 0);
+    __decorate([
+        pathType(false)
+    ], exports.Line.prototype, "closed", void 0);
     exports.Line = __decorate([
         registerUI()
     ], exports.Line);
@@ -7759,7 +7740,6 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Polygon'; }
         constructor(data) {
             super(data);
-            this.pathClosed = true;
         }
         __updatePath() {
             const path = this.__.path = [];
@@ -7929,6 +7909,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         resizeType(true)
     ], exports.Canvas.prototype, "smooth", void 0);
+    __decorate([
+        resizeType()
+    ], exports.Canvas.prototype, "contextSettings", void 0);
     __decorate([
         hitType('all')
     ], exports.Canvas.prototype, "hitFill", void 0);
@@ -8005,6 +7988,8 @@ var LeaferUI = (function (exports) {
             else {
                 super.__updateBoxBounds();
             }
+            if (italic)
+                b.width += fontSize * 0.16;
             const contentBounds = includes(b, bounds) ? b : bounds;
             if (contentBounds !== layout.contentBounds) {
                 layout.contentBounds = contentBounds;
@@ -8142,6 +8127,7 @@ var LeaferUI = (function (exports) {
         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');
         }
@@ -8153,7 +8139,7 @@ var LeaferUI = (function (exports) {
         penPathType()
     ], exports.Pen.prototype, "path", void 0);
     exports.Pen = __decorate([
-        useModule(PathCreator, ['beginPath', 'path']),
+        useModule(PathCreator, ['set', 'beginPath', 'path']),
         registerUI()
     ], exports.Pen);
     function penPathType() {
@@ -8164,6 +8150,8 @@ var LeaferUI = (function (exports) {
         };
     }
 
+    const version = "1.0.0-rc.20";
+
     function fillText(ui, canvas) {
         let row;
         const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
@@ -8525,8 +8513,11 @@ var LeaferUI = (function (exports) {
     }
 
     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)
@@ -8610,8 +8601,11 @@ var LeaferUI = (function (exports) {
             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;
@@ -8665,7 +8659,7 @@ var LeaferUI = (function (exports) {
     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);
@@ -8727,7 +8721,7 @@ var LeaferUI = (function (exports) {
 
     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;
         }
@@ -9632,7 +9626,7 @@ var LeaferUI = (function (exports) {
                         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;
@@ -9643,10 +9637,10 @@ var LeaferUI = (function (exports) {
                             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;
@@ -9657,7 +9651,7 @@ var LeaferUI = (function (exports) {
                                 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;
@@ -9666,7 +9660,7 @@ var LeaferUI = (function (exports) {
                         }
                         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;
@@ -9712,6 +9706,44 @@ var LeaferUI = (function (exports) {
         });
     }
 
+    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);
@@ -9824,6 +9856,7 @@ var LeaferUI = (function (exports) {
     exports.affectRenderBoundsType = affectRenderBoundsType;
     exports.affectStrokeBoundsType = affectStrokeBoundsType;
     exports.arrowType = arrowType;
+    exports.attr = attr;
     exports.autoLayoutType = autoLayoutType;
     exports.boundsType = boundsType;
     exports.canvasPatch = canvasPatch;
@@ -9831,12 +9864,14 @@ var LeaferUI = (function (exports) {
     exports.cursorType = cursorType;
     exports.dataProcessor = dataProcessor;
     exports.dataType = dataType;
+    exports.decorateLeafAttr = decorateLeafAttr;
     exports.defineDataProcessor = defineDataProcessor;
     exports.defineKey = defineKey;
     exports.defineLeafAttr = defineLeafAttr;
     exports.doBoundsType = doBoundsType;
     exports.doStrokeType = doStrokeType;
     exports.effectType = effectType;
+    exports.emptyData = emptyData;
     exports.eraserType = eraserType;
     exports.getBoundsData = getBoundsData;
     exports.getDescriptor = getDescriptor;
@@ -9862,8 +9897,12 @@ var LeaferUI = (function (exports) {
     exports.stateType = stateType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
+    exports.tempBounds = tempBounds$1;
+    exports.tempMatrix = tempMatrix;
+    exports.tempPoint = tempPoint$2;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;
+    exports.version = version;
     exports.zoomLayerType = zoomLayerType;
 
     return exports;