@leafer-ui/draw 1.0.0-rc.22 → 1.0.0-rc.24

package/lib/draw.cjs

@@ -53,10 +53,11 @@ function stateType(defaultValue) {
 function arrowType(defaultValue) {
     return core.decorateLeafAttr(defaultValue, (key) => core.attr({
         set(value) {
-            this.__setAttr(key, value);
-            const data = this.__;
-            data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-            core.doStrokeType(this);
+            if (this.__setAttr(key, value)) {
+                const data = this.__;
+                data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                core.doStrokeType(this);
+            }
         }
     }));
 }
@@ -229,7 +230,7 @@ class UIData extends core.LeafData {
 const UnitConvert = {
     number(value, percentRefer) {
         if (typeof value === 'object')
-            return value.type === 'percent' ? value.value / 100 * percentRefer : value.value;
+            return value.type === 'percent' ? value.value * percentRefer : value.value;
         return value;
     }
 };
@@ -238,7 +239,7 @@ class GroupData extends UIData {
 }
 
 class BoxData extends GroupData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class LeaferData extends GroupData {
@@ -251,11 +252,11 @@ class LineData extends UIData {
 }
 
 class RectData extends UIData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class EllipseData extends UIData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class PolygonData extends UIData {
@@ -282,6 +283,7 @@ const fontWeightMap = {
     'black': 900
 };
 class TextData extends UIData {
+    get __useNaturalRatio() { return false; }
     setFontWeight(value) {
         if (typeof value === 'string') {
             this.__setInput('fontWeight', value);
@@ -323,19 +325,18 @@ class CanvasData extends RectData {
 const UIBounds = {
     __updateStrokeSpread() {
         let width = 0, boxWidth = 0;
-        const { stroke, hitStroke, strokeAlign, strokeWidth } = this.__;
-        if ((stroke || hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
+        const data = this.__, { strokeAlign, strokeWidth } = data;
+        if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
             boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
-            if (!this.__.__boxStroke) {
-                const { miterLimit, strokeCap } = this.__;
-                const miterLimitAddWidth = this.__tag !== 'Line' ? 1 / Math.sin(miterLimit * core.OneRadian / 2) * Math.sqrt(strokeWidth) - width : 0;
-                const storkeCapAddWidth = strokeCap === 'none' ? 0 : strokeWidth;
+            if (!data.__boxStroke) {
+                const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * width;
+                const storkeCapAddWidth = data.strokeCap === 'none' ? 0 : strokeWidth;
                 width += Math.max(miterLimitAddWidth, storkeCapAddWidth);
             }
         }
-        this.__layout.strokeBoxSpread = boxWidth;
-        if (this.__.__useArrow)
+        if (data.__useArrow)
             width += strokeWidth * 5;
+        this.__layout.strokeBoxSpread = boxWidth;
         return width;
     },
     __updateRenderSpread() {
@@ -355,7 +356,7 @@ const UIBounds = {
         if (backgroundBlur)
             shapeWidth = Math.max(shapeWidth, backgroundBlur);
         this.__layout.renderShapeSpread = shapeWidth;
-        return width;
+        return width + (this.__layout.strokeSpread || 0);
     }
 };
 
@@ -446,7 +447,7 @@ function drawFast(ui, canvas, options) {
 
 const RectRender = {
     __drawFast(canvas, options) {
-        const { width, height, fill, stroke, __drawAfterFill } = this.__;
+        let { width, height, fill, stroke, __drawAfterFill } = this.__;
         if (fill) {
             canvas.fillStyle = fill;
             canvas.fillRect(0, 0, width, height);
@@ -464,7 +465,16 @@ const RectRender = {
                     canvas.strokeRect(0, 0, width, height);
                     break;
                 case 'inside':
-                    canvas.strokeRect(half, half, width - __strokeWidth, height - __strokeWidth);
+                    width -= __strokeWidth, height -= __strokeWidth;
+                    if (width < 0 || height < 0) {
+                        canvas.save();
+                        this.__clip(canvas, options);
+                        canvas.strokeRect(half, half, width, height);
+                        canvas.restore();
+                    }
+                    else {
+                        canvas.strokeRect(half, half, width, height);
+                    }
                     break;
                 case 'outside':
                     canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
@@ -492,11 +502,14 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
     }
     get pen() {
-        core.pen.set(this.path = this.__.path || []);
+        const { path } = this.__;
+        core.pen.set(this.path = path || []);
+        if (!path)
+            this.__drawPathByBox(core.pen);
         return core.pen;
     }
     get editConfig() { return undefined; }
-    get editOuter() { return 'EditTool'; }
+    get editOuter() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
     get editInner() { return 'PathEditor'; }
     constructor(data) {
         super(data);
@@ -510,22 +523,22 @@ exports.UI = UI_1 = class UI extends core.Leaf {
     }
     createProxyData() { return undefined; }
     find(_condition, _options) { return undefined; }
+    findTag(tag) { return this.find({ tag }); }
     findOne(_condition, _options) { return undefined; }
+    findId(id) { return this.findOne({ id }); }
     getPath(curve, pathForRender) {
         this.__layout.update();
         let path = pathForRender ? this.__.__pathForRender : this.__.path;
-        if (!path) {
-            const { width, height } = this.boxBounds;
-            if (width || height) {
-                core.pen.set(path = []);
-                this.__drawPathByBox(core.pen);
-            }
-        }
+        if (!path)
+            core.pen.set(path = []), this.__drawPathByBox(core.pen);
         return curve ? core.PathConvert.toCanvasData(path, true) : path;
     }
     getPathString(curve, pathForRender) {
         return core.PathConvert.stringify(this.getPath(curve, pathForRender));
     }
+    load() {
+        this.__.__computePaint();
+    }
     __onUpdateSize() {
         if (this.__.__input) {
             const data = this.__;
@@ -611,7 +624,7 @@ __decorate([
     core.opacityType(1)
 ], exports.UI.prototype, "opacity", void 0);
 __decorate([
-    core.opacityType(true)
+    core.visibleType(true)
 ], exports.UI.prototype, "visible", void 0);
 __decorate([
     stateType(false)
@@ -628,9 +641,6 @@ __decorate([
 __decorate([
     core.maskType(false)
 ], exports.UI.prototype, "mask", void 0);
-__decorate([
-    core.surfaceType('pixel')
-], exports.UI.prototype, "maskType", void 0);
 __decorate([
     core.eraserType(false)
 ], exports.UI.prototype, "eraser", void 0);
@@ -661,9 +671,75 @@ __decorate([
 __decorate([
     core.rotationType(0, true)
 ], exports.UI.prototype, "skewY", void 0);
+__decorate([
+    core.positionType(0, true)
+], exports.UI.prototype, "offsetX", void 0);
+__decorate([
+    core.positionType(0, true)
+], exports.UI.prototype, "offsetY", void 0);
+__decorate([
+    core.positionType(0, true)
+], exports.UI.prototype, "scrollX", void 0);
+__decorate([
+    core.positionType(0, true)
+], exports.UI.prototype, "scrollY", void 0);
+__decorate([
+    core.autoLayoutType()
+], exports.UI.prototype, "origin", void 0);
 __decorate([
     core.autoLayoutType()
 ], exports.UI.prototype, "around", void 0);
+__decorate([
+    core.dataType(false)
+], exports.UI.prototype, "lazy", void 0);
+__decorate([
+    core.naturalBoundsType(1)
+], exports.UI.prototype, "pixelRatio", void 0);
+__decorate([
+    core.pathInputType()
+], exports.UI.prototype, "path", void 0);
+__decorate([
+    core.pathType()
+], exports.UI.prototype, "windingRule", void 0);
+__decorate([
+    core.pathType(true)
+], exports.UI.prototype, "closed", void 0);
+__decorate([
+    core.autoLayoutType(false)
+], exports.UI.prototype, "flow", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.UI.prototype, "padding", void 0);
+__decorate([
+    core.boundsType(0)
+], exports.UI.prototype, "gap", void 0);
+__decorate([
+    core.boundsType('top-left')
+], exports.UI.prototype, "align", void 0);
+__decorate([
+    core.boundsType(false)
+], exports.UI.prototype, "wrap", void 0);
+__decorate([
+    core.boundsType('box')
+], exports.UI.prototype, "itemBox", void 0);
+__decorate([
+    core.boundsType(true)
+], exports.UI.prototype, "inFlow", void 0);
+__decorate([
+    core.boundsType()
+], exports.UI.prototype, "autoWidth", void 0);
+__decorate([
+    core.boundsType()
+], exports.UI.prototype, "autoHeight", void 0);
+__decorate([
+    core.boundsType()
+], exports.UI.prototype, "autoBox", void 0);
+__decorate([
+    core.boundsType()
+], exports.UI.prototype, "widthRange", void 0);
+__decorate([
+    core.boundsType()
+], exports.UI.prototype, "heightRange", void 0);
 __decorate([
     core.dataType(false)
 ], exports.UI.prototype, "draggable", void 0);
@@ -673,9 +749,6 @@ __decorate([
 __decorate([
     core.dataType(false)
 ], exports.UI.prototype, "editable", void 0);
-__decorate([
-    core.dataType('size')
-], exports.UI.prototype, "editSize", void 0);
 __decorate([
     core.hitType(true)
 ], exports.UI.prototype, "hittable", void 0);
@@ -730,21 +803,6 @@ __decorate([
 __decorate([
     core.strokeType(10)
 ], exports.UI.prototype, "miterLimit", void 0);
-__decorate([
-    core.dataType(false)
-], exports.UI.prototype, "lazy", void 0);
-__decorate([
-    core.naturalBoundsType(1)
-], exports.UI.prototype, "pixelRatio", void 0);
-__decorate([
-    core.pathInputType()
-], exports.UI.prototype, "path", void 0);
-__decorate([
-    core.pathType()
-], exports.UI.prototype, "windingRule", void 0);
-__decorate([
-    core.pathType(true)
-], exports.UI.prototype, "closed", void 0);
 __decorate([
     arrowType('none')
 ], exports.UI.prototype, "startArrow", void 0);
@@ -875,6 +933,7 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
     get layoutLocked() { return !this.layouter.running; }
     get FPS() { return this.renderer ? this.renderer.FPS : 60; }
     get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
+    get clientBounds() { return this.canvas && this.canvas.getClientBounds(); }
     constructor(userConfig, data) {
         super(data);
         this.config = {
@@ -978,9 +1037,6 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         const data = core.DataHelper.copyAttrs({}, size, core.canvasSizeAttrs);
         Object.keys(data).forEach(key => this[key] = data[key]);
     }
-    forceFullRender() {
-        this.forceRender();
-    }
     forceRender(bounds) {
         this.renderer.addBlock(bounds ? new core.Bounds(bounds) : this.canvas.bounds);
         if (this.viewReady)
@@ -1035,7 +1091,8 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
                 this.__changeFill(newValue);
             }
             else if (attrName === 'hittable') {
-                this.canvas.hittable = newValue;
+                if (!this.parent)
+                    this.canvas.hittable = newValue;
             }
         }
         return super.__setAttr(attrName, newValue);
@@ -1058,7 +1115,7 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
             this.canvas.backgroundColor = newValue;
         }
         else {
-            this.forceFullRender();
+            this.forceRender();
         }
     }
     __onCreated() {
@@ -1153,6 +1210,9 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
     zoom(_zoomType, _padding, _fixedScale) { return undefined; }
     getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
     getValidScale(changeScale) { return changeScale; }
+    getWorldPointByClient(clientPoint, updateClient) {
+        return this.interaction && this.interaction.getLocal(clientPoint, updateClient);
+    }
     __checkUpdateLayout() {
         this.__layout.update();
     }
@@ -1235,8 +1295,8 @@ exports.Rect = __decorate([
 
 const rect = exports.Rect.prototype;
 const group = exports.Group.prototype;
-const bounds = {};
-const { copy, add } = core.BoundsHelper;
+const childrenRenderBounds = {};
+const { copy, add, includes: includes$1 } = core.BoundsHelper;
 exports.Box = class Box extends exports.Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -1247,24 +1307,29 @@ exports.Box = class Box extends exports.Group {
     __updateStrokeSpread() { return 0; }
     __updateRectRenderSpread() { return 0; }
     __updateRenderSpread() {
-        const width = this.__updateRectRenderSpread();
-        const hide = this.__.__drawAfterFill = this.__.overflow === 'hide';
-        return (width || hide) ? width : -1;
+        return this.__updateRectRenderSpread() || -1;
     }
     __updateRectBoxBounds() { }
     __updateBoxBounds() {
         const data = this.__;
-        if (data.__autoSide && this.children.length) {
-            if (this.leafer)
-                this.leafer.layouter.addExtra(this);
-            super.__updateBoxBounds();
-            if (!data.__autoSize) {
-                const b = this.__layout.boxBounds;
-                if (!data.__autoWidth)
-                    b.x = 0, b.width = data.width;
-                if (!data.__autoHeight)
-                    b.y = 0, b.height = data.height;
+        if (this.children.length) {
+            if (data.__autoSide) {
+                if (this.leafer && this.leafer.ready)
+                    this.leafer.layouter.addExtra(this);
+                super.__updateBoxBounds();
+                if (!data.__autoSize) {
+                    const b = this.__layout.boxBounds;
+                    if (!data.__autoWidth)
+                        b.x = 0, b.width = data.width;
+                    if (!data.__autoHeight)
+                        b.y = 0, b.height = data.height;
+                }
             }
+            else {
+                this.__updateRectBoxBounds();
+            }
+            if (data.flow)
+                this.__updateContentBounds();
         }
         else {
             this.__updateRectBoxBounds();
@@ -1272,13 +1337,20 @@ exports.Box = class Box extends exports.Group {
     }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
-        this.__updateRectRenderBounds();
-        if (!this.__.__drawAfterFill) {
-            const { renderBounds } = this.__layout;
-            copy(bounds, renderBounds);
+        let isOverflow;
+        const { renderBounds } = this.__layout;
+        if (this.children.length) {
             super.__updateRenderBounds();
-            add(renderBounds, bounds);
+            copy(childrenRenderBounds, renderBounds);
+            this.__updateRectRenderBounds();
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
+        }
+        else {
+            this.__updateRectRenderBounds();
         }
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide'))
+            add(renderBounds, childrenRenderBounds);
     }
     __updateRectRenderBounds() { }
     __updateRectChange() { }
@@ -1294,16 +1366,27 @@ exports.Box = class Box extends exports.Group {
         }
         else {
             this.__renderRect(canvas, options);
-            this.__renderGroup(canvas, options);
+            if (this.children.length)
+                this.__renderGroup(canvas, options);
         }
     }
     __drawAfterFill(canvas, options) {
-        canvas.save();
-        canvas.clip();
-        this.__renderGroup(canvas, options);
-        canvas.restore();
-        if (this.__.stroke)
+        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) {
+            canvas.setWorld(this.__nowWorld);
             this.__drawRenderPath(canvas);
+        }
     }
 };
 __decorate([
@@ -1441,9 +1524,10 @@ exports.Line = class Line extends exports.UI {
         super(data);
     }
     __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints$1(path, this.__.points, this.__.closed);
+        const data = this.__;
+        const path = data.path = [];
+        if (data.points) {
+            drawPoints$1(path, data.points, false, data.closed);
         }
         else {
             moveTo$2(path, 0, 0);
@@ -1678,7 +1762,7 @@ exports.Canvas = __decorate([
     core.registerUI()
 ], exports.Canvas);
 
-const { copyAndSpread, includes, spread, setList } = core.BoundsHelper;
+const { copyAndSpread, includes, isSame, spread, setList } = core.BoundsHelper;
 exports.Text = class Text extends exports.UI {
     get __tag() { return 'Text'; }
     get editInner() { return 'TextEditor'; }
@@ -1751,7 +1835,7 @@ exports.Text = class Text extends exports.UI {
         if (italic)
             b.width += fontSize * 0.16;
         const contentBounds = includes(b, bounds) ? b : bounds;
-        if (contentBounds !== layout.contentBounds) {
+        if (!isSame(contentBounds, layout.contentBounds)) {
             layout.contentBounds = contentBounds;
             layout.renderChanged = true;
             setList(data.__textBoxBounds = {}, [b, bounds]);
@@ -1779,9 +1863,6 @@ __decorate([
 __decorate([
     core.boundsType(0)
 ], exports.Text.prototype, "height", void 0);
-__decorate([
-    core.boundsType(0)
-], exports.Text.prototype, "padding", void 0);
 __decorate([
     core.surfaceType('#000000')
 ], exports.Text.prototype, "fill", void 0);
@@ -1816,7 +1897,7 @@ __decorate([
     core.boundsType(0)
 ], exports.Text.prototype, "letterSpacing", void 0);
 __decorate([
-    core.boundsType({ type: 'percent', value: 150 })
+    core.boundsType({ type: 'percent', value: 1.5 })
 ], exports.Text.prototype, "lineHeight", void 0);
 __decorate([
     core.boundsType(0)
@@ -1910,8 +1991,6 @@ function penPathType() {
     };
 }
 
-const version = "1.0.0-rc.21";
-
 exports.BoxData = BoxData;
 exports.CanvasData = CanvasData;
 exports.ColorConvert = ColorConvert;
@@ -1944,7 +2023,6 @@ exports.arrowType = arrowType;
 exports.effectType = effectType;
 exports.resizeType = resizeType;
 exports.stateType = stateType;
-exports.version = version;
 exports.zoomLayerType = zoomLayerType;
 Object.keys(core).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {