leafer-ui 1.0.5 → 1.0.7

package/dist/web.module.js

@@ -552,6 +552,12 @@ const PointHelper = {
         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);
     }
@@ -1542,7 +1548,10 @@ const { assign } = DataHelper;
 
 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';
@@ -2305,11 +2314,12 @@ const RectHelper = {
 
 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;
@@ -2818,6 +2828,27 @@ const PathConvert = {
         }
         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]);
@@ -4395,13 +4426,10 @@ class LeafLayout {
     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;
@@ -5159,7 +5187,7 @@ const LeafRender = {
         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() {
@@ -5676,11 +5704,17 @@ let Branch = class Branch extends Leaf {
     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();
@@ -5694,9 +5728,7 @@ let Branch = class Branch extends Leaf {
         }
         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.__) {
@@ -5924,7 +5956,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.5";
+const version = "1.0.7";
 
 const debug$7 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6082,7 +6114,7 @@ class LeaferCanvas extends LeaferCanvasBase {
         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() {
@@ -6816,7 +6848,8 @@ class Picker {
             path.add(leaf);
             leaf = leaf.parent;
         }
-        path.add(this.target);
+        if (this.target)
+            path.add(this.target);
         return path;
     }
     getHitablePath(leaf) {
@@ -6902,8 +6935,8 @@ class Selector {
         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
@@ -6912,7 +6945,8 @@ class Selector {
         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) {
@@ -6947,7 +6981,7 @@ class Selector {
         }
     }
     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);
     }
@@ -7077,6 +7111,13 @@ function zoomLayerType() {
 
 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 = {};
@@ -7097,7 +7138,7 @@ const Transition = {
     }
 };
 
-const { parse } = PathConvert;
+const { parse, objectToCanvasData } = PathConvert;
 const emptyPaint = {};
 const debug$4 = Debug.get('UIData');
 class UIData extends LeafData {
@@ -7111,10 +7152,11 @@ class UIData extends LeafData {
                 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; }
@@ -7131,9 +7173,8 @@ class UIData extends LeafData {
             this.__leaf.scaleX *= -1;
             debug$4.warn('width < 0, instead -scaleX ', this);
         }
-        else {
+        else
             this._width = value;
-        }
     }
     setHeight(value) {
         if (value < 0) {
@@ -7141,9 +7182,8 @@ class UIData extends LeafData {
             this.__leaf.scaleY *= -1;
             debug$4.warn('height < 0, instead -scaleY', this);
         }
-        else {
+        else
             this._height = value;
-        }
     }
     setFill(value) {
         if (this.__naturalWidth)
@@ -7184,9 +7224,10 @@ class UIData extends LeafData {
         }
     }
     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)
@@ -7201,12 +7242,8 @@ class UIData extends LeafData {
                 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);
@@ -7215,12 +7252,8 @@ class UIData extends LeafData {
                 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;
@@ -7231,24 +7264,19 @@ class UIData extends LeafData {
         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;
     }
@@ -7275,6 +7303,7 @@ class StarData extends UIData {
 }
 
 class PathData extends UIData {
+    get __pathInputed() { return 2; }
 }
 
 class PenData extends GroupData {
@@ -7321,16 +7350,18 @@ class ImageData extends RectData {
         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;
     }
@@ -7357,16 +7388,12 @@ const UIBounds = {
         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;
@@ -7448,6 +7475,16 @@ const UIRender = {
             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) {
@@ -7514,8 +7551,8 @@ let UI = UI_1 = class UI extends Leaf {
         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);
     }
@@ -7526,9 +7563,8 @@ let UI = UI_1 = class UI extends Leaf {
             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);
@@ -7830,23 +7866,13 @@ let Group = class Group extends UI {
         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);
@@ -8278,9 +8304,7 @@ let Box = class Box extends Group {
     }
     __updateStrokeSpread() { return 0; }
     __updateRectRenderSpread() { return 0; }
-    __updateRenderSpread() {
-        return this.__updateRectRenderSpread() || -1;
-    }
+    __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
     __updateRectBoxBounds() { }
     __updateBoxBounds(_secondLayout) {
         const data = this.__;
@@ -8300,13 +8324,11 @@ let Box = class Box extends Group {
                 }
                 this.__updateNaturalSize();
             }
-            else {
+            else
                 this.__updateRectBoxBounds();
-            }
         }
-        else {
+        else
             this.__updateRectBoxBounds();
-        }
     }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
@@ -8316,14 +8338,13 @@ let Box = class Box extends Group {
             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() { }
@@ -8343,20 +8364,9 @@ let Box = class Box extends Group {
                 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);
         }
@@ -8520,17 +8530,15 @@ let Line = class Line extends UI {
             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([
@@ -8668,7 +8676,6 @@ let Canvas = class Canvas extends Rect {
         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);
     }
@@ -8681,8 +8688,7 @@ let Canvas = class Canvas extends Rect {
         });
     }
     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);
@@ -8697,17 +8703,9 @@ let Canvas = class Canvas extends Rect {
     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;
@@ -8751,7 +8749,6 @@ Canvas = __decorate([
 const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
-    get editInner() { return 'TextEditor'; }
     get textDrawData() {
         this.__layout.update();
         return this.__.__textDrawData;
@@ -8826,9 +8823,8 @@ let Text = class Text extends UI {
             layout.renderChanged = true;
             setList(data.__textBoxBounds = {}, [b, bounds]);
         }
-        else {
+        else
             data.__textBoxBounds = contentBounds;
-        }
     }
     __updateRenderSpread() {
         let width = super.__updateRenderSpread();
@@ -8917,7 +8913,6 @@ let Path = class Path extends UI {
     get __tag() { return 'Path'; }
     constructor(data) {
         super(data);
-        this.__.__pathInputed = 2;
     }
 };
 __decorate([
@@ -9000,21 +8995,17 @@ let App = class App extends Leafer {
                 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();
@@ -9420,10 +9411,7 @@ leafer.initType = function (type) {
 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;
@@ -10510,17 +10498,20 @@ rect.__hitFill = box$1.__hitFill = function (inner) {
 };
 
 const ui = UI.prototype, group = 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;
@@ -11507,7 +11498,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
         }
         if (allowPaint) {
             canvas.save();
-            canvas.clip();
+            ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
             if (paint.blendMode)
                 canvas.blendMode = paint.blendMode;
             if (data.opacity)