leafer-draw 1.3.3 → 1.4.1

package/dist/web.js

@@ -1377,7 +1377,7 @@ var LeaferUI = (function (exports) {
     }
     const D$4 = Debug;
 
-    const debug$e = Debug.get('RunTime');
+    const debug$f = Debug.get('RunTime');
     const Run = {
         currentId: 0,
         currentName: '',
@@ -1386,24 +1386,24 @@ var LeaferUI = (function (exports) {
         nameToIdMap: {},
         start(name, microsecond) {
             const id = IncrementId.create(IncrementId.RUNTIME);
-            R.currentId = R.idMap[id] = microsecond ? performance.now() : Date.now();
-            R.currentName = R.nameMap[id] = name;
-            R.nameToIdMap[name] = id;
+            R$1.currentId = R$1.idMap[id] = microsecond ? performance.now() : Date.now();
+            R$1.currentName = R$1.nameMap[id] = name;
+            R$1.nameToIdMap[name] = id;
             return id;
         },
         end(id, microsecond) {
-            const time = R.idMap[id], name = R.nameMap[id];
+            const time = R$1.idMap[id], name = R$1.nameMap[id];
             const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
-            R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-            debug$e.log(name, duration, 'ms');
+            R$1.idMap[id] = R$1.nameMap[id] = R$1.nameToIdMap[name] = undefined;
+            debug$f.log(name, duration, 'ms');
         },
         endOfName(name, microsecond) {
-            const id = R.nameToIdMap[name];
+            const id = R$1.nameToIdMap[name];
             if (id !== undefined)
-                R.end(id, microsecond);
+                R$1.end(id, microsecond);
         }
     };
-    const R = Run;
+    const R$1 = Run;
 
     const check = [];
     const Plugin = {
@@ -1424,18 +1424,18 @@ var LeaferUI = (function (exports) {
     };
     setTimeout(() => check.forEach(name => Plugin.has(name, true)));
 
-    const debug$d = Debug.get('UICreator');
+    const debug$e = Debug.get('UICreator');
     const UICreator = {
         list: {},
         register(UI) {
             const { __tag: tag } = UI.prototype;
             if (list$1[tag])
-                debug$d.repeat(tag);
+                debug$e.repeat(tag);
             list$1[tag] = UI;
         },
         get(tag, data, x, y, width, height) {
             if (!list$1[tag])
-                debug$d.error('not register ' + tag);
+                debug$e.error('not register ' + tag);
             const ui = new list$1[tag](data);
             if (x !== undefined) {
                 ui.x = x;
@@ -1451,7 +1451,7 @@ var LeaferUI = (function (exports) {
     };
     const { list: list$1 } = UICreator;
 
-    const debug$c = Debug.get('EventCreator');
+    const debug$d = Debug.get('EventCreator');
     const EventCreator = {
         nameList: {},
         register(Event) {
@@ -1459,7 +1459,7 @@ var LeaferUI = (function (exports) {
             Object.keys(Event).forEach(key => {
                 name = Event[key];
                 if (typeof name === 'string')
-                    nameList[name] && debug$c.repeat(name), nameList[name] = Event;
+                    nameList[name] && debug$d.repeat(name), nameList[name] = Event;
             });
         },
         changeName(oldName, newName) {
@@ -1536,10 +1536,10 @@ var LeaferUI = (function (exports) {
             Object.keys(merge).forEach(key => {
                 var _a, _b;
                 value = merge[key];
-                if ((value === null || value === undefined ? undefined : value.constructor) === Object && ((_a = t[key]) === null || _a === undefined ? undefined : _a.constructor) === Object)
+                if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object)
                     return assign(t[key], merge[key], exclude && exclude[key]);
                 if (exclude && (key in exclude)) {
-                    if (((_b = exclude[key]) === null || _b === undefined ? undefined : _b.constructor) === Object)
+                    if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object)
                         assign(t[key] = {}, merge[key], exclude[key]);
                     return;
                 }
@@ -1663,7 +1663,7 @@ var LeaferUI = (function (exports) {
             const t = this;
             if (t.blendMode === 'pass-through') {
                 const leaf = this.__leaf;
-                if ((t.opacity < 1 && (leaf.isBranch || t.__hasMultiPaint)) || leaf.__hasEraser || t.eraser) {
+                if ((t.opacity < 1 && (leaf.isBranch || t.__hasMultiPaint)) || leaf.__hasEraser || t.eraser || t.filter) {
                     t.__single = true;
                 }
                 else if (t.__single) {
@@ -1776,7 +1776,7 @@ var LeaferUI = (function (exports) {
         }
         setTransform(_a, _b, _c, _d, _e, _f) { }
         resetTransform() { }
-        getTransform() { return undefined; }
+        getTransform() { return void 0; }
         save() { }
         restore() { }
         transform(a, b, c, d, e, f) {
@@ -1833,12 +1833,12 @@ var LeaferUI = (function (exports) {
         ellipse(_x, _y, _radiusX, _radiusY, _rotation, _startAngle, _endAngle, _anticlockwise) { }
         rect(_x, _y, _width, _height) { }
         roundRect(_x, _y, _width, _height, _radius) { }
-        createConicGradient(_startAngle, _x, _y) { return undefined; }
-        createLinearGradient(_x0, _y0, _x1, _y1) { return undefined; }
-        createPattern(_image, _repetition) { return undefined; }
-        createRadialGradient(_x0, _y0, _r0, _x1, _y1, _r1) { return undefined; }
+        createConicGradient(_startAngle, _x, _y) { return void 0; }
+        createLinearGradient(_x0, _y0, _x1, _y1) { return void 0; }
+        createPattern(_image, _repetition) { return void 0; }
+        createRadialGradient(_x0, _y0, _r0, _x1, _y1, _r1) { return void 0; }
         fillText(_text, _x, _y, _maxWidth) { }
-        measureText(_text) { return undefined; }
+        measureText(_text) { return void 0; }
         strokeText(_text, _x, _y, _maxWidth) { }
         destroy() {
             this.context = null;
@@ -1846,79 +1846,79 @@ var LeaferUI = (function (exports) {
     }
     __decorate([
         contextAttr('imageSmoothingEnabled')
-    ], Canvas.prototype, "smooth", undefined);
+    ], Canvas.prototype, "smooth", void 0);
     __decorate([
         contextAttr('imageSmoothingQuality')
-    ], Canvas.prototype, "smoothLevel", undefined);
+    ], Canvas.prototype, "smoothLevel", void 0);
     __decorate([
         contextAttr('globalAlpha')
-    ], Canvas.prototype, "opacity", undefined);
+    ], Canvas.prototype, "opacity", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fillStyle", undefined);
+    ], Canvas.prototype, "fillStyle", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "strokeStyle", undefined);
+    ], Canvas.prototype, "strokeStyle", void 0);
     __decorate([
         contextAttr('lineWidth')
-    ], Canvas.prototype, "strokeWidth", undefined);
+    ], Canvas.prototype, "strokeWidth", void 0);
     __decorate([
         contextAttr('lineCap')
-    ], Canvas.prototype, "strokeCap", undefined);
+    ], Canvas.prototype, "strokeCap", void 0);
     __decorate([
         contextAttr('lineJoin')
-    ], Canvas.prototype, "strokeJoin", undefined);
+    ], Canvas.prototype, "strokeJoin", void 0);
     __decorate([
         contextAttr('lineDashOffset')
-    ], Canvas.prototype, "dashOffset", undefined);
+    ], Canvas.prototype, "dashOffset", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "miterLimit", undefined);
+    ], Canvas.prototype, "miterLimit", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowBlur", undefined);
+    ], Canvas.prototype, "shadowBlur", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowColor", undefined);
+    ], Canvas.prototype, "shadowColor", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowOffsetX", undefined);
+    ], Canvas.prototype, "shadowOffsetX", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowOffsetY", undefined);
+    ], Canvas.prototype, "shadowOffsetY", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "filter", undefined);
+    ], Canvas.prototype, "filter", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "font", undefined);
+    ], Canvas.prototype, "font", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fontKerning", undefined);
+    ], Canvas.prototype, "fontKerning", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fontStretch", undefined);
+    ], Canvas.prototype, "fontStretch", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fontVariantCaps", undefined);
+    ], Canvas.prototype, "fontVariantCaps", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "textAlign", undefined);
+    ], Canvas.prototype, "textAlign", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "textBaseline", undefined);
+    ], Canvas.prototype, "textBaseline", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "textRendering", undefined);
+    ], Canvas.prototype, "textRendering", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "wordSpacing", undefined);
+    ], Canvas.prototype, "wordSpacing", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "letterSpacing", undefined);
+    ], Canvas.prototype, "letterSpacing", void 0);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "direction", undefined);
+    ], Canvas.prototype, "direction", void 0);
     __decorate([
         contextMethod()
     ], Canvas.prototype, "setTransform", null);
@@ -2615,7 +2615,7 @@ 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$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$c = Debug.get('PathConvert');
     const setEndPoint$1 = {};
     const PathConvert = {
         current: { dot: 0 },
@@ -2856,7 +2856,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$b.error(`command: ${command} [index:${i}]`, old);
+                        debug$c.error(`command: ${command} [index:${i}]`, old);
                         return data;
                 }
                 lastCommand = command;
@@ -2965,12 +2965,10 @@ var LeaferUI = (function (exports) {
         },
         arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
             if (lastX !== undefined) {
-                const maxRadius = tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2) * (getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / 2);
-                data.push(U$2, x1, y1, x2, y2, min(radius, abs$2(maxRadius)));
-            }
-            else {
-                data.push(U$2, x1, y1, x2, y2, radius);
+                const d = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2);
+                radius = min(radius, min(d / 2, d / 2 * abs$2(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
             }
+            data.push(U$2, x1, y1, x2, y2, radius);
         },
         drawEllipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
             BezierHelper.ellipse(null, x, y, radiusX, radiusY, rotation === undefined ? 0 : rotation, startAngle === undefined ? 0 : startAngle, endAngle === undefined ? 360 : endAngle, anticlockwise, null, null, startPoint);
@@ -3081,7 +3079,7 @@ 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$2, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
-    const debug$a = Debug.get('PathDrawer');
+    const debug$b = Debug.get('PathDrawer');
     const PathDrawer = {
         drawPathByData(drawer, data) {
             if (!data)
@@ -3144,7 +3142,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$a.error(`command: ${command} [index:${i}]`, data);
+                        debug$b.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3154,7 +3152,7 @@ var LeaferUI = (function (exports) {
     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, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
-    const debug$9 = Debug.get('PathBounds');
+    const debug$a = Debug.get('PathBounds');
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
     const setPointBounds = {};
@@ -3262,7 +3260,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$9.error(`command: ${command} [index:${i}]`, data);
+                        debug$a.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3378,7 +3376,7 @@ var LeaferUI = (function (exports) {
     const F = FileHelper;
     F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
 
-    const debug$8 = Debug.get('TaskProcessor');
+    const debug$9 = Debug.get('TaskProcessor');
     class TaskItem {
         constructor(task) {
             this.parallel = true;
@@ -3387,13 +3385,13 @@ var LeaferUI = (function (exports) {
             this.task = task;
         }
         run() {
-            return __awaiter(this, undefined, undefined, function* () {
+            return __awaiter(this, void 0, void 0, function* () {
                 try {
                     if (this.task && !this.isComplete && this.parent.running)
                         yield this.task();
                 }
                 catch (error) {
-                    debug$8.error(error);
+                    debug$9.error(error);
                 }
             });
         }
@@ -3626,18 +3624,52 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const ImageManager = {
+    const debug$8 = Debug.get('Resource');
+    const Resource = {
+        tasker: new TaskProcessor(),
         map: {},
+        get isComplete() { return R.tasker.isComplete; },
+        set(key, value) {
+            if (R.map[key])
+                debug$8.repeat(key);
+            R.map[key] = value;
+        },
+        get(key) {
+            return R.map[key];
+        },
+        remove(key) {
+            delete R.map[key];
+        },
+        loadImage(key, format) {
+            return new Promise((resolve, reject) => {
+                const image = this.setImage(key, key, format);
+                image.load(() => resolve(image), (e) => reject(e));
+            });
+        },
+        setImage(key, value, format) {
+            let config;
+            if (typeof value === 'string')
+                config = { url: value };
+            else if (!value.url)
+                config = { url: key, view: value };
+            if (config)
+                format && (config.format = format), value = Creator.image(config);
+            R.set(key, value);
+            return value;
+        },
+        destroy() {
+            R.map = {};
+        }
+    };
+    const R = Resource;
+
+    const ImageManager = {
         recycledList: [],
-        tasker: new TaskProcessor(),
         patternTasker: new TaskProcessor(),
-        get isComplete() { return I.tasker.isComplete; },
         get(config) {
-            let image = I.map[config.url];
-            if (!image) {
-                image = Creator.image(config);
-                I.map[config.url] = image;
-            }
+            let image = Resource.get(config.url);
+            if (!image)
+                Resource.set(config.url, image = Creator.image(config));
             image.use++;
             return image;
         },
@@ -3651,7 +3683,7 @@ var LeaferUI = (function (exports) {
             if (list.length > 100) {
                 list.forEach(image => {
                     if (!image.use && image.url) {
-                        delete I.map[image.url];
+                        Resource.remove(image.url);
                         image.destroy();
                     }
                 });
@@ -3678,7 +3710,6 @@ var LeaferUI = (function (exports) {
             return false;
         },
         destroy() {
-            I.map = {};
             I.recycledList = [];
         }
     };
@@ -3692,21 +3723,19 @@ var LeaferUI = (function (exports) {
             this.use = 0;
             this.waitComplete = [];
             this.innerId = create$1(IMAGE);
-            this.config = config || { url: '' };
-            this.isSVG = ImageManager.isFormat('svg', config);
-            this.hasOpacityPixel = ImageManager.hasOpacityPixel(config);
+            this.config = config || (config = { url: '' });
+            if (config.view) {
+                const { view } = config;
+                this.setView(view.config ? view.view : view);
+            }
+            ImageManager.isFormat('svg', config) && (this.isSVG = true);
+            ImageManager.hasOpacityPixel(config) && (this.hasOpacityPixel = true);
         }
         load(onSuccess, onError) {
             if (!this.loading) {
                 this.loading = true;
-                ImageManager.tasker.add(() => __awaiter(this, undefined, undefined, function* () {
-                    return yield Platform.origin.loadImage(this.url).then((img) => {
-                        this.ready = true;
-                        this.width = img.naturalWidth || img.width;
-                        this.height = img.naturalHeight || img.height;
-                        this.view = img;
-                        this.onComplete(true);
-                    }).catch((e) => {
+                Resource.tasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                    return yield Platform.origin.loadImage(this.url).then(img => this.setView(img)).catch((e) => {
                         this.error = e;
                         this.onComplete(false);
                     });
@@ -3724,6 +3753,13 @@ var LeaferUI = (function (exports) {
             }
             l[index] = l[index + 1] = undefined;
         }
+        setView(img) {
+            this.ready = true;
+            this.width = img.naturalWidth || img.width;
+            this.height = img.naturalHeight || img.height;
+            this.view = img;
+            this.onComplete(true);
+        }
         onComplete(isSuccess) {
             let odd;
             this.waitComplete.forEach((item, index) => {
@@ -3742,6 +3778,9 @@ var LeaferUI = (function (exports) {
             this.waitComplete.length = 0;
             this.loading = false;
         }
+        getFull(_filters) {
+            return this.view;
+        }
         getCanvas(width, height, opacity, _filters) {
             width || (width = this.width);
             height || (height = this.height);
@@ -3824,10 +3863,10 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
-                    this.__layout.matrixChanged || this.__layout.matrixChange();
                     this.__hasAutoLayout = !!(this.origin || this.around || this.flow);
                     if (!this.__local)
                         this.__layout.createLocal();
+                    doBoundsType(this);
                 }
             }
         }));
@@ -4210,55 +4249,62 @@ var LeaferUI = (function (exports) {
             y += t.y;
             transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
         },
-        zoomOfWorld(t, origin, scaleX, scaleY, resize) {
-            L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
+        zoomOfWorld(t, origin, scaleX, scaleY, resize, transition) {
+            L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize, transition);
         },
-        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
-            copy$6(matrix, t.__localMatrix);
+        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize, transition) {
+            const o = t.__localMatrix;
+            if (typeof scaleY !== 'number') {
+                if (scaleY)
+                    transition = scaleY;
+                scaleY = scaleX;
+            }
+            copy$6(matrix, o);
             scaleOfOuter$2(matrix, origin, scaleX, scaleY);
             if (t.origin || t.around) {
-                L.setTransform(t, matrix, resize);
+                L.setTransform(t, matrix, resize, transition);
             }
             else {
-                moveByMatrix(t, matrix);
-                t.scaleResize(scaleX, scaleY, resize !== true);
+                const x = t.x + matrix.e - o.e, y = t.y + matrix.f - o.f;
+                if (transition && !resize)
+                    t.animate({ x, y, scaleX: t.scaleX * scaleX, scaleY: t.scaleY * scaleY }, transition);
+                else
+                    t.x = x, t.y = y, t.scaleResize(scaleX, scaleY, resize !== true);
             }
         },
-        rotateOfWorld(t, origin, angle) {
-            L.rotateOfLocal(t, getTempLocal(t, origin), angle);
+        rotateOfWorld(t, origin, angle, transition) {
+            L.rotateOfLocal(t, getTempLocal(t, origin), angle, transition);
         },
-        rotateOfLocal(t, origin, angle) {
-            copy$6(matrix, t.__localMatrix);
+        rotateOfLocal(t, origin, angle, transition) {
+            const o = t.__localMatrix;
+            copy$6(matrix, o);
             rotateOfOuter$2(matrix, origin, angle);
-            if (t.origin || t.around) {
-                L.setTransform(t, matrix);
-            }
-            else {
-                moveByMatrix(t, matrix);
-                t.rotation = MathHelper.formatRotation(t.rotation + angle);
-            }
+            if (t.origin || t.around)
+                L.setTransform(t, matrix, false, transition);
+            else
+                t.set({ x: t.x + matrix.e - o.e, y: t.y + matrix.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
         },
-        skewOfWorld(t, origin, skewX, skewY, resize) {
-            L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
+        skewOfWorld(t, origin, skewX, skewY, resize, transition) {
+            L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
         },
-        skewOfLocal(t, origin, skewX, skewY = 0, resize) {
+        skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
             copy$6(matrix, t.__localMatrix);
             skewOfOuter(matrix, origin, skewX, skewY);
-            L.setTransform(t, matrix, resize);
+            L.setTransform(t, matrix, resize, transition);
         },
-        transformWorld(t, transform, resize) {
+        transformWorld(t, transform, resize, transition) {
             copy$6(matrix, t.worldTransform);
             multiplyParent$2(matrix, transform);
             if (t.parent)
                 divideParent(matrix, t.parent.worldTransform);
-            L.setTransform(t, matrix, resize);
+            L.setTransform(t, matrix, resize, transition);
         },
-        transform(t, transform, resize) {
+        transform(t, transform, resize, transition) {
             copy$6(matrix, t.localTransform);
             multiplyParent$2(matrix, transform);
-            L.setTransform(t, matrix, resize);
+            L.setTransform(t, matrix, resize, transition);
         },
-        setTransform(t, transform, resize) {
+        setTransform(t, transform, resize, transition) {
             const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
             const layout = getLayout(transform, originPoint, data.around && L.getInnerOrigin(t, data.around));
             if (resize) {
@@ -4273,7 +4319,7 @@ var LeaferUI = (function (exports) {
                 t.scaleResize(scaleX, scaleY, false);
             }
             else
-                t.set(layout);
+                t.set(layout, transition);
         },
         getFlipTransform(t, axis) {
             const m = getMatrixData();
@@ -4310,11 +4356,6 @@ var LeaferUI = (function (exports) {
     };
     const L = LeafHelper;
     const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
-    function moveByMatrix(t, matrix) {
-        const { e, f } = t.__localMatrix;
-        t.x += matrix.e - e;
-        t.y += matrix.f - f;
-    }
     function getTempLocal(t, world) {
         t.__layout.update();
         return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
@@ -5220,7 +5261,7 @@ var LeaferUI = (function (exports) {
                     if (this.__.eraser === 'path')
                         return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(true, true);
-                    this.__draw(tempCanvas, options);
+                    this.__draw(tempCanvas, options, canvas);
                     if (this.__worldFlipped) {
                         canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, this.__.__blendMode, true);
                     }
@@ -5588,11 +5629,11 @@ var LeaferUI = (function (exports) {
             const layer = this.leafer ? this.leafer.zoomLayer : this;
             return layer.getWorldPoint(page, relative, distance, change);
         }
-        setTransform(matrix, resize) {
-            setTransform(this, matrix, resize);
+        setTransform(matrix, resize, transition) {
+            setTransform(this, matrix, resize, transition);
         }
-        transform(matrix, resize) {
-            transform(this, matrix, resize);
+        transform(matrix, resize, transition) {
+            transform(this, matrix, resize, transition);
         }
         move(x, y, transition) {
             moveLocal(this, x, y, transition);
@@ -5600,32 +5641,32 @@ var LeaferUI = (function (exports) {
         moveInner(x, y, transition) {
             moveWorld(this, x, y, true, transition);
         }
-        scaleOf(origin, scaleX, scaleY, resize) {
-            zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
+        scaleOf(origin, scaleX, scaleY, resize, transition) {
+            zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize, transition);
         }
-        rotateOf(origin, rotation) {
-            rotateOfLocal(this, getLocalOrigin(this, origin), rotation);
+        rotateOf(origin, rotation, transition) {
+            rotateOfLocal(this, getLocalOrigin(this, origin), rotation, transition);
         }
-        skewOf(origin, skewX, skewY, resize) {
-            skewOfLocal(this, getLocalOrigin(this, origin), skewX, skewY, resize);
+        skewOf(origin, skewX, skewY, resize, transition) {
+            skewOfLocal(this, getLocalOrigin(this, origin), skewX, skewY, resize, transition);
         }
-        transformWorld(worldTransform, resize) {
-            transformWorld(this, worldTransform, resize);
+        transformWorld(worldTransform, resize, transition) {
+            transformWorld(this, worldTransform, resize, transition);
         }
         moveWorld(x, y, transition) {
             moveWorld(this, x, y, false, transition);
         }
-        scaleOfWorld(worldOrigin, scaleX, scaleY, resize) {
-            zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize);
+        scaleOfWorld(worldOrigin, scaleX, scaleY, resize, transition) {
+            zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize, transition);
         }
         rotateOfWorld(worldOrigin, rotation) {
             rotateOfWorld(this, worldOrigin, rotation);
         }
-        skewOfWorld(worldOrigin, skewX, skewY, resize) {
-            skewOfWorld(this, worldOrigin, skewX, skewY, resize);
+        skewOfWorld(worldOrigin, skewX, skewY, resize, transition) {
+            skewOfWorld(this, worldOrigin, skewX, skewY, resize, transition);
         }
-        flip(axis) {
-            transform(this, getFlipTransform(this, axis));
+        flip(axis, transition) {
+            transform(this, getFlipTransform(this, axis), false, transition);
         }
         scaleResize(scaleX, scaleY = scaleX, _noResize) {
             this.scaleX *= scaleX;
@@ -6013,7 +6054,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.3.3";
+    const version = "1.4.1";
 
     const debug$4 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6133,7 +6174,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             else {
-                window.addEventListener('resize', () => {
+                window.addEventListener('resize', this.windowListener = () => {
                     const pixelRatio = Platform.devicePixelRatio;
                     if (this.pixelRatio !== pixelRatio) {
                         const { width, height } = this;
@@ -6162,11 +6203,9 @@ var LeaferUI = (function (exports) {
         }
         stopAutoLayout() {
             this.autoLayout = false;
-            this.resizeListener = null;
-            if (this.resizeObserver) {
+            if (this.resizeObserver)
                 this.resizeObserver.disconnect();
-                this.resizeObserver = null;
-            }
+            this.resizeListener = this.resizeObserver = null;
         }
         emitResize(size) {
             const oldSize = {};
@@ -6187,6 +6226,10 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.view) {
                 this.stopAutoLayout();
+                if (this.windowListener) {
+                    window.removeEventListener('resize', this.windowListener);
+                    this.windowListener = null;
+                }
                 if (!this.unreal) {
                     const view = this.view;
                     if (view.parentElement)
@@ -6213,7 +6256,10 @@ var LeaferUI = (function (exports) {
                 canvas.height = height;
                 return canvas;
             },
-            canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+            canvasToDataURL: (canvas, type, quality) => {
+                const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
+                return imageType === 'image/bmp' ? url.replace('image/png;', 'image/bmp;') : url;
+            },
             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);
@@ -6258,14 +6304,14 @@ var LeaferUI = (function (exports) {
     Platform.name = 'web';
     Platform.isMobile = 'ontouchstart' in window;
     Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-    defineKey(Platform, 'devicePixelRatio', { get() { return Math.max(1, devicePixelRatio); } });
+    defineKey(Platform, 'devicePixelRatio', { get() { return devicePixelRatio; } });
     const { userAgent } = navigator;
     if (userAgent.indexOf("Firefox") > -1) {
         Platform.conicGradientRotate90 = true;
         Platform.intWheelDeltaY = true;
         Platform.syncDomFont = true;
     }
-    else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
+    else if (userAgent.indexOf("AppleWebKit") > -1) {
         Platform.fullImageShadow = true;
     }
     if (userAgent.indexOf('Windows') > -1) {
@@ -6534,7 +6580,7 @@ var LeaferUI = (function (exports) {
         }
         partLayout() {
             var _a;
-            if (!((_a = this.__updatedList) === null || _a === undefined ? undefined : _a.length))
+            if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
                 return;
             const t = Run.start('PartLayout');
             const { target, __updatedList: updateList } = this;
@@ -6903,9 +6949,7 @@ var LeaferUI = (function (exports) {
     const ColorConvert = {};
     const UnitConvert = {
         number(value, percentRefer) {
-            if (typeof value === 'object')
-                return value.type === 'percent' ? value.value * percentRefer : value.value;
-            return value;
+            return typeof value === 'object' ? (value.type === 'percent' ? value.value * percentRefer : value.value) : value;
         }
     };
     const PathArrow = {};
@@ -6913,16 +6957,15 @@ var LeaferUI = (function (exports) {
     const PaintImage = {};
     const PaintGradient = {};
     const Effect = {};
+    const Filter = {
+        apply() { Plugin.need('filter'); }
+    };
     const Export = {};
     const State = {
-        setStyleName(_leaf, _styleName, _value) { return Plugin.need('state'); },
-        set(_leaf, _stateName) { return Plugin.need('state'); }
-    };
-    const Transition = {
-        list: {},
-        register(attrName, fn) { Transition.list[attrName] = fn; },
-        get(attrName) { return Transition.list[attrName]; }
+        setStyleName() { return Plugin.need('state'); },
+        set() { return Plugin.need('state'); }
     };
+    const Transition = {};
 
     const { parse, objectToCanvasData } = PathConvert;
     const emptyPaint = {};
@@ -7029,24 +7072,13 @@ var LeaferUI = (function (exports) {
             }
         }
         setShadow(value) {
-            this.__setInput('shadow', value);
-            if (value instanceof Array) {
-                if (value.some((item) => item.visible === false))
-                    value = value.filter((item) => item.visible !== false);
-                this._shadow = value.length ? value : null;
-            }
-            else
-                this._shadow = value && value.visible !== false ? [value] : null;
+            setArray(this, 'shadow', value);
         }
         setInnerShadow(value) {
-            this.__setInput('innerShadow', value);
-            if (value instanceof Array) {
-                if (value.some((item) => item.visible === false))
-                    value = value.filter((item) => item.visible !== false);
-                this._innerShadow = value.length ? value : null;
-            }
-            else
-                this._innerShadow = value && value.visible !== false ? [value] : null;
+            setArray(this, 'innerShadow', value);
+        }
+        setFilter(value) {
+            setArray(this, 'filter', value);
         }
         __computePaint() {
             const { fill, stroke } = this.__input;
@@ -7057,6 +7089,17 @@ var LeaferUI = (function (exports) {
             this.__needComputePaint = false;
         }
     }
+    function setArray(data, key, value) {
+        data.__setInput(key, value);
+        if (value instanceof Array) {
+            if (value.some((item) => item.visible === false))
+                value = value.filter((item) => item.visible !== false);
+            value.length || (value = null);
+        }
+        else
+            value = value && value.visible !== false ? [value] : null;
+        data['_' + key] = value;
+    }
 
     class GroupData extends UIData {
     }
@@ -7179,11 +7222,13 @@ var LeaferUI = (function (exports) {
         },
         __updateRenderSpread() {
             let width = 0;
-            const { shadow, innerShadow, blur, backgroundBlur } = this.__;
+            const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
             if (shadow)
                 shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
             if (blur)
                 width = Math.max(width, blur);
+            if (filter)
+                width += Filter.getSpread(filter);
             let shapeWidth = width = Math.ceil(width);
             if (innerShadow)
                 innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
@@ -7198,8 +7243,8 @@ var LeaferUI = (function (exports) {
         __updateChange() {
             const data = this.__;
             if (data.__useEffect) {
-                const { shadow, innerShadow, blur, backgroundBlur } = this.__;
-                data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur);
+                const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
+                data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
             }
             data.__checkSingle();
             const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
@@ -7213,7 +7258,7 @@ var LeaferUI = (function (exports) {
         __drawFast(canvas, options) {
             drawFast(this, canvas, options);
         },
-        __draw(canvas, options) {
+        __draw(canvas, options, originCanvas) {
             const data = this.__;
             if (data.__complex) {
                 if (data.__needComputePaint)
@@ -7223,7 +7268,7 @@ var LeaferUI = (function (exports) {
                 if (data.__useEffect) {
                     const shape = Paint.shape(this, canvas, options);
                     this.__nowWorld = this.__getNowWorld(options);
-                    const { shadow, innerShadow } = data;
+                    const { shadow, innerShadow, filter } = data;
                     if (shadow)
                         Effect.shadow(this, canvas, shape);
                     if (fill)
@@ -7234,6 +7279,8 @@ var LeaferUI = (function (exports) {
                         Effect.innerShadow(this, canvas, shape);
                     if (stroke)
                         data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                    if (filter)
+                        Filter.apply(filter, this, this.__nowWorld, canvas, originCanvas, shape);
                     if (shape.worldCanvas)
                         shape.worldCanvas.recycle();
                     shape.canvas.recycle();
@@ -7453,199 +7500,202 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(UIData)
-    ], exports.UI.prototype, "__", undefined);
+    ], exports.UI.prototype, "__", void 0);
     __decorate([
         zoomLayerType()
-    ], exports.UI.prototype, "zoomLayer", undefined);
+    ], exports.UI.prototype, "zoomLayer", void 0);
     __decorate([
         dataType('')
-    ], exports.UI.prototype, "id", undefined);
+    ], exports.UI.prototype, "id", void 0);
     __decorate([
         dataType('')
-    ], exports.UI.prototype, "name", undefined);
+    ], exports.UI.prototype, "name", void 0);
     __decorate([
         dataType('')
-    ], exports.UI.prototype, "className", undefined);
+    ], exports.UI.prototype, "className", void 0);
     __decorate([
         surfaceType('pass-through')
-    ], exports.UI.prototype, "blendMode", undefined);
+    ], exports.UI.prototype, "blendMode", void 0);
     __decorate([
         opacityType(1)
-    ], exports.UI.prototype, "opacity", undefined);
+    ], exports.UI.prototype, "opacity", void 0);
     __decorate([
         visibleType(true)
-    ], exports.UI.prototype, "visible", undefined);
+    ], exports.UI.prototype, "visible", void 0);
     __decorate([
         surfaceType(false)
-    ], exports.UI.prototype, "locked", undefined);
+    ], exports.UI.prototype, "locked", void 0);
     __decorate([
         sortType(0)
-    ], exports.UI.prototype, "zIndex", undefined);
+    ], exports.UI.prototype, "zIndex", void 0);
     __decorate([
         maskType(false)
-    ], exports.UI.prototype, "mask", undefined);
+    ], exports.UI.prototype, "mask", void 0);
     __decorate([
         eraserType(false)
-    ], exports.UI.prototype, "eraser", undefined);
+    ], exports.UI.prototype, "eraser", void 0);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "x", undefined);
+    ], exports.UI.prototype, "x", void 0);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "y", undefined);
+    ], exports.UI.prototype, "y", void 0);
     __decorate([
         boundsType(100, true)
-    ], exports.UI.prototype, "width", undefined);
+    ], exports.UI.prototype, "width", void 0);
     __decorate([
         boundsType(100, true)
-    ], exports.UI.prototype, "height", undefined);
+    ], exports.UI.prototype, "height", void 0);
     __decorate([
         scaleType(1, true)
-    ], exports.UI.prototype, "scaleX", undefined);
+    ], exports.UI.prototype, "scaleX", void 0);
     __decorate([
         scaleType(1, true)
-    ], exports.UI.prototype, "scaleY", undefined);
+    ], exports.UI.prototype, "scaleY", void 0);
     __decorate([
         rotationType(0, true)
-    ], exports.UI.prototype, "rotation", undefined);
+    ], exports.UI.prototype, "rotation", void 0);
     __decorate([
         rotationType(0, true)
-    ], exports.UI.prototype, "skewX", undefined);
+    ], exports.UI.prototype, "skewX", void 0);
     __decorate([
         rotationType(0, true)
-    ], exports.UI.prototype, "skewY", undefined);
+    ], exports.UI.prototype, "skewY", void 0);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "offsetX", undefined);
+    ], exports.UI.prototype, "offsetX", void 0);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "offsetY", undefined);
+    ], exports.UI.prototype, "offsetY", void 0);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "scrollX", undefined);
+    ], exports.UI.prototype, "scrollX", void 0);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "scrollY", undefined);
+    ], exports.UI.prototype, "scrollY", void 0);
     __decorate([
         autoLayoutType()
-    ], exports.UI.prototype, "origin", undefined);
+    ], exports.UI.prototype, "origin", void 0);
     __decorate([
         autoLayoutType()
-    ], exports.UI.prototype, "around", undefined);
+    ], exports.UI.prototype, "around", void 0);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "lazy", undefined);
+    ], exports.UI.prototype, "lazy", void 0);
     __decorate([
         naturalBoundsType(1)
-    ], exports.UI.prototype, "pixelRatio", undefined);
+    ], exports.UI.prototype, "pixelRatio", void 0);
     __decorate([
         pathInputType()
-    ], exports.UI.prototype, "path", undefined);
+    ], exports.UI.prototype, "path", void 0);
     __decorate([
         pathType()
-    ], exports.UI.prototype, "windingRule", undefined);
+    ], exports.UI.prototype, "windingRule", void 0);
     __decorate([
         pathType(true)
-    ], exports.UI.prototype, "closed", undefined);
+    ], exports.UI.prototype, "closed", void 0);
     __decorate([
         boundsType(0)
-    ], exports.UI.prototype, "padding", undefined);
+    ], exports.UI.prototype, "padding", void 0);
     __decorate([
         boundsType(false)
-    ], exports.UI.prototype, "lockRatio", undefined);
+    ], exports.UI.prototype, "lockRatio", void 0);
     __decorate([
         boundsType()
-    ], exports.UI.prototype, "widthRange", undefined);
+    ], exports.UI.prototype, "widthRange", void 0);
     __decorate([
         boundsType()
-    ], exports.UI.prototype, "heightRange", undefined);
+    ], exports.UI.prototype, "heightRange", void 0);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "draggable", undefined);
+    ], exports.UI.prototype, "draggable", void 0);
     __decorate([
         dataType()
-    ], exports.UI.prototype, "dragBounds", undefined);
+    ], exports.UI.prototype, "dragBounds", void 0);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "editable", undefined);
+    ], exports.UI.prototype, "editable", void 0);
     __decorate([
         hitType(true)
-    ], exports.UI.prototype, "hittable", undefined);
+    ], exports.UI.prototype, "hittable", void 0);
     __decorate([
         hitType('path')
-    ], exports.UI.prototype, "hitFill", undefined);
+    ], exports.UI.prototype, "hitFill", void 0);
     __decorate([
         strokeType('path')
-    ], exports.UI.prototype, "hitStroke", undefined);
+    ], exports.UI.prototype, "hitStroke", void 0);
     __decorate([
         hitType(false)
-    ], exports.UI.prototype, "hitBox", undefined);
+    ], exports.UI.prototype, "hitBox", void 0);
     __decorate([
         hitType(true)
-    ], exports.UI.prototype, "hitChildren", undefined);
+    ], exports.UI.prototype, "hitChildren", void 0);
     __decorate([
         hitType(true)
-    ], exports.UI.prototype, "hitSelf", undefined);
+    ], exports.UI.prototype, "hitSelf", void 0);
     __decorate([
         hitType()
-    ], exports.UI.prototype, "hitRadius", undefined);
+    ], exports.UI.prototype, "hitRadius", void 0);
     __decorate([
         cursorType('')
-    ], exports.UI.prototype, "cursor", undefined);
+    ], exports.UI.prototype, "cursor", void 0);
     __decorate([
         surfaceType()
-    ], exports.UI.prototype, "fill", undefined);
+    ], exports.UI.prototype, "fill", void 0);
     __decorate([
         strokeType()
-    ], exports.UI.prototype, "stroke", undefined);
+    ], exports.UI.prototype, "stroke", void 0);
     __decorate([
         strokeType('inside')
-    ], exports.UI.prototype, "strokeAlign", undefined);
+    ], exports.UI.prototype, "strokeAlign", void 0);
     __decorate([
         strokeType(1)
-    ], exports.UI.prototype, "strokeWidth", undefined);
+    ], exports.UI.prototype, "strokeWidth", void 0);
     __decorate([
         strokeType(false)
-    ], exports.UI.prototype, "strokeWidthFixed", undefined);
+    ], exports.UI.prototype, "strokeWidthFixed", void 0);
     __decorate([
         strokeType('none')
-    ], exports.UI.prototype, "strokeCap", undefined);
+    ], exports.UI.prototype, "strokeCap", void 0);
     __decorate([
         strokeType('miter')
-    ], exports.UI.prototype, "strokeJoin", undefined);
+    ], exports.UI.prototype, "strokeJoin", void 0);
     __decorate([
         strokeType()
-    ], exports.UI.prototype, "dashPattern", undefined);
+    ], exports.UI.prototype, "dashPattern", void 0);
     __decorate([
         strokeType()
-    ], exports.UI.prototype, "dashOffset", undefined);
+    ], exports.UI.prototype, "dashOffset", void 0);
     __decorate([
         strokeType(10)
-    ], exports.UI.prototype, "miterLimit", undefined);
+    ], exports.UI.prototype, "miterLimit", void 0);
     __decorate([
         pathType(0)
-    ], exports.UI.prototype, "cornerRadius", undefined);
+    ], exports.UI.prototype, "cornerRadius", void 0);
     __decorate([
         pathType()
-    ], exports.UI.prototype, "cornerSmoothing", undefined);
+    ], exports.UI.prototype, "cornerSmoothing", void 0);
+    __decorate([
+        effectType()
+    ], exports.UI.prototype, "shadow", void 0);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "shadow", undefined);
+    ], exports.UI.prototype, "innerShadow", void 0);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "innerShadow", undefined);
+    ], exports.UI.prototype, "blur", void 0);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "blur", undefined);
+    ], exports.UI.prototype, "backgroundBlur", void 0);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "backgroundBlur", undefined);
+    ], exports.UI.prototype, "grayscale", void 0);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "grayscale", undefined);
+    ], exports.UI.prototype, "filter", void 0);
     __decorate([
         dataType({})
-    ], exports.UI.prototype, "data", undefined);
+    ], exports.UI.prototype, "data", void 0);
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
@@ -7706,7 +7756,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(GroupData)
-    ], exports.Group.prototype, "__", undefined);
+    ], exports.Group.prototype, "__", void 0);
     exports.Group = __decorate([
         useModule(exports.Branch),
         registerUI()
@@ -7719,7 +7769,7 @@ var LeaferUI = (function (exports) {
         get isApp() { return false; }
         get app() { return this.parent || this; }
         get isLeafer() { return true; }
-        get imageReady() { return this.viewReady && ImageManager.isComplete; }
+        get imageReady() { return this.viewReady && Resource.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 }; }
@@ -7930,13 +7980,13 @@ var LeaferUI = (function (exports) {
             WaitHelper.run(this.__viewReadyWait);
         }
         __onLayoutEnd() {
-            const { grow, growWidth, growHeight } = this.config;
+            const { grow, width: fixedWidth, height: fixedHeight } = this.config;
             if (grow) {
                 let { width, height, pixelRatio } = this;
                 const bounds = grow === 'box' ? this.worldBoxBounds : this.__world;
-                if (growWidth !== false)
+                if (!fixedWidth)
                     width = Math.max(1, bounds.x + bounds.width);
-                if (growHeight !== false)
+                if (!fixedHeight)
                     height = Math.max(1, bounds.y + bounds.height);
                 this.__doResize({ width, height, pixelRatio });
             }
@@ -8014,7 +8064,7 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             this.requestRender();
         }
-        zoom(_zoomType, _padding, _fixedScale) {
+        zoom(_zoomType, _padding, _fixedScale, _transition) {
             return Plugin.need('view');
         }
         getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
@@ -8079,10 +8129,10 @@ var LeaferUI = (function (exports) {
     exports.Leafer.list = new LeafList();
     __decorate([
         dataProcessor(LeaferData)
-    ], exports.Leafer.prototype, "__", undefined);
+    ], exports.Leafer.prototype, "__", void 0);
     __decorate([
         boundsType()
-    ], exports.Leafer.prototype, "pixelRatio", undefined);
+    ], exports.Leafer.prototype, "pixelRatio", void 0);
     exports.Leafer = Leafer_1 = __decorate([
         registerUI()
     ], exports.Leafer);
@@ -8095,7 +8145,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(RectData)
-    ], exports.Rect.prototype, "__", undefined);
+    ], exports.Rect.prototype, "__", void 0);
     exports.Rect = __decorate([
         useModule(RectRender),
         rewriteAble(),
@@ -8186,13 +8236,13 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(BoxData)
-    ], exports.Box.prototype, "__", undefined);
+    ], exports.Box.prototype, "__", void 0);
     __decorate([
         dataType(false)
-    ], exports.Box.prototype, "resizeChildren", undefined);
+    ], exports.Box.prototype, "resizeChildren", void 0);
     __decorate([
         affectRenderBoundsType('show')
-    ], exports.Box.prototype, "overflow", undefined);
+    ], exports.Box.prototype, "overflow", void 0);
     __decorate([
         rewrite(rect.__updateStrokeSpread)
     ], exports.Box.prototype, "__updateStrokeSpread", null);
@@ -8231,13 +8281,13 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(FrameData)
-    ], exports.Frame.prototype, "__", undefined);
+    ], exports.Frame.prototype, "__", void 0);
     __decorate([
         surfaceType('#FFFFFF')
-    ], exports.Frame.prototype, "fill", undefined);
+    ], exports.Frame.prototype, "fill", void 0);
     __decorate([
         affectRenderBoundsType('hide')
-    ], exports.Frame.prototype, "overflow", undefined);
+    ], exports.Frame.prototype, "overflow", void 0);
     exports.Frame = __decorate([
         registerUI()
     ], exports.Frame);
@@ -8284,16 +8334,16 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(EllipseData)
-    ], exports.Ellipse.prototype, "__", undefined);
+    ], exports.Ellipse.prototype, "__", void 0);
     __decorate([
         pathType(0)
-    ], exports.Ellipse.prototype, "innerRadius", undefined);
+    ], exports.Ellipse.prototype, "innerRadius", void 0);
     __decorate([
         pathType(0)
-    ], exports.Ellipse.prototype, "startAngle", undefined);
+    ], exports.Ellipse.prototype, "startAngle", void 0);
     __decorate([
         pathType(0)
-    ], exports.Ellipse.prototype, "endAngle", undefined);
+    ], exports.Ellipse.prototype, "endAngle", void 0);
     exports.Ellipse = __decorate([
         registerUI()
     ], exports.Ellipse);
@@ -8352,22 +8402,22 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(LineData)
-    ], exports.Line.prototype, "__", undefined);
+    ], exports.Line.prototype, "__", void 0);
     __decorate([
         affectStrokeBoundsType('center')
-    ], exports.Line.prototype, "strokeAlign", undefined);
+    ], exports.Line.prototype, "strokeAlign", void 0);
     __decorate([
         boundsType(0)
-    ], exports.Line.prototype, "height", undefined);
+    ], exports.Line.prototype, "height", void 0);
     __decorate([
         pathType()
-    ], exports.Line.prototype, "points", undefined);
+    ], exports.Line.prototype, "points", void 0);
     __decorate([
         pathType(0)
-    ], exports.Line.prototype, "curve", undefined);
+    ], exports.Line.prototype, "curve", void 0);
     __decorate([
         pathType(false)
-    ], exports.Line.prototype, "closed", undefined);
+    ], exports.Line.prototype, "closed", void 0);
     exports.Line = __decorate([
         registerUI()
     ], exports.Line);
@@ -8400,16 +8450,16 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(PolygonData)
-    ], exports.Polygon.prototype, "__", undefined);
+    ], exports.Polygon.prototype, "__", void 0);
     __decorate([
         pathType(3)
-    ], exports.Polygon.prototype, "sides", undefined);
+    ], exports.Polygon.prototype, "sides", void 0);
     __decorate([
         pathType()
-    ], exports.Polygon.prototype, "points", undefined);
+    ], exports.Polygon.prototype, "points", void 0);
     __decorate([
         pathType(0)
-    ], exports.Polygon.prototype, "curve", undefined);
+    ], exports.Polygon.prototype, "curve", void 0);
     __decorate([
         rewrite(line.__updateRenderPath)
     ], exports.Polygon.prototype, "__updateRenderPath", null);
@@ -8441,13 +8491,13 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(StarData)
-    ], exports.Star.prototype, "__", undefined);
+    ], exports.Star.prototype, "__", void 0);
     __decorate([
         pathType(5)
-    ], exports.Star.prototype, "corners", undefined);
+    ], exports.Star.prototype, "corners", void 0);
     __decorate([
         pathType(0.382)
-    ], exports.Star.prototype, "innerRadius", undefined);
+    ], exports.Star.prototype, "innerRadius", void 0);
     exports.Star = __decorate([
         registerUI()
     ], exports.Star);
@@ -8469,10 +8519,10 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(ImageData)
-    ], exports.Image.prototype, "__", undefined);
+    ], exports.Image.prototype, "__", void 0);
     __decorate([
         boundsType('')
-    ], exports.Image.prototype, "url", undefined);
+    ], exports.Image.prototype, "url", void 0);
     exports.Image = __decorate([
         registerUI()
     ], exports.Image);
@@ -8535,25 +8585,25 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(CanvasData)
-    ], exports.Canvas.prototype, "__", undefined);
+    ], exports.Canvas.prototype, "__", void 0);
     __decorate([
         resizeType(100)
-    ], exports.Canvas.prototype, "width", undefined);
+    ], exports.Canvas.prototype, "width", void 0);
     __decorate([
         resizeType(100)
-    ], exports.Canvas.prototype, "height", undefined);
+    ], exports.Canvas.prototype, "height", void 0);
     __decorate([
         resizeType(1)
-    ], exports.Canvas.prototype, "pixelRatio", undefined);
+    ], exports.Canvas.prototype, "pixelRatio", void 0);
     __decorate([
         resizeType(true)
-    ], exports.Canvas.prototype, "smooth", undefined);
+    ], exports.Canvas.prototype, "smooth", void 0);
     __decorate([
         dataType(false)
-    ], exports.Canvas.prototype, "safeResize", undefined);
+    ], exports.Canvas.prototype, "safeResize", void 0);
     __decorate([
         resizeType()
-    ], exports.Canvas.prototype, "contextSettings", undefined);
+    ], exports.Canvas.prototype, "contextSettings", void 0);
     exports.Canvas = __decorate([
         registerUI()
     ], exports.Canvas);
@@ -8644,76 +8694,76 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(TextData)
-    ], exports.Text.prototype, "__", undefined);
+    ], exports.Text.prototype, "__", void 0);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "width", undefined);
+    ], exports.Text.prototype, "width", void 0);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "height", undefined);
+    ], exports.Text.prototype, "height", void 0);
     __decorate([
         dataType(false)
-    ], exports.Text.prototype, "resizeFontSize", undefined);
+    ], exports.Text.prototype, "resizeFontSize", void 0);
     __decorate([
         surfaceType('#000000')
-    ], exports.Text.prototype, "fill", undefined);
+    ], exports.Text.prototype, "fill", void 0);
     __decorate([
         affectStrokeBoundsType('outside')
-    ], exports.Text.prototype, "strokeAlign", undefined);
+    ], exports.Text.prototype, "strokeAlign", void 0);
     __decorate([
         hitType('all')
-    ], exports.Text.prototype, "hitFill", undefined);
+    ], exports.Text.prototype, "hitFill", void 0);
     __decorate([
         boundsType('')
-    ], exports.Text.prototype, "text", undefined);
+    ], exports.Text.prototype, "text", void 0);
     __decorate([
         boundsType('caption')
-    ], exports.Text.prototype, "fontFamily", undefined);
+    ], exports.Text.prototype, "fontFamily", void 0);
     __decorate([
         boundsType(12)
-    ], exports.Text.prototype, "fontSize", undefined);
+    ], exports.Text.prototype, "fontSize", void 0);
     __decorate([
         boundsType('normal')
-    ], exports.Text.prototype, "fontWeight", undefined);
+    ], exports.Text.prototype, "fontWeight", void 0);
     __decorate([
         boundsType(false)
-    ], exports.Text.prototype, "italic", undefined);
+    ], exports.Text.prototype, "italic", void 0);
     __decorate([
         boundsType('none')
-    ], exports.Text.prototype, "textCase", undefined);
+    ], exports.Text.prototype, "textCase", void 0);
     __decorate([
         boundsType('none')
-    ], exports.Text.prototype, "textDecoration", undefined);
+    ], exports.Text.prototype, "textDecoration", void 0);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "letterSpacing", undefined);
+    ], exports.Text.prototype, "letterSpacing", void 0);
     __decorate([
         boundsType({ type: 'percent', value: 1.5 })
-    ], exports.Text.prototype, "lineHeight", undefined);
+    ], exports.Text.prototype, "lineHeight", void 0);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "paraIndent", undefined);
+    ], exports.Text.prototype, "paraIndent", void 0);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "paraSpacing", undefined);
+    ], exports.Text.prototype, "paraSpacing", void 0);
     __decorate([
         boundsType('x')
-    ], exports.Text.prototype, "writingMode", undefined);
+    ], exports.Text.prototype, "writingMode", void 0);
     __decorate([
         boundsType('left')
-    ], exports.Text.prototype, "textAlign", undefined);
+    ], exports.Text.prototype, "textAlign", void 0);
     __decorate([
         boundsType('top')
-    ], exports.Text.prototype, "verticalAlign", undefined);
+    ], exports.Text.prototype, "verticalAlign", void 0);
     __decorate([
         boundsType(true)
-    ], exports.Text.prototype, "autoSizeAlign", undefined);
+    ], exports.Text.prototype, "autoSizeAlign", void 0);
     __decorate([
         boundsType('normal')
-    ], exports.Text.prototype, "textWrap", undefined);
+    ], exports.Text.prototype, "textWrap", void 0);
     __decorate([
         boundsType('show')
-    ], exports.Text.prototype, "textOverflow", undefined);
+    ], exports.Text.prototype, "textOverflow", void 0);
     exports.Text = __decorate([
         registerUI()
     ], exports.Text);
@@ -8726,10 +8776,10 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(PathData)
-    ], exports.Path.prototype, "__", undefined);
+    ], exports.Path.prototype, "__", void 0);
     __decorate([
         affectStrokeBoundsType('center')
-    ], exports.Path.prototype, "strokeAlign", undefined);
+    ], exports.Path.prototype, "strokeAlign", void 0);
     exports.Path = __decorate([
         registerUI()
     ], exports.Path);
@@ -8768,10 +8818,10 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(PenData)
-    ], exports.Pen.prototype, "__", undefined);
+    ], exports.Pen.prototype, "__", void 0);
     __decorate([
         penPathType()
-    ], exports.Pen.prototype, "path", undefined);
+    ], exports.Pen.prototype, "path", void 0);
     exports.Pen = __decorate([
         useModule(PathCreator, ['set', 'path', 'paint']),
         registerUI()
@@ -9143,7 +9193,7 @@ var LeaferUI = (function (exports) {
             box = tempBox.set(box).shrink(paint.padding);
         if (paint.mode === 'strench')
             paint.mode = 'stretch';
-        const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
+        const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
         const sameBox = box.width === width && box.height === height;
         const data = { mode };
         const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -9206,6 +9256,8 @@ var LeaferUI = (function (exports) {
         data.height = height;
         if (opacity)
             data.opacity = opacity;
+        if (filters)
+            data.filters = filters;
         if (repeat)
             data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
         return data;
@@ -9308,7 +9360,7 @@ var LeaferUI = (function (exports) {
             scaleX = abs$1(scaleX);
             scaleY = abs$1(scaleY);
             const { image, data } = paint;
-            let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
+            let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
             if (sx) {
                 imageMatrix = get$1();
                 copy$1(imageMatrix, transform);
@@ -9351,7 +9403,7 @@ var LeaferUI = (function (exports) {
                 }
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, opacity);
+            const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, data.opacity, data.filters);
             const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -9395,7 +9447,7 @@ var LeaferUI = (function (exports) {
                     canvas.opacity *= data.opacity;
                 if (data.transform)
                     canvas.transform(data.transform);
-                canvas.drawImage(paint.image.view, 0, 0, data.width, data.height);
+                canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
                 canvas.restore();
                 return true;
             }
@@ -9405,7 +9457,7 @@ var LeaferUI = (function (exports) {
                 }
                 else {
                     if (!paint.patternTask) {
-                        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, undefined, undefined, function* () {
+                        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
                             paint.patternTask = null;
                             if (canvas.bounds.hit(ui.__nowWorld))
                                 createPattern(ui, paint, pixelRatio);
@@ -9995,11 +10047,11 @@ var LeaferUI = (function (exports) {
     function layoutChar(drawData, style, width, _height) {
         const { rows } = drawData;
         const { textAlign, paraIndent, letterSpacing } = style;
-        let charX, addWordWidth, indentWidth, mode, wordChar;
+        let charX, addWordWidth, indentWidth, mode, wordChar, wordsLength;
         rows.forEach(row => {
             if (row.words) {
-                indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
-                addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
+                indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length;
+                addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && wordsLength > 1) ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
                 mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
                 if (row.isOverflow && !letterSpacing)
                     row.textMode = true;
@@ -10011,7 +10063,7 @@ var LeaferUI = (function (exports) {
                     row.x += indentWidth;
                     charX = row.x;
                     row.data = [];
-                    row.words.forEach(word => {
+                    row.words.forEach((word, index) => {
                         if (mode === WordMode) {
                             wordChar = { char: '', x: charX };
                             charX = toWordChar(word.data, charX, wordChar);
@@ -10021,7 +10073,7 @@ var LeaferUI = (function (exports) {
                         else {
                             charX = toChar(word.data, charX, row.data, row.isOverflow);
                         }
-                        if (addWordWidth && (!row.paraEnd || textAlign === 'both')) {
+                        if (addWordWidth && (!row.paraEnd || textAlign === 'both') && (index !== wordsLength - 1)) {
                             charX += addWordWidth;
                             row.width += addWordWidth;
                         }
@@ -10296,6 +10348,7 @@ var LeaferUI = (function (exports) {
     exports.Eventer = Eventer;
     exports.Export = Export;
     exports.FileHelper = FileHelper;
+    exports.Filter = Filter;
     exports.FrameData = FrameData;
     exports.GroupData = GroupData;
     exports.ImageData = ImageData;
@@ -10357,6 +10410,7 @@ var LeaferUI = (function (exports) {
     exports.RenderEvent = RenderEvent;
     exports.Renderer = Renderer;
     exports.ResizeEvent = ResizeEvent;
+    exports.Resource = Resource;
     exports.Run = Run;
     exports.StarData = StarData;
     exports.State = State;
@@ -10430,3 +10484,4 @@ var LeaferUI = (function (exports) {
     return exports;
 
 })({});
+//# sourceMappingURL=web.js.map