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

package/dist/web.js

@@ -753,7 +753,7 @@ var LeaferUI = (function (exports) {
     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) {
@@ -855,17 +855,17 @@ var LeaferUI = (function (exports) {
             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);
             }
         },
@@ -1238,10 +1238,10 @@ var LeaferUI = (function (exports) {
         return typeof around === 'string' ? directionData[exports.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);
         }
     };
 
@@ -1488,6 +1488,8 @@ var LeaferUI = (function (exports) {
     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';
@@ -1985,6 +1987,11 @@ var LeaferUI = (function (exports) {
         }
         updateViewSize() { }
         updateClientBounds() { }
+        getClientBounds(update) {
+            if (update)
+                this.updateClientBounds();
+            return this.clientBounds || this.bounds;
+        }
         startAutoLayout(_autoBounds, _listener) { }
         stopAutoLayout() { }
         setCursor(_cursor) { }
@@ -2236,7 +2243,7 @@ var LeaferUI = (function (exports) {
 
     const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
-    const { set: 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 = {
@@ -2314,9 +2321,9 @@ var LeaferUI = (function (exports) {
                     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;
@@ -2365,7 +2372,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -2387,7 +2394,7 @@ var LeaferUI = (function (exports) {
                 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);
@@ -2533,11 +2540,15 @@ var LeaferUI = (function (exports) {
                 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;
                 }
@@ -3627,7 +3638,9 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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) {
@@ -3646,9 +3659,7 @@ var LeaferUI = (function (exports) {
     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);
@@ -3659,35 +3670,33 @@ var LeaferUI = (function (exports) {
     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());
             }
         }));
     }
@@ -3701,9 +3710,7 @@ var LeaferUI = (function (exports) {
     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());
             }
         }));
     }
@@ -3715,8 +3722,11 @@ var LeaferUI = (function (exports) {
     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);
             }
@@ -3747,56 +3757,66 @@ var LeaferUI = (function (exports) {
     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();
             }
         }));
     }
@@ -3837,9 +3857,7 @@ var LeaferUI = (function (exports) {
             },
             set(value) {
                 this[computedKey] = value;
-            },
-            configurable: true,
-            enumerable: true
+            }
         };
         if (defaultValue === undefined) {
             property.get = function () { return this[computedKey]; };
@@ -3847,13 +3865,25 @@ var LeaferUI = (function (exports) {
         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;
@@ -3867,7 +3897,7 @@ var LeaferUI = (function (exports) {
             property.set = data[setMethodName];
             delete data[setMethodName];
         }
-        Object.defineProperty(data, key, property);
+        defineKey(data, key, property);
     }
 
     const debug$9 = new Debug('rewrite');
@@ -4068,13 +4098,6 @@ var LeaferUI = (function (exports) {
                     return true;
                 p = p.parent;
             }
-        },
-        hasParentAutoLayout(p) {
-            while (p.parent) {
-                p = p.parent;
-                if (p.__hasAutoLayout)
-                    return true;
-            }
         }
     };
     const L = LeafHelper;
@@ -4094,13 +4117,13 @@ var LeaferUI = (function (exports) {
             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;
@@ -4806,7 +4829,7 @@ var LeaferUI = (function (exports) {
     };
 
     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.__);
@@ -4823,7 +4846,7 @@ var LeaferUI = (function (exports) {
                 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);
                 }
             }
@@ -4831,7 +4854,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    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;
@@ -4850,7 +4873,6 @@ var LeaferUI = (function (exports) {
                     this.__updatePath();
                 this.__updateRenderPath();
                 this.__updateBoxBounds();
-                layout.boxChanged = false;
                 layout.resized = true;
             }
             if (layout.localBoxChanged) {
@@ -4864,12 +4886,12 @@ var LeaferUI = (function (exports) {
                 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();
                 }
@@ -4877,7 +4899,7 @@ var LeaferUI = (function (exports) {
                     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();
@@ -4886,9 +4908,8 @@ var LeaferUI = (function (exports) {
             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();
                 }
@@ -4928,12 +4949,15 @@ var LeaferUI = (function (exports) {
         __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);
@@ -4950,12 +4974,13 @@ var LeaferUI = (function (exports) {
             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 = {
@@ -5075,7 +5100,7 @@ var LeaferUI = (function (exports) {
         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);
@@ -5687,6 +5712,9 @@ var LeaferUI = (function (exports) {
         }
     }
 
+    const version = "1.0.0-rc.24";
+    const inviteCode = {};
+
     const debug$7 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
         init() {
@@ -6360,7 +6388,7 @@ var LeaferUI = (function (exports) {
                 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);
             }
@@ -6777,10 +6805,11 @@ var LeaferUI = (function (exports) {
     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);
+                }
             }
         }));
     }
@@ -6953,7 +6982,7 @@ var LeaferUI = (function (exports) {
     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;
         }
     };
@@ -6962,7 +6991,7 @@ var LeaferUI = (function (exports) {
     }
 
     class BoxData extends GroupData {
-        get __boxStroke() { return true; }
+        get __boxStroke() { return !this.__pathInputed; }
     }
 
     class LeaferData extends GroupData {
@@ -6975,11 +7004,11 @@ var LeaferUI = (function (exports) {
     }
 
     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 {
@@ -7006,6 +7035,7 @@ var LeaferUI = (function (exports) {
         'black': 900
     };
     class TextData extends UIData {
+        get __useNaturalRatio() { return false; }
         setFontWeight(value) {
             if (typeof value === 'string') {
                 this.__setInput('fontWeight', value);
@@ -7047,19 +7077,18 @@ var LeaferUI = (function (exports) {
     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() {
@@ -7079,7 +7108,7 @@ var LeaferUI = (function (exports) {
             if (backgroundBlur)
                 shapeWidth = Math.max(shapeWidth, backgroundBlur);
             this.__layout.renderShapeSpread = shapeWidth;
-            return width;
+            return width + (this.__layout.strokeSpread || 0);
         }
     };
 
@@ -7170,7 +7199,7 @@ var LeaferUI = (function (exports) {
 
     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);
@@ -7188,7 +7217,16 @@ var LeaferUI = (function (exports) {
                         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);
@@ -7216,11 +7254,14 @@ var LeaferUI = (function (exports) {
             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);
@@ -7240,18 +7281,16 @@ var LeaferUI = (function (exports) {
         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.__;
@@ -7337,7 +7376,7 @@ var LeaferUI = (function (exports) {
         opacityType(1)
     ], exports.UI.prototype, "opacity", void 0);
     __decorate([
-        opacityType(true)
+        visibleType(true)
     ], exports.UI.prototype, "visible", void 0);
     __decorate([
         stateType(false)
@@ -7354,9 +7393,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         maskType(false)
     ], exports.UI.prototype, "mask", void 0);
-    __decorate([
-        surfaceType('pixel')
-    ], exports.UI.prototype, "maskType", void 0);
     __decorate([
         eraserType(false)
     ], exports.UI.prototype, "eraser", void 0);
@@ -7649,6 +7685,7 @@ var LeaferUI = (function (exports) {
         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 = {
@@ -7806,7 +7843,8 @@ var LeaferUI = (function (exports) {
                     this.__changeFill(newValue);
                 }
                 else if (attrName === 'hittable') {
-                    this.canvas.hittable = newValue;
+                    if (!this.parent)
+                        this.canvas.hittable = newValue;
                 }
             }
             return super.__setAttr(attrName, newValue);
@@ -7924,6 +7962,9 @@ var LeaferUI = (function (exports) {
         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();
         }
@@ -8006,8 +8047,8 @@ var LeaferUI = (function (exports) {
 
     const rect$1 = exports.Rect.prototype;
     const group$1 = exports.Group.prototype;
-    const bounds$1 = {};
-    const { copy: copy$3, add } = BoundsHelper;
+    const childrenRenderBounds = {};
+    const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
         get isBranchLeaf() { return true; }
@@ -8018,40 +8059,50 @@ var LeaferUI = (function (exports) {
         __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() { }
@@ -8067,16 +8118,27 @@ var LeaferUI = (function (exports) {
             }
             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([
@@ -8214,9 +8276,10 @@ var LeaferUI = (function (exports) {
             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);
@@ -8586,7 +8649,7 @@ var LeaferUI = (function (exports) {
         boundsType(0)
     ], exports.Text.prototype, "letterSpacing", void 0);
     __decorate([
-        boundsType({ type: 'percent', value: 150 })
+        boundsType({ type: 'percent', value: 1.5 })
     ], exports.Text.prototype, "lineHeight", void 0);
     __decorate([
         boundsType(0)
@@ -8680,8 +8743,6 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const version = "1.0.0-rc.23";
-
     exports.App = class App extends exports.Leafer {
         get __tag() { return 'App'; }
         get isApp() { return true; }
@@ -9781,8 +9842,8 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -9904,6 +9965,10 @@ var LeaferUI = (function (exports) {
         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(exports.PointerEvent.TAP, data);
             this.emit(exports.PointerEvent.CLICK, data);
@@ -9933,14 +9998,14 @@ var LeaferUI = (function (exports) {
             }, this.config.pointer.longPressTime);
         }
         longTap(data) {
-            let longTap;
+            let hasLong;
             if (this.longPressed) {
                 this.emit(exports.PointerEvent.LONG_TAP, data);
-                if (pathHasEventType(data.path, exports.PointerEvent.LONG_TAP))
-                    longTap = true;
+                if (pathHasEventType(data.path, exports.PointerEvent.LONG_TAP) || pathHasEventType(data.path, exports.PointerEvent.LONG_PRESS))
+                    hasLong = true;
             }
             this.longPressWaitCancel();
-            return longTap;
+            return hasLong;
         }
         longPressWaitCancel() {
             clearTimeout(this.longPressTimer);
@@ -10298,12 +10363,6 @@ var LeaferUI = (function (exports) {
                 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++) {
@@ -11191,13 +11250,14 @@ var LeaferUI = (function (exports) {
         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)
@@ -11208,23 +11268,25 @@ var LeaferUI = (function (exports) {
         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();
@@ -11239,19 +11301,16 @@ var LeaferUI = (function (exports) {
         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) {
@@ -11405,7 +11464,7 @@ var LeaferUI = (function (exports) {
                     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;
@@ -11426,7 +11485,7 @@ var LeaferUI = (function (exports) {
                         contentCanvas = getCanvas(canvas);
                     child.__render(maskCanvas, options);
                 }
-                if (child.__.maskType !== 'clipping')
+                if (child.__.mask !== 'clipping')
                     continue;
             }
             if (excludeRenderBounds(child, options))
@@ -11727,11 +11786,11 @@ var LeaferUI = (function (exports) {
                         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;
@@ -11758,9 +11817,9 @@ var LeaferUI = (function (exports) {
         });
         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);
             }
@@ -11792,12 +11851,14 @@ var LeaferUI = (function (exports) {
         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;
@@ -12293,6 +12354,7 @@ var LeaferUI = (function (exports) {
     exports.getMatrixData = getMatrixData;
     exports.getPointData = getPointData;
     exports.hitType = hitType;
+    exports.inviteCode = inviteCode;
     exports.layoutProcessor = layoutProcessor;
     exports.maskType = maskType;
     exports.naturalBoundsType = naturalBoundsType;
@@ -12318,6 +12380,7 @@ var LeaferUI = (function (exports) {
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;
     exports.version = version;
+    exports.visibleType = visibleType;
     exports.zoomLayerType = zoomLayerType;
 
     return exports;