leafer-ui 1.4.0 → 1.4.1

package/dist/web.module.js

@@ -1374,7 +1374,7 @@ function getNameList(name) {
 }
 const D$4 = Debug;
 
-const debug$f = Debug.get('RunTime');
+const debug$g = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -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$f.log(name, duration, 'ms');
+        R$1.idMap[id] = R$1.nameMap[id] = R$1.nameToIdMap[name] = undefined;
+        debug$g.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$e = Debug.get('UICreator');
+const debug$f = Debug.get('UICreator');
 const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
         if (list$1[tag])
-            debug$e.repeat(tag);
+            debug$f.repeat(tag);
         list$1[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
         if (!list$1[tag])
-            debug$e.error('not register ' + tag);
+            debug$f.error('not register ' + tag);
         const ui = new list$1[tag](data);
         if (x !== undefined) {
             ui.x = x;
@@ -1448,7 +1448,7 @@ const UICreator = {
 };
 const { list: list$1 } = UICreator;
 
-const debug$d = Debug.get('EventCreator');
+const debug$e = 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$d.repeat(name), nameList[name] = Event;
+                nameList[name] && debug$e.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$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$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
 const { ellipticalArc } = EllipseHelper;
-const debug$c = Debug.get('PathConvert');
+const debug$d = Debug.get('PathConvert');
 const setEndPoint$1 = {};
 const PathConvert = {
     current: { dot: 0 },
@@ -2853,7 +2853,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$c.error(`command: ${command} [index:${i}]`, old);
+                    debug$d.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$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);
@@ -3078,7 +3076,7 @@ class PathCreator {
 }
 
 const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
-const debug$b = Debug.get('PathDrawer');
+const debug$c = Debug.get('PathDrawer');
 const PathDrawer = {
     drawPathByData(drawer, data) {
         if (!data)
@@ -3141,7 +3139,7 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$b.error(`command: ${command} [index:${i}]`, data);
+                    debug$c.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3151,7 +3149,7 @@ const PathDrawer = {
 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$8, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
-const debug$a = Debug.get('PathBounds');
+const debug$b = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
 const setPointBounds = {};
@@ -3259,7 +3257,7 @@ const PathBounds = {
                     i += 6;
                     break;
                 default:
-                    debug$a.error(`command: ${command} [index:${i}]`, data);
+                    debug$b.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3375,7 +3373,7 @@ const FileHelper = {
 const F = FileHelper;
 F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
 
-const debug$9 = Debug.get('TaskProcessor');
+const debug$a = 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$9.error(error);
+                debug$a.error(error);
             }
         });
     }
@@ -3623,18 +3621,52 @@ class TaskProcessor {
     }
 }
 
-const ImageManager = {
+const debug$9 = Debug.get('Resource');
+const Resource = {
+    tasker: new TaskProcessor(),
     map: {},
+    get isComplete() { return R.tasker.isComplete; },
+    set(key, value) {
+        if (R.map[key])
+            debug$9.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";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6269,7 +6308,7 @@ if (userAgent.indexOf("Firefox") > -1) {
     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) {
@@ -6538,7 +6577,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;
@@ -7003,9 +7042,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');
@@ -7063,9 +7103,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 = {};
@@ -7073,16 +7111,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 = {};
@@ -7189,24 +7226,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;
@@ -7217,6 +7243,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 {
 }
@@ -7339,11 +7376,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));
@@ -7358,8 +7397,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;
@@ -7373,7 +7412,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)
@@ -7383,7 +7422,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)
@@ -7394,6 +7433,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();
@@ -7613,199 +7654,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", void 0);
 __decorate([
     effectType()
-], UI.prototype, "shadow", undefined);
+], UI.prototype, "innerShadow", void 0);
 __decorate([
     effectType()
-], UI.prototype, "innerShadow", undefined);
+], UI.prototype, "blur", void 0);
 __decorate([
     effectType()
-], UI.prototype, "blur", undefined);
+], UI.prototype, "backgroundBlur", void 0);
 __decorate([
     effectType()
-], UI.prototype, "backgroundBlur", undefined);
+], UI.prototype, "grayscale", void 0);
 __decorate([
     effectType()
-], UI.prototype, "grayscale", undefined);
+], 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);
@@ -7866,7 +7910,7 @@ let Group = class Group extends UI {
 };
 __decorate([
     dataProcessor(GroupData)
-], Group.prototype, "__", undefined);
+], Group.prototype, "__", void 0);
 Group = __decorate([
     useModule(Branch),
     registerUI()
@@ -7879,7 +7923,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 }; }
@@ -8090,13 +8134,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 });
         }
@@ -8174,7 +8218,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 }; }
@@ -8239,10 +8283,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);
@@ -8255,7 +8299,7 @@ let Rect = class Rect extends UI {
 };
 __decorate([
     dataProcessor(RectData)
-], Rect.prototype, "__", undefined);
+], Rect.prototype, "__", void 0);
 Rect = __decorate([
     useModule(RectRender),
     rewriteAble(),
@@ -8346,13 +8390,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);
@@ -8391,13 +8435,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);
@@ -8444,16 +8488,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);
@@ -8512,22 +8556,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);
@@ -8560,16 +8604,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);
@@ -8601,13 +8645,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);
@@ -8629,10 +8673,10 @@ let Image$1 = class Image extends Rect {
 };
 __decorate([
     dataProcessor(ImageData)
-], Image$1.prototype, "__", undefined);
+], Image$1.prototype, "__", void 0);
 __decorate([
     boundsType('')
-], Image$1.prototype, "url", undefined);
+], Image$1.prototype, "url", void 0);
 Image$1 = __decorate([
     registerUI()
 ], Image$1);
@@ -8695,25 +8739,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);
@@ -8804,76 +8848,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);
@@ -8886,10 +8930,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);
@@ -8928,10 +8972,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()
@@ -9167,7 +9211,7 @@ let DragEvent$1 = class DragEvent extends PointerEvent$1 {
         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')
@@ -9870,7 +9914,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;
@@ -10115,9 +10161,9 @@ leaf.__hitWorld = function (point) {
     }
     return this.__hit(inner);
 };
-leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitFill(inner, this.__.windingRule); };
-leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitStroke(inner, strokeWidth); };
-leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
+leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
+leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
 leaf.__drawHitPath = function (canvas) { if (canvas)
     this.__drawRenderPath(canvas); };
 
@@ -10205,8 +10251,8 @@ function getSelector(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(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
 };
 
@@ -10899,7 +10945,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;
@@ -10962,6 +11008,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;
@@ -11064,7 +11112,7 @@ function createPattern(ui, paint, pixelRatio) {
         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);
@@ -11107,7 +11155,7 @@ function createPattern(ui, paint, pixelRatio) {
             }
             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;
@@ -11151,7 +11199,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;
         }
@@ -11161,7 +11209,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);
@@ -12033,5 +12081,5 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, 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, 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, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, 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, 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=web.module.js.map