leafer-ui 1.0.5 → 1.0.7

package/dist/web.js

@@ -555,6 +555,12 @@ var LeaferUI = (function (exports) {
             to.y = t.y + sin$4(r) * distance;
             return to;
         },
+        toNumberPoints(originPoints) {
+            let points = originPoints;
+            if (typeof originPoints[0] === 'object')
+                points = [], originPoints.forEach(p => points.push(p.x, p.y));
+            return points;
+        },
         reset(t) {
             P$5.reset(t);
         }
@@ -1545,7 +1551,10 @@ var LeaferUI = (function (exports) {
 
     class LeafData {
         get __useNaturalRatio() { return true; }
-        get __isLinePath() { return this.path && this.path.length === 6; }
+        get __isLinePath() {
+            const { path } = this;
+            return path && path.length === 6 && path[0] === 1;
+        }
         get __blendMode() {
             if (this.eraser && this.eraser !== 'path')
                 return 'destination-out';
@@ -2308,11 +2317,12 @@ var LeaferUI = (function (exports) {
 
     const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
-    const { set } = PointHelper;
+    const { set, toNumberPoints } = PointHelper;
     const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
     const tempPoint$2 = {};
     const BezierHelper = {
-        points(data, points, curve, close) {
+        points(data, originPoints, curve, close) {
+            let points = toNumberPoints(originPoints);
             data.push(M$5, points[0], points[1]);
             if (curve && points.length > 5) {
                 let aX, aY, bX, bY, cX, cY, c1X, c1Y, c2X, c2Y;
@@ -2821,6 +2831,27 @@ var LeaferUI = (function (exports) {
             }
             return data;
         },
+        objectToCanvasData(list) {
+            const data = [];
+            list.forEach(item => {
+                switch (item.name) {
+                    case 'M':
+                        data.push(M$4, item.x, item.y);
+                        break;
+                    case 'L':
+                        data.push(L$5, item.x, item.y);
+                        break;
+                    case 'C':
+                        data.push(C$4, item.x1, item.y1, item.x2, item.y2, item.x, item.y);
+                        break;
+                    case 'Q':
+                        data.push(Q$3, item.x1, item.y1, item.x, item.y);
+                        break;
+                    case 'Z': data.push(Z$4);
+                }
+            });
+            return data;
+        },
         copyData(data, old, index, count) {
             for (let i = index, end = index + count; i < end; i++) {
                 data.push(old[i]);
@@ -4398,13 +4429,10 @@ var LeaferUI = (function (exports) {
         update() {
             const { leafer } = this.leaf;
             if (leafer) {
-                if (leafer.ready) {
-                    if (leafer.watcher.changed)
-                        leafer.layouter.layout();
-                }
-                else {
+                if (leafer.ready)
+                    leafer.watcher.changed && leafer.layouter.layout();
+                else
                     leafer.start();
-                }
             }
             else {
                 let root = this.leaf;
@@ -5162,7 +5190,7 @@ var LeaferUI = (function (exports) {
             if (this.__worldOpacity) {
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 this.__drawRenderPath(canvas);
-                this.__.windingRule ? canvas.clip(this.__.windingRule) : canvas.clip();
+                this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
             }
         },
         __updateWorldOpacity() {
@@ -5679,11 +5707,17 @@ var LeaferUI = (function (exports) {
         add(child, index) {
             if (child === this)
                 return;
-            child.__ || (child = UICreator.get(child.tag, child));
+            const noIndex = index === undefined;
+            if (!child.__) {
+                if (child instanceof Array)
+                    return child.forEach(item => { this.add(item, index); noIndex || index++; });
+                else
+                    child = UICreator.get(child.tag, child);
+            }
             if (child.parent)
                 child.parent.remove(child);
             child.parent = this;
-            index === undefined ? this.children.push(child) : this.children.splice(index, 0, child);
+            noIndex ? this.children.push(child) : this.children.splice(index, 0, child);
             if (child.isBranch)
                 this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
             child.__layout.boxChanged || child.__layout.boxChange();
@@ -5697,9 +5731,7 @@ var LeaferUI = (function (exports) {
             }
             this.__layout.affectChildrenSort && this.__layout.childrenSortChange();
         }
-        addMany(...children) {
-            children.forEach(child => this.add(child));
-        }
+        addMany(...children) { this.add(children); }
         remove(child, destroy) {
             if (child) {
                 if (child.__) {
@@ -5927,7 +5959,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.5";
+    const version = "1.0.7";
 
     const debug$7 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6085,7 +6117,7 @@ var LeaferUI = (function (exports) {
             const oldSize = {};
             DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
             this.resize(size);
-            if (this.width !== undefined)
+            if (this.resizeListener && this.width !== undefined)
                 this.resizeListener(new ResizeEvent(size, oldSize));
         }
         unrealCanvas() {
@@ -6819,7 +6851,8 @@ var LeaferUI = (function (exports) {
                 path.add(leaf);
                 leaf = leaf.parent;
             }
-            path.add(this.target);
+            if (this.target)
+                path.add(this.target);
             return path;
         }
         getHitablePath(leaf) {
@@ -6905,8 +6938,8 @@ var LeaferUI = (function (exports) {
             this.innerIdMap = {};
             this.idMap = {};
             this.methods = {
-                id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
-                innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
+                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
@@ -6915,7 +6948,8 @@ var LeaferUI = (function (exports) {
             if (userConfig)
                 this.config = DataHelper.default(userConfig, this.config);
             this.picker = new Picker(target, this);
-            this.__listenEvents();
+            if (target)
+                this.__listenEvents();
         }
         getBy(condition, branch, one, options) {
             switch (typeof condition) {
@@ -6950,7 +6984,7 @@ var LeaferUI = (function (exports) {
             }
         }
         getByPoint(hitPoint, hitRadius, options) {
-            if (Platform.name === 'node')
+            if (Platform.name === 'node' && this.target)
                 this.target.emit(LayoutEvent.CHECK_UPDATE);
             return this.picker.getByPoint(hitPoint, hitRadius, options);
         }
@@ -7080,6 +7114,13 @@ var LeaferUI = (function (exports) {
 
     const TextConvert = {};
     const ColorConvert = {};
+    const UnitConvert = {
+        number(value, percentRefer) {
+            if (typeof value === 'object')
+                return value.type === 'percent' ? value.value * percentRefer : value.value;
+            return value;
+        }
+    };
     const PathArrow = {};
     const Paint = {};
     const PaintImage = {};
@@ -7100,7 +7141,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { parse } = PathConvert;
+    const { parse, objectToCanvasData } = PathConvert;
     const emptyPaint = {};
     const debug$4 = Debug.get('UIData');
     class UIData extends LeafData {
@@ -7114,10 +7155,11 @@ var LeaferUI = (function (exports) {
                     scaleX = -scaleX;
                 return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
             }
-            else {
+            else
                 return strokeWidth;
-            }
         }
+        get __hasStroke() { return this.stroke && this.strokeWidth; }
+        get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
         get __autoWidth() { return !this._width; }
         get __autoHeight() { return !this._height; }
         get __autoSide() { return !this._width || !this._height; }
@@ -7134,9 +7176,8 @@ var LeaferUI = (function (exports) {
                 this.__leaf.scaleX *= -1;
                 debug$4.warn('width < 0, instead -scaleX ', this);
             }
-            else {
+            else
                 this._width = value;
-            }
         }
         setHeight(value) {
             if (value < 0) {
@@ -7144,9 +7185,8 @@ var LeaferUI = (function (exports) {
                 this.__leaf.scaleY *= -1;
                 debug$4.warn('height < 0, instead -scaleY', this);
             }
-            else {
+            else
                 this._height = value;
-            }
         }
         setFill(value) {
             if (this.__naturalWidth)
@@ -7187,9 +7227,10 @@ var LeaferUI = (function (exports) {
             }
         }
         setPath(value) {
-            if (typeof value === 'string') {
+            const isString = typeof value === 'string';
+            if (isString || (value && typeof value[0] === 'object')) {
                 this.__setInput('path', value);
-                this._path = parse(value);
+                this._path = isString ? parse(value) : objectToCanvasData(value);
             }
             else {
                 if (this.__input)
@@ -7204,12 +7245,8 @@ var LeaferUI = (function (exports) {
                     value = value.filter((item) => item.visible !== false);
                 this._shadow = value.length ? value : null;
             }
-            else if (value) {
-                this._shadow = value.visible === false ? null : [value];
-            }
-            else {
-                this._shadow = null;
-            }
+            else
+                this._shadow = value && value.visible !== false ? [value] : null;
         }
         setInnerShadow(value) {
             this.__setInput('innerShadow', value);
@@ -7218,12 +7255,8 @@ var LeaferUI = (function (exports) {
                     value = value.filter((item) => item.visible !== false);
                 this._innerShadow = value.length ? value : null;
             }
-            else if (value) {
-                this._innerShadow = value.visible === false ? null : [value];
-            }
-            else {
-                this._innerShadow = null;
-            }
+            else
+                this._innerShadow = value && value.visible !== false ? [value] : null;
         }
         __computePaint() {
             const { fill, stroke } = this.__input;
@@ -7234,24 +7267,19 @@ var LeaferUI = (function (exports) {
             this.__needComputePaint = false;
         }
     }
-    const UnitConvert = {
-        number(value, percentRefer) {
-            if (typeof value === 'object')
-                return value.type === 'percent' ? value.value * percentRefer : value.value;
-            return value;
-        }
-    };
 
     class GroupData extends UIData {
     }
 
     class BoxData extends GroupData {
         get __boxStroke() { return !this.__pathInputed; }
+        get __drawAfterFill() { return this.overflow === 'hide' && this.__clipAfterFill && this.__leaf.children.length; }
+        get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
     }
 
     class LeaferData extends GroupData {
-        __getInputData() {
-            const data = super.__getInputData();
+        __getInputData(names, options) {
+            const data = super.__getInputData(names, options);
             canvasSizeAttrs.forEach(key => delete data[key]);
             return data;
         }
@@ -7278,6 +7306,7 @@ var LeaferUI = (function (exports) {
     }
 
     class PathData extends UIData {
+        get __pathInputed() { return 2; }
     }
 
     class PenData extends GroupData {
@@ -7324,16 +7353,18 @@ var LeaferUI = (function (exports) {
             delete data.fill;
             return data;
         }
-        __getInputData() {
-            const data = super.__getInputData();
+        __getInputData(names, options) {
+            const data = super.__getInputData(names, options);
             delete data.fill;
             return data;
         }
     }
 
     class CanvasData extends RectData {
-        __getInputData() {
-            const data = super.__getInputData();
+        get __isCanvas() { return true; }
+        get __drawAfterFill() { return true; }
+        __getInputData(names, options) {
+            const data = super.__getInputData(names, options);
             data.url = this.__leaf.canvas.toDataURL('image/png');
             return data;
         }
@@ -7360,16 +7391,12 @@ var LeaferUI = (function (exports) {
             let width = 0;
             const { shadow, innerShadow, blur, backgroundBlur } = this.__;
             if (shadow)
-                shadow.forEach(item => {
-                    width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5);
-                });
+                shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
             if (blur)
                 width = Math.max(width, blur);
             let shapeWidth = width = Math.ceil(width);
             if (innerShadow)
-                innerShadow.forEach(item => {
-                    shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5);
-                });
+                innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
             if (backgroundBlur)
                 shapeWidth = Math.max(shapeWidth, backgroundBlur);
             this.__layout.renderShapeSpread = shapeWidth;
@@ -7451,6 +7478,16 @@ var LeaferUI = (function (exports) {
                 if (stroke && !ignoreStroke)
                     this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
             }
+        },
+        __drawAfterFill(canvas, options) {
+            if (this.__.__clipAfterFill) {
+                canvas.save();
+                this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
+                this.__drawContent(canvas, options);
+                canvas.restore();
+            }
+            else
+                this.__drawContent(canvas, options);
         }
     };
     function drawFast(ui, canvas, options) {
@@ -7517,8 +7554,8 @@ var LeaferUI = (function (exports) {
             return pen;
         }
         get editConfig() { return undefined; }
-        get editOuter() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
-        get editInner() { return 'PathEditor'; }
+        get editOuter() { return ''; }
+        get editInner() { return ''; }
         constructor(data) {
             super(data);
         }
@@ -7529,9 +7566,8 @@ var LeaferUI = (function (exports) {
                 Object.assign(this, data);
                 this.lockNormalStyle = false;
             }
-            else {
+            else
                 Object.assign(this, data);
-            }
         }
         get(name) {
             return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -7833,23 +7869,13 @@ var LeaferUI = (function (exports) {
             if (data.children) {
                 const { children } = data;
                 delete data.children;
-                if (!this.children) {
-                    this.__setBranch();
-                }
-                else {
-                    this.clear();
-                }
+                this.children ? this.clear() : this.__setBranch();
                 super.set(data, isTemp);
-                let child;
-                children.forEach(childData => {
-                    child = childData.__ ? childData : UICreator.get(childData.tag, childData);
-                    this.add(child);
-                });
+                children.forEach(child => this.add(child));
                 data.children = children;
             }
-            else {
+            else
                 super.set(data, isTemp);
-            }
         }
         toJSON(options) {
             const data = super.toJSON(options);
@@ -8281,9 +8307,7 @@ var LeaferUI = (function (exports) {
         }
         __updateStrokeSpread() { return 0; }
         __updateRectRenderSpread() { return 0; }
-        __updateRenderSpread() {
-            return this.__updateRectRenderSpread() || -1;
-        }
+        __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
         __updateRectBoxBounds() { }
         __updateBoxBounds(_secondLayout) {
             const data = this.__;
@@ -8303,13 +8327,11 @@ var LeaferUI = (function (exports) {
                     }
                     this.__updateNaturalSize();
                 }
-                else {
+                else
                     this.__updateRectBoxBounds();
-                }
             }
-            else {
+            else
                 this.__updateRectBoxBounds();
-            }
         }
         __updateStrokeBounds() { }
         __updateRenderBounds() {
@@ -8319,14 +8341,13 @@ var LeaferUI = (function (exports) {
                 super.__updateRenderBounds();
                 copy$3(childrenRenderBounds, renderBounds);
                 this.__updateRectRenderBounds();
-                isOverflow = !includes$1(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius;
+                isOverflow = !includes$1(renderBounds, childrenRenderBounds);
+                if (isOverflow && this.__.overflow !== 'hide')
+                    add(renderBounds, childrenRenderBounds);
             }
-            else {
+            else
                 this.__updateRectRenderBounds();
-            }
-            this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
-            if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow)
-                add(renderBounds, childrenRenderBounds);
+            !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
         }
         __updateRectRenderBounds() { }
         __updateRectChange() { }
@@ -8346,20 +8367,9 @@ var LeaferUI = (function (exports) {
                     this.__renderGroup(canvas, options);
             }
         }
-        __drawAfterFill(canvas, options) {
-            const { length } = this.children;
-            if (this.isOverflow) {
-                canvas.save();
-                canvas.clip();
-                if (length)
-                    this.__renderGroup(canvas, options);
-                canvas.restore();
-            }
-            else {
-                if (length)
-                    this.__renderGroup(canvas, options);
-            }
-            if (this.__.stroke && length) {
+        __drawContent(canvas, options) {
+            this.__renderGroup(canvas, options);
+            if (this.__.__hasStroke) {
                 canvas.setWorld(this.__nowWorld);
                 this.__drawRenderPath(canvas);
             }
@@ -8523,17 +8533,15 @@ var LeaferUI = (function (exports) {
                 if (data.__useArrow)
                     PathArrow.addArrows(this, false);
             }
-            else {
+            else
                 super.__updateRenderPath();
-            }
         }
         __updateBoxBounds() {
             if (this.points) {
                 toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
             }
-            else {
+            else
                 super.__updateBoxBounds();
-            }
         }
     };
     __decorate([
@@ -8671,7 +8679,6 @@ var LeaferUI = (function (exports) {
             super(data);
             this.canvas = Creator.canvas(this.__);
             this.context = this.canvas.context;
-            this.__.__isCanvas = this.__.__drawAfterFill = true;
             if (data && data.url)
                 this.drawImage(data.url);
         }
@@ -8684,8 +8691,7 @@ var LeaferUI = (function (exports) {
             });
         }
         draw(ui, offset, scale, rotation) {
-            ui.__layout.update();
-            const matrix = new Matrix(ui.__world).invert();
+            const matrix = new Matrix(ui.worldTransform).invert();
             const m = new Matrix();
             if (offset)
                 m.translate(offset.x, offset.y);
@@ -8700,17 +8706,9 @@ var LeaferUI = (function (exports) {
         paint() {
             this.forceRender();
         }
-        __drawAfterFill(canvas, _options) {
-            const { width, height, cornerRadius } = this.__, { view } = this.canvas;
-            if (cornerRadius || this.pathInputed) {
-                canvas.save();
-                canvas.clip();
-                canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
-                canvas.restore();
-            }
-            else {
-                canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
-            }
+        __drawContent(canvas, _options) {
+            const { width, height } = this.__, { view } = this.canvas;
+            canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
         }
         __updateSize() {
             const { canvas } = this;
@@ -8754,7 +8752,6 @@ var LeaferUI = (function (exports) {
     const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() { return 'Text'; }
-        get editInner() { return 'TextEditor'; }
         get textDrawData() {
             this.__layout.update();
             return this.__.__textDrawData;
@@ -8829,9 +8826,8 @@ var LeaferUI = (function (exports) {
                 layout.renderChanged = true;
                 setList(data.__textBoxBounds = {}, [b, bounds]);
             }
-            else {
+            else
                 data.__textBoxBounds = contentBounds;
-            }
         }
         __updateRenderSpread() {
             let width = super.__updateRenderSpread();
@@ -8920,7 +8916,6 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Path'; }
         constructor(data) {
             super(data);
-            this.__.__pathInputed = 2;
         }
     };
     __decorate([
@@ -9003,21 +8998,17 @@ var LeaferUI = (function (exports) {
                     this.tree = this.addLeafer(tree);
                 if (sky || editor)
                     this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
-                if (editor) {
-                    this.editor = Creator.editor(editor);
-                    this.sky.add(this.editor);
-                }
+                if (editor)
+                    this.sky.add(this.editor = Creator.editor(editor));
             }
         }
         __setApp() {
             const { canvas } = this;
             const { realCanvas, view } = this.config;
-            if (realCanvas || view === this.canvas.view || !canvas.parentView) {
+            if (realCanvas || view === this.canvas.view || !canvas.parentView)
                 this.realCanvas = true;
-            }
-            else {
+            else
                 canvas.unrealCanvas();
-            }
             this.leafer = this;
             this.watcher.disable();
             this.layouter.disable();
@@ -9423,10 +9414,7 @@ var LeaferUI = (function (exports) {
     leafer.getValidMove = function (moveX, moveY) {
         const { scroll, disabled } = this.app.config.move;
         if (scroll) {
-            if (Math.abs(moveX) > Math.abs(moveY))
-                moveY = 0;
-            else
-                moveX = 0;
+            Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
             if (scroll === 'limit') {
                 const { x, y, width, height } = new Bounds(this.__world).addPoint(this.zoomLayer);
                 const right = x + width - this.width, bottom = y + height - this.height;
@@ -10513,17 +10501,20 @@ var LeaferUI = (function (exports) {
     };
 
     const ui = exports.UI.prototype, group = exports.Group.prototype;
+    function getSelector(ui) {
+        return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+    }
     ui.find = function (condition, options) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
+        return getSelector(this).getBy(condition, this, false, options);
     };
     ui.findOne = function (condition, options) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
+        return getSelector(this).getBy(condition, this, true, options);
     };
     group.pick = function (hitPoint, options) {
         this.__layout.update();
         if (!options)
             options = {};
-        return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
+        return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
     };
 
     const canvas$1 = LeaferCanvasBase.prototype;
@@ -11510,7 +11501,7 @@ var LeaferUI = (function (exports) {
             }
             if (allowPaint) {
                 canvas.save();
-                canvas.clip();
+                ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
                 if (paint.blendMode)
                     canvas.blendMode = paint.blendMode;
                 if (data.opacity)