@leafer-ui/draw 1.0.4 → 1.0.6

package/lib/draw.cjs

@@ -67,6 +67,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 = {};
@@ -87,7 +94,7 @@ const Transition = {
     }
 };
 
-const { parse } = core.PathConvert;
+const { parse, objectToCanvasData } = core.PathConvert;
 const emptyPaint = {};
 const debug$1 = core.Debug.get('UIData');
 class UIData extends core.LeafData {
@@ -101,10 +108,11 @@ class UIData extends core.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; }
@@ -121,9 +129,8 @@ class UIData extends core.LeafData {
             this.__leaf.scaleX *= -1;
             debug$1.warn('width < 0, instead -scaleX ', this);
         }
-        else {
+        else
             this._width = value;
-        }
     }
     setHeight(value) {
         if (value < 0) {
@@ -131,9 +138,8 @@ class UIData extends core.LeafData {
             this.__leaf.scaleY *= -1;
             debug$1.warn('height < 0, instead -scaleY', this);
         }
-        else {
+        else
             this._height = value;
-        }
     }
     setFill(value) {
         if (this.__naturalWidth)
@@ -174,9 +180,10 @@ class UIData extends core.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)
@@ -191,12 +198,8 @@ class UIData extends core.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);
@@ -205,12 +208,8 @@ class UIData extends core.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;
@@ -221,24 +220,19 @@ class UIData extends core.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);
         core.canvasSizeAttrs.forEach(key => delete data[key]);
         return data;
     }
@@ -265,6 +259,7 @@ class StarData extends UIData {
 }
 
 class PathData extends UIData {
+    get __pathInputed() { return 2; }
 }
 
 class PenData extends GroupData {
@@ -311,16 +306,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;
     }
@@ -347,16 +344,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;
@@ -438,6 +431,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) {
@@ -504,8 +507,8 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         return core.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);
     }
@@ -516,9 +519,8 @@ exports.UI = UI_1 = class UI extends core.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);
@@ -564,12 +566,7 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         this.__drawPathByData(canvas, this.__.path);
     }
     __drawPathByData(drawer, data) {
-        if (data) {
-            core.PathDrawer.drawPathByData(drawer, data);
-        }
-        else {
-            this.__drawPathByBox(drawer);
-        }
+        data ? core.PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer);
     }
     __drawPathByBox(drawer) {
         const { x, y, width, height } = this.__layout.boxBounds;
@@ -577,9 +574,8 @@ exports.UI = UI_1 = class UI extends core.Leaf {
             const { cornerRadius } = this.__;
             drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
         }
-        else {
+        else
             drawer.rect(x, y, width, height);
-        }
     }
     animate(_keyframe, _options, _type, _isTemp) {
         return core.needPlugin('animate');
@@ -826,23 +822,13 @@ exports.Group = class Group extends exports.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 : core.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);
@@ -1262,10 +1248,9 @@ exports.Rect = __decorate([
     core.registerUI()
 ], exports.Rect);
 
-const rect = exports.Rect.prototype;
-const group = exports.Group.prototype;
+const { copy, add, includes: includes$1 } = core.BoundsHelper;
+const rect = exports.Rect.prototype, group = exports.Group.prototype;
 const childrenRenderBounds = {};
-const { copy, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = core.BoundsHelper;
 exports.Box = class Box extends exports.Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -1275,37 +1260,31 @@ exports.Box = class Box extends exports.Group {
     }
     __updateStrokeSpread() { return 0; }
     __updateRectRenderSpread() { return 0; }
-    __updateRenderSpread() {
-        return this.__updateRectRenderSpread() || -1;
-    }
+    __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
     __updateRectBoxBounds() { }
-    __updateBoxBounds(secondLayout) {
+    __updateBoxBounds(_secondLayout) {
         const data = this.__;
         if (this.children.length) {
             if (data.__autoSide) {
-                if (this.leafer && this.leafer.ready)
-                    this.leafer.layouter.addExtra(this);
                 super.__updateBoxBounds();
                 const { boxBounds } = this.__layout;
                 if (!data.__autoSize) {
-                    if (data.__autoWidth)
-                        boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0;
-                    else
-                        boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0;
+                    if (data.__autoWidth) {
+                        boxBounds.width += boxBounds.x, boxBounds.x = 0;
+                        boxBounds.height = data.height, boxBounds.y = 0;
+                    }
+                    else {
+                        boxBounds.height += boxBounds.y, boxBounds.y = 0;
+                        boxBounds.width = data.width, boxBounds.x = 0;
+                    }
                 }
-                if (secondLayout && data.flow && data.padding)
-                    copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
                 this.__updateNaturalSize();
             }
-            else {
+            else
                 this.__updateRectBoxBounds();
-            }
-            if (data.flow)
-                this.__updateContentBounds();
         }
-        else {
+        else
             this.__updateRectBoxBounds();
-        }
     }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
@@ -1315,14 +1294,13 @@ exports.Box = class Box extends exports.Group {
             super.__updateRenderBounds();
             copy(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() { }
@@ -1342,20 +1320,9 @@ exports.Box = class Box extends exports.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);
         }
@@ -1367,6 +1334,9 @@ __decorate([
 __decorate([
     core.dataType(false)
 ], exports.Box.prototype, "resizeChildren", void 0);
+__decorate([
+    core.dataType(false)
+], exports.Box.prototype, "textBox", void 0);
 __decorate([
     core.affectRenderBoundsType('show')
 ], exports.Box.prototype, "overflow", void 0);
@@ -1516,17 +1486,15 @@ exports.Line = class Line extends exports.UI {
             if (data.__useArrow)
                 PathArrow.addArrows(this, false);
         }
-        else {
+        else
             super.__updateRenderPath();
-        }
     }
     __updateBoxBounds() {
         if (this.points) {
             toBounds(this.__.__pathForRender, this.__layout.boxBounds);
         }
-        else {
+        else
             super.__updateBoxBounds();
-        }
     }
 };
 __decorate([
@@ -1664,7 +1632,6 @@ exports.Canvas = class Canvas extends exports.Rect {
         super(data);
         this.canvas = core.Creator.canvas(this.__);
         this.context = this.canvas.context;
-        this.__.__isCanvas = this.__.__drawAfterFill = true;
         if (data && data.url)
             this.drawImage(data.url);
     }
@@ -1677,8 +1644,7 @@ exports.Canvas = class Canvas extends exports.Rect {
         });
     }
     draw(ui, offset, scale, rotation) {
-        ui.__layout.update();
-        const matrix = new core.Matrix(ui.__world).invert();
+        const matrix = new core.Matrix(ui.worldTransform).invert();
         const m = new core.Matrix();
         if (offset)
             m.translate(offset.x, offset.y);
@@ -1693,17 +1659,9 @@ exports.Canvas = class Canvas extends exports.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;
@@ -1747,7 +1705,6 @@ exports.Canvas = __decorate([
 const { copyAndSpread, includes, isSame, spread, setList } = core.BoundsHelper;
 exports.Text = class Text extends exports.UI {
     get __tag() { return 'Text'; }
-    get editInner() { return 'TextEditor'; }
     get textDrawData() {
         this.__layout.update();
         return this.__.__textDrawData;
@@ -1896,6 +1853,9 @@ __decorate([
 __decorate([
     core.boundsType('top')
 ], exports.Text.prototype, "verticalAlign", void 0);
+__decorate([
+    core.boundsType(true)
+], exports.Text.prototype, "autoSizeAlign", void 0);
 __decorate([
     core.boundsType('normal')
 ], exports.Text.prototype, "textWrap", void 0);
@@ -1910,7 +1870,6 @@ exports.Path = class Path extends exports.UI {
     get __tag() { return 'Path'; }
     constructor(data) {
         super(data);
-        this.__.__pathInputed = 2;
     }
 };
 __decorate([