leafer-ui 1.0.0-rc.23 → 1.0.0-rc.24

package/dist/web.module.js

@@ -750,7 +750,7 @@ const { float, fourNumber } = MathHelper;
 const { floor, ceil: ceil$2 } = Math;
 let right$1, bottom$1, boundsRight, boundsBottom;
 const point = {};
-const toPoint$2 = {};
+const toPoint$5 = {};
 const BoundsHelper = {
     tempBounds: {},
     set(t, x = 0, y = 0, width = 0, height = 0) {
@@ -852,17 +852,17 @@ const BoundsHelper = {
         else {
             point.x = t.x;
             point.y = t.y;
-            toOuterPoint$1(matrix, point, toPoint$2);
-            setPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
+            toOuterPoint$1(matrix, point, toPoint$5);
+            setPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.x = t.x + t.width;
-            toOuterPoint$1(matrix, point, toPoint$2);
-            addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
+            toOuterPoint$1(matrix, point, toPoint$5);
+            addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.y = t.y + t.height;
-            toOuterPoint$1(matrix, point, toPoint$2);
-            addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
+            toOuterPoint$1(matrix, point, toPoint$5);
+            addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             point.x = t.x;
-            toOuterPoint$1(matrix, point, toPoint$2);
-            addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
+            toOuterPoint$1(matrix, point, toPoint$5);
+            addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
             toBounds$4(tempPointBounds$1, to);
         }
     },
@@ -1235,10 +1235,10 @@ function get$5(around) {
     return typeof around === 'string' ? directionData[Direction9[around]] : around;
 }
 
-const { toPoint: toPoint$1 } = AroundHelper;
+const { toPoint: toPoint$4 } = AroundHelper;
 const AlignHelper = {
     toPoint(align, contentBounds, bounds, to, onlySize) {
-        toPoint$1(align, bounds, to, onlySize, contentBounds);
+        toPoint$4(align, bounds, to, onlySize, contentBounds);
     }
 };
 
@@ -1485,6 +1485,8 @@ const DataHelper = {
 const { assign } = DataHelper;
 
 class LeafData {
+    get __useNaturalRatio() { return true; }
+    get __isLinePath() { return this.path && this.path.length === 6; }
     get __blendMode() {
         if (this.eraser && this.eraser !== 'path')
             return 'destination-out';
@@ -1982,6 +1984,11 @@ class LeaferCanvasBase extends Canvas$1 {
     }
     updateViewSize() { }
     updateClientBounds() { }
+    getClientBounds(update) {
+        if (update)
+            this.updateClientBounds();
+        return this.clientBounds || this.bounds;
+    }
     startAutoLayout(_autoBounds, _listener) { }
     stopAutoLayout() { }
     setCursor(_cursor) { }
@@ -2233,7 +2240,7 @@ 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: set$2 } = PointHelper;
+const { set } = PointHelper;
 const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
 const tempPoint$2 = {};
 const BezierHelper = {
@@ -2311,9 +2318,9 @@ const BezierHelper = {
                 addPoint$2(setPointBounds, x1, y1);
             }
             if (setStartPoint)
-                set$2(setStartPoint, fromX, fromY);
+                set(setStartPoint, fromX, fromY);
             if (setEndPoint)
-                set$2(setEndPoint, x1, y1);
+                set(setEndPoint, x1, y1);
             return;
         }
         const anticlockwise = BAx * CBy - CBx * BAy < 0;
@@ -2362,7 +2369,7 @@ const BezierHelper = {
         if (setPointBounds)
             setPoint$2(setPointBounds, fromX, fromY);
         if (setStartPoint)
-            set$2(setStartPoint, fromX, fromY);
+            set(setStartPoint, fromX, fromY);
         for (let i = 0; i < parts; i++) {
             endCos = cos$3(endRadian);
             endSin = sin$3(endRadian);
@@ -2384,7 +2391,7 @@ const BezierHelper = {
             endRadian += partRadian;
         }
         if (setEndPoint)
-            set$2(setEndPoint, cx + x, cy + y);
+            set(setEndPoint, cx + x, cy + y);
     },
     quadraticCurveTo(data, fromX, fromY, x1, y1, toX, toY) {
         data.push(C$5, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY);
@@ -2530,11 +2537,15 @@ const PathConvert = {
             char = pathString[i];
             if (StringNumberMap[char]) {
                 if (char === '.') {
-                    current.dot++;
-                    if (current.dot > 1) {
+                    if (current.dot) {
                         pushData(data, num);
                         num = '';
                     }
+                    current.dot++;
+                }
+                if (num === '0' && char !== '.') {
+                    pushData(data, num);
+                    num = '';
                 }
                 num += char;
             }
@@ -3624,7 +3635,9 @@ class LeaferImage {
     }
 }
 
-function defineKey(target, key, descriptor) {
+function defineKey(target, key, descriptor, noConfigurable) {
+    if (!noConfigurable)
+        descriptor.configurable = descriptor.enumerable = true;
     Object.defineProperty(target, key, descriptor);
 }
 function getDescriptor(object, name) {
@@ -3643,9 +3656,7 @@ function attr(partDescriptor) {
 function defineLeafAttr(target, key, defaultValue, partDescriptor) {
     const defaultDescriptor = {
         get() { return this.__getAttr(key); },
-        set(value) { this.__setAttr(key, value); },
-        configurable: true,
-        enumerable: true
+        set(value) { this.__setAttr(key, value); }
     };
     defineKey(target, key, Object.assign(defaultDescriptor, partDescriptor || {}));
     defineDataProcessor(target, key, defaultValue);
@@ -3656,35 +3667,33 @@ function dataType(defaultValue) {
 function positionType(defaultValue, checkFiniteNumber) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value, checkFiniteNumber);
-            this.__layout.matrixChanged || this.__layout.matrixChange();
+            this.__setAttr(key, value, checkFiniteNumber) && (this.__layout.matrixChanged || this.__layout.matrixChange());
         }
     }));
 }
 function autoLayoutType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.matrixChanged || this.__layout.matrixChange();
-            this.__hasAutoLayout = !!value;
-            if (!this.__local)
-                this.__layout.createLocal();
+            if (this.__setAttr(key, value)) {
+                this.__layout.matrixChanged || this.__layout.matrixChange();
+                this.__hasAutoLayout = !!value;
+                if (!this.__local)
+                    this.__layout.createLocal();
+            }
         }
     }));
 }
 function scaleType(defaultValue, checkFiniteNumber) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value, checkFiniteNumber);
-            this.__layout.scaleChanged || this.__layout.scaleChange();
+            this.__setAttr(key, value, checkFiniteNumber) && (this.__layout.scaleChanged || this.__layout.scaleChange());
         }
     }));
 }
 function rotationType(defaultValue, checkFiniteNumber) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value, checkFiniteNumber);
-            this.__layout.rotationChanged || this.__layout.rotationChange();
+            this.__setAttr(key, value, checkFiniteNumber) && (this.__layout.rotationChanged || this.__layout.rotationChange());
         }
     }));
 }
@@ -3698,9 +3707,7 @@ function boundsType(defaultValue, checkFiniteNumber) {
 function naturalBoundsType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            doBoundsType(this);
-            this.__.__removeNaturalSize();
+            this.__setAttr(key, value) && (doBoundsType(this), this.__.__removeNaturalSize());
         }
     }));
 }
@@ -3712,8 +3719,11 @@ function doBoundsType(leaf) {
 function pathInputType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            if (this.__.__pathInputed !== 2)
-                this.__.__pathInputed = value ? 1 : 0;
+            const data = this.__;
+            if (data.__pathInputed !== 2)
+                data.__pathInputed = value ? 1 : 0;
+            if (!value)
+                data.__pathForRender = undefined;
             this.__setAttr(key, value);
             doBoundsType(this);
         }
@@ -3744,56 +3754,66 @@ function affectRenderBoundsType(defaultValue) {
 function surfaceType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.surfaceChanged || this.__layout.surfaceChange();
+            this.__setAttr(key, value) && (this.__layout.surfaceChanged || this.__layout.surfaceChange());
         }
     }));
 }
 function opacityType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.opacityChanged || this.__layout.opacityChange();
+            this.__setAttr(key, value) && (this.__layout.opacityChanged || this.__layout.opacityChange());
+        }
+    }));
+}
+function visibleType(defaultValue) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            const oldValue = this.visible;
+            if (this.__setAttr(key, value)) {
+                this.__layout.opacityChanged || this.__layout.opacityChange();
+                if (oldValue === 0 || value === 0)
+                    doBoundsType(this);
+            }
         }
     }));
 }
 function sortType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.surfaceChanged || this.__layout.surfaceChange();
-            this.waitParent(() => { this.parent.__layout.childrenSortChange(); });
+            if (this.__setAttr(key, value)) {
+                this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                this.waitParent(() => { this.parent.__layout.childrenSortChange(); });
+            }
         }
     }));
 }
 function maskType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.boxChanged || this.__layout.boxChange();
-            this.waitParent(() => { this.parent.__updateMask(value); });
-            if (typeof value === 'string')
-                this.maskType = value;
+            if (this.__setAttr(key, value)) {
+                this.__layout.boxChanged || this.__layout.boxChange();
+                this.waitParent(() => { this.parent.__updateMask(value); });
+            }
         }
     }));
 }
 function eraserType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.waitParent(() => { this.parent.__updateEraser(value); });
+            this.__setAttr(key, value) && this.waitParent(() => { this.parent.__updateEraser(value); });
         }
     }));
 }
 function hitType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            if (Debug.showHitView) {
-                this.__layout.surfaceChanged || this.__layout.surfaceChange();
+            if (this.__setAttr(key, value)) {
+                if (Debug.showHitView) {
+                    this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                }
+                if (this.leafer)
+                    this.leafer.updateCursor();
             }
-            if (this.leafer)
-                this.leafer.updateCursor();
         }
     }));
 }
@@ -3834,9 +3854,7 @@ function defineDataProcessor(target, key, defaultValue) {
         },
         set(value) {
             this[computedKey] = value;
-        },
-        configurable: true,
-        enumerable: true
+        }
     };
     if (defaultValue === undefined) {
         property.get = function () { return this[computedKey]; };
@@ -3844,13 +3862,25 @@ function defineDataProcessor(target, key, defaultValue) {
     else if (key === 'width') {
         property.get = function () {
             const v = this[computedKey];
-            return v === undefined ? (this.__naturalWidth || defaultValue) : v;
+            if (v === undefined) {
+                const t = this;
+                return t._height && t.__naturalWidth && t.__useNaturalRatio ? t._height * t.__naturalWidth / t.__naturalHeight : t.__naturalWidth || defaultValue;
+            }
+            else {
+                return v;
+            }
         };
     }
     else if (key === 'height') {
         property.get = function () {
             const v = this[computedKey];
-            return v === undefined ? (this.__naturalHeight || defaultValue) : v;
+            if (v === undefined) {
+                const t = this;
+                return t._width && t.__naturalHeight && t.__useNaturalRatio ? t._width * t.__naturalHeight / t.__naturalWidth : t.__naturalHeight || defaultValue;
+            }
+            else {
+                return v;
+            }
         };
     }
     let descriptor, find = data;
@@ -3864,7 +3894,7 @@ function defineDataProcessor(target, key, defaultValue) {
         property.set = data[setMethodName];
         delete data[setMethodName];
     }
-    Object.defineProperty(data, key, property);
+    defineKey(data, key, property);
 }
 
 const debug$9 = new Debug('rewrite');
@@ -4065,13 +4095,6 @@ const LeafHelper = {
                 return true;
             p = p.parent;
         }
-    },
-    hasParentAutoLayout(p) {
-        while (p.parent) {
-            p = p.parent;
-            if (p.__hasAutoLayout)
-                return true;
-        }
     }
 };
 const L = LeafHelper;
@@ -4091,13 +4114,13 @@ const LeafBoundsHelper = {
         return target.__world;
     },
     localBoxBounds(target) {
-        return target.__.eraser ? null : (target.__local || target.__layout);
+        return target.__.eraser || target.__.visible === 0 ? null : (target.__local || target.__layout);
     },
     localStrokeBounds(target) {
-        return target.__.eraser ? null : target.__layout.localStrokeBounds;
+        return target.__.eraser || target.__.visible === 0 ? null : target.__layout.localStrokeBounds;
     },
     localRenderBounds(target) {
-        return target.__.eraser ? null : target.__layout.localRenderBounds;
+        return target.__.eraser || target.__.visible === 0 ? null : target.__layout.localRenderBounds;
     },
     maskLocalBoxBounds(target) {
         return target.__.mask ? target.__localBoxBounds : null;
@@ -4803,7 +4826,7 @@ const LeafDataProxy = {
 };
 
 const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
-const { toPoint, tempPoint: tempPoint$1 } = AroundHelper;
+const { toPoint: toPoint$3, tempPoint: tempPoint$1 } = AroundHelper;
 const LeafMatrix = {
     __updateWorldMatrix() {
         multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__, this.parent && this.parent.__);
@@ -4820,7 +4843,7 @@ const LeafMatrix = {
             local.e = data.x + data.offsetX;
             local.f = data.y + data.offsetY;
             if (data.around || data.origin) {
-                toPoint(data.around || data.origin, layout.boxBounds, tempPoint$1);
+                toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$1);
                 translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
             }
         }
@@ -4828,7 +4851,7 @@ const LeafMatrix = {
     }
 };
 
-const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2, hasParentAutoLayout } = LeafHelper;
+const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
 const { updateBounds: updateBounds$1 } = BranchHelper;
 const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
 const { toBounds: toBounds$2 } = PathBounds;
@@ -4847,7 +4870,6 @@ const LeafBounds = {
                 this.__updatePath();
             this.__updateRenderPath();
             this.__updateBoxBounds();
-            layout.boxChanged = false;
             layout.resized = true;
         }
         if (layout.localBoxChanged) {
@@ -4861,12 +4883,12 @@ const LeafBounds = {
             if (this.parent)
                 this.parent.__layout.boxChange();
         }
+        layout.boxChanged = false;
         if (layout.strokeChanged) {
             layout.strokeSpread = this.__updateStrokeSpread();
             if (layout.strokeSpread) {
-                if (layout.strokeBounds === layout.boxBounds) {
+                if (layout.strokeBounds === layout.boxBounds)
                     layout.spreadStroke();
-                }
                 this.__updateStrokeBounds();
                 this.__updateLocalStrokeBounds();
             }
@@ -4874,7 +4896,7 @@ const LeafBounds = {
                 layout.spreadStrokeCancel();
             }
             layout.strokeChanged = false;
-            if (layout.renderSpread)
+            if (layout.renderSpread || layout.strokeSpread !== layout.strokeBoxSpread)
                 layout.renderChanged = true;
             if (this.parent)
                 this.parent.__layout.strokeChange();
@@ -4883,9 +4905,8 @@ const LeafBounds = {
         if (layout.renderChanged) {
             layout.renderSpread = this.__updateRenderSpread();
             if (layout.renderSpread) {
-                if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) {
+                if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds)
                     layout.spreadRender();
-                }
                 this.__updateRenderBounds();
                 this.__updateLocalRenderBounds();
             }
@@ -4925,12 +4946,15 @@ const LeafBounds = {
     __updateAutoLayout() {
         this.__layout.matrixChanged = true;
         if (this.isBranch) {
-            if (this.leafer)
+            if (this.leafer && this.leafer.ready)
                 this.leafer.layouter.addExtra(this);
-            if (this.__.flow)
-                this.__updateFlowLayout();
-            if (hasParentAutoLayout(this)) {
-                updateMatrix$1(this);
+            if (this.__.flow) {
+                if (this.__layout.boxChanged)
+                    this.__updateFlowLayout();
+                updateAllMatrix$2(this);
+                updateBounds$1(this, this);
+                if (this.__.__autoSide)
+                    this.__updateBoxBounds();
             }
             else {
                 updateAllMatrix$2(this);
@@ -4947,12 +4971,13 @@ const LeafBounds = {
         data.__naturalHeight = layout.boxBounds.height;
     },
     __updateStrokeBounds() {
-        copyAndSpread$1(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread);
+        const layout = this.__layout;
+        copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds() {
-        const { renderSpread, strokeBounds, renderBounds } = this.__layout;
-        renderSpread > 0 ? copyAndSpread$1(renderBounds, strokeBounds, renderSpread) : copy$5(renderBounds, strokeBounds);
-    },
+        const layout = this.__layout;
+        layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
+    }
 };
 
 const LeafRender = {
@@ -5072,7 +5097,7 @@ let Leaf = class Leaf {
     get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
     get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
     get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
-    get pathInputed() { return !!this.__.__pathInputed; }
+    get pathInputed() { return this.__.__pathInputed; }
     constructor(data) {
         this.innerId = create(LEAF);
         this.reset(data);
@@ -5684,6 +5709,9 @@ class LeafLevelList {
     }
 }
 
+const version = "1.0.0-rc.24";
+const inviteCode = {};
+
 const debug$7 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
     init() {
@@ -6357,7 +6385,7 @@ class Renderer {
             canvas.clear();
         }
         else {
-            bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil();
+            bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
             canvas.clearWorld(bounds, true);
             canvas.clipWorld(bounds, true);
         }
@@ -6774,10 +6802,11 @@ function stateType(defaultValue) {
 function arrowType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            const data = this.__;
-            data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-            doStrokeType(this);
+            if (this.__setAttr(key, value)) {
+                const data = this.__;
+                data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                doStrokeType(this);
+            }
         }
     }));
 }
@@ -6950,7 +6979,7 @@ class UIData extends LeafData {
 const UnitConvert = {
     number(value, percentRefer) {
         if (typeof value === 'object')
-            return value.type === 'percent' ? (value.value > 49 ? value.value / 100 : value.value) * percentRefer : value.value;
+            return value.type === 'percent' ? value.value * percentRefer : value.value;
         return value;
     }
 };
@@ -6959,7 +6988,7 @@ class GroupData extends UIData {
 }
 
 class BoxData extends GroupData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class LeaferData extends GroupData {
@@ -6972,11 +7001,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 {
@@ -7003,6 +7032,7 @@ const fontWeightMap = {
     'black': 900
 };
 class TextData extends UIData {
+    get __useNaturalRatio() { return false; }
     setFontWeight(value) {
         if (typeof value === 'string') {
             this.__setInput('fontWeight', value);
@@ -7044,19 +7074,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 * 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() {
@@ -7076,7 +7105,7 @@ const UIBounds = {
         if (backgroundBlur)
             shapeWidth = Math.max(shapeWidth, backgroundBlur);
         this.__layout.renderShapeSpread = shapeWidth;
-        return width;
+        return width + (this.__layout.strokeSpread || 0);
     }
 };
 
@@ -7167,7 +7196,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);
@@ -7185,7 +7214,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);
@@ -7213,11 +7251,14 @@ let UI = UI_1 = class UI extends Leaf {
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
     }
     get pen() {
-        pen.set(this.path = this.__.path || []);
+        const { path } = this.__;
+        pen.set(this.path = path || []);
+        if (!path)
+            this.__drawPathByBox(pen);
         return pen;
     }
     get editConfig() { return undefined; }
-    get editOuter() { return 'EditTool'; }
+    get editOuter() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
     get editInner() { return 'PathEditor'; }
     constructor(data) {
         super(data);
@@ -7237,18 +7278,16 @@ let UI = UI_1 = class UI extends Leaf {
     getPath(curve, pathForRender) {
         this.__layout.update();
         let path = pathForRender ? this.__.__pathForRender : this.__.path;
-        if (!path) {
-            const { width, height } = this.boxBounds;
-            if (width || height) {
-                pen.set(path = []);
-                this.__drawPathByBox(pen);
-            }
-        }
+        if (!path)
+            pen.set(path = []), this.__drawPathByBox(pen);
         return curve ? PathConvert.toCanvasData(path, true) : path;
     }
     getPathString(curve, pathForRender) {
         return PathConvert.stringify(this.getPath(curve, pathForRender));
     }
+    load() {
+        this.__.__computePaint();
+    }
     __onUpdateSize() {
         if (this.__.__input) {
             const data = this.__;
@@ -7334,7 +7373,7 @@ __decorate([
     opacityType(1)
 ], UI.prototype, "opacity", void 0);
 __decorate([
-    opacityType(true)
+    visibleType(true)
 ], UI.prototype, "visible", void 0);
 __decorate([
     stateType(false)
@@ -7351,9 +7390,6 @@ __decorate([
 __decorate([
     maskType(false)
 ], UI.prototype, "mask", void 0);
-__decorate([
-    surfaceType('pixel')
-], UI.prototype, "maskType", void 0);
 __decorate([
     eraserType(false)
 ], UI.prototype, "eraser", void 0);
@@ -7646,6 +7682,7 @@ let Leafer = Leafer_1 = class Leafer extends 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 = {
@@ -7803,7 +7840,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                 this.__changeFill(newValue);
             }
             else if (attrName === 'hittable') {
-                this.canvas.hittable = newValue;
+                if (!this.parent)
+                    this.canvas.hittable = newValue;
             }
         }
         return super.__setAttr(attrName, newValue);
@@ -7921,6 +7959,9 @@ let Leafer = Leafer_1 = class Leafer extends 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();
     }
@@ -8003,8 +8044,8 @@ Rect = __decorate([
 
 const rect$1 = Rect.prototype;
 const group$1 = Group.prototype;
-const bounds$1 = {};
-const { copy: copy$3, add } = BoundsHelper;
+const childrenRenderBounds = {};
+const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -8015,40 +8056,50 @@ let Box = class Box extends 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();
         }
-        if (data.flow)
-            this.__updateContentBounds();
     }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
-        this.__updateRectRenderBounds();
-        if (!this.__.__drawAfterFill) {
-            const { renderBounds } = this.__layout;
-            copy$3(bounds$1, renderBounds);
+        let isOverflow;
+        const { renderBounds } = this.__layout;
+        if (this.children.length) {
             super.__updateRenderBounds();
-            add(renderBounds, bounds$1);
+            copy$3(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() { }
@@ -8064,16 +8115,27 @@ let Box = class Box extends 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([
@@ -8211,9 +8273,10 @@ let Line = class Line extends 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);
@@ -8583,7 +8646,7 @@ __decorate([
     boundsType(0)
 ], Text.prototype, "letterSpacing", void 0);
 __decorate([
-    boundsType({ type: 'percent', value: 150 })
+    boundsType({ type: 'percent', value: 1.5 })
 ], Text.prototype, "lineHeight", void 0);
 __decorate([
     boundsType(0)
@@ -8677,8 +8740,6 @@ function penPathType() {
     };
 }
 
-const version = "1.0.0-rc.23";
-
 let App = class App extends Leafer {
     get __tag() { return 'App'; }
     get isApp() { return true; }
@@ -9778,8 +9839,8 @@ class InteractionBase {
     }
     tap(data) {
         const { pointer } = this.config;
-        const longTap = this.longTap(data);
-        if (!pointer.tapMore && longTap)
+        const hasLong = this.longTap(data);
+        if (!pointer.tapMore && hasLong)
             return;
         if (!this.waitTap)
             return;
@@ -9901,6 +9962,10 @@ class InteractionBase {
     setCursor(cursor) {
         this.cursor = cursor;
     }
+    getLocal(clientPoint, updateClient) {
+        const clientBounds = this.canvas.getClientBounds(updateClient);
+        return { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
+    }
     emitTap(data) {
         this.emit(PointerEvent.TAP, data);
         this.emit(PointerEvent.CLICK, data);
@@ -9930,14 +9995,14 @@ class InteractionBase {
         }, this.config.pointer.longPressTime);
     }
     longTap(data) {
-        let longTap;
+        let hasLong;
         if (this.longPressed) {
             this.emit(PointerEvent.LONG_TAP, data);
-            if (pathHasEventType(data.path, PointerEvent.LONG_TAP))
-                longTap = true;
+            if (pathHasEventType(data.path, PointerEvent.LONG_TAP) || pathHasEventType(data.path, PointerEvent.LONG_PRESS))
+                hasLong = true;
         }
         this.longPressWaitCancel();
-        return longTap;
+        return hasLong;
     }
     longPressWaitCancel() {
         clearTimeout(this.longPressTimer);
@@ -10295,12 +10360,6 @@ class Interaction extends InteractionBase {
             this.windowEvents = {};
         }
     }
-    getLocal(p, updateClient) {
-        if (updateClient)
-            this.canvas.updateClientBounds();
-        const { clientBounds } = this.canvas;
-        return { x: p.clientX - clientBounds.x, y: p.clientY - clientBounds.y };
-    }
     getTouches(touches) {
         const list = [];
         for (let i = 0, len = touches.length; i < len; i++) {
@@ -11188,13 +11247,14 @@ const PaintImageModule = {
     recycleImage
 };
 
-const defaultFrom$2 = { x: 0.5, y: 0 };
-const defaultTo$2 = { x: 0.5, y: 1 };
+const { toPoint: toPoint$2 } = AroundHelper;
+const realFrom$2 = {};
+const realTo$2 = {};
 function linearGradient(paint, box) {
     let { from, to, type, blendMode, opacity } = paint;
-    from || (from = defaultFrom$2);
-    to || (to = defaultTo$2);
-    const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height);
+    toPoint$2(from || 'top', box, realFrom$2);
+    toPoint$2(to || 'bottom', box, realTo$2);
+    const style = Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
     applyStops(style, paint.stops, opacity);
     const data = { type, style };
     if (blendMode)
@@ -11205,23 +11265,25 @@ function applyStops(gradient, stops, opacity) {
     let stop;
     for (let i = 0, len = stops.length; i < len; i++) {
         stop = stops[i];
-        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+        if (typeof stop === 'string') {
+            gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
+        }
+        else {
+            gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+        }
     }
 }
 
-const { set: set$1, getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
+const { getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
 const { get: get$1, rotateOfOuter: rotateOfOuter$1, scaleOfOuter: scaleOfOuter$1 } = MatrixHelper;
-const defaultFrom$1 = { x: 0.5, y: 0.5 };
-const defaultTo$1 = { x: 0.5, y: 1 };
+const { toPoint: toPoint$1 } = AroundHelper;
 const realFrom$1 = {};
 const realTo$1 = {};
 function radialGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
-    from || (from = defaultFrom$1);
-    to || (to = defaultTo$1);
-    const { x, y, width, height } = box;
-    set$1(realFrom$1, x + from.x * width, y + from.y * height);
-    set$1(realTo$1, x + to.x * width, y + to.y * height);
+    toPoint$1(from || 'center', box, realFrom$1);
+    toPoint$1(to || 'bottom', box, realTo$1);
+    const { width, height } = box;
     let transform;
     if (width !== height || stretch) {
         transform = get$1();
@@ -11236,19 +11298,16 @@ function radialGradient(paint, box) {
     return data;
 }
 
-const { set, getAngle, getDistance } = PointHelper;
+const { getAngle, getDistance } = PointHelper;
 const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
-const defaultFrom = { x: 0.5, y: 0.5 };
-const defaultTo = { x: 0.5, y: 1 };
+const { toPoint } = AroundHelper;
 const realFrom = {};
 const realTo = {};
 function conicGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
-    from || (from = defaultFrom);
-    to || (to = defaultTo);
-    const { x, y, width, height } = box;
-    set(realFrom, x + from.x * width, y + from.y * height);
-    set(realTo, x + to.x * width, y + to.y * height);
+    toPoint(from || 'center', box, realFrom);
+    toPoint(to || 'bottom', box, realTo);
+    const { width, height } = box;
     const transform = get();
     const angle = getAngle(realFrom, realTo);
     if (Platform.conicGradientRotate90) {
@@ -11402,7 +11461,7 @@ Group.prototype.__renderMask = function (canvas, options) {
                 maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
                 maskCanvas = contentCanvas = null;
             }
-            if (child.__.maskType === 'path') {
+            if (child.__.mask === 'path') {
                 if (child.opacity < 1) {
                     currentMask = 'opacity-path';
                     maskOpacity = child.opacity;
@@ -11423,7 +11482,7 @@ Group.prototype.__renderMask = function (canvas, options) {
                     contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (child.__.maskType !== 'clipping')
+            if (child.__.mask !== 'clipping')
                 continue;
         }
         if (excludeRenderBounds(child, options))
@@ -11724,11 +11783,11 @@ function layoutChar(drawData, style, width, _height) {
                     if (mode === WordMode) {
                         wordChar = { char: '', x: charX };
                         charX = toWordChar(word.data, charX, wordChar);
-                        if (wordChar.char !== ' ')
+                        if (row.isOverflow || wordChar.char !== ' ')
                             row.data.push(wordChar);
                     }
                     else {
-                        charX = toChar(word.data, charX, row.data);
+                        charX = toChar(word.data, charX, row.data, row.isOverflow);
                     }
                     if (!row.paraEnd && addWordWidth) {
                         charX += addWordWidth;
@@ -11755,9 +11814,9 @@ function toWordChar(data, charX, wordChar) {
     });
     return charX;
 }
-function toChar(data, charX, rowData) {
+function toChar(data, charX, rowData, isOverflow) {
     data.forEach(char => {
-        if (char.char !== ' ') {
+        if (isOverflow || char.char !== ' ') {
             char.x = charX;
             rowData.push(char);
         }
@@ -11789,12 +11848,14 @@ function layoutText(drawData, style) {
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
-        switch (textAlign) {
-            case 'center':
-                row.x += (width - row.width) / 2;
-                break;
-            case 'right':
-                row.x += width - row.width;
+        if (row.width < width || (row.width > width && !__clipText)) {
+            switch (textAlign) {
+                case 'center':
+                    row.x += (width - row.width) / 2;
+                    break;
+                case 'right':
+                    row.x += width - row.width;
+            }
         }
         if (row.paraStart && paraSpacing && i > 0)
             starY += paraSpacing;
@@ -12154,4 +12215,4 @@ window.addEventListener('unload', () => {
     ImageManager.destroy();
 });
 
-export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, zoomLayerType };
+export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, inviteCode, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };