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

package/dist/web.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$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;
         },
@@ -528,7 +529,7 @@ var LeaferUI = (function (exports) {
         }
     };
     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) {
@@ -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$9(to, t);
+                copy$a(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$9(t, bounds);
+                            copy$a(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$9 } = B;
+    const { add: add$1, copy: copy$a } = 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$f = Debug.get('RunTime');
+    const debug$g = 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$f.log(name, duration, 'ms');
+            debug$g.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$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;
@@ -1319,7 +1352,7 @@ var LeaferUI = (function (exports) {
     };
     const { list: list$2 } = UICreator;
 
-    const debug$d = Debug.get('EventCreator');
+    const debug$e = 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$d.repeat(name) : nameList[name] = Event;
+                    nameList[name] ? debug$e.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$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 {
         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$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;
@@ -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$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+                copy$9(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$b = Debug.get('PathConvert');
+    const debug$d = 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$b.error(`command: ${command} [index:${i}]`, old);
+                        debug$d.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$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)
@@ -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$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 = {};
@@ -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$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];
@@ -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$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$8(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$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;
                 }
             }
@@ -3194,7 +3164,37 @@ var LeaferUI = (function (exports) {
         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;
@@ -3209,7 +3209,7 @@ var LeaferUI = (function (exports) {
                         yield this.task();
                 }
                 catch (error) {
-                    debug$8.error(error);
+                    debug$a.error(error);
                 }
             });
         }
@@ -3493,6 +3493,7 @@ var LeaferUI = (function (exports) {
         },
         destroy() {
             I$1.map = {};
+            I$1.recycledList = [];
         }
     };
     const I$1 = 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$7 = new Debug('rewrite');
+    const debug$9 = new Debug('rewrite');
     const list$1 = [];
     const excludeNames = ['destroy', 'constructor'];
     function rewrite(method) {
@@ -3885,7 +3856,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -3921,8 +3892,8 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    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)
@@ -4000,39 +3971,39 @@ var LeaferUI = (function (exports) {
             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);
@@ -4044,9 +4015,9 @@ var LeaferUI = (function (exports) {
             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);
@@ -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$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; }
@@ -4342,7 +4313,7 @@ var LeaferUI = (function (exports) {
                     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;
@@ -4736,10 +4707,16 @@ var LeaferUI = (function (exports) {
     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)
@@ -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$5 } = 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$5(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) { }
@@ -5641,7 +5616,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const debug$6 = Debug.get('LeaferCanvas');
+    const debug$7 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
         init() {
             const { view } = this.config;
@@ -5694,7 +5669,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             else {
-                debug$6.error(`no id: ${inputView}`);
+                debug$7.error(`no id: ${inputView}`);
                 this.__createView();
             }
         }
@@ -5800,9 +5775,13 @@ var LeaferUI = (function (exports) {
             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();
@@ -6039,7 +6018,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { updateAllMatrix, updateAllChange } = LeafHelper;
-    const debug$5 = Debug.get('Layouter');
+    const debug$6 = Debug.get('Layouter');
     class Layouter {
         constructor(target, userConfig) {
             this.totalTimes = 0;
@@ -6074,7 +6053,7 @@ var LeaferUI = (function (exports) {
                 target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
             }
             catch (e) {
-                debug$5.error(e);
+                debug$6.error(e);
             }
             this.layoutedBlocks = null;
         }
@@ -6088,9 +6067,9 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -6194,7 +6173,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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) {
@@ -6232,7 +6211,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -6241,9 +6220,9 @@ var LeaferUI = (function (exports) {
             }
             catch (e) {
                 this.rendering = false;
-                debug$4.error(e);
+                debug$5.error(e);
             }
-            debug$4.log('-------------|');
+            debug$5.log('-------------|');
         }
         renderAgain() {
             if (this.rendering) {
@@ -6255,9 +6234,9 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -6294,7 +6273,7 @@ var LeaferUI = (function (exports) {
         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); });
@@ -6394,7 +6373,7 @@ var LeaferUI = (function (exports) {
                             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;
@@ -6689,51 +6668,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) => {
@@ -6748,12 +6718,13 @@ var LeaferUI = (function (exports) {
 
     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;
@@ -6775,7 +6746,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -6785,7 +6756,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -7072,14 +7043,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);
             }
         }
@@ -7177,10 +7148,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() {
@@ -7282,31 +7250,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()
@@ -7320,6 +7288,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);
@@ -7386,6 +7357,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);
@@ -7505,14 +7479,17 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Group);
 
-    const debug$2 = Debug.get('Leafer');
-    exports.Leafer = class Leafer extends exports.Group {
+    var Leafer_1;
+    const debug$3 = 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);
@@ -7521,6 +7498,7 @@ var LeaferUI = (function (exports) {
                 start: true,
                 hittable: true,
                 smooth: true,
+                lazySpeard: 100,
                 zoom: {
                     min: 0.01,
                     max: 256
@@ -7541,6 +7519,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)
@@ -7551,19 +7530,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();
@@ -7573,23 +7553,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);
@@ -7634,11 +7608,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) {
@@ -7676,7 +7655,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))
@@ -7743,6 +7722,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);
@@ -7782,14 +7768,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();
         }
@@ -7808,9 +7788,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));
@@ -7835,19 +7816,21 @@ var LeaferUI = (function (exports) {
                         setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                     }
                     catch (e) {
-                        debug$2.error(e);
+                        debug$3.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);
 
@@ -7880,11 +7863,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() {
@@ -8078,7 +8059,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);
@@ -8088,7 +8069,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);
             }
@@ -8120,6 +8101,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);
@@ -8131,7 +8115,6 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Polygon'; }
         constructor(data) {
             super(data);
-            this.pathClosed = true;
         }
         __updatePath() {
             const path = this.__.path = [];
@@ -8301,6 +8284,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);
@@ -8377,6 +8363,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;
@@ -8514,6 +8502,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');
         }
@@ -8525,7 +8514,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() {
@@ -8536,6 +8525,8 @@ var LeaferUI = (function (exports) {
         };
     }
 
+    const version = "1.0.0-rc.20";
+
     exports.App = class App extends exports.Leafer {
         get __tag() { return 'App'; }
         get isApp() { return true; }
@@ -8627,7 +8618,8 @@ var LeaferUI = (function (exports) {
             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) {
@@ -8660,11 +8652,6 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.App);
 
-    function draw(leafer) {
-        const { config } = leafer;
-        config.move.dragOut = false;
-    }
-
     const downKeyMap = {};
     const Keyboard = {
         isHoldSpaceKey() {
@@ -8859,21 +8846,16 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.KeyEvent);
 
-    function design(leafer) {
+    function addInteractionWindow(leafer) {
         if (leafer.isApp)
             return;
         leafer.__eventIds.push(leafer.on_(exports.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_(exports.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;
@@ -8881,12 +8863,18 @@ var LeaferUI = (function (exports) {
         }));
     }
 
-    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;
@@ -8898,17 +8886,56 @@ var LeaferUI = (function (exports) {
                 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);
 
     exports.Leafer.prototype.initType = function (type) {
         LeaferTypeCreator.run(type, this);
     };
+    exports.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 };
+    };
+    exports.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) {
@@ -9080,7 +9107,7 @@ var LeaferUI = (function (exports) {
                 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(exports.MoveEvent.START, this.dragData);
             }
             if (!this.moving) {
@@ -9129,7 +9156,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -9156,7 +9183,7 @@ var LeaferUI = (function (exports) {
             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)) {
@@ -9179,12 +9206,16 @@ var LeaferUI = (function (exports) {
             if (throughPath)
                 endDragData.throughPath = throughPath;
             endDragData.path = path;
-            if (this.moving)
+            if (this.moving) {
+                this.moving = false;
                 interaction.emit(exports.MoveEvent.END, endDragData);
+            }
             if (this.dragging) {
+                const dropList = this.getList();
+                this.dragging = false;
                 interaction.emit(exports.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();
@@ -9196,22 +9227,21 @@ var LeaferUI = (function (exports) {
                 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(), exports.DragEvent.data);
-            dropData.path = this.dragEnterPath;
+        drop(data, dropList, dragEnterPath) {
+            const dropData = getDropEventData(data, dropList, exports.DragEvent.data);
+            dropData.path = dragEnterPath;
             this.interaction.emit(exports.DropEvent.DROP, dropData);
-            this.interaction.emit(exports.DragEvent.LEAVE, data, this.dragEnterPath);
+            this.interaction.emit(exports.DragEvent.LEAVE, data, dragEnterPath);
         }
         dragReset() {
             exports.DragEvent.list = exports.DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
-            this.dragging = this.moving = false;
         }
         checkDragOut(data) {
             const { interaction } = this;
@@ -9251,7 +9281,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const debug = Debug.get('emit');
+    const debug$1 = Debug.get('emit');
     function emit$1(type, data, path, excludePath) {
         if (!path && !data.path)
             return;
@@ -9281,7 +9311,7 @@ var LeaferUI = (function (exports) {
             }
         }
         catch (e) {
-            debug.error(e);
+            debug$1.error(e);
         }
     }
     const allowTypes = ['move', 'zoom', 'rotate', 'key'];
@@ -9343,6 +9373,7 @@ var LeaferUI = (function (exports) {
             tapTime: 120,
             longPressTime: 800,
             transformTime: 500,
+            hover: true,
             dragHover: true,
             dragDistance: 2,
             swipeDistance: 20,
@@ -9354,9 +9385,12 @@ var LeaferUI = (function (exports) {
     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;
@@ -9398,7 +9432,8 @@ var LeaferUI = (function (exports) {
                 this.waitMenuTap = true;
             }
             this.dragger.setDragData(data);
-            this.updateCursor(data);
+            if (!this.isHoldRightKey)
+                this.updateCursor(data);
         }
         pointerMove(data) {
             if (!data)
@@ -9416,9 +9451,10 @@ var LeaferUI = (function (exports) {
             }
         }
         pointerMoveReal(data) {
+            const { dragHover, dragDistance } = this.config.pointer;
             this.emit(exports.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();
@@ -9430,7 +9466,7 @@ var LeaferUI = (function (exports) {
                 this.updateHoverData(data);
                 this.checkPath(data);
                 this.emit(exports.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);
@@ -9446,20 +9482,25 @@ var LeaferUI = (function (exports) {
             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(exports.PointerEvent.BEFORE_UP, data);
             this.emit(exports.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);
@@ -9509,8 +9550,10 @@ var LeaferUI = (function (exports) {
                 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;
@@ -9591,6 +9634,12 @@ var LeaferUI = (function (exports) {
         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;
@@ -9637,7 +9686,7 @@ var LeaferUI = (function (exports) {
             this.hoverData = data;
         }
         updateCursor(data) {
-            if (this.config.cursor.stop)
+            if (this.config.cursor.stop || !this.config.pointer.hover)
                 return;
             if (!data) {
                 this.updateHoverData();
@@ -9747,22 +9796,25 @@ var LeaferUI = (function (exports) {
     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) {
@@ -9775,56 +9827,117 @@ var LeaferUI = (function (exports) {
                 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 = {};
-    exports.Leaf.prototype.__hitWorld = function (point) {
-        if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
-            this.__updateHitCanvas();
-            if (!this.__layout.boundsChanged)
-                this.__layout.hitCanvasChanged = false;
-        }
+    const leaf = exports.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);
     };
-
-    exports.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 = exports.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);
     };
-    exports.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;
@@ -9833,8 +9946,8 @@ var LeaferUI = (function (exports) {
                     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;
                     }
@@ -9849,8 +9962,8 @@ var LeaferUI = (function (exports) {
         if (this.stroke || this.cornerRadius)
             ui.__updateHitCanvas.call(this);
     };
-    exports.Rect.prototype.__hitFill = function (inner, windingRule) {
-        return this.__hitCanvas ? ui.__hitFill.call(this, inner, windingRule) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+    exports.Rect.prototype.__hitFill = function (inner) {
+        return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
 
     exports.UI.prototype.find = function (condition, options) {
@@ -10574,8 +10687,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)
@@ -10659,8 +10775,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;
@@ -10714,7 +10833,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);
@@ -10776,7 +10895,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;
         }
@@ -11681,7 +11800,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;
@@ -11692,10 +11811,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;
@@ -11706,7 +11825,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;
@@ -11715,7 +11834,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;
@@ -11761,6 +11880,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);
@@ -11775,6 +11932,12 @@ var LeaferUI = (function (exports) {
         hitCanvasManager: () => new HitCanvasManager()
     });
     useCanvas();
+    window.addEventListener('unload', () => {
+        const { list } = exports.Leafer;
+        list.forEach(leafer => leafer.destroy(true));
+        list.destroy();
+        ImageManager.destroy();
+    });
 
     exports.AnimateEvent = AnimateEvent;
     exports.AroundHelper = AroundHelper;
@@ -11889,6 +12052,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;
@@ -11896,12 +12060,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;
@@ -11927,8 +12093,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;