@leafer-game/worker 1.2.2 → 1.3.1

package/dist/worker.module.js

@@ -765,8 +765,8 @@ const TwoPointBoundsHelper = {
         t.maxY = y > t.maxY ? y : t.maxY;
     },
     addBounds(t, x, y, width, height) {
-        addPoint$4(t, x, y);
-        addPoint$4(t, x + width, y + height);
+        addPoint$3(t, x, y);
+        addPoint$3(t, x + width, y + height);
     },
     copy(t, pb) {
         t.minX = pb.minX;
@@ -787,9 +787,9 @@ const TwoPointBoundsHelper = {
         setBounds.height = t.maxY - t.minY;
     }
 };
-const { addPoint: addPoint$4 } = TwoPointBoundsHelper;
+const { addPoint: addPoint$3 } = TwoPointBoundsHelper;
 
-const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$3, addPoint: addPoint$3, toBounds: toBounds$4 } = TwoPointBoundsHelper;
+const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$3 } = TwoPointBoundsHelper;
 const { toOuterPoint: toOuterPoint$2 } = MatrixHelper;
 const { float: float$1, fourNumber: fourNumber$1 } = MathHelper;
 const { floor: floor$1, ceil: ceil$3 } = Math;
@@ -905,17 +905,17 @@ const BoundsHelper = {
             point.x = t.x;
             point.y = t.y;
             toOuterPoint$2(matrix, point, toPoint$5);
-            setPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+            setPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.x = t.x + t.width;
             toOuterPoint$2(matrix, point, toPoint$5);
-            addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+            addPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.y = t.y + t.height;
             toOuterPoint$2(matrix, point, toPoint$5);
-            addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+            addPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.x = t.x;
             toOuterPoint$2(matrix, point, toPoint$5);
-            addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
-            toBounds$4(tempPointBounds$1, to);
+            addPoint$2(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
+            toBounds$3(tempPointBounds$1, to);
         }
     },
     toInnerOf(t, matrix, to) {
@@ -1005,8 +1005,8 @@ const BoundsHelper = {
             B.reset(t);
     },
     setPoints(t, points) {
-        points.forEach((point, index) => index === 0 ? setPoint$3(tempPointBounds$1, point.x, point.y) : addPoint$3(tempPointBounds$1, point.x, point.y));
-        toBounds$4(tempPointBounds$1, t);
+        points.forEach((point, index) => index === 0 ? setPoint$2(tempPointBounds$1, point.x, point.y) : addPoint$2(tempPointBounds$1, point.x, point.y));
+        toBounds$3(tempPointBounds$1, t);
     },
     setPoint(t, point) {
         B.set(t, point.x, point.y);
@@ -1374,7 +1374,7 @@ function getNameList(name) {
 }
 const D$4 = Debug;
 
-const debug$f = Debug.get('RunTime');
+const debug$e = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -1392,7 +1392,7 @@ const Run = {
         const time = R.idMap[id], name = R.nameMap[id];
         const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
         R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-        debug$f.log(name, duration, 'ms');
+        debug$e.log(name, duration, 'ms');
     },
     endOfName(name, microsecond) {
         const id = R.nameToIdMap[name];
@@ -1402,34 +1402,37 @@ const Run = {
 };
 const R = Run;
 
+const check = [];
 const Plugin = {
     list: {},
-    add(name) {
+    add(name, ...needPlugins) {
         this.list[name] = true;
+        check.push(...needPlugins);
     },
-    check(name, tip) {
+    has(name, tip) {
         const rs = this.list[name];
         if (!rs && tip)
             this.need(name);
         return rs;
     },
     need(name) {
-        console.error('need plugin: @leafer-in/' + name);
+        console.error('need plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
     }
 };
+setTimeout(() => check.forEach(name => Plugin.has(name, true)));
 
-const debug$e = Debug.get('UICreator');
+const debug$d = Debug.get('UICreator');
 const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
         if (list$1[tag])
-            debug$e.repeat(tag);
+            debug$d.repeat(tag);
         list$1[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
         if (!list$1[tag])
-            debug$e.error('not register ' + tag);
+            debug$d.error('not register ' + tag);
         const ui = new list$1[tag](data);
         if (x !== undefined) {
             ui.x = x;
@@ -1445,7 +1448,7 @@ const UICreator = {
 };
 const { list: list$1 } = UICreator;
 
-const debug$d = Debug.get('EventCreator');
+const debug$c = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1453,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$c.repeat(name), nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -2342,7 +2345,7 @@ const RectHelper = {
 };
 
 const { sin: sin$4, cos: cos$4, atan2: atan2$1, ceil: ceil$2, abs: abs$4, PI: PI$3, sqrt: sqrt$3, pow: pow$1 } = Math;
-const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
+const { setPoint: setPoint$1, addPoint: addPoint$1 } = TwoPointBoundsHelper;
 const { set, toNumberPoints } = PointHelper;
 const { M: M$6, L: L$7, C: C$6, Q: Q$4, Z: Z$6 } = PathCommandMap;
 const tempPoint$3 = {};
@@ -2418,8 +2421,8 @@ const BezierHelper = {
             if (data)
                 data.push(L$7, x1, y1);
             if (setPointBounds) {
-                setPoint$2(setPointBounds, fromX, fromY);
-                addPoint$2(setPointBounds, x1, y1);
+                setPoint$1(setPointBounds, fromX, fromY);
+                addPoint$1(setPointBounds, x1, y1);
             }
             if (setStartPoint)
                 set(setStartPoint, fromX, fromY);
@@ -2471,7 +2474,7 @@ const BezierHelper = {
         if (data)
             data.push(data.length ? L$7 : M$6, fromX, fromY);
         if (setPointBounds)
-            setPoint$2(setPointBounds, fromX, fromY);
+            setPoint$1(setPointBounds, fromX, fromY);
         if (setStartPoint)
             set(setStartPoint, fromX, fromY);
         for (let i = 0; i < parts; i++) {
@@ -2533,11 +2536,11 @@ const BezierHelper = {
             if (0 < t2 && t2 < 1)
                 tList.push(t2);
         }
-        addMode ? addPoint$2(pointBounds, fromX, fromY) : setPoint$2(pointBounds, fromX, fromY);
-        addPoint$2(pointBounds, toX, toY);
+        addMode ? addPoint$1(pointBounds, fromX, fromY) : setPoint$1(pointBounds, fromX, fromY);
+        addPoint$1(pointBounds, toX, toY);
         for (let i = 0, len = tList.length; i < len; i++) {
             getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$3);
-            addPoint$2(pointBounds, tempPoint$3.x, tempPoint$3.y);
+            addPoint$1(pointBounds, tempPoint$3.x, tempPoint$3.y);
         }
     },
     getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, setPoint) {
@@ -2609,7 +2612,7 @@ const EllipseHelper = {
 const { M: M$5, m, L: L$6, l, H, h, V, v, C: C$5, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$5, 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$b = Debug.get('PathConvert');
 const setEndPoint$1 = {};
 const PathConvert = {
     current: { dot: 0 },
@@ -2850,7 +2853,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$c.error(`command: ${command} [index:${i}]`, old);
+                    debug$b.error(`command: ${command} [index:${i}]`, old);
                     return data;
             }
             lastCommand = command;
@@ -3075,7 +3078,7 @@ class PathCreator {
 }
 
 const { M: M$3, L: L$4, C: C$3, Q: Q$1, Z: Z$3, 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$a = Debug.get('PathDrawer');
 const PathDrawer = {
     drawPathByData(drawer, data) {
         if (!data)
@@ -3138,7 +3141,7 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$b.error(`command: ${command} [index:${i}]`, data);
+                    debug$a.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3147,8 +3150,8 @@ const PathDrawer = {
 
 const { M: M$2, L: L$3, C: C$2, Q, Z: Z$2, 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: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-const debug$a = Debug.get('PathBounds');
+const { addPointBounds, copy: copy$8, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
+const debug$9 = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
 const setPointBounds = {};
@@ -3156,21 +3159,21 @@ const setEndPoint = {};
 const PathBounds = {
     toBounds(data, setBounds) {
         PathBounds.toTwoPointBounds(data, setPointBounds);
-        toBounds$3(setPointBounds, setBounds);
+        toBounds$2(setPointBounds, setBounds);
     },
     toTwoPointBounds(data, setPointBounds) {
         if (!data || !data.length)
-            return setPoint$1(setPointBounds, 0, 0);
+            return setPoint(setPointBounds, 0, 0);
         let i = 0, x = 0, y = 0, x1, y1, toX, toY, command;
         const len = data.length;
         while (i < len) {
             command = data[i];
             if (i === 0) {
                 if (command === Z$2 || command === C$2 || command === Q) {
-                    setPoint$1(setPointBounds, x, y);
+                    setPoint(setPointBounds, x, y);
                 }
                 else {
-                    setPoint$1(setPointBounds, data[i + 1], data[i + 2]);
+                    setPoint(setPointBounds, data[i + 1], data[i + 2]);
                 }
             }
             switch (command) {
@@ -3178,7 +3181,7 @@ const PathBounds = {
                 case L$3:
                     x = data[i + 1];
                     y = data[i + 2];
-                    addPoint$1(setPointBounds, x, y);
+                    addPoint(setPointBounds, x, y);
                     i += 3;
                     break;
                 case C$2:
@@ -3256,7 +3259,7 @@ const PathBounds = {
                     i += 6;
                     break;
                 default:
-                    debug$a.error(`command: ${command} [index:${i}]`, data);
+                    debug$9.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3372,7 +3375,7 @@ const FileHelper = {
 const F = FileHelper;
 F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
 
-const debug$9 = Debug.get('TaskProcessor');
+const debug$8 = Debug.get('TaskProcessor');
 class TaskItem {
     constructor(task) {
         this.parallel = true;
@@ -3387,7 +3390,7 @@ class TaskItem {
                     yield this.task();
             }
             catch (error) {
-                debug$9.error(error);
+                debug$8.error(error);
             }
         });
     }
@@ -4074,7 +4077,7 @@ function defineDataProcessor(target, key, defaultValue) {
     defineKey(data, key, property);
 }
 
-const debug$8 = new Debug('rewrite');
+const debug$7 = new Debug('rewrite');
 const list = [];
 const excludeNames = ['destroy', 'constructor'];
 function rewrite(method) {
@@ -4091,7 +4094,7 @@ function doRewrite(error) {
     if (list.length) {
         list.forEach(item => {
             if (error)
-                debug$8.error(item.name, '需在Class上装饰@rewriteAble()');
+                debug$7.error(item.name, '需在Class上装饰@rewriteAble()');
             item.run();
         });
         list.length = 0;
@@ -4808,7 +4811,6 @@ class LayoutEvent extends Event {
         }
     }
 }
-LayoutEvent.CHECK_UPDATE = 'layout.check_update';
 LayoutEvent.REQUEST = 'layout.request';
 LayoutEvent.START = 'layout.start';
 LayoutEvent.BEFORE = 'layout.before';
@@ -5003,13 +5005,13 @@ const { on, on_, off, off_, once, emit: emit$2, emitEvent: emitEvent$1, hasEvent
 const LeafEventer = { on, on_, off, off_, once, emit: emit$2, emitEvent: emitEvent$1, hasEvent, destroyEventer: destroy };
 
 const { isFinite } = Number;
-const debug$7 = Debug.get('setAttr');
+const debug$6 = Debug.get('setAttr');
 const LeafDataProxy = {
     __setAttr(name, newValue, checkFiniteNumber) {
         if (this.leaferIsCreated) {
             const oldValue = this.__.__getInput(name);
             if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
-                debug$7.warn(this.innerName, name, newValue);
+                debug$6.warn(this.innerName, name, newValue);
                 newValue = undefined;
             }
             if (typeof newValue === 'object' || oldValue !== newValue) {
@@ -5079,7 +5081,7 @@ const LeafMatrix = {
 const { updateMatrix: updateMatrix$2, updateAllMatrix: updateAllMatrix$3 } = LeafHelper;
 const { updateBounds: updateBounds$2 } = BranchHelper;
 const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
-const { toBounds: toBounds$2 } = PathBounds;
+const { toBounds: toBounds$1 } = PathBounds;
 const LeafBounds = {
     __updateWorldBounds() {
         toOuterOf$1(this.__layout.renderBounds, this.__world, this.__world);
@@ -5161,7 +5163,7 @@ const LeafBounds = {
         const b = this.__layout.boxBounds;
         const data = this.__;
         if (data.__pathInputed) {
-            toBounds$2(data.path, b);
+            toBounds$1(data.path, b);
         }
         else {
             b.x = 0;
@@ -5709,7 +5711,7 @@ Leaf = __decorate([
 const { setListWithFn } = BoundsHelper;
 const { sort } = BranchHelper;
 const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
-const debug$6 = new Debug('Branch');
+const debug$5 = new Debug('Branch');
 let Branch = class Branch extends Leaf {
     __updateStrokeSpread() {
         const { children } = this;
@@ -5751,7 +5753,7 @@ let Branch = class Branch extends Leaf {
     }
     add(child, index) {
         if (child === this || child.destroyed)
-            return debug$6.warn('add self or destroyed');
+            return debug$5.warn('add self or destroyed');
         const noIndex = index === undefined;
         if (!child.__) {
             if (child instanceof Array)
@@ -6005,7 +6007,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.2.2";
+const version = "1.3.1";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6073,6 +6075,7 @@ function useCanvas(_canvasType, _power) {
 }
 Platform.name = 'web';
 Platform.isWorker = true;
+Platform.backgrounder = true;
 Platform.requestRender = function (render) { requestAnimationFrame(render); };
 defineKey(Platform, 'devicePixelRatio', { get() { return 1; } });
 const { userAgent } = navigator;
@@ -6279,7 +6282,7 @@ class LayoutBlockData {
 }
 
 const { updateAllMatrix: updateAllMatrix$1, updateAllChange } = LeafHelper;
-const debug$5 = Debug.get('Layouter');
+const debug$4 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
@@ -6314,7 +6317,7 @@ class Layouter {
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
         }
         catch (e) {
-            debug$5.error(e);
+            debug$4.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -6328,9 +6331,9 @@ class Layouter {
     }
     layoutOnce() {
         if (this.layouting)
-            return debug$5.warn('layouting');
+            return debug$4.warn('layouting');
         if (this.times > 3)
-            return debug$5.warn('layout max times');
+            return debug$4.warn('layout max times');
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -6434,7 +6437,7 @@ class Layouter {
     }
 }
 
-const debug$4 = Debug.get('Renderer');
+const debug$3 = Debug.get('Renderer');
 class Renderer {
     get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
     constructor(target, canvas, userConfig) {
@@ -6472,7 +6475,7 @@ class Renderer {
         const { target } = this;
         this.times = 0;
         this.totalBounds = new Bounds();
-        debug$4.log(target.innerName, '--->');
+        debug$3.log(target.innerName, '--->');
         try {
             if (!target.isApp)
                 target.app.emit(RenderEvent.CHILD_START, target);
@@ -6483,9 +6486,9 @@ class Renderer {
         }
         catch (e) {
             this.rendering = false;
-            debug$4.error(e);
+            debug$3.error(e);
         }
-        debug$4.log('-------------|');
+        debug$3.log('-------------|');
     }
     renderAgain() {
         if (this.rendering) {
@@ -6497,9 +6500,9 @@ class Renderer {
     }
     renderOnce(callback) {
         if (this.rendering)
-            return debug$4.warn('rendering');
+            return debug$3.warn('rendering');
         if (this.times > 3)
-            return debug$4.warn('render max times');
+            return debug$3.warn('render max times');
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -6536,7 +6539,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug$4.warn('PartRender: need update attr');
+            return debug$3.warn('PartRender: need update attr');
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -6639,7 +6642,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$4.tip(leaf.innerName, ': empty');
+                                debug$3.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -6805,143 +6808,26 @@ class Picker {
     }
 }
 
-const { Yes, NoAndSkip, YesAndSkip } = Answer;
-const idCondition = {}, classNameCondition = {}, tagCondition = {};
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
-        this.innerIdMap = {};
-        this.idMap = {};
-        this.methods = {
-            id: (leaf, name) => leaf.id === name ? (this.target && (this.idMap[name] = leaf), 1) : 0,
-            innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.target && (this.innerIdMap[innerId] = leaf), 1) : 0,
-            className: (leaf, name) => leaf.className === name ? 1 : 0,
-            tag: (leaf, name) => leaf.__tag === name ? 1 : 0,
-            tags: (leaf, nameMap) => nameMap[leaf.__tag] ? 1 : 0
-        };
-        this.target = target;
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
-        this.picker = new Picker(target, this);
-        if (target)
-            this.__listenEvents();
-    }
-    getBy(condition, branch, one, options) {
-        switch (typeof condition) {
-            case 'number':
-                const leaf = this.getByInnerId(condition, branch);
-                return one ? leaf : (leaf ? [leaf] : []);
-            case 'string':
-                switch (condition[0]) {
-                    case '#':
-                        idCondition.id = condition.substring(1), condition = idCondition;
-                        break;
-                    case '.':
-                        classNameCondition.className = condition.substring(1), condition = classNameCondition;
-                        break;
-                    default:
-                        tagCondition.tag = condition, condition = tagCondition;
-                }
-            case 'object':
-                if (condition.id !== undefined) {
-                    const leaf = this.getById(condition.id, branch);
-                    return one ? leaf : (leaf ? [leaf] : []);
-                }
-                else if (condition.tag) {
-                    const { tag } = condition, isArray = tag instanceof Array;
-                    return this.getByMethod(isArray ? this.methods.tags : this.methods.tag, branch, one, isArray ? DataHelper.toMap(tag) : tag);
-                }
-                else {
-                    return this.getByMethod(this.methods.className, branch, one, condition.className);
-                }
-            case 'function':
-                return this.getByMethod(condition, branch, one, options);
-        }
+        this.picker = new Picker(this.target = target, this);
+        this.finder = Creator.finder && Creator.finder();
     }
     getByPoint(hitPoint, hitRadius, options) {
-        if (Platform.name === 'node' && this.target)
-            this.target.emit(LayoutEvent.CHECK_UPDATE);
+        if (Platform.backgrounder && this.target)
+            this.target.updateLayout();
         return this.picker.getByPoint(hitPoint, hitRadius, options);
     }
-    getByInnerId(innerId, branch) {
-        const cache = this.innerIdMap[innerId];
-        if (cache)
-            return cache;
-        this.eachFind(this.toChildren(branch), this.methods.innerId, null, innerId);
-        return this.findLeaf;
-    }
-    getById(id, branch) {
-        const cache = this.idMap[id];
-        if (cache && LeafHelper.hasParent(cache, branch || this.target))
-            return cache;
-        this.eachFind(this.toChildren(branch), this.methods.id, null, id);
-        return this.findLeaf;
-    }
-    getByClassName(className, branch) {
-        return this.getByMethod(this.methods.className, branch, false, className);
-    }
-    getByTag(tag, branch) {
-        return this.getByMethod(this.methods.tag, branch, false, tag);
-    }
-    getByMethod(method, branch, one, options) {
-        const list = one ? null : [];
-        this.eachFind(this.toChildren(branch), method, list, options);
-        return list || this.findLeaf;
-    }
-    eachFind(children, method, list, options) {
-        let child, result;
-        for (let i = 0, len = children.length; i < len; i++) {
-            child = children[i];
-            result = method(child, options);
-            if (result === Yes || result === YesAndSkip) {
-                if (list) {
-                    list.push(child);
-                }
-                else {
-                    this.findLeaf = child;
-                    return;
-                }
-            }
-            if (child.isBranch && result < NoAndSkip)
-                this.eachFind(child.children, method, list, options);
-        }
-    }
-    toChildren(branch) {
-        this.findLeaf = null;
-        return [branch || this.target];
-    }
-    __onRemoveChild(event) {
-        const { id, innerId } = event.child;
-        if (this.idMap[id])
-            delete this.idMap[id];
-        if (this.innerIdMap[innerId])
-            delete this.innerIdMap[innerId];
-    }
-    __checkIdChange(event) {
-        if (event.attrName === 'id') {
-            const id = event.oldValue;
-            if (this.idMap[id])
-                delete this.idMap[id];
-        }
-    }
-    __listenEvents() {
-        this.__eventIds = [
-            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this),
-            this.target.on_(PropertyEvent.CHANGE, this.__checkIdChange, this)
-        ];
-    }
-    __removeListenEvents() {
-        this.target.off_(this.__eventIds);
-        this.__eventIds.length = 0;
+    getBy(condition, branch, one, options) {
+        return this.finder ? this.finder.getBy(condition, branch, one, options) : Plugin.need('find');
     }
     destroy() {
-        if (this.__eventIds.length) {
-            this.__removeListenEvents();
-            this.picker.destroy();
-            this.findLeaf = null;
-            this.innerIdMap = {};
-            this.idMap = {};
-        }
+        this.picker.destroy();
+        if (this.finder)
+            this.finder.destroy();
     }
 }
 
@@ -7014,7 +6900,7 @@ const Transition = {
 
 const { parse, objectToCanvasData } = PathConvert;
 const emptyPaint = {};
-const debug$3 = Debug.get('UIData');
+const debug$2 = Debug.get('UIData');
 class UIData extends LeafData {
     get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
     get __strokeWidth() {
@@ -7051,7 +6937,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._width = -value;
             this.__leaf.scaleX *= -1;
-            debug$3.warn('width < 0, instead -scaleX ', this);
+            debug$2.warn('width < 0, instead -scaleX ', this);
         }
         else
             this._width = value;
@@ -7060,7 +6946,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._height = -value;
             this.__leaf.scaleY *= -1;
-            debug$3.warn('height < 0, instead -scaleY', this);
+            debug$2.warn('height < 0, instead -scaleY', this);
         }
         else
             this._height = value;
@@ -7437,25 +7323,27 @@ let UI = UI_1 = class UI extends Leaf {
     }
     reset(_data) { }
     set(data, transition) {
-        if (transition) {
-            if (transition === 'temp') {
-                this.lockNormalStyle = true;
-                Object.assign(this, data);
-                this.lockNormalStyle = false;
+        if (data) {
+            if (transition) {
+                if (transition === 'temp') {
+                    this.lockNormalStyle = true;
+                    Object.assign(this, data);
+                    this.lockNormalStyle = false;
+                }
+                else
+                    this.animate(data, transition);
             }
             else
-                this.animate(data, transition);
+                Object.assign(this, data);
         }
-        else
-            Object.assign(this, data);
     }
     get(name) {
         return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
     }
     createProxyData() { return undefined; }
-    find(_condition, _options) { return undefined; }
+    find(_condition, _options) { return Plugin.need('find'); }
     findTag(tag) { return this.find({ tag }); }
-    findOne(_condition, _options) { return undefined; }
+    findOne(_condition, _options) { return Plugin.need('find'); }
     findId(id) { return this.findOne({ id }); }
     getPath(curve, pathForRender) {
         this.__layout.update();
@@ -7507,9 +7395,9 @@ let UI = UI_1 = class UI extends Leaf {
     animate(_keyframe, _options, _type, _isTemp) {
         return Plugin.need('animate');
     }
-    killAnimate(_type) { }
-    export(filename, options) {
-        return Export.export(this, filename, options);
+    killAnimate(_type, _killStyle) { }
+    export(_filename, _options) {
+        return Plugin.need('export');
     }
     clone(data) {
         const json = this.toJSON();
@@ -7755,16 +7643,18 @@ let Group = class Group extends UI {
             this.children = [];
     }
     set(data, transition) {
-        if (data.children) {
-            const { children } = data;
-            delete data.children;
-            this.children ? this.clear() : this.__setBranch();
-            super.set(data, transition);
-            children.forEach(child => this.add(child));
-            data.children = children;
+        if (data) {
+            if (data.children) {
+                const { children } = data;
+                delete data.children;
+                this.children ? this.clear() : this.__setBranch();
+                super.set(data, transition);
+                children.forEach(child => this.add(child));
+                data.children = children;
+            }
+            else
+                super.set(data, transition);
         }
-        else
-            super.set(data, transition);
     }
     toJSON(options) {
         const data = super.toJSON(options);
@@ -7796,7 +7686,7 @@ Group = __decorate([
 ], Group);
 
 var Leafer_1;
-const debug$2 = Debug.get('Leafer');
+const debug$1 = Debug.get('Leafer');
 let Leafer = Leafer_1 = class Leafer extends Group {
     get __tag() { return 'Leafer'; }
     get isApp() { return false; }
@@ -7961,7 +7851,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         if (this.canvas) {
             if (canvasSizeAttrs.includes(attrName)) {
                 if (!newValue)
-                    debug$2.warn(attrName + ' is 0');
+                    debug$1.warn(attrName + ' is 0');
                 this.__changeCanvasSize(attrName, newValue);
             }
             else if (attrName === 'fill') {
@@ -8102,9 +7992,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         this.canvas && this.canvas.updateClientBounds();
     }
     receiveEvent(_event) { }
-    __checkUpdateLayout() {
-        this.__layout.update();
-    }
     emitLeafer(type) {
         this.emitEvent(new LeaferEvent(type, this));
     }
@@ -8115,7 +8002,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         this.once(LayoutEvent.END, () => this.__onReady());
         this.once(RenderEvent.START, () => this.__onCreated());
         this.once(RenderEvent.END, () => this.__onViewReady());
-        this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this), this.on_(LayoutEvent.CHECK_UPDATE, this.__checkUpdateLayout, this));
+        this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
     }
     __removeListenEvents() {
         this.off_(this.__eventIds);
@@ -8146,7 +8033,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                     setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                 }
                 catch (e) {
-                    debug$2.error(e);
+                    debug$1.error(e);
                 }
             }
         };
@@ -8180,7 +8067,7 @@ Rect = __decorate([
 ], Rect);
 
 const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
-const rect$1 = Rect.prototype, group$1 = Group.prototype;
+const rect$1 = Rect.prototype, group = Group.prototype;
 const childrenRenderBounds = {};
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
@@ -8290,7 +8177,7 @@ __decorate([
     rewrite(rect$1.__render)
 ], Box.prototype, "__renderRect", null);
 __decorate([
-    rewrite(group$1.__render)
+    rewrite(group.__render)
 ], Box.prototype, "__renderGroup", null);
 Box = __decorate([
     rewriteAble(),
@@ -8375,7 +8262,7 @@ Ellipse = __decorate([
 
 const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = PathCommandDataHelper;
 const { rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$3, defaultPoint } = PointHelper;
-const { toBounds: toBounds$1 } = PathBounds;
+const { toBounds } = PathBounds;
 let Line = class Line extends UI {
     get __tag() { return 'Line'; }
     get toPoint() {
@@ -8419,7 +8306,7 @@ let Line = class Line extends UI {
     }
     __updateBoxBounds() {
         if (this.points) {
-            toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
+            toBounds(this.__.__pathForRender, this.__layout.boxBounds);
         }
         else
             super.__updateBoxBounds();
@@ -8771,6 +8658,9 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "paraSpacing", void 0);
+__decorate([
+    boundsType('x')
+], Text.prototype, "writingMode", void 0);
 __decorate([
     boundsType('left')
 ], Text.prototype, "textAlign", void 0);
@@ -8957,8 +8847,8 @@ let App = class App extends Leafer {
         this.children.forEach(leafer => leafer.resize(event));
         super.__onResize(event);
     }
-    __checkUpdateLayout() {
-        this.children.forEach(leafer => leafer.__layout.update());
+    updateLayout() {
+        this.children.forEach(leafer => leafer.updateLayout());
     }
     __getChildConfig(userConfig) {
         let config = Object.assign({}, this.config);
@@ -9448,7 +9338,7 @@ class Dragger {
     }
 }
 
-const debug$1 = Debug.get('emit');
+const debug = Debug.get('emit');
 function emit$1(type, data, path, excludePath) {
     if (!path && !data.path)
         return;
@@ -9478,7 +9368,7 @@ function emit$1(type, data, path, excludePath) {
         }
     }
     catch (e) {
-        debug$1.error(e);
+        debug.error(e);
     }
 }
 const allowTypes = ['move', 'zoom', 'rotate', 'key'];
@@ -10114,32 +10004,24 @@ rect.__hitFill = box$1.__hitFill = function (inner) {
     return this.__hitCanvas ? ui$4.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
 };
 
-const ui$3 = UI.prototype, group = Group.prototype;
-function getSelector(ui) {
+function getSelector$1(ui) {
     return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
 }
-ui$3.find = function (condition, options) {
-    return getSelector(this).getBy(condition, this, false, options);
-};
-ui$3.findOne = function (condition, options) {
-    return getSelector(this).getBy(condition, this, true, options);
-};
-group.pick = function (hitPoint, options) {
-    this.__layout.update();
-    if (!options)
-        options = {};
-    return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
+Group.prototype.pick = function (hitPoint, options) {
+    this.leafer || this.updateLayout();
+    options || (options = emptyData);
+    return getSelector$1(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
 };
 
-const canvas$1 = LeaferCanvasBase.prototype;
-canvas$1.hitFill = function (point, fillRule) {
+const canvas = LeaferCanvasBase.prototype;
+canvas.hitFill = function (point, fillRule) {
     return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
 };
-canvas$1.hitStroke = function (point, strokeWidth) {
+canvas.hitStroke = function (point, strokeWidth) {
     this.strokeWidth = strokeWidth;
     return this.context.isPointInStroke(point.x, point.y);
 };
-canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
+canvas.hitPixel = function (radiusPoint, offset, scale = 1) {
     let { x, y, radiusX, radiusY } = radiusPoint;
     if (offset)
         x -= offset.x, y -= offset.y;
@@ -11631,197 +11513,12 @@ const ColorConvertModule = {
     string
 };
 
-const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper;
-function getTrimBounds(canvas) {
-    const { width, height } = canvas.view;
-    const { data } = canvas.context.getImageData(0, 0, width, height);
-    let x, y, pointBounds, index = 0;
-    for (let i = 0; i < data.length; i += 4) {
-        if (data[i + 3] !== 0) {
-            x = index % width;
-            y = (index - x) / width;
-            pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
-        }
-        index++;
-    }
-    const bounds = new Bounds();
-    toBounds(pointBounds, bounds);
-    return bounds.scale(1 / canvas.pixelRatio).ceil();
-}
-
-const ExportModule = {
-    export(leaf, filename, options) {
-        this.running = true;
-        const fileType = FileHelper.fileType(filename);
-        const isDownload = filename.includes('.');
-        options = FileHelper.getExportOptions(options);
-        return addTask((success) => new Promise((resolve) => {
-            const over = (result) => {
-                success(result);
-                resolve();
-                this.running = false;
-            };
-            const { toURL } = Platform;
-            const { download } = Platform.origin;
-            if (fileType === 'json') {
-                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
-                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
-            }
-            if (fileType === 'svg') {
-                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
-                return over({ data: isDownload ? true : leaf.toSVG() });
-            }
-            const { leafer } = leaf;
-            if (leafer) {
-                checkLazy(leaf);
-                leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
-                    let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
-                    const { worldTransform, isLeafer, isFrame } = leaf;
-                    const { slice, trim, onCanvas } = options;
-                    const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
-                    const contextSettings = options.contextSettings || leafer.config.contextSettings;
-                    const screenshot = options.screenshot || leaf.isApp;
-                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
-                    const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
-                    if (screenshot) {
-                        renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
-                    }
-                    else {
-                        let relative = options.relative || (isLeafer ? 'inner' : 'local');
-                        scaleX = worldTransform.scaleX;
-                        scaleY = worldTransform.scaleY;
-                        switch (relative) {
-                            case 'inner':
-                                matrix.set(worldTransform);
-                                break;
-                            case 'local':
-                                matrix.set(worldTransform).divide(leaf.localTransform);
-                                scaleX /= leaf.scaleX;
-                                scaleY /= leaf.scaleY;
-                                break;
-                            case 'world':
-                                scaleX = 1;
-                                scaleY = 1;
-                                break;
-                            case 'page':
-                                relative = leaf.leafer;
-                            default:
-                                matrix.set(worldTransform).divide(leaf.getTransform(relative));
-                                const l = relative.worldTransform;
-                                scaleX /= scaleX / l.scaleX;
-                                scaleY /= scaleY / l.scaleY;
-                        }
-                        renderBounds = leaf.getBounds('render', relative);
-                    }
-                    const scaleData = { scaleX: 1, scaleY: 1 };
-                    MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
-                    let pixelRatio = options.pixelRatio || 1;
-                    if (leaf.isApp) {
-                        scaleData.scaleX *= pixelRatio;
-                        scaleData.scaleY *= pixelRatio;
-                        pixelRatio = leaf.app.pixelRatio;
-                    }
-                    const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
-                    const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
-                    let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
-                    let sliceLeaf;
-                    if (slice) {
-                        sliceLeaf = leaf;
-                        sliceLeaf.__worldOpacity = 0;
-                        leaf = leafer;
-                        renderOptions.bounds = canvas.bounds;
-                    }
-                    canvas.save();
-                    if (isFrame && fill !== undefined) {
-                        const oldFill = leaf.get('fill');
-                        leaf.fill = '';
-                        leaf.__render(canvas, renderOptions);
-                        leaf.fill = oldFill;
-                    }
-                    else {
-                        leaf.__render(canvas, renderOptions);
-                    }
-                    canvas.restore();
-                    if (sliceLeaf)
-                        sliceLeaf.__updateWorldOpacity();
-                    if (trim) {
-                        trimBounds = getTrimBounds(canvas);
-                        const old = canvas, { width, height } = trimBounds;
-                        const config = { x: 0, y: 0, width, height, pixelRatio };
-                        canvas = Creator.canvas(config);
-                        canvas.copyWorld(old, trimBounds, config);
-                    }
-                    if (needFill)
-                        canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
-                    if (onCanvas)
-                        onCanvas(canvas);
-                    const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
-                    over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
-                }));
-            }
-            else {
-                over({ data: false });
-            }
-        }));
-    }
-};
-let tasker;
-function addTask(task) {
-    if (!tasker)
-        tasker = new TaskProcessor();
-    return new Promise((resolve) => {
-        tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
-    });
-}
-function checkLazy(leaf) {
-    if (leaf.__.__needComputePaint)
-        leaf.__.__computePaint();
-    if (leaf.isBranch)
-        leaf.children.forEach(child => checkLazy(child));
-}
-
-const canvas = LeaferCanvasBase.prototype;
-const debug = Debug.get('@leafer-ui/export');
-canvas.export = function (filename, options) {
-    const { quality, blob } = FileHelper.getExportOptions(options);
-    if (filename.includes('.'))
-        return this.saveAs(filename, quality);
-    else if (blob)
-        return this.toBlob(filename, quality);
-    else
-        return this.toDataURL(filename, quality);
-};
-canvas.toBlob = function (type, quality) {
-    return new Promise((resolve) => {
-        Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
-            resolve(blob);
-        }).catch((e) => {
-            debug.error(e);
-            resolve(null);
-        });
-    });
-};
-canvas.toDataURL = function (type, quality) {
-    return Platform.origin.canvasToDataURL(this.view, type, quality);
-};
-canvas.saveAs = function (filename, quality) {
-    return new Promise((resolve) => {
-        Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
-            resolve(true);
-        }).catch((e) => {
-            debug.error(e);
-            resolve(false);
-        });
-    });
-};
-
 Object.assign(TextConvert, TextConvertModule);
 Object.assign(ColorConvert, ColorConvertModule);
 Object.assign(Paint, PaintModule);
 Object.assign(PaintImage, PaintImageModule);
 Object.assign(PaintGradient, PaintGradientModule);
 Object.assign(Effect, EffectModule);
-Object.assign(Export, ExportModule);
 
 Object.assign(Creator, {
     interaction: (target, canvas, selector, options) => new InteractionBase(target, canvas, selector, options),
@@ -12284,19 +11981,19 @@ State.set = function (leaf, stateName) { const style = leaf.states[stateName]; s
 State.getStyle = getStyle;
 State.updateStyle = updateStyle;
 State.updateEventStyle = updateEventStyle;
-const ui$2 = UI.prototype;
-stateType(false, 'selectedStyle')(ui$2, 'selected');
-stateType(false, 'disabledStyle')(ui$2, 'disabled');
-stateStyleType({})(ui$2, 'states');
-stateType('')(ui$2, 'state');
-dataType()(ui$2, 'normalStyle');
-stateStyleType()(ui$2, 'hoverStyle');
-stateStyleType()(ui$2, 'pressStyle');
-stateStyleType()(ui$2, 'focusStyle');
-stateStyleType()(ui$2, 'selectedStyle');
-stateStyleType()(ui$2, 'disabledStyle');
-dataType(false)(ui$2, 'button');
-ui$2.focus = function (value = true) {
+const ui$3 = UI.prototype;
+stateType(false, 'selectedStyle')(ui$3, 'selected');
+stateType(false, 'disabledStyle')(ui$3, 'disabled');
+stateStyleType({})(ui$3, 'states');
+stateType('')(ui$3, 'state');
+dataType()(ui$3, 'normalStyle');
+stateStyleType()(ui$3, 'hoverStyle');
+stateStyleType()(ui$3, 'pressStyle');
+stateStyleType()(ui$3, 'focusStyle');
+stateStyleType()(ui$3, 'selectedStyle');
+stateStyleType()(ui$3, 'disabledStyle');
+dataType(false)(ui$3, 'button');
+ui$3.focus = function (value = true) {
     this.waitLeafer(() => {
         let { focusData } = this.app.interaction;
         if (value) {
@@ -12310,7 +12007,7 @@ ui$2.focus = function (value = true) {
         value ? setPointerState(this, 'focusStyle') : unsetPointerState(this, 'focusStyle');
     });
 };
-ui$2.updateState = function () {
+ui$3.updateState = function () {
     State.updateStyle(this, undefined, 'in');
 };
 
@@ -12526,7 +12223,6 @@ let Animate = class Animate extends Eventer {
     stop() {
         if (this.destroyed)
             return;
-        this.end();
         this.complete();
         this.emit(AnimateEvent.STOP, this);
     }
@@ -12544,8 +12240,9 @@ let Animate = class Animate extends Eventer {
         this.clearTimer(() => this.requestAnimate());
         this.emit(AnimateEvent.SEEK, this);
     }
-    kill() {
-        this.destroy(true);
+    kill(complete = true, killStyle) {
+        this.killStyle = killStyle;
+        this.destroy(complete);
     }
     create() {
         const { target, frames, keyframes, config } = this, { length } = keyframes, joinBefore = length > 1 ? this.join : true;
@@ -12716,11 +12413,12 @@ let Animate = class Animate extends Eventer {
     complete() {
         this.requestAnimateTime = 0;
         this.running = false;
-        const { realEnding } = this;
-        if (realEnding === 'from')
-            this.setFrom();
-        else if (realEnding === 'to')
-            this.setTo();
+        const { endingStyle, killStyle } = this;
+        const style = killStyle ? {} : endingStyle;
+        if (killStyle)
+            for (let key in endingStyle)
+                key in killStyle || (style[key] = endingStyle[key]);
+        this.setStyle(style);
         this.clearTimer();
         this.emit(AnimateEvent.COMPLETED, this);
     }
@@ -12771,7 +12469,11 @@ let Animate = class Animate extends Eventer {
         this.emit(AnimateEvent.UPDATE, this);
     }
     setStyle(style) {
-        this.target.set(style, this.isTemp ? 'temp' : false);
+        const { target } = this;
+        if (target && style) {
+            this.style = style;
+            target.__ ? target.set(style, this.isTemp ? 'temp' : false) : Object.assign(target, style);
+        }
     }
     clearTimer(fn) {
         if (this.timer) {
@@ -12787,7 +12489,7 @@ let Animate = class Animate extends Eventer {
                 this.stop();
             else
                 this.pause();
-            this.target = this.config = this.frames = null;
+            this.target = this.config = this.frames = this.fromStyle = this.toStyle = this.style = this.killStyle = null;
             this.destroyed = true;
         }
     }
@@ -13149,6 +12851,10 @@ const TransitionList = {
         return from.map((f, i) => number(f, to[i], t));
     },
     text(from, to, t) {
+        if (typeof from === 'string' && typeof to === 'string') {
+            const fl = from.length, tl = to.length, len = number(fl, tl, t, 1);
+            return fl < tl ? to.substring(0, len) : from.substring(0, len);
+        }
         return (typeof from === 'number' || typeof to === 'number') ? MathHelper.float(number(from, to, t), Math.max(getDecimalLen(from), getDecimalLen(to))) : to;
     },
     shadow,
@@ -13196,17 +12902,16 @@ function shadow(from, to, t) {
     };
 }
 
-Plugin.add('animate');
-setTimeout(() => Plugin.check('color', true));
+Plugin.add('animate', 'color');
 State.canAnimate = true;
 Object.assign(Transition, TransitionModule);
 Object.assign(Transition.list, TransitionList);
-const ui$1 = UI.prototype;
-animationType()(ui$1, 'animation');
-dataType()(ui$1, 'animationOut');
-dataType(true)(ui$1, 'transition');
-dataType()(ui$1, 'transitionOut');
-ui$1.animate = function (keyframe, options, kill, isTemp) {
+const ui$2 = UI.prototype;
+animationType()(ui$2, 'animation');
+dataType()(ui$2, 'animationOut');
+dataType(true)(ui$2, 'transition');
+dataType()(ui$2, 'transitionOut');
+ui$2.animate = function (keyframe, options, kill, isTemp) {
     if (keyframe === undefined)
         return this.__animate;
     if (typeof keyframe === 'object') {
@@ -13215,15 +12920,16 @@ ui$1.animate = function (keyframe, options, kill, isTemp) {
         else if (keyframe.style)
             options = keyframe, keyframe = keyframe.style;
     }
-    this.killAnimate(kill);
-    return this.__animate = new Animate(this, keyframe, options, isTemp);
+    const animate = new Animate(this, keyframe, options, isTemp);
+    this.killAnimate(kill, animate.toStyle);
+    return this.__animate = animate;
 };
-ui$1.killAnimate = function (_type) {
+ui$2.killAnimate = function (_type, killStyle) {
     const animate = this.__animate;
     if (animate)
-        animate.kill(), this.__animate = null;
+        animate.kill(true, killStyle), this.__animate = null;
 };
-ui$1.__runAnimation = function (type, complete) {
+ui$2.__runAnimation = function (type, complete) {
     this.animate(type === 'in' ? this.animation : this.animationOut);
     if (complete)
         this.__animate.on(AnimateEvent.COMPLETED, complete);
@@ -13485,17 +13191,17 @@ Transition.register('motion', function (from, to, t, target) {
 Transition.register('motionRotation', function (from, to, t) {
     return Transition.number(from, to, t);
 });
-const ui = UI.prototype;
+const ui$1 = UI.prototype;
 const { updateMatrix, updateAllMatrix } = LeafHelper;
 const { updateBounds } = BranchHelper;
-motionPathType()(ui, 'motionPath');
-motionPathType(1)(ui, 'motionPrecision');
-motionPathType()(ui, 'motion');
-motionPathType(true)(ui, 'motionRotation');
-ui.getMotionPathData = function () {
+motionPathType()(ui$1, 'motionPath');
+motionPathType(1)(ui$1, 'motionPrecision');
+motionPathType()(ui$1, 'motion');
+motionPathType(true)(ui$1, 'motionRotation');
+ui$1.getMotionPathData = function () {
     return getMotionPathData(getMotionPath(this));
 };
-ui.getMotionPoint = function (motionDistance) {
+ui$1.getMotionPoint = function (motionDistance) {
     const path = getMotionPath(this);
     const data = getMotionPathData(path);
     if (!data.total)
@@ -13509,10 +13215,10 @@ ui.getMotionPoint = function (motionDistance) {
         point.rotation += motionRotation;
     return point;
 };
-ui.getMotionTotal = function () {
+ui$1.getMotionTotal = function () {
     return this.getMotionPathData().total;
 };
-ui.__updateMotionPath = function () {
+ui$1.__updateMotionPath = function () {
     const data = this.__;
     if (this.__layout.resized && data.__pathForMotion)
         data.__pathForMotion = undefined;
@@ -13572,4 +13278,150 @@ function getMotionPathData(leaf) {
     return data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
 }
 
-export { AlignHelper, Animate, AnimateEasing, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, 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, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Robot, RobotData, 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, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$4 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+const { Yes, NoAndSkip, YesAndSkip } = Answer;
+const idCondition = {}, classNameCondition = {}, tagCondition = {};
+class Finder {
+    constructor(target) {
+        this.innerIdMap = {};
+        this.idMap = {};
+        this.methods = {
+            id: (leaf, name) => leaf.id === name ? (this.target && (this.idMap[name] = leaf), 1) : 0,
+            innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.target && (this.innerIdMap[innerId] = leaf), 1) : 0,
+            className: (leaf, name) => leaf.className === name ? 1 : 0,
+            tag: (leaf, name) => leaf.__tag === name ? 1 : 0,
+            tags: (leaf, nameMap) => nameMap[leaf.__tag] ? 1 : 0
+        };
+        if (this.target = target)
+            this.__listenEvents();
+    }
+    getBy(condition, branch, one, options) {
+        switch (typeof condition) {
+            case 'number':
+                const leaf = this.getByInnerId(condition, branch);
+                return one ? leaf : (leaf ? [leaf] : []);
+            case 'string':
+                switch (condition[0]) {
+                    case '#':
+                        idCondition.id = condition.substring(1), condition = idCondition;
+                        break;
+                    case '.':
+                        classNameCondition.className = condition.substring(1), condition = classNameCondition;
+                        break;
+                    default:
+                        tagCondition.tag = condition, condition = tagCondition;
+                }
+            case 'object':
+                if (condition.id !== undefined) {
+                    const leaf = this.getById(condition.id, branch);
+                    return one ? leaf : (leaf ? [leaf] : []);
+                }
+                else if (condition.tag) {
+                    const { tag } = condition, isArray = tag instanceof Array;
+                    return this.getByMethod(isArray ? this.methods.tags : this.methods.tag, branch, one, isArray ? DataHelper.toMap(tag) : tag);
+                }
+                else {
+                    return this.getByMethod(this.methods.className, branch, one, condition.className);
+                }
+            case 'function':
+                return this.getByMethod(condition, branch, one, options);
+        }
+    }
+    getByInnerId(innerId, branch) {
+        const cache = this.innerIdMap[innerId];
+        if (cache)
+            return cache;
+        this.eachFind(this.toChildren(branch), this.methods.innerId, null, innerId);
+        return this.findLeaf;
+    }
+    getById(id, branch) {
+        const cache = this.idMap[id];
+        if (cache && LeafHelper.hasParent(cache, branch || this.target))
+            return cache;
+        this.eachFind(this.toChildren(branch), this.methods.id, null, id);
+        return this.findLeaf;
+    }
+    getByClassName(className, branch) {
+        return this.getByMethod(this.methods.className, branch, false, className);
+    }
+    getByTag(tag, branch) {
+        return this.getByMethod(this.methods.tag, branch, false, tag);
+    }
+    getByMethod(method, branch, one, options) {
+        const list = one ? null : [];
+        this.eachFind(this.toChildren(branch), method, list, options);
+        return list || this.findLeaf;
+    }
+    eachFind(children, method, list, options) {
+        let child, result;
+        for (let i = 0, len = children.length; i < len; i++) {
+            child = children[i];
+            result = method(child, options);
+            if (result === Yes || result === YesAndSkip) {
+                if (list) {
+                    list.push(child);
+                }
+                else {
+                    this.findLeaf = child;
+                    return;
+                }
+            }
+            if (child.isBranch && result < NoAndSkip)
+                this.eachFind(child.children, method, list, options);
+        }
+    }
+    toChildren(branch) {
+        this.findLeaf = null;
+        return [branch || this.target];
+    }
+    __onRemoveChild(event) {
+        const { id, innerId } = event.child;
+        if (this.idMap[id])
+            delete this.idMap[id];
+        if (this.innerIdMap[innerId])
+            delete this.innerIdMap[innerId];
+    }
+    __checkIdChange(event) {
+        if (event.attrName === 'id') {
+            const id = event.oldValue;
+            if (this.idMap[id])
+                delete this.idMap[id];
+        }
+    }
+    __listenEvents() {
+        this.__eventIds = [
+            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this),
+            this.target.on_(PropertyEvent.CHANGE, this.__checkIdChange, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+        this.__eventIds.length = 0;
+    }
+    destroy() {
+        const { __eventIds } = this;
+        if (__eventIds && __eventIds.length) {
+            this.__removeListenEvents();
+            this.innerIdMap = {};
+            this.idMap = {};
+        }
+        this.findLeaf = null;
+    }
+}
+
+const ui = UI.prototype;
+function getSelector(ui) {
+    return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+}
+ui.find = function (condition, options) {
+    return getSelector(this).getBy(condition, this, false, options);
+};
+ui.findOne = function (condition, options) {
+    return getSelector(this).getBy(condition, this, true, options);
+};
+
+Plugin.add('find');
+Creator.finder = function (target) {
+    return new Finder(target);
+};
+
+export { AlignHelper, Animate, AnimateEasing, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Finder, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, 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, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Robot, RobotData, 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, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$4 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };