leafer-ui 1.2.1 → 1.3.0

package/README.md

@@ -24,21 +24,17 @@
 
 跟随官网教程步骤（文档底部有下一步引导按钮）从浅到深的学习，动手调试每一段示例代码。
 
-[3. 开发一个画龙点睛的小游戏](https://leaferjs.com/ui/contest/guide.html)
-
-给你一条会飞的龙，看你能做出什么好玩的小游戏分享给我们 ◠‿◠
-
 ## 快速安装
 
 🚀 想马上在产品中使用，请安装 [leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)，开始你的探索之旅。
 
 ## 场景包
 
-高效绘图场景，推荐安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/install/draw/start.html) （49KB min+gzip）。
+高效绘图场景，推荐直接安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/install/draw/start.html) （51KB min+gzip）。
 
-游戏开发场景，推荐安装更省心的 [leafer-game](https://leaferjs.com/ui/guide/install/game/start.html)，已集成了游戏相关插件。
+游戏开发场景，推荐直接安装更省心的 [leafer-game](https://leaferjs.com/ui/guide/install/game/start.html)，已集成了游戏相关插件。
 
-图形编辑场景，推荐安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。
+图形编辑场景，推荐直接安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。
 
 ## 互动交流
 

package/dist/web.cjs

@@ -4,7 +4,7 @@ var core = require('@leafer/core');
 var core$1 = require('@leafer-ui/core');
 var draw = require('@leafer-ui/draw');
 
-const debug$3 = core.Debug.get('LeaferCanvas');
+const debug$2 = core.Debug.get('LeaferCanvas');
 class LeaferCanvas extends core.LeaferCanvasBase {
     set zIndex(zIndex) {
         const { style } = this.view;
@@ -76,7 +76,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
             }
         }
         else {
-            debug$3.error(`no id: ${inputView}`);
+            debug$2.error(`no id: ${inputView}`);
             this.__createView();
         }
     }
@@ -94,7 +94,8 @@ class LeaferCanvas extends core.LeaferCanvasBase {
         this.view.height = Math.ceil(height * pixelRatio);
     }
     updateClientBounds() {
-        this.clientBounds = this.view.getBoundingClientRect();
+        if (this.view.parentElement)
+            this.clientBounds = this.view.getBoundingClientRect();
     }
     startAutoLayout(autoBounds, listener) {
         this.resizeListener = listener;
@@ -113,7 +114,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
                 }
                 else {
                     this.checkAutoBounds(this.view);
-                    debug$3.warn('no parent');
+                    debug$2.warn('no parent');
                 }
             }
             catch (_a) {
@@ -449,7 +450,7 @@ class LayoutBlockData {
 }
 
 const { updateAllMatrix, updateAllChange } = core.LeafHelper;
-const debug$2 = core.Debug.get('Layouter');
+const debug$1 = core.Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
@@ -484,7 +485,7 @@ class Layouter {
             target.emitEvent(new core.LayoutEvent(core.LayoutEvent.END, this.layoutedBlocks, this.times));
         }
         catch (e) {
-            debug$2.error(e);
+            debug$1.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -498,9 +499,9 @@ class Layouter {
     }
     layoutOnce() {
         if (this.layouting)
-            return debug$2.warn('layouting');
+            return debug$1.warn('layouting');
         if (this.times > 3)
-            return debug$2.warn('layout max times');
+            return debug$1.warn('layout max times');
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -604,7 +605,7 @@ class Layouter {
     }
 }
 
-const debug$1 = core.Debug.get('Renderer');
+const debug = core.Debug.get('Renderer');
 class Renderer {
     get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
     constructor(target, canvas, userConfig) {
@@ -642,7 +643,7 @@ class Renderer {
         const { target } = this;
         this.times = 0;
         this.totalBounds = new core.Bounds();
-        debug$1.log(target.innerName, '--->');
+        debug.log(target.innerName, '--->');
         try {
             if (!target.isApp)
                 target.app.emit(core.RenderEvent.CHILD_START, target);
@@ -653,9 +654,9 @@ class Renderer {
         }
         catch (e) {
             this.rendering = false;
-            debug$1.error(e);
+            debug.error(e);
         }
-        debug$1.log('-------------|');
+        debug.log('-------------|');
     }
     renderAgain() {
         if (this.rendering) {
@@ -667,9 +668,9 @@ class Renderer {
     }
     renderOnce(callback) {
         if (this.rendering)
-            return debug$1.warn('rendering');
+            return debug.warn('rendering');
         if (this.times > 3)
-            return debug$1.warn('render max times');
+            return debug.warn('render max times');
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -706,7 +707,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug$1.warn('PartRender: need update attr');
+            return debug.warn('PartRender: need update attr');
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -809,7 +810,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$1.tip(leaf.innerName, ': empty');
+                                debug.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -975,143 +976,26 @@ class Picker {
     }
 }
 
-const { Yes, NoAndSkip, YesAndSkip } = core.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 = core.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 ? core.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 = core.Creator.finder && core.Creator.finder();
     }
     getByPoint(hitPoint, hitRadius, options) {
-        if (core.Platform.name === 'node' && this.target)
-            this.target.emit(core.LayoutEvent.CHECK_UPDATE);
+        if (core.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 && core.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_(core.ChildEvent.REMOVE, this.__onRemoveChild, this),
-            this.target.on_(core.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) : core.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();
     }
 }
 
@@ -2938,197 +2822,12 @@ const ColorConvertModule = {
     string
 };
 
-const { setPoint, addPoint, toBounds } = core.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 core.Bounds();
-    toBounds(pointBounds, bounds);
-    return bounds.scale(1 / canvas.pixelRatio).ceil();
-}
-
-const ExportModule = {
-    export(leaf, filename, options) {
-        this.running = true;
-        const fileType = core.FileHelper.fileType(filename);
-        const isDownload = filename.includes('.');
-        options = core.FileHelper.getExportOptions(options);
-        return addTask((success) => new Promise((resolve) => {
-            const over = (result) => {
-                success(result);
-                resolve();
-                this.running = false;
-            };
-            const { toURL } = core.Platform;
-            const { download } = core.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 = core.FileHelper.isOpaqueImage(filename) || fill, matrix = new core.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 };
-                    core.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 core.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 = core.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 = core.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 core.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 = core.LeaferCanvasBase.prototype;
-const debug = core.Debug.get('@leafer-ui/export');
-canvas.export = function (filename, options) {
-    const { quality, blob } = core.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) => {
-        core.Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
-            resolve(blob);
-        }).catch((e) => {
-            debug.error(e);
-            resolve(null);
-        });
-    });
-};
-canvas.toDataURL = function (type, quality) {
-    return core.Platform.origin.canvasToDataURL(this.view, type, quality);
-};
-canvas.saveAs = function (filename, quality) {
-    return new Promise((resolve) => {
-        core.Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
-            resolve(true);
-        }).catch((e) => {
-            debug.error(e);
-            resolve(false);
-        });
-    });
-};
-
 Object.assign(draw.TextConvert, TextConvertModule);
 Object.assign(draw.ColorConvert, ColorConvertModule);
 Object.assign(draw.Paint, PaintModule);
 Object.assign(draw.PaintImage, PaintImageModule);
 Object.assign(draw.PaintGradient, PaintGradientModule);
 Object.assign(draw.Effect, EffectModule);
-Object.assign(draw.Export, ExportModule);
 
 Object.assign(core.Creator, {
     interaction: (target, canvas, selector, options) => new Interaction(target, canvas, selector, options),
@@ -3144,6 +2843,7 @@ Object.defineProperty(exports, "LeaferImage", {
 exports.Interaction = Interaction;
 exports.Layouter = Layouter;
 exports.LeaferCanvas = LeaferCanvas;
+exports.Picker = Picker;
 exports.Renderer = Renderer;
 exports.Selector = Selector;
 exports.Watcher = Watcher;