@leafer-editor/worker 1.2.2 → 1.3.1

package/dist/worker.js

@@ -1405,21 +1405,24 @@ var LeaferUI = (function (exports) {
     };
     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$g = Debug.get('UICreator');
     const UICreator = {
@@ -4811,7 +4814,6 @@ var LeaferUI = (function (exports) {
             }
         }
     }
-    LayoutEvent.CHECK_UPDATE = 'layout.check_update';
     LayoutEvent.REQUEST = 'layout.request';
     LayoutEvent.START = 'layout.start';
     LayoutEvent.BEFORE = 'layout.before';
@@ -6008,7 +6010,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.2.2";
+    const version = "1.3.1";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6076,6 +6078,7 @@ var LeaferUI = (function (exports) {
     }
     Platform.name = 'web';
     Platform.isWorker = true;
+    Platform.backgrounder = true;
     Platform.requestRender = function (render) { requestAnimationFrame(render); };
     defineKey(Platform, 'devicePixelRatio', { get() { return 1; } });
     const { userAgent } = navigator;
@@ -6808,143 +6811,26 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { Yes: Yes$1, NoAndSkip: NoAndSkip$1, YesAndSkip: YesAndSkip$1 } = exports.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$1 || result === YesAndSkip$1) {
-                    if (list) {
-                        list.push(child);
-                    }
-                    else {
-                        this.findLeaf = child;
-                        return;
-                    }
-                }
-                if (child.isBranch && result < NoAndSkip$1)
-                    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();
         }
     }
 
@@ -7440,25 +7326,27 @@ var LeaferUI = (function (exports) {
         }
         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();
@@ -7510,9 +7398,9 @@ var LeaferUI = (function (exports) {
         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();
@@ -7758,16 +7646,18 @@ var LeaferUI = (function (exports) {
                 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);
@@ -8105,9 +7995,6 @@ var LeaferUI = (function (exports) {
             this.canvas && this.canvas.updateClientBounds();
         }
         receiveEvent(_event) { }
-        __checkUpdateLayout() {
-            this.__layout.update();
-        }
         emitLeafer(type) {
             this.emitEvent(new LeaferEvent(type, this));
         }
@@ -8118,7 +8005,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -8183,7 +8070,7 @@ var LeaferUI = (function (exports) {
     ], exports.Rect);
 
     const { copy: copy$6, add, includes: includes$1 } = BoundsHelper;
-    const rect$1 = exports.Rect.prototype, group$1 = exports.Group.prototype;
+    const rect$1 = exports.Rect.prototype, group = exports.Group.prototype;
     const childrenRenderBounds = {};
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
@@ -8293,7 +8180,7 @@ var LeaferUI = (function (exports) {
         rewrite(rect$1.__render)
     ], exports.Box.prototype, "__renderRect", null);
     __decorate([
-        rewrite(group$1.__render)
+        rewrite(group.__render)
     ], exports.Box.prototype, "__renderGroup", null);
     exports.Box = __decorate([
         rewriteAble(),
@@ -8774,6 +8661,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.Text.prototype, "paraSpacing", void 0);
+    __decorate([
+        boundsType('x')
+    ], exports.Text.prototype, "writingMode", void 0);
     __decorate([
         boundsType('left')
     ], exports.Text.prototype, "textAlign", void 0);
@@ -8960,8 +8850,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -10117,21 +10007,13 @@ var LeaferUI = (function (exports) {
         return this.__hitCanvas ? ui$2.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
 
-    const ui$1 = exports.UI.prototype, group = exports.Group.prototype;
-    function getSelector(ui) {
+    function getSelector$1(ui) {
         return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
     }
-    ui$1.find = function (condition, options) {
-        return getSelector(this).getBy(condition, this, false, options);
-    };
-    ui$1.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 }));
+    exports.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;
@@ -11634,257 +11516,72 @@ var LeaferUI = (function (exports) {
         string
     };
 
-    const { setPoint: setPoint$2, 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$2(pointBounds = {}, x, y);
-            }
-            index++;
+    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(Creator, {
+        interaction: (target, canvas, selector, options) => new InteractionBase(target, canvas, selector, options),
+        hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
+        hitCanvasManager: () => new HitCanvasManager()
+    });
+    useCanvas();
+
+    function toList(value) {
+        return value ? (value instanceof Array ? value : [value]) : [];
+    }
+    class EditorEvent extends Event {
+        get list() { return toList(this.value); }
+        get oldList() { return toList(this.oldValue); }
+        constructor(type, data) {
+            super(type);
+            if (data)
+                Object.assign(this, data);
         }
-        const bounds = new Bounds();
-        toBounds(pointBounds, bounds);
-        return bounds.scale(1 / canvas.pixelRatio).ceil();
     }
+    EditorEvent.SELECT = 'editor.select';
+    EditorEvent.HOVER = 'editor.hover';
 
-    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$2 = 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$2.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$2.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),
-        hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
-        hitCanvasManager: () => new HitCanvasManager()
-    });
-    useCanvas();
-
-    function toList(value) {
-        return value ? (value instanceof Array ? value : [value]) : [];
-    }
-    class EditorEvent extends Event {
-        get list() { return toList(this.value); }
-        get oldList() { return toList(this.oldValue); }
-        constructor(type, data) {
-            super(type);
-            if (data)
-                Object.assign(this, data);
-        }
-    }
-    EditorEvent.SELECT = 'editor.select';
-    EditorEvent.HOVER = 'editor.hover';
-
-    class EditorMoveEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorMoveEvent.MOVE = 'editor.move';
-
-    class EditorScaleEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorScaleEvent.SCALE = 'editor.scale';
-
-    class EditorRotateEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorRotateEvent.ROTATE = 'editor.rotate';
-
-    class EditorSkewEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorSkewEvent.SKEW = 'editor.skew';
-
-    function targetAttr(fn) {
-        return (target, key) => {
-            const privateKey = '_' + key;
-            defineKey(target, key, {
-                get() { return this[privateKey]; },
-                set(value) {
-                    const old = this[privateKey];
-                    if (old !== value)
-                        this[privateKey] = value, fn(this, old);
+    class EditorMoveEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorMoveEvent.MOVE = 'editor.move';
+
+    class EditorScaleEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorScaleEvent.SCALE = 'editor.scale';
+
+    class EditorRotateEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorRotateEvent.ROTATE = 'editor.rotate';
+
+    class EditorSkewEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
+        }
+    }
+    EditorSkewEvent.SKEW = 'editor.skew';
+
+    function targetAttr(fn) {
+        return (target, key) => {
+            const privateKey = '_' + key;
+            defineKey(target, key, {
+                get() { return this[privateKey]; },
+                set(value) {
+                    const old = this[privateKey];
+                    if (old !== value)
+                        this[privateKey] = value, fn(this, old);
                 }
             });
         };
@@ -11988,7 +11685,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { No, Yes, NoAndSkip, YesAndSkip } = exports.Answer;
+    const { No, Yes: Yes$1, NoAndSkip: NoAndSkip$1, YesAndSkip: YesAndSkip$1 } = exports.Answer;
     const EditSelectHelper = {
         findOne(path) {
             return path.list.find((leaf) => leaf.editable);
@@ -11997,20 +11694,20 @@ var LeaferUI = (function (exports) {
             if (leaf.__.hittable && leaf.__.visible && !leaf.__.locked && bounds.hit(leaf.__world)) {
                 if (leaf.__.editable) {
                     if (leaf.isBranch && !leaf.__.hitChildren) {
-                        return leaf.__.hitSelf ? YesAndSkip : NoAndSkip;
+                        return leaf.__.hitSelf ? YesAndSkip$1 : NoAndSkip$1;
                     }
                     else if (leaf.isFrame) {
-                        return bounds.includes(leaf.__layout.boxBounds, leaf.__world) ? YesAndSkip : No;
+                        return bounds.includes(leaf.__layout.boxBounds, leaf.__world) ? YesAndSkip$1 : No;
                     }
                     else {
                         if (bounds.hit(leaf.__layout.boxBounds, leaf.__world) && leaf.__.hitSelf)
-                            return Yes;
+                            return Yes$1;
                     }
                 }
                 return No;
             }
             else {
-                return leaf.isBranch ? NoAndSkip : No;
+                return leaf.isBranch ? NoAndSkip$1 : No;
             }
         }
     };
@@ -12174,7 +11871,7 @@ var LeaferUI = (function (exports) {
             return target.leafer !== this.editor.leafer;
         }
         allowDrag(e) {
-            if (this.running && this.editor.mergeConfig.boxSelect && !e.target.draggable) {
+            if (this.running && (this.editor.mergeConfig.boxSelect && Plugin.has('find')) && !e.target.draggable) {
                 return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
             }
             else {
@@ -12969,7 +12666,7 @@ ${filterStyle}
         }
     };
 
-    const debug$1 = Debug.get('EditToolCreator');
+    const debug$2 = Debug.get('EditToolCreator');
     function registerEditTool() {
         return (target) => {
             EditToolCreator.register(target);
@@ -12980,7 +12677,7 @@ ${filterStyle}
         list: {},
         register(EditTool) {
             const { tag } = EditTool.prototype;
-            list$1[tag] && debug$1.repeat(tag);
+            list$1[tag] && debug$2.repeat(tag);
             list$1[tag] = EditTool;
         },
         get(tag, editor) {
@@ -13097,7 +12794,7 @@ ${filterStyle}
             if (userConfig)
                 this.config = DataHelper.default(userConfig, this.config);
             this.addMany(this.editMask, this.selector, this.editBox);
-            if (!Plugin.check('resize', true))
+            if (!Plugin.has('resize'))
                 this.config.editSize = 'scale';
         }
         select(target) {
@@ -13890,7 +13587,153 @@ ${filterStyle}
 
     Plugin.add('resize');
 
-    Plugin.add('editor');
+    const { Yes, NoAndSkip, YesAndSkip } = exports.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$1 = exports.UI.prototype;
+    function getSelector(ui) {
+        return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+    }
+    ui$1.find = function (condition, options) {
+        return getSelector(this).getBy(condition, this, false, options);
+    };
+    ui$1.findOne = function (condition, options) {
+        return getSelector(this).getBy(condition, this, true, options);
+    };
+
+    Plugin.add('find');
+    Creator.finder = function (target) {
+        return new Finder(target);
+    };
+
+    Plugin.add('editor', 'resize', 'find');
     Creator.editor = function (options) { return new Editor(options); };
     dataType(false)(exports.Box.prototype, 'textBox');
     defineKey(exports.UI.prototype, 'editOuter', {
@@ -13971,11 +13814,11 @@ ${filterStyle}
         });
     }
 
-    const debug = Debug.get('LeaferTypeCreator');
+    const debug$1 = Debug.get('LeaferTypeCreator');
     const LeaferTypeCreator = {
         list: {},
         register(name, fn) {
-            list[name] && debug.repeat(name);
+            list[name] && debug$1.repeat(name);
             list[name] = fn;
         },
         run(name, leafer) {
@@ -14500,17 +14343,17 @@ ${filterStyle}
                 switch (command) {
                     case M$1:
                     case L$1:
-                        setPoint$1(data, i + 1, x, y, scaleX, scaleY, rotation, origin);
+                        setPoint$2(data, i + 1, x, y, scaleX, scaleY, rotation, origin);
                         i += 3;
                         break;
                     case C$1:
                         for (j = 1; j < 6; j += 2)
-                            setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                            setPoint$2(data, i + j, x, y, scaleX, scaleY, rotation, origin);
                         i += 7;
                         break;
                     case Q$1:
                         for (j = 1; j < 4; j += 2)
-                            setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                            setPoint$2(data, i + j, x, y, scaleX, scaleY, rotation, origin);
                         i += 5;
                         break;
                     case O$1:
@@ -14531,7 +14374,7 @@ ${filterStyle}
             PathMatrixHelper.layout(data, 0, 0, 1, 1, rotation, center);
         }
     };
-    function setPoint$1(data, startIndex, x, y, scaleX, scaleY, rotation, origin) {
+    function setPoint$2(data, startIndex, x, y, scaleX, scaleY, rotation, origin) {
         copyFrom$1(point, data[startIndex], data[startIndex + 1]);
         if (rotation)
             rotate$1(point, rotation, origin);
@@ -14697,7 +14540,7 @@ ${filterStyle}
                                     break;
                             }
                             if (index)
-                                setPoint(path, last, index);
+                                setPoint$1(path, last, index);
                         }
                     }
                 }
@@ -14711,7 +14554,7 @@ ${filterStyle}
         copyFrom(from, data[startIndex], data[startIndex + 1]);
         copyFrom(to, data[startIndex + 2], data[startIndex + 3]);
     }
-    function setPoint(data, point, startIndex) {
+    function setPoint$1(data, point, startIndex) {
         data[startIndex] = point.x;
         data[startIndex + 1] = point.y;
     }
@@ -14734,6 +14577,196 @@ ${filterStyle}
     arrowType('none')(ui, 'endArrow');
     Object.assign(PathArrow, PathArrowModule);
 
+    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-in/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);
+            });
+        });
+    };
+
+    Plugin.add('export');
+    Object.assign(Export, ExportModule);
+    exports.UI.prototype.export = function (filename, options) {
+        return Export.export(this, filename, options);
+    };
+
     const textCaseMap = {
         'none': 'none',
         'title': 'capitalize',
@@ -14936,8 +14969,7 @@ ${filterStyle}
         registerInnerEditor()
     ], exports.TextEditor);
 
-    Plugin.add('text-editor');
-    setTimeout(() => Plugin.check('editor', true));
+    Plugin.add('text-editor', 'editor');
 
     class HTMLTextData extends ImageData {
         setText(value) {
@@ -15040,6 +15072,7 @@ ${filterStyle}
     exports.Eventer = Eventer;
     exports.Export = Export;
     exports.FileHelper = FileHelper;
+    exports.Finder = Finder;
     exports.FrameData = FrameData;
     exports.GroupData = GroupData;
     exports.HTMLTextData = HTMLTextData;
@@ -15102,6 +15135,7 @@ ${filterStyle}
     exports.PathNumberCommandLengthMap = PathNumberCommandLengthMap;
     exports.PathNumberCommandMap = PathNumberCommandMap;
     exports.PenData = PenData;
+    exports.Picker = Picker;
     exports.Platform = Platform;
     exports.Plugin = Plugin;
     exports.Point = Point;