@leafer-editor/worker 1.4.0 → 1.4.1

package/dist/worker.module.js

@@ -1374,7 +1374,7 @@ function getNameList(name) {
 }
 const D$6 = Debug;
 
-const debug$h = Debug.get('RunTime');
+const debug$i = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -1383,24 +1383,24 @@ const Run = {
     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$h.log(name, duration, 'ms');
+        R$1.idMap[id] = R$1.nameMap[id] = R$1.nameToIdMap[name] = undefined;
+        debug$i.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 = {
@@ -1421,18 +1421,18 @@ const Plugin = {
 };
 setTimeout(() => check.forEach(name => Plugin.has(name, true)));
 
-const debug$g = Debug.get('UICreator');
+const debug$h = Debug.get('UICreator');
 const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
         if (list$3[tag])
-            debug$g.repeat(tag);
+            debug$h.repeat(tag);
         list$3[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
         if (!list$3[tag])
-            debug$g.error('not register ' + tag);
+            debug$h.error('not register ' + tag);
         const ui = new list$3[tag](data);
         if (x !== undefined) {
             ui.x = x;
@@ -1448,7 +1448,7 @@ const UICreator = {
 };
 const { list: list$3 } = UICreator;
 
-const debug$f = Debug.get('EventCreator');
+const debug$g = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1456,7 +1456,7 @@ const EventCreator = {
         Object.keys(Event).forEach(key => {
             name = Event[key];
             if (typeof name === 'string')
-                nameList[name] && debug$f.repeat(name), nameList[name] = Event;
+                nameList[name] && debug$g.repeat(name), nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -1533,10 +1533,10 @@ const DataHelper = {
         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;
             }
@@ -1660,7 +1660,7 @@ class LeafData {
         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) {
@@ -1773,7 +1773,7 @@ let Canvas$1 = class Canvas {
     }
     setTransform(_a, _b, _c, _d, _e, _f) { }
     resetTransform() { }
-    getTransform() { return undefined; }
+    getTransform() { return void 0; }
     save() { }
     restore() { }
     transform(a, b, c, d, e, f) {
@@ -1830,12 +1830,12 @@ let Canvas$1 = class Canvas {
     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;
@@ -1843,79 +1843,79 @@ let Canvas$1 = class Canvas {
 };
 __decorate([
     contextAttr('imageSmoothingEnabled')
-], Canvas$1.prototype, "smooth", undefined);
+], Canvas$1.prototype, "smooth", void 0);
 __decorate([
     contextAttr('imageSmoothingQuality')
-], Canvas$1.prototype, "smoothLevel", undefined);
+], Canvas$1.prototype, "smoothLevel", void 0);
 __decorate([
     contextAttr('globalAlpha')
-], Canvas$1.prototype, "opacity", undefined);
+], Canvas$1.prototype, "opacity", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fillStyle", undefined);
+], Canvas$1.prototype, "fillStyle", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "strokeStyle", undefined);
+], Canvas$1.prototype, "strokeStyle", void 0);
 __decorate([
     contextAttr('lineWidth')
-], Canvas$1.prototype, "strokeWidth", undefined);
+], Canvas$1.prototype, "strokeWidth", void 0);
 __decorate([
     contextAttr('lineCap')
-], Canvas$1.prototype, "strokeCap", undefined);
+], Canvas$1.prototype, "strokeCap", void 0);
 __decorate([
     contextAttr('lineJoin')
-], Canvas$1.prototype, "strokeJoin", undefined);
+], Canvas$1.prototype, "strokeJoin", void 0);
 __decorate([
     contextAttr('lineDashOffset')
-], Canvas$1.prototype, "dashOffset", undefined);
+], Canvas$1.prototype, "dashOffset", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "miterLimit", undefined);
+], Canvas$1.prototype, "miterLimit", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowBlur", undefined);
+], Canvas$1.prototype, "shadowBlur", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowColor", undefined);
+], Canvas$1.prototype, "shadowColor", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowOffsetX", undefined);
+], Canvas$1.prototype, "shadowOffsetX", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowOffsetY", undefined);
+], Canvas$1.prototype, "shadowOffsetY", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "filter", undefined);
+], Canvas$1.prototype, "filter", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "font", undefined);
+], Canvas$1.prototype, "font", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fontKerning", undefined);
+], Canvas$1.prototype, "fontKerning", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fontStretch", undefined);
+], Canvas$1.prototype, "fontStretch", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fontVariantCaps", undefined);
+], Canvas$1.prototype, "fontVariantCaps", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "textAlign", undefined);
+], Canvas$1.prototype, "textAlign", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "textBaseline", undefined);
+], Canvas$1.prototype, "textBaseline", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "textRendering", undefined);
+], Canvas$1.prototype, "textRendering", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "wordSpacing", undefined);
+], Canvas$1.prototype, "wordSpacing", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "letterSpacing", undefined);
+], Canvas$1.prototype, "letterSpacing", void 0);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "direction", undefined);
+], Canvas$1.prototype, "direction", void 0);
 __decorate([
     contextMethod()
 ], Canvas$1.prototype, "setTransform", null);
@@ -2612,7 +2612,7 @@ const EllipseHelper = {
 const { M: M$7, m, L: L$8, l, H, h, V, v, C: C$7, c, S, s, Q: Q$6, q, T, t, A, a, Z: Z$6, z, N: N$5, D: D$5, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5 } = PathCommandMap;
 const { rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
 const { ellipticalArc } = EllipseHelper;
-const debug$e = Debug.get('PathConvert');
+const debug$f = Debug.get('PathConvert');
 const setEndPoint$1 = {};
 const PathConvert = {
     current: { dot: 0 },
@@ -2853,7 +2853,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$e.error(`command: ${command} [index:${i}]`, old);
+                    debug$f.error(`command: ${command} [index:${i}]`, old);
                     return data;
             }
             lastCommand = command;
@@ -2962,12 +2962,10 @@ const PathCommandDataHelper = {
     },
     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$4, x1, y1, x2, y2, min(radius, abs$4(maxRadius)));
-        }
-        else {
-            data.push(U$4, x1, y1, x2, y2, radius);
+            const d = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2);
+            radius = min(radius, min(d / 2, d / 2 * abs$4(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
         }
+        data.push(U$4, 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);
@@ -3078,7 +3076,7 @@ class PathCreator {
 }
 
 const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$4, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3 } = PathCommandMap;
-const debug$d = Debug.get('PathDrawer');
+const debug$e = Debug.get('PathDrawer');
 const PathDrawer = {
     drawPathByData(drawer, data) {
         if (!data)
@@ -3141,7 +3139,7 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$d.error(`command: ${command} [index:${i}]`, data);
+                    debug$e.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3151,7 +3149,7 @@ const PathDrawer = {
 const { M: M$4, L: L$5, C: C$4, Q: Q$3, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$3, P: P$2, U: U$2 } = PathCommandMap;
 const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
 const { addPointBounds, copy: copy$b, addPoint: addPoint$1, setPoint: setPoint$3, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-const debug$c = Debug.get('PathBounds');
+const debug$d = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
 const setPointBounds = {};
@@ -3259,7 +3257,7 @@ const PathBounds = {
                     i += 6;
                     break;
                 default:
-                    debug$c.error(`command: ${command} [index:${i}]`, data);
+                    debug$d.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3375,7 +3373,7 @@ const FileHelper = {
 const F$2 = FileHelper;
 F$2.opacityTypes.forEach(type => F$2.upperCaseTypeMap[type] = type.toUpperCase());
 
-const debug$b = Debug.get('TaskProcessor');
+const debug$c = Debug.get('TaskProcessor');
 class TaskItem {
     constructor(task) {
         this.parallel = true;
@@ -3384,13 +3382,13 @@ class TaskItem {
         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$b.error(error);
+                debug$c.error(error);
             }
         });
     }
@@ -3623,18 +3621,52 @@ class TaskProcessor {
     }
 }
 
-const ImageManager = {
+const debug$b = Debug.get('Resource');
+const Resource = {
+    tasker: new TaskProcessor(),
     map: {},
+    get isComplete() { return R.tasker.isComplete; },
+    set(key, value) {
+        if (R.map[key])
+            debug$b.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$1.tasker.isComplete; },
     get(config) {
-        let image = I$1.map[config.url];
-        if (!image) {
-            image = Creator.image(config);
-            I$1.map[config.url] = image;
-        }
+        let image = Resource.get(config.url);
+        if (!image)
+            Resource.set(config.url, image = Creator.image(config));
         image.use++;
         return image;
     },
@@ -3648,7 +3680,7 @@ const ImageManager = {
         if (list.length > 100) {
             list.forEach(image => {
                 if (!image.use && image.url) {
-                    delete I$1.map[image.url];
+                    Resource.remove(image.url);
                     image.destroy();
                 }
             });
@@ -3675,7 +3707,6 @@ const ImageManager = {
         return false;
     },
     destroy() {
-        I$1.map = {};
         I$1.recycledList = [];
     }
 };
@@ -3689,21 +3720,19 @@ class LeaferImage {
         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);
                 });
@@ -3721,6 +3750,13 @@ class LeaferImage {
         }
         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) => {
@@ -3739,6 +3775,9 @@ class LeaferImage {
         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);
@@ -5219,7 +5258,7 @@ const LeafRender = {
                 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);
                 }
@@ -6012,7 +6051,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.4.0";
+const version = "1.4.1";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6357,7 +6396,7 @@ class Layouter {
     }
     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;
@@ -6822,9 +6861,10 @@ class Selector {
         this.finder = Creator.finder && Creator.finder();
     }
     getByPoint(hitPoint, hitRadius, options) {
-        if (Platform.backgrounder && this.target)
-            this.target.updateLayout();
-        return this.picker.getByPoint(hitPoint, hitRadius, options);
+        const { target, picker } = this;
+        if (Platform.backgrounder)
+            target && target.updateLayout();
+        return picker.getByPoint(hitPoint, hitRadius, options);
     }
     getBy(condition, branch, one, options) {
         return this.finder ? this.finder.getBy(condition, branch, one, options) : Plugin.need('find');
@@ -6882,9 +6922,7 @@ const TextConvert = {};
 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 = {};
@@ -6892,16 +6930,15 @@ const Paint = {};
 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 = {};
@@ -7008,24 +7045,13 @@ class UIData extends LeafData {
         }
     }
     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;
@@ -7036,6 +7062,17 @@ class UIData extends LeafData {
         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 {
 }
@@ -7158,11 +7195,13 @@ const UIBounds = {
     },
     __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));
@@ -7177,8 +7216,8 @@ const UIRender = {
     __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;
@@ -7192,7 +7231,7 @@ const UIRender = {
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
     },
-    __draw(canvas, options) {
+    __draw(canvas, options, originCanvas) {
         const data = this.__;
         if (data.__complex) {
             if (data.__needComputePaint)
@@ -7202,7 +7241,7 @@ const UIRender = {
             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)
@@ -7213,6 +7252,8 @@ const UIRender = {
                     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();
@@ -7432,199 +7473,202 @@ let UI = UI_1 = class UI extends Leaf {
 };
 __decorate([
     dataProcessor(UIData)
-], UI.prototype, "__", undefined);
+], UI.prototype, "__", void 0);
 __decorate([
     zoomLayerType()
-], UI.prototype, "zoomLayer", undefined);
+], UI.prototype, "zoomLayer", void 0);
 __decorate([
     dataType('')
-], UI.prototype, "id", undefined);
+], UI.prototype, "id", void 0);
 __decorate([
     dataType('')
-], UI.prototype, "name", undefined);
+], UI.prototype, "name", void 0);
 __decorate([
     dataType('')
-], UI.prototype, "className", undefined);
+], UI.prototype, "className", void 0);
 __decorate([
     surfaceType('pass-through')
-], UI.prototype, "blendMode", undefined);
+], UI.prototype, "blendMode", void 0);
 __decorate([
     opacityType(1)
-], UI.prototype, "opacity", undefined);
+], UI.prototype, "opacity", void 0);
 __decorate([
     visibleType(true)
-], UI.prototype, "visible", undefined);
+], UI.prototype, "visible", void 0);
 __decorate([
     surfaceType(false)
-], UI.prototype, "locked", undefined);
+], UI.prototype, "locked", void 0);
 __decorate([
     sortType(0)
-], UI.prototype, "zIndex", undefined);
+], UI.prototype, "zIndex", void 0);
 __decorate([
     maskType(false)
-], UI.prototype, "mask", undefined);
+], UI.prototype, "mask", void 0);
 __decorate([
     eraserType(false)
-], UI.prototype, "eraser", undefined);
+], UI.prototype, "eraser", void 0);
 __decorate([
     positionType(0, true)
-], UI.prototype, "x", undefined);
+], UI.prototype, "x", void 0);
 __decorate([
     positionType(0, true)
-], UI.prototype, "y", undefined);
+], UI.prototype, "y", void 0);
 __decorate([
     boundsType(100, true)
-], UI.prototype, "width", undefined);
+], UI.prototype, "width", void 0);
 __decorate([
     boundsType(100, true)
-], UI.prototype, "height", undefined);
+], UI.prototype, "height", void 0);
 __decorate([
     scaleType(1, true)
-], UI.prototype, "scaleX", undefined);
+], UI.prototype, "scaleX", void 0);
 __decorate([
     scaleType(1, true)
-], UI.prototype, "scaleY", undefined);
+], UI.prototype, "scaleY", void 0);
 __decorate([
     rotationType(0, true)
-], UI.prototype, "rotation", undefined);
+], UI.prototype, "rotation", void 0);
 __decorate([
     rotationType(0, true)
-], UI.prototype, "skewX", undefined);
+], UI.prototype, "skewX", void 0);
 __decorate([
     rotationType(0, true)
-], UI.prototype, "skewY", undefined);
+], UI.prototype, "skewY", void 0);
 __decorate([
     positionType(0, true)
-], UI.prototype, "offsetX", undefined);
+], UI.prototype, "offsetX", void 0);
 __decorate([
     positionType(0, true)
-], UI.prototype, "offsetY", undefined);
+], UI.prototype, "offsetY", void 0);
 __decorate([
     positionType(0, true)
-], UI.prototype, "scrollX", undefined);
+], UI.prototype, "scrollX", void 0);
 __decorate([
     positionType(0, true)
-], UI.prototype, "scrollY", undefined);
+], UI.prototype, "scrollY", void 0);
 __decorate([
     autoLayoutType()
-], UI.prototype, "origin", undefined);
+], UI.prototype, "origin", void 0);
 __decorate([
     autoLayoutType()
-], UI.prototype, "around", undefined);
+], UI.prototype, "around", void 0);
 __decorate([
     dataType(false)
-], UI.prototype, "lazy", undefined);
+], UI.prototype, "lazy", void 0);
 __decorate([
     naturalBoundsType(1)
-], UI.prototype, "pixelRatio", undefined);
+], UI.prototype, "pixelRatio", void 0);
 __decorate([
     pathInputType()
-], UI.prototype, "path", undefined);
+], UI.prototype, "path", void 0);
 __decorate([
     pathType()
-], UI.prototype, "windingRule", undefined);
+], UI.prototype, "windingRule", void 0);
 __decorate([
     pathType(true)
-], UI.prototype, "closed", undefined);
+], UI.prototype, "closed", void 0);
 __decorate([
     boundsType(0)
-], UI.prototype, "padding", undefined);
+], UI.prototype, "padding", void 0);
 __decorate([
     boundsType(false)
-], UI.prototype, "lockRatio", undefined);
+], UI.prototype, "lockRatio", void 0);
 __decorate([
     boundsType()
-], UI.prototype, "widthRange", undefined);
+], UI.prototype, "widthRange", void 0);
 __decorate([
     boundsType()
-], UI.prototype, "heightRange", undefined);
+], UI.prototype, "heightRange", void 0);
 __decorate([
     dataType(false)
-], UI.prototype, "draggable", undefined);
+], UI.prototype, "draggable", void 0);
 __decorate([
     dataType()
-], UI.prototype, "dragBounds", undefined);
+], UI.prototype, "dragBounds", void 0);
 __decorate([
     dataType(false)
-], UI.prototype, "editable", undefined);
+], UI.prototype, "editable", void 0);
 __decorate([
     hitType(true)
-], UI.prototype, "hittable", undefined);
+], UI.prototype, "hittable", void 0);
 __decorate([
     hitType('path')
-], UI.prototype, "hitFill", undefined);
+], UI.prototype, "hitFill", void 0);
 __decorate([
     strokeType('path')
-], UI.prototype, "hitStroke", undefined);
+], UI.prototype, "hitStroke", void 0);
 __decorate([
     hitType(false)
-], UI.prototype, "hitBox", undefined);
+], UI.prototype, "hitBox", void 0);
 __decorate([
     hitType(true)
-], UI.prototype, "hitChildren", undefined);
+], UI.prototype, "hitChildren", void 0);
 __decorate([
     hitType(true)
-], UI.prototype, "hitSelf", undefined);
+], UI.prototype, "hitSelf", void 0);
 __decorate([
     hitType()
-], UI.prototype, "hitRadius", undefined);
+], UI.prototype, "hitRadius", void 0);
 __decorate([
     cursorType('')
-], UI.prototype, "cursor", undefined);
+], UI.prototype, "cursor", void 0);
 __decorate([
     surfaceType()
-], UI.prototype, "fill", undefined);
+], UI.prototype, "fill", void 0);
 __decorate([
     strokeType()
-], UI.prototype, "stroke", undefined);
+], UI.prototype, "stroke", void 0);
 __decorate([
     strokeType('inside')
-], UI.prototype, "strokeAlign", undefined);
+], UI.prototype, "strokeAlign", void 0);
 __decorate([
     strokeType(1)
-], UI.prototype, "strokeWidth", undefined);
+], UI.prototype, "strokeWidth", void 0);
 __decorate([
     strokeType(false)
-], UI.prototype, "strokeWidthFixed", undefined);
+], UI.prototype, "strokeWidthFixed", void 0);
 __decorate([
     strokeType('none')
-], UI.prototype, "strokeCap", undefined);
+], UI.prototype, "strokeCap", void 0);
 __decorate([
     strokeType('miter')
-], UI.prototype, "strokeJoin", undefined);
+], UI.prototype, "strokeJoin", void 0);
 __decorate([
     strokeType()
-], UI.prototype, "dashPattern", undefined);
+], UI.prototype, "dashPattern", void 0);
 __decorate([
     strokeType()
-], UI.prototype, "dashOffset", undefined);
+], UI.prototype, "dashOffset", void 0);
 __decorate([
     strokeType(10)
-], UI.prototype, "miterLimit", undefined);
+], UI.prototype, "miterLimit", void 0);
 __decorate([
     pathType(0)
-], UI.prototype, "cornerRadius", undefined);
+], UI.prototype, "cornerRadius", void 0);
 __decorate([
     pathType()
-], UI.prototype, "cornerSmoothing", undefined);
+], UI.prototype, "cornerSmoothing", void 0);
 __decorate([
     effectType()
-], UI.prototype, "shadow", undefined);
+], UI.prototype, "shadow", void 0);
 __decorate([
     effectType()
-], UI.prototype, "innerShadow", undefined);
+], UI.prototype, "innerShadow", void 0);
 __decorate([
     effectType()
-], UI.prototype, "blur", undefined);
+], UI.prototype, "blur", void 0);
 __decorate([
     effectType()
-], UI.prototype, "backgroundBlur", undefined);
+], UI.prototype, "backgroundBlur", void 0);
 __decorate([
     effectType()
-], UI.prototype, "grayscale", undefined);
+], UI.prototype, "grayscale", void 0);
+__decorate([
+    effectType()
+], UI.prototype, "filter", void 0);
 __decorate([
     dataType({})
-], UI.prototype, "data", undefined);
+], UI.prototype, "data", void 0);
 __decorate([
     rewrite(Leaf.prototype.reset)
 ], UI.prototype, "reset", null);
@@ -7685,7 +7729,7 @@ let Group = class Group extends UI {
 };
 __decorate([
     dataProcessor(GroupData)
-], Group.prototype, "__", undefined);
+], Group.prototype, "__", void 0);
 Group = __decorate([
     useModule(Branch),
     registerUI()
@@ -7698,7 +7742,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     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 }; }
@@ -7909,13 +7953,13 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         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 });
         }
@@ -7993,7 +8037,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             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 }; }
@@ -8058,10 +8102,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
 Leafer.list = new LeafList();
 __decorate([
     dataProcessor(LeaferData)
-], Leafer.prototype, "__", undefined);
+], Leafer.prototype, "__", void 0);
 __decorate([
     boundsType()
-], Leafer.prototype, "pixelRatio", undefined);
+], Leafer.prototype, "pixelRatio", void 0);
 Leafer = Leafer_1 = __decorate([
     registerUI()
 ], Leafer);
@@ -8074,7 +8118,7 @@ let Rect = class Rect extends UI {
 };
 __decorate([
     dataProcessor(RectData)
-], Rect.prototype, "__", undefined);
+], Rect.prototype, "__", void 0);
 Rect = __decorate([
     useModule(RectRender),
     rewriteAble(),
@@ -8165,13 +8209,13 @@ let Box = class Box extends Group {
 };
 __decorate([
     dataProcessor(BoxData)
-], Box.prototype, "__", undefined);
+], Box.prototype, "__", void 0);
 __decorate([
     dataType(false)
-], Box.prototype, "resizeChildren", undefined);
+], Box.prototype, "resizeChildren", void 0);
 __decorate([
     affectRenderBoundsType('show')
-], Box.prototype, "overflow", undefined);
+], Box.prototype, "overflow", void 0);
 __decorate([
     rewrite(rect$1.__updateStrokeSpread)
 ], Box.prototype, "__updateStrokeSpread", null);
@@ -8210,13 +8254,13 @@ let Frame = class Frame extends Box {
 };
 __decorate([
     dataProcessor(FrameData)
-], Frame.prototype, "__", undefined);
+], Frame.prototype, "__", void 0);
 __decorate([
     surfaceType('#FFFFFF')
-], Frame.prototype, "fill", undefined);
+], Frame.prototype, "fill", void 0);
 __decorate([
     affectRenderBoundsType('hide')
-], Frame.prototype, "overflow", undefined);
+], Frame.prototype, "overflow", void 0);
 Frame = __decorate([
     registerUI()
 ], Frame);
@@ -8263,16 +8307,16 @@ let Ellipse = class Ellipse extends UI {
 };
 __decorate([
     dataProcessor(EllipseData)
-], Ellipse.prototype, "__", undefined);
+], Ellipse.prototype, "__", void 0);
 __decorate([
     pathType(0)
-], Ellipse.prototype, "innerRadius", undefined);
+], Ellipse.prototype, "innerRadius", void 0);
 __decorate([
     pathType(0)
-], Ellipse.prototype, "startAngle", undefined);
+], Ellipse.prototype, "startAngle", void 0);
 __decorate([
     pathType(0)
-], Ellipse.prototype, "endAngle", undefined);
+], Ellipse.prototype, "endAngle", void 0);
 Ellipse = __decorate([
     registerUI()
 ], Ellipse);
@@ -8331,22 +8375,22 @@ let Line = class Line extends UI {
 };
 __decorate([
     dataProcessor(LineData)
-], Line.prototype, "__", undefined);
+], Line.prototype, "__", void 0);
 __decorate([
     affectStrokeBoundsType('center')
-], Line.prototype, "strokeAlign", undefined);
+], Line.prototype, "strokeAlign", void 0);
 __decorate([
     boundsType(0)
-], Line.prototype, "height", undefined);
+], Line.prototype, "height", void 0);
 __decorate([
     pathType()
-], Line.prototype, "points", undefined);
+], Line.prototype, "points", void 0);
 __decorate([
     pathType(0)
-], Line.prototype, "curve", undefined);
+], Line.prototype, "curve", void 0);
 __decorate([
     pathType(false)
-], Line.prototype, "closed", undefined);
+], Line.prototype, "closed", void 0);
 Line = __decorate([
     registerUI()
 ], Line);
@@ -8379,16 +8423,16 @@ let Polygon = class Polygon extends UI {
 };
 __decorate([
     dataProcessor(PolygonData)
-], Polygon.prototype, "__", undefined);
+], Polygon.prototype, "__", void 0);
 __decorate([
     pathType(3)
-], Polygon.prototype, "sides", undefined);
+], Polygon.prototype, "sides", void 0);
 __decorate([
     pathType()
-], Polygon.prototype, "points", undefined);
+], Polygon.prototype, "points", void 0);
 __decorate([
     pathType(0)
-], Polygon.prototype, "curve", undefined);
+], Polygon.prototype, "curve", void 0);
 __decorate([
     rewrite(line.__updateRenderPath)
 ], Polygon.prototype, "__updateRenderPath", null);
@@ -8420,13 +8464,13 @@ let Star = class Star extends UI {
 };
 __decorate([
     dataProcessor(StarData)
-], Star.prototype, "__", undefined);
+], Star.prototype, "__", void 0);
 __decorate([
     pathType(5)
-], Star.prototype, "corners", undefined);
+], Star.prototype, "corners", void 0);
 __decorate([
     pathType(0.382)
-], Star.prototype, "innerRadius", undefined);
+], Star.prototype, "innerRadius", void 0);
 Star = __decorate([
     registerUI()
 ], Star);
@@ -8448,10 +8492,10 @@ let Image = class Image extends Rect {
 };
 __decorate([
     dataProcessor(ImageData)
-], Image.prototype, "__", undefined);
+], Image.prototype, "__", void 0);
 __decorate([
     boundsType('')
-], Image.prototype, "url", undefined);
+], Image.prototype, "url", void 0);
 Image = __decorate([
     registerUI()
 ], Image);
@@ -8514,25 +8558,25 @@ let Canvas = class Canvas extends Rect {
 };
 __decorate([
     dataProcessor(CanvasData)
-], Canvas.prototype, "__", undefined);
+], Canvas.prototype, "__", void 0);
 __decorate([
     resizeType(100)
-], Canvas.prototype, "width", undefined);
+], Canvas.prototype, "width", void 0);
 __decorate([
     resizeType(100)
-], Canvas.prototype, "height", undefined);
+], Canvas.prototype, "height", void 0);
 __decorate([
     resizeType(1)
-], Canvas.prototype, "pixelRatio", undefined);
+], Canvas.prototype, "pixelRatio", void 0);
 __decorate([
     resizeType(true)
-], Canvas.prototype, "smooth", undefined);
+], Canvas.prototype, "smooth", void 0);
 __decorate([
     dataType(false)
-], Canvas.prototype, "safeResize", undefined);
+], Canvas.prototype, "safeResize", void 0);
 __decorate([
     resizeType()
-], Canvas.prototype, "contextSettings", undefined);
+], Canvas.prototype, "contextSettings", void 0);
 Canvas = __decorate([
     registerUI()
 ], Canvas);
@@ -8623,76 +8667,76 @@ let Text = class Text extends UI {
 };
 __decorate([
     dataProcessor(TextData)
-], Text.prototype, "__", undefined);
+], Text.prototype, "__", void 0);
 __decorate([
     boundsType(0)
-], Text.prototype, "width", undefined);
+], Text.prototype, "width", void 0);
 __decorate([
     boundsType(0)
-], Text.prototype, "height", undefined);
+], Text.prototype, "height", void 0);
 __decorate([
     dataType(false)
-], Text.prototype, "resizeFontSize", undefined);
+], Text.prototype, "resizeFontSize", void 0);
 __decorate([
     surfaceType('#000000')
-], Text.prototype, "fill", undefined);
+], Text.prototype, "fill", void 0);
 __decorate([
     affectStrokeBoundsType('outside')
-], Text.prototype, "strokeAlign", undefined);
+], Text.prototype, "strokeAlign", void 0);
 __decorate([
     hitType('all')
-], Text.prototype, "hitFill", undefined);
+], Text.prototype, "hitFill", void 0);
 __decorate([
     boundsType('')
-], Text.prototype, "text", undefined);
+], Text.prototype, "text", void 0);
 __decorate([
     boundsType('caption')
-], Text.prototype, "fontFamily", undefined);
+], Text.prototype, "fontFamily", void 0);
 __decorate([
     boundsType(12)
-], Text.prototype, "fontSize", undefined);
+], Text.prototype, "fontSize", void 0);
 __decorate([
     boundsType('normal')
-], Text.prototype, "fontWeight", undefined);
+], Text.prototype, "fontWeight", void 0);
 __decorate([
     boundsType(false)
-], Text.prototype, "italic", undefined);
+], Text.prototype, "italic", void 0);
 __decorate([
     boundsType('none')
-], Text.prototype, "textCase", undefined);
+], Text.prototype, "textCase", void 0);
 __decorate([
     boundsType('none')
-], Text.prototype, "textDecoration", undefined);
+], Text.prototype, "textDecoration", void 0);
 __decorate([
     boundsType(0)
-], Text.prototype, "letterSpacing", undefined);
+], Text.prototype, "letterSpacing", void 0);
 __decorate([
     boundsType({ type: 'percent', value: 1.5 })
-], Text.prototype, "lineHeight", undefined);
+], Text.prototype, "lineHeight", void 0);
 __decorate([
     boundsType(0)
-], Text.prototype, "paraIndent", undefined);
+], Text.prototype, "paraIndent", void 0);
 __decorate([
     boundsType(0)
-], Text.prototype, "paraSpacing", undefined);
+], Text.prototype, "paraSpacing", void 0);
 __decorate([
     boundsType('x')
-], Text.prototype, "writingMode", undefined);
+], Text.prototype, "writingMode", void 0);
 __decorate([
     boundsType('left')
-], Text.prototype, "textAlign", undefined);
+], Text.prototype, "textAlign", void 0);
 __decorate([
     boundsType('top')
-], Text.prototype, "verticalAlign", undefined);
+], Text.prototype, "verticalAlign", void 0);
 __decorate([
     boundsType(true)
-], Text.prototype, "autoSizeAlign", undefined);
+], Text.prototype, "autoSizeAlign", void 0);
 __decorate([
     boundsType('normal')
-], Text.prototype, "textWrap", undefined);
+], Text.prototype, "textWrap", void 0);
 __decorate([
     boundsType('show')
-], Text.prototype, "textOverflow", undefined);
+], Text.prototype, "textOverflow", void 0);
 Text = __decorate([
     registerUI()
 ], Text);
@@ -8705,10 +8749,10 @@ let Path = class Path extends UI {
 };
 __decorate([
     dataProcessor(PathData)
-], Path.prototype, "__", undefined);
+], Path.prototype, "__", void 0);
 __decorate([
     affectStrokeBoundsType('center')
-], Path.prototype, "strokeAlign", undefined);
+], Path.prototype, "strokeAlign", void 0);
 Path = __decorate([
     registerUI()
 ], Path);
@@ -8747,10 +8791,10 @@ let Pen = class Pen extends Group {
 };
 __decorate([
     dataProcessor(PenData)
-], Pen.prototype, "__", undefined);
+], Pen.prototype, "__", void 0);
 __decorate([
     penPathType()
-], Pen.prototype, "path", undefined);
+], Pen.prototype, "path", void 0);
 Pen = __decorate([
     useModule(PathCreator, ['set', 'path', 'paint']),
     registerUI()
@@ -8986,7 +9030,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
         PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
         if (dragBounds)
-            this.getMoveInDragBounds(leaf.__local, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
+            this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
         if (draggable === 'x')
             move.y = 0;
         if (draggable === 'y')
@@ -9689,7 +9733,9 @@ class InteractionBase {
     }
     findPath(data, options) {
         const { hitRadius, through } = this.p;
-        const { bottomList } = this;
+        const { bottomList, target } = this;
+        if (!Platform.backgrounder && !data.origin)
+            target && target.updateLayout();
         const find = this.selector.getByPoint(data, hitRadius, Object.assign({ bottomList, name: data.type }, (options || { through })));
         if (find.throughPath)
             data.throughPath = find.throughPath;
@@ -9934,9 +9980,9 @@ leaf$1.__hitWorld = function (point) {
     }
     return this.__hit(inner);
 };
-leaf$1.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitFill(inner, this.__.windingRule); };
-leaf$1.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitStroke(inner, strokeWidth); };
-leaf$1.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+leaf$1.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
+leaf$1.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
+leaf$1.__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$1.__drawHitPath = function (canvas) { if (canvas)
     this.__drawRenderPath(canvas); };
 
@@ -10024,8 +10070,8 @@ function getSelector$1(ui) {
     return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
 }
 Group.prototype.pick = function (hitPoint, options) {
-    this.leafer || this.updateLayout();
     options || (options = emptyData);
+    this.updateLayout();
     return getSelector$1(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
 };
 
@@ -10409,7 +10455,7 @@ function getPatternData(paint, box, image) {
         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;
@@ -10472,6 +10518,8 @@ function getPatternData(paint, box, image) {
     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;
@@ -10574,7 +10622,7 @@ function createPattern(ui, paint, pixelRatio) {
         scaleX = abs$3(scaleX);
         scaleY = abs$3(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$4(imageMatrix, transform);
@@ -10617,7 +10665,7 @@ function createPattern(ui, paint, pixelRatio) {
             }
             scale$2(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;
@@ -10661,7 +10709,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
                 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;
         }
@@ -10671,7 +10719,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
             }
             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);
@@ -11672,7 +11720,7 @@ class Stroker extends UI {
 }
 __decorate([
     targetAttr(onTarget$1)
-], Stroker.prototype, "target", undefined);
+], Stroker.prototype, "target", void 0);
 function onTarget$1(stroker) {
     const value = stroker.target;
     stroker.list = value ? (value instanceof Array ? value : [value]) : [];
@@ -11951,7 +11999,7 @@ const { within } = MathHelper;
 const EditDataHelper = {
     getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
         let align, origin = {}, scaleX = 1, scaleY = 1;
-        const { boxBounds, widthRange, heightRange } = element;
+        const { boxBounds, widthRange, heightRange, dragBounds } = element;
         const { width, height } = startBounds;
         if (around) {
             totalMove.x *= 2;
@@ -12039,6 +12087,17 @@ const EditDataHelper = {
             if (scaleY < 0)
                 scaleY = 1 / boxBounds.height / worldTransform.scaleY;
         }
+        toPoint(around || align, boxBounds, origin, true);
+        if (dragBounds) {
+            const allowBounds = dragBounds === 'parent' ? element.parent.boxBounds : dragBounds;
+            const localBounds = new Bounds(element.__localBoxBounds);
+            localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
+            if (!BoundsHelper.includes(allowBounds, localBounds)) {
+                const realBounds = localBounds.getIntersect(allowBounds);
+                scaleX *= realBounds.width / localBounds.width;
+                scaleY *= realBounds.height / localBounds.height;
+            }
+        }
         if (widthRange) {
             const nowWidth = boxBounds.width * element.scaleX;
             scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
@@ -12047,7 +12106,6 @@ const EditDataHelper = {
             const nowHeight = boxBounds.height * element.scaleY;
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
         }
-        toPoint(around || align, boxBounds, origin, true);
         return { origin, scaleX, scaleY, direction, lockRatio, around };
     },
     getRotateData(bounds, direction, current, last, around) {
@@ -12951,9 +13009,9 @@ class Editor extends Group {
         this.skewOf(origin, skewX, skewY);
     }
     move(x, y = 0) {
+        const { element } = this;
         if (!this.checkTransform('moveable'))
             return;
-        const { element } = this;
         const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
         if (this.multiple)
             element.safeChange(() => element.move(x, y));
@@ -13161,10 +13219,10 @@ class Editor extends Group {
 }
 __decorate([
     targetAttr(onHover)
-], Editor.prototype, "hoverTarget", undefined);
+], Editor.prototype, "hoverTarget", void 0);
 __decorate([
     targetAttr(onTarget)
-], Editor.prototype, "target", undefined);
+], Editor.prototype, "target", void 0);
 
 class InnerEditor {
     static registerInnerEditor() {
@@ -14018,7 +14076,8 @@ function getFixBounds(bounds, scaleBounds) {
 }
 
 Plugin.add('view');
-Leafer.prototype.zoom = function (zoomType, padding, fixed) {
+Leafer.prototype.zoom = function (zoomType, padding, fixed, transition) {
+    this.killAnimate();
     const { zoomLayer } = this;
     const limitBounds = this.canvas.bounds.clone().shrink(padding !== undefined ? padding : 30), bounds = new Bounds();
     const center = { x: limitBounds.x + limitBounds.width / 2, y: limitBounds.y + limitBounds.height / 2 };
@@ -14049,10 +14108,12 @@ Leafer.prototype.zoom = function (zoomType, padding, fixed) {
         changeScale = zoomType / scaleX;
     }
     if (changeScale) {
-        if (changeScale !== 1)
-            zoomLayer.scaleOfWorld(center, this.getValidScale(changeScale));
+        changeScale = this.getValidScale(changeScale);
+        zoomLayer.scaleOfWorld(center, changeScale, changeScale, false, transition);
     }
     else if (typeof zoomType === 'object') {
+        const { x, y, scaleX, scaleY } = zoomLayer;
+        const data = { x, y, scaleX, scaleY };
         const isArray = zoomType instanceof Array;
         if (isArray || zoomType.tag) {
             const list = isArray ? zoomType : [zoomType];
@@ -14062,21 +14123,25 @@ Leafer.prototype.zoom = function (zoomType, padding, fixed) {
             const innerBounds = getFixBounds(zoomType, limitBounds);
             bounds.set(zoomLayer.getWorldBounds(innerBounds));
         }
-        const { x, y, width, height } = bounds;
-        let moveX = limitBounds.x - x, moveY = limitBounds.y - y;
+        const { width, height } = bounds;
+        let moveX = limitBounds.x - bounds.x, moveY = limitBounds.y - bounds.y;
         if (fixed) {
             moveX += Math.max((limitBounds.width - width) / 2, 0);
             moveY += Math.max((limitBounds.height - height) / 2, 0);
         }
         else {
-            const fitScale = this.getValidScale(Math.min(limitBounds.width / width, limitBounds.height / height));
-            moveX += (limitBounds.width - width * fitScale) / 2;
-            moveY += (limitBounds.height - height * fitScale) / 2;
-            zoomLayer.scaleOfWorld(bounds, fitScale);
-            bounds.scaleOf(bounds, fitScale);
-        }
-        zoomLayer.move(moveX, moveY);
-        return bounds.move(moveX, moveY);
+            changeScale = this.getValidScale(Math.min(limitBounds.width / width, limitBounds.height / height));
+            moveX += (limitBounds.width - width * changeScale) / 2;
+            moveY += (limitBounds.height - height * changeScale) / 2;
+            PointHelper.scaleOf(data, bounds, changeScale);
+            bounds.scaleOf(bounds, changeScale);
+            data.scaleX *= changeScale;
+            data.scaleY *= changeScale;
+        }
+        PointHelper.move(data, moveX, moveY);
+        bounds.move(moveX, moveY);
+        zoomLayer.set(data, transition);
+        return bounds;
     }
     return zoomLayer.worldBoxBounds;
 };
@@ -14204,10 +14269,10 @@ let Arrow = class Arrow extends Line {
 };
 __decorate([
     dataProcessor(ArrowData)
-], Arrow.prototype, "__", undefined);
+], Arrow.prototype, "__", void 0);
 __decorate([
     strokeType('angle')
-], Arrow.prototype, "endArrow", undefined);
+], Arrow.prototype, "endArrow", void 0);
 Arrow = __decorate([
     registerUI()
 ], Arrow);
@@ -14646,7 +14711,7 @@ const ExportModule = {
             const { leafer } = leaf;
             if (leafer) {
                 checkLazy(leaf);
-                leafer.waitViewCompleted(() => __awaiter(this, undefined, undefined, function* () {
+                leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                     const { worldTransform, isLeafer, isFrame } = leaf;
                     const { slice, trim, padding, onCanvas } = options;
@@ -14748,7 +14813,7 @@ function addTask(task) {
     if (!tasker)
         tasker = new TaskProcessor();
     return new Promise((resolve) => {
-        tasker.add(() => __awaiter(this, undefined, undefined, function* () { return yield task(resolve); }), { parallel: false });
+        tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
     });
 }
 function checkLazy(leaf) {
@@ -15053,15 +15118,15 @@ let HTMLText = class HTMLText extends Image {
 };
 __decorate([
     dataProcessor(HTMLTextData)
-], HTMLText.prototype, "__", undefined);
+], HTMLText.prototype, "__", void 0);
 __decorate([
     boundsType('')
-], HTMLText.prototype, "text", undefined);
+], HTMLText.prototype, "text", void 0);
 HTMLText = __decorate([
     registerUI()
 ], HTMLText);
 
 Plugin.add('html');
 
-export { AlignHelper, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Finder, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
 //# sourceMappingURL=worker.module.js.map