leafer-draw 1.3.2 → 1.4.0

package/dist/web.js

@@ -1536,10 +1536,10 @@ var LeaferUI = (function (exports) {
             Object.keys(merge).forEach(key => {
                 var _a, _b;
                 value = merge[key];
-                if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object)
+                if ((value === null || value === undefined ? undefined : value.constructor) === Object && ((_a = t[key]) === null || _a === undefined ? undefined : _a.constructor) === Object)
                     return assign(t[key], merge[key], exclude && exclude[key]);
                 if (exclude && (key in exclude)) {
-                    if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object)
+                    if (((_b = exclude[key]) === null || _b === undefined ? undefined : _b.constructor) === Object)
                         assign(t[key] = {}, merge[key], exclude[key]);
                     return;
                 }
@@ -1708,7 +1708,7 @@ var LeaferUI = (function (exports) {
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
     function __decorate(decorators, target, key, desc) {
@@ -1776,7 +1776,7 @@ var LeaferUI = (function (exports) {
         }
         setTransform(_a, _b, _c, _d, _e, _f) { }
         resetTransform() { }
-        getTransform() { return void 0; }
+        getTransform() { return undefined; }
         save() { }
         restore() { }
         transform(a, b, c, d, e, f) {
@@ -1833,12 +1833,12 @@ var LeaferUI = (function (exports) {
         ellipse(_x, _y, _radiusX, _radiusY, _rotation, _startAngle, _endAngle, _anticlockwise) { }
         rect(_x, _y, _width, _height) { }
         roundRect(_x, _y, _width, _height, _radius) { }
-        createConicGradient(_startAngle, _x, _y) { return void 0; }
-        createLinearGradient(_x0, _y0, _x1, _y1) { return void 0; }
-        createPattern(_image, _repetition) { return void 0; }
-        createRadialGradient(_x0, _y0, _r0, _x1, _y1, _r1) { return void 0; }
+        createConicGradient(_startAngle, _x, _y) { return undefined; }
+        createLinearGradient(_x0, _y0, _x1, _y1) { return undefined; }
+        createPattern(_image, _repetition) { return undefined; }
+        createRadialGradient(_x0, _y0, _r0, _x1, _y1, _r1) { return undefined; }
         fillText(_text, _x, _y, _maxWidth) { }
-        measureText(_text) { return void 0; }
+        measureText(_text) { return undefined; }
         strokeText(_text, _x, _y, _maxWidth) { }
         destroy() {
             this.context = null;
@@ -1846,79 +1846,79 @@ var LeaferUI = (function (exports) {
     }
     __decorate([
         contextAttr('imageSmoothingEnabled')
-    ], Canvas.prototype, "smooth", void 0);
+    ], Canvas.prototype, "smooth", undefined);
     __decorate([
         contextAttr('imageSmoothingQuality')
-    ], Canvas.prototype, "smoothLevel", void 0);
+    ], Canvas.prototype, "smoothLevel", undefined);
     __decorate([
         contextAttr('globalAlpha')
-    ], Canvas.prototype, "opacity", void 0);
+    ], Canvas.prototype, "opacity", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fillStyle", void 0);
+    ], Canvas.prototype, "fillStyle", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "strokeStyle", void 0);
+    ], Canvas.prototype, "strokeStyle", undefined);
     __decorate([
         contextAttr('lineWidth')
-    ], Canvas.prototype, "strokeWidth", void 0);
+    ], Canvas.prototype, "strokeWidth", undefined);
     __decorate([
         contextAttr('lineCap')
-    ], Canvas.prototype, "strokeCap", void 0);
+    ], Canvas.prototype, "strokeCap", undefined);
     __decorate([
         contextAttr('lineJoin')
-    ], Canvas.prototype, "strokeJoin", void 0);
+    ], Canvas.prototype, "strokeJoin", undefined);
     __decorate([
         contextAttr('lineDashOffset')
-    ], Canvas.prototype, "dashOffset", void 0);
+    ], Canvas.prototype, "dashOffset", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "miterLimit", void 0);
+    ], Canvas.prototype, "miterLimit", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowBlur", void 0);
+    ], Canvas.prototype, "shadowBlur", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowColor", void 0);
+    ], Canvas.prototype, "shadowColor", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowOffsetX", void 0);
+    ], Canvas.prototype, "shadowOffsetX", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "shadowOffsetY", void 0);
+    ], Canvas.prototype, "shadowOffsetY", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "filter", void 0);
+    ], Canvas.prototype, "filter", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "font", void 0);
+    ], Canvas.prototype, "font", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fontKerning", void 0);
+    ], Canvas.prototype, "fontKerning", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fontStretch", void 0);
+    ], Canvas.prototype, "fontStretch", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "fontVariantCaps", void 0);
+    ], Canvas.prototype, "fontVariantCaps", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "textAlign", void 0);
+    ], Canvas.prototype, "textAlign", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "textBaseline", void 0);
+    ], Canvas.prototype, "textBaseline", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "textRendering", void 0);
+    ], Canvas.prototype, "textRendering", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "wordSpacing", void 0);
+    ], Canvas.prototype, "wordSpacing", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "letterSpacing", void 0);
+    ], Canvas.prototype, "letterSpacing", undefined);
     __decorate([
         contextAttr()
-    ], Canvas.prototype, "direction", void 0);
+    ], Canvas.prototype, "direction", undefined);
     __decorate([
         contextMethod()
     ], Canvas.prototype, "setTransform", null);
@@ -3387,7 +3387,7 @@ var LeaferUI = (function (exports) {
             this.task = task;
         }
         run() {
-            return __awaiter(this, void 0, void 0, function* () {
+            return __awaiter(this, undefined, undefined, function* () {
                 try {
                     if (this.task && !this.isComplete && this.parent.running)
                         yield this.task();
@@ -3699,7 +3699,7 @@ var LeaferUI = (function (exports) {
         load(onSuccess, onError) {
             if (!this.loading) {
                 this.loading = true;
-                ImageManager.tasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                ImageManager.tasker.add(() => __awaiter(this, undefined, undefined, function* () {
                     return yield Platform.origin.loadImage(this.url).then((img) => {
                         this.ready = true;
                         this.width = img.naturalWidth || img.width;
@@ -3824,10 +3824,10 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
-                    this.__layout.matrixChanged || this.__layout.matrixChange();
                     this.__hasAutoLayout = !!(this.origin || this.around || this.flow);
                     if (!this.__local)
                         this.__layout.createLocal();
+                    doBoundsType(this);
                 }
             }
         }));
@@ -4210,55 +4210,62 @@ var LeaferUI = (function (exports) {
             y += t.y;
             transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
         },
-        zoomOfWorld(t, origin, scaleX, scaleY, resize) {
-            L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
+        zoomOfWorld(t, origin, scaleX, scaleY, resize, transition) {
+            L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize, transition);
         },
-        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
-            copy$6(matrix, t.__localMatrix);
+        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize, transition) {
+            const o = t.__localMatrix;
+            if (typeof scaleY !== 'number') {
+                if (scaleY)
+                    transition = scaleY;
+                scaleY = scaleX;
+            }
+            copy$6(matrix, o);
             scaleOfOuter$2(matrix, origin, scaleX, scaleY);
             if (t.origin || t.around) {
-                L.setTransform(t, matrix, resize);
+                L.setTransform(t, matrix, resize, transition);
             }
             else {
-                moveByMatrix(t, matrix);
-                t.scaleResize(scaleX, scaleY, resize !== true);
+                const x = t.x + matrix.e - o.e, y = t.y + matrix.f - o.f;
+                if (transition && !resize)
+                    t.animate({ x, y, scaleX: t.scaleX * scaleX, scaleY: t.scaleY * scaleY }, transition);
+                else
+                    t.x = x, t.y = y, t.scaleResize(scaleX, scaleY, resize !== true);
             }
         },
-        rotateOfWorld(t, origin, angle) {
-            L.rotateOfLocal(t, getTempLocal(t, origin), angle);
+        rotateOfWorld(t, origin, angle, transition) {
+            L.rotateOfLocal(t, getTempLocal(t, origin), angle, transition);
         },
-        rotateOfLocal(t, origin, angle) {
-            copy$6(matrix, t.__localMatrix);
+        rotateOfLocal(t, origin, angle, transition) {
+            const o = t.__localMatrix;
+            copy$6(matrix, o);
             rotateOfOuter$2(matrix, origin, angle);
-            if (t.origin || t.around) {
-                L.setTransform(t, matrix);
-            }
-            else {
-                moveByMatrix(t, matrix);
-                t.rotation = MathHelper.formatRotation(t.rotation + angle);
-            }
+            if (t.origin || t.around)
+                L.setTransform(t, matrix, false, transition);
+            else
+                t.set({ x: t.x + matrix.e - o.e, y: t.y + matrix.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
         },
-        skewOfWorld(t, origin, skewX, skewY, resize) {
-            L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
+        skewOfWorld(t, origin, skewX, skewY, resize, transition) {
+            L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
         },
-        skewOfLocal(t, origin, skewX, skewY = 0, resize) {
+        skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
             copy$6(matrix, t.__localMatrix);
             skewOfOuter(matrix, origin, skewX, skewY);
-            L.setTransform(t, matrix, resize);
+            L.setTransform(t, matrix, resize, transition);
         },
-        transformWorld(t, transform, resize) {
+        transformWorld(t, transform, resize, transition) {
             copy$6(matrix, t.worldTransform);
             multiplyParent$2(matrix, transform);
             if (t.parent)
                 divideParent(matrix, t.parent.worldTransform);
-            L.setTransform(t, matrix, resize);
+            L.setTransform(t, matrix, resize, transition);
         },
-        transform(t, transform, resize) {
+        transform(t, transform, resize, transition) {
             copy$6(matrix, t.localTransform);
             multiplyParent$2(matrix, transform);
-            L.setTransform(t, matrix, resize);
+            L.setTransform(t, matrix, resize, transition);
         },
-        setTransform(t, transform, resize) {
+        setTransform(t, transform, resize, transition) {
             const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
             const layout = getLayout(transform, originPoint, data.around && L.getInnerOrigin(t, data.around));
             if (resize) {
@@ -4273,7 +4280,7 @@ var LeaferUI = (function (exports) {
                 t.scaleResize(scaleX, scaleY, false);
             }
             else
-                t.set(layout);
+                t.set(layout, transition);
         },
         getFlipTransform(t, axis) {
             const m = getMatrixData();
@@ -4310,11 +4317,6 @@ var LeaferUI = (function (exports) {
     };
     const L = LeafHelper;
     const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
-    function moveByMatrix(t, matrix) {
-        const { e, f } = t.__localMatrix;
-        t.x += matrix.e - e;
-        t.y += matrix.f - f;
-    }
     function getTempLocal(t, world) {
         t.__layout.update();
         return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
@@ -5178,8 +5180,7 @@ var LeaferUI = (function (exports) {
         __updateAutoLayout() {
             this.__layout.matrixChanged = true;
             if (this.isBranch) {
-                if (this.leaferIsReady)
-                    this.leafer.layouter.addExtra(this);
+                this.__extraUpdate();
                 if (this.__.flow) {
                     if (this.__layout.boxChanged)
                         this.__updateFlowLayout();
@@ -5332,7 +5333,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 __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
+        get __inLazyBounds() { return this.leaferIsCreated && this.leafer.lazyBounds.hit(this.__world); }
         get pathInputed() { return this.__.__pathInputed; }
         set event(map) { this.on(map); }
         constructor(data) {
@@ -5443,6 +5444,10 @@ var LeaferUI = (function (exports) {
         forceRender(_bounds, _sync) {
             this.forceUpdate('surface');
         }
+        __extraUpdate() {
+            if (this.leaferIsReady)
+                this.leafer.layouter.addExtra(this);
+        }
         __updateWorldMatrix() { }
         __updateLocalMatrix() { }
         __updateWorldBounds() { }
@@ -5585,11 +5590,11 @@ var LeaferUI = (function (exports) {
             const layer = this.leafer ? this.leafer.zoomLayer : this;
             return layer.getWorldPoint(page, relative, distance, change);
         }
-        setTransform(matrix, resize) {
-            setTransform(this, matrix, resize);
+        setTransform(matrix, resize, transition) {
+            setTransform(this, matrix, resize, transition);
         }
-        transform(matrix, resize) {
-            transform(this, matrix, resize);
+        transform(matrix, resize, transition) {
+            transform(this, matrix, resize, transition);
         }
         move(x, y, transition) {
             moveLocal(this, x, y, transition);
@@ -5597,32 +5602,32 @@ var LeaferUI = (function (exports) {
         moveInner(x, y, transition) {
             moveWorld(this, x, y, true, transition);
         }
-        scaleOf(origin, scaleX, scaleY, resize) {
-            zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
+        scaleOf(origin, scaleX, scaleY, resize, transition) {
+            zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize, transition);
         }
-        rotateOf(origin, rotation) {
-            rotateOfLocal(this, getLocalOrigin(this, origin), rotation);
+        rotateOf(origin, rotation, transition) {
+            rotateOfLocal(this, getLocalOrigin(this, origin), rotation, transition);
         }
-        skewOf(origin, skewX, skewY, resize) {
-            skewOfLocal(this, getLocalOrigin(this, origin), skewX, skewY, resize);
+        skewOf(origin, skewX, skewY, resize, transition) {
+            skewOfLocal(this, getLocalOrigin(this, origin), skewX, skewY, resize, transition);
         }
-        transformWorld(worldTransform, resize) {
-            transformWorld(this, worldTransform, resize);
+        transformWorld(worldTransform, resize, transition) {
+            transformWorld(this, worldTransform, resize, transition);
         }
         moveWorld(x, y, transition) {
             moveWorld(this, x, y, false, transition);
         }
-        scaleOfWorld(worldOrigin, scaleX, scaleY, resize) {
-            zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize);
+        scaleOfWorld(worldOrigin, scaleX, scaleY, resize, transition) {
+            zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize, transition);
         }
         rotateOfWorld(worldOrigin, rotation) {
             rotateOfWorld(this, worldOrigin, rotation);
         }
-        skewOfWorld(worldOrigin, skewX, skewY, resize) {
-            skewOfWorld(this, worldOrigin, skewX, skewY, resize);
+        skewOfWorld(worldOrigin, skewX, skewY, resize, transition) {
+            skewOfWorld(this, worldOrigin, skewX, skewY, resize, transition);
         }
-        flip(axis) {
-            transform(this, getFlipTransform(this, axis));
+        flip(axis, transition) {
+            transform(this, getFlipTransform(this, axis), false, transition);
         }
         scaleResize(scaleX, scaleY = scaleX, _noResize) {
             this.scaleX *= scaleX;
@@ -6010,7 +6015,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.3.2";
+    const version = "1.4.0";
 
     const debug$4 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6130,7 +6135,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             else {
-                window.addEventListener('resize', () => {
+                window.addEventListener('resize', this.windowListener = () => {
                     const pixelRatio = Platform.devicePixelRatio;
                     if (this.pixelRatio !== pixelRatio) {
                         const { width, height } = this;
@@ -6159,11 +6164,9 @@ var LeaferUI = (function (exports) {
         }
         stopAutoLayout() {
             this.autoLayout = false;
-            this.resizeListener = null;
-            if (this.resizeObserver) {
+            if (this.resizeObserver)
                 this.resizeObserver.disconnect();
-                this.resizeObserver = null;
-            }
+            this.resizeListener = this.resizeObserver = null;
         }
         emitResize(size) {
             const oldSize = {};
@@ -6184,6 +6187,10 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.view) {
                 this.stopAutoLayout();
+                if (this.windowListener) {
+                    window.removeEventListener('resize', this.windowListener);
+                    this.windowListener = null;
+                }
                 if (!this.unreal) {
                     const view = this.view;
                     if (view.parentElement)
@@ -6210,7 +6217,10 @@ var LeaferUI = (function (exports) {
                 canvas.height = height;
                 return canvas;
             },
-            canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+            canvasToDataURL: (canvas, type, quality) => {
+                const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
+                return imageType === 'image/bmp' ? url.replace('image/png;', 'image/bmp;') : url;
+            },
             canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
             canvasSaveAs: (canvas, filename, quality) => {
                 const url = canvas.toDataURL(mineType(fileType(filename)), quality);
@@ -6255,7 +6265,7 @@ var LeaferUI = (function (exports) {
     Platform.name = 'web';
     Platform.isMobile = 'ontouchstart' in window;
     Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-    defineKey(Platform, 'devicePixelRatio', { get() { return Math.max(1, devicePixelRatio); } });
+    defineKey(Platform, 'devicePixelRatio', { get() { return devicePixelRatio; } });
     const { userAgent } = navigator;
     if (userAgent.indexOf("Firefox") > -1) {
         Platform.conicGradientRotate90 = true;
@@ -6531,7 +6541,7 @@ var LeaferUI = (function (exports) {
         }
         partLayout() {
             var _a;
-            if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
+            if (!((_a = this.__updatedList) === null || _a === undefined ? undefined : _a.length))
                 return;
             const t = Run.start('PartLayout');
             const { target, __updatedList: updateList } = this;
@@ -6946,6 +6956,7 @@ var LeaferUI = (function (exports) {
             return t.fill && this.__hasStroke;
         }
         get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
+        get __hasSurface() { const t = this; return (t.fill || t.stroke); }
         get __autoWidth() { return !this._width; }
         get __autoHeight() { return !this._height; }
         get __autoSide() { return !this._width || !this._height; }
@@ -7449,199 +7460,199 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(UIData)
-    ], exports.UI.prototype, "__", void 0);
+    ], exports.UI.prototype, "__", undefined);
     __decorate([
         zoomLayerType()
-    ], exports.UI.prototype, "zoomLayer", void 0);
+    ], exports.UI.prototype, "zoomLayer", undefined);
     __decorate([
         dataType('')
-    ], exports.UI.prototype, "id", void 0);
+    ], exports.UI.prototype, "id", undefined);
     __decorate([
         dataType('')
-    ], exports.UI.prototype, "name", void 0);
+    ], exports.UI.prototype, "name", undefined);
     __decorate([
         dataType('')
-    ], exports.UI.prototype, "className", void 0);
+    ], exports.UI.prototype, "className", undefined);
     __decorate([
         surfaceType('pass-through')
-    ], exports.UI.prototype, "blendMode", void 0);
+    ], exports.UI.prototype, "blendMode", undefined);
     __decorate([
         opacityType(1)
-    ], exports.UI.prototype, "opacity", void 0);
+    ], exports.UI.prototype, "opacity", undefined);
     __decorate([
         visibleType(true)
-    ], exports.UI.prototype, "visible", void 0);
+    ], exports.UI.prototype, "visible", undefined);
     __decorate([
         surfaceType(false)
-    ], exports.UI.prototype, "locked", void 0);
+    ], exports.UI.prototype, "locked", undefined);
     __decorate([
         sortType(0)
-    ], exports.UI.prototype, "zIndex", void 0);
+    ], exports.UI.prototype, "zIndex", undefined);
     __decorate([
         maskType(false)
-    ], exports.UI.prototype, "mask", void 0);
+    ], exports.UI.prototype, "mask", undefined);
     __decorate([
         eraserType(false)
-    ], exports.UI.prototype, "eraser", void 0);
+    ], exports.UI.prototype, "eraser", undefined);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "x", void 0);
+    ], exports.UI.prototype, "x", undefined);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "y", void 0);
+    ], exports.UI.prototype, "y", undefined);
     __decorate([
         boundsType(100, true)
-    ], exports.UI.prototype, "width", void 0);
+    ], exports.UI.prototype, "width", undefined);
     __decorate([
         boundsType(100, true)
-    ], exports.UI.prototype, "height", void 0);
+    ], exports.UI.prototype, "height", undefined);
     __decorate([
         scaleType(1, true)
-    ], exports.UI.prototype, "scaleX", void 0);
+    ], exports.UI.prototype, "scaleX", undefined);
     __decorate([
         scaleType(1, true)
-    ], exports.UI.prototype, "scaleY", void 0);
+    ], exports.UI.prototype, "scaleY", undefined);
     __decorate([
         rotationType(0, true)
-    ], exports.UI.prototype, "rotation", void 0);
+    ], exports.UI.prototype, "rotation", undefined);
     __decorate([
         rotationType(0, true)
-    ], exports.UI.prototype, "skewX", void 0);
+    ], exports.UI.prototype, "skewX", undefined);
     __decorate([
         rotationType(0, true)
-    ], exports.UI.prototype, "skewY", void 0);
+    ], exports.UI.prototype, "skewY", undefined);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "offsetX", void 0);
+    ], exports.UI.prototype, "offsetX", undefined);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "offsetY", void 0);
+    ], exports.UI.prototype, "offsetY", undefined);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "scrollX", void 0);
+    ], exports.UI.prototype, "scrollX", undefined);
     __decorate([
         positionType(0, true)
-    ], exports.UI.prototype, "scrollY", void 0);
+    ], exports.UI.prototype, "scrollY", undefined);
     __decorate([
         autoLayoutType()
-    ], exports.UI.prototype, "origin", void 0);
+    ], exports.UI.prototype, "origin", undefined);
     __decorate([
         autoLayoutType()
-    ], exports.UI.prototype, "around", void 0);
+    ], exports.UI.prototype, "around", undefined);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "lazy", void 0);
+    ], exports.UI.prototype, "lazy", undefined);
     __decorate([
         naturalBoundsType(1)
-    ], exports.UI.prototype, "pixelRatio", void 0);
+    ], exports.UI.prototype, "pixelRatio", undefined);
     __decorate([
         pathInputType()
-    ], exports.UI.prototype, "path", void 0);
+    ], exports.UI.prototype, "path", undefined);
     __decorate([
         pathType()
-    ], exports.UI.prototype, "windingRule", void 0);
+    ], exports.UI.prototype, "windingRule", undefined);
     __decorate([
         pathType(true)
-    ], exports.UI.prototype, "closed", void 0);
+    ], exports.UI.prototype, "closed", undefined);
     __decorate([
         boundsType(0)
-    ], exports.UI.prototype, "padding", void 0);
+    ], exports.UI.prototype, "padding", undefined);
     __decorate([
         boundsType(false)
-    ], exports.UI.prototype, "lockRatio", void 0);
+    ], exports.UI.prototype, "lockRatio", undefined);
     __decorate([
         boundsType()
-    ], exports.UI.prototype, "widthRange", void 0);
+    ], exports.UI.prototype, "widthRange", undefined);
     __decorate([
         boundsType()
-    ], exports.UI.prototype, "heightRange", void 0);
+    ], exports.UI.prototype, "heightRange", undefined);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "draggable", void 0);
+    ], exports.UI.prototype, "draggable", undefined);
     __decorate([
         dataType()
-    ], exports.UI.prototype, "dragBounds", void 0);
+    ], exports.UI.prototype, "dragBounds", undefined);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "editable", void 0);
+    ], exports.UI.prototype, "editable", undefined);
     __decorate([
         hitType(true)
-    ], exports.UI.prototype, "hittable", void 0);
+    ], exports.UI.prototype, "hittable", undefined);
     __decorate([
         hitType('path')
-    ], exports.UI.prototype, "hitFill", void 0);
+    ], exports.UI.prototype, "hitFill", undefined);
     __decorate([
         strokeType('path')
-    ], exports.UI.prototype, "hitStroke", void 0);
+    ], exports.UI.prototype, "hitStroke", undefined);
     __decorate([
         hitType(false)
-    ], exports.UI.prototype, "hitBox", void 0);
+    ], exports.UI.prototype, "hitBox", undefined);
     __decorate([
         hitType(true)
-    ], exports.UI.prototype, "hitChildren", void 0);
+    ], exports.UI.prototype, "hitChildren", undefined);
     __decorate([
         hitType(true)
-    ], exports.UI.prototype, "hitSelf", void 0);
+    ], exports.UI.prototype, "hitSelf", undefined);
     __decorate([
         hitType()
-    ], exports.UI.prototype, "hitRadius", void 0);
+    ], exports.UI.prototype, "hitRadius", undefined);
     __decorate([
         cursorType('')
-    ], exports.UI.prototype, "cursor", void 0);
+    ], exports.UI.prototype, "cursor", undefined);
     __decorate([
         surfaceType()
-    ], exports.UI.prototype, "fill", void 0);
+    ], exports.UI.prototype, "fill", undefined);
     __decorate([
         strokeType()
-    ], exports.UI.prototype, "stroke", void 0);
+    ], exports.UI.prototype, "stroke", undefined);
     __decorate([
         strokeType('inside')
-    ], exports.UI.prototype, "strokeAlign", void 0);
+    ], exports.UI.prototype, "strokeAlign", undefined);
     __decorate([
         strokeType(1)
-    ], exports.UI.prototype, "strokeWidth", void 0);
+    ], exports.UI.prototype, "strokeWidth", undefined);
     __decorate([
         strokeType(false)
-    ], exports.UI.prototype, "strokeWidthFixed", void 0);
+    ], exports.UI.prototype, "strokeWidthFixed", undefined);
     __decorate([
         strokeType('none')
-    ], exports.UI.prototype, "strokeCap", void 0);
+    ], exports.UI.prototype, "strokeCap", undefined);
     __decorate([
         strokeType('miter')
-    ], exports.UI.prototype, "strokeJoin", void 0);
+    ], exports.UI.prototype, "strokeJoin", undefined);
     __decorate([
         strokeType()
-    ], exports.UI.prototype, "dashPattern", void 0);
+    ], exports.UI.prototype, "dashPattern", undefined);
     __decorate([
         strokeType()
-    ], exports.UI.prototype, "dashOffset", void 0);
+    ], exports.UI.prototype, "dashOffset", undefined);
     __decorate([
         strokeType(10)
-    ], exports.UI.prototype, "miterLimit", void 0);
+    ], exports.UI.prototype, "miterLimit", undefined);
     __decorate([
         pathType(0)
-    ], exports.UI.prototype, "cornerRadius", void 0);
+    ], exports.UI.prototype, "cornerRadius", undefined);
     __decorate([
         pathType()
-    ], exports.UI.prototype, "cornerSmoothing", void 0);
+    ], exports.UI.prototype, "cornerSmoothing", undefined);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "shadow", void 0);
+    ], exports.UI.prototype, "shadow", undefined);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "innerShadow", void 0);
+    ], exports.UI.prototype, "innerShadow", undefined);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "blur", void 0);
+    ], exports.UI.prototype, "blur", undefined);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "backgroundBlur", void 0);
+    ], exports.UI.prototype, "backgroundBlur", undefined);
     __decorate([
         effectType()
-    ], exports.UI.prototype, "grayscale", void 0);
+    ], exports.UI.prototype, "grayscale", undefined);
     __decorate([
         dataType({})
-    ], exports.UI.prototype, "data", void 0);
+    ], exports.UI.prototype, "data", undefined);
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
@@ -7702,7 +7713,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(GroupData)
-    ], exports.Group.prototype, "__", void 0);
+    ], exports.Group.prototype, "__", undefined);
     exports.Group = __decorate([
         useModule(exports.Branch),
         registerUI()
@@ -7873,8 +7884,6 @@ var LeaferUI = (function (exports) {
         __setAttr(attrName, newValue) {
             if (this.canvas) {
                 if (canvasSizeAttrs.includes(attrName)) {
-                    if (!newValue)
-                        debug.warn(attrName + ' is 0');
                     this.__changeCanvasSize(attrName, newValue);
                 }
                 else if (attrName === 'fill') {
@@ -8077,10 +8086,10 @@ var LeaferUI = (function (exports) {
     exports.Leafer.list = new LeafList();
     __decorate([
         dataProcessor(LeaferData)
-    ], exports.Leafer.prototype, "__", void 0);
+    ], exports.Leafer.prototype, "__", undefined);
     __decorate([
         boundsType()
-    ], exports.Leafer.prototype, "pixelRatio", void 0);
+    ], exports.Leafer.prototype, "pixelRatio", undefined);
     exports.Leafer = Leafer_1 = __decorate([
         registerUI()
     ], exports.Leafer);
@@ -8093,7 +8102,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(RectData)
-    ], exports.Rect.prototype, "__", void 0);
+    ], exports.Rect.prototype, "__", undefined);
     exports.Rect = __decorate([
         useModule(RectRender),
         rewriteAble(),
@@ -8118,6 +8127,8 @@ var LeaferUI = (function (exports) {
             const data = this.__;
             if (this.children.length) {
                 if (data.__autoSide) {
+                    if (data.__hasSurface)
+                        this.__extraUpdate();
                     super.__updateBoxBounds();
                     const { boxBounds } = this.__layout;
                     if (!data.__autoSize) {
@@ -8182,13 +8193,13 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(BoxData)
-    ], exports.Box.prototype, "__", void 0);
+    ], exports.Box.prototype, "__", undefined);
     __decorate([
         dataType(false)
-    ], exports.Box.prototype, "resizeChildren", void 0);
+    ], exports.Box.prototype, "resizeChildren", undefined);
     __decorate([
         affectRenderBoundsType('show')
-    ], exports.Box.prototype, "overflow", void 0);
+    ], exports.Box.prototype, "overflow", undefined);
     __decorate([
         rewrite(rect.__updateStrokeSpread)
     ], exports.Box.prototype, "__updateStrokeSpread", null);
@@ -8227,13 +8238,13 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(FrameData)
-    ], exports.Frame.prototype, "__", void 0);
+    ], exports.Frame.prototype, "__", undefined);
     __decorate([
         surfaceType('#FFFFFF')
-    ], exports.Frame.prototype, "fill", void 0);
+    ], exports.Frame.prototype, "fill", undefined);
     __decorate([
         affectRenderBoundsType('hide')
-    ], exports.Frame.prototype, "overflow", void 0);
+    ], exports.Frame.prototype, "overflow", undefined);
     exports.Frame = __decorate([
         registerUI()
     ], exports.Frame);
@@ -8280,16 +8291,16 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(EllipseData)
-    ], exports.Ellipse.prototype, "__", void 0);
+    ], exports.Ellipse.prototype, "__", undefined);
     __decorate([
         pathType(0)
-    ], exports.Ellipse.prototype, "innerRadius", void 0);
+    ], exports.Ellipse.prototype, "innerRadius", undefined);
     __decorate([
         pathType(0)
-    ], exports.Ellipse.prototype, "startAngle", void 0);
+    ], exports.Ellipse.prototype, "startAngle", undefined);
     __decorate([
         pathType(0)
-    ], exports.Ellipse.prototype, "endAngle", void 0);
+    ], exports.Ellipse.prototype, "endAngle", undefined);
     exports.Ellipse = __decorate([
         registerUI()
     ], exports.Ellipse);
@@ -8348,22 +8359,22 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(LineData)
-    ], exports.Line.prototype, "__", void 0);
+    ], exports.Line.prototype, "__", undefined);
     __decorate([
         affectStrokeBoundsType('center')
-    ], exports.Line.prototype, "strokeAlign", void 0);
+    ], exports.Line.prototype, "strokeAlign", undefined);
     __decorate([
         boundsType(0)
-    ], exports.Line.prototype, "height", void 0);
+    ], exports.Line.prototype, "height", undefined);
     __decorate([
         pathType()
-    ], exports.Line.prototype, "points", void 0);
+    ], exports.Line.prototype, "points", undefined);
     __decorate([
         pathType(0)
-    ], exports.Line.prototype, "curve", void 0);
+    ], exports.Line.prototype, "curve", undefined);
     __decorate([
         pathType(false)
-    ], exports.Line.prototype, "closed", void 0);
+    ], exports.Line.prototype, "closed", undefined);
     exports.Line = __decorate([
         registerUI()
     ], exports.Line);
@@ -8396,16 +8407,16 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(PolygonData)
-    ], exports.Polygon.prototype, "__", void 0);
+    ], exports.Polygon.prototype, "__", undefined);
     __decorate([
         pathType(3)
-    ], exports.Polygon.prototype, "sides", void 0);
+    ], exports.Polygon.prototype, "sides", undefined);
     __decorate([
         pathType()
-    ], exports.Polygon.prototype, "points", void 0);
+    ], exports.Polygon.prototype, "points", undefined);
     __decorate([
         pathType(0)
-    ], exports.Polygon.prototype, "curve", void 0);
+    ], exports.Polygon.prototype, "curve", undefined);
     __decorate([
         rewrite(line.__updateRenderPath)
     ], exports.Polygon.prototype, "__updateRenderPath", null);
@@ -8437,13 +8448,13 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(StarData)
-    ], exports.Star.prototype, "__", void 0);
+    ], exports.Star.prototype, "__", undefined);
     __decorate([
         pathType(5)
-    ], exports.Star.prototype, "corners", void 0);
+    ], exports.Star.prototype, "corners", undefined);
     __decorate([
         pathType(0.382)
-    ], exports.Star.prototype, "innerRadius", void 0);
+    ], exports.Star.prototype, "innerRadius", undefined);
     exports.Star = __decorate([
         registerUI()
     ], exports.Star);
@@ -8465,10 +8476,10 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(ImageData)
-    ], exports.Image.prototype, "__", void 0);
+    ], exports.Image.prototype, "__", undefined);
     __decorate([
         boundsType('')
-    ], exports.Image.prototype, "url", void 0);
+    ], exports.Image.prototype, "url", undefined);
     exports.Image = __decorate([
         registerUI()
     ], exports.Image);
@@ -8531,25 +8542,25 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(CanvasData)
-    ], exports.Canvas.prototype, "__", void 0);
+    ], exports.Canvas.prototype, "__", undefined);
     __decorate([
         resizeType(100)
-    ], exports.Canvas.prototype, "width", void 0);
+    ], exports.Canvas.prototype, "width", undefined);
     __decorate([
         resizeType(100)
-    ], exports.Canvas.prototype, "height", void 0);
+    ], exports.Canvas.prototype, "height", undefined);
     __decorate([
         resizeType(1)
-    ], exports.Canvas.prototype, "pixelRatio", void 0);
+    ], exports.Canvas.prototype, "pixelRatio", undefined);
     __decorate([
         resizeType(true)
-    ], exports.Canvas.prototype, "smooth", void 0);
+    ], exports.Canvas.prototype, "smooth", undefined);
     __decorate([
         dataType(false)
-    ], exports.Canvas.prototype, "safeResize", void 0);
+    ], exports.Canvas.prototype, "safeResize", undefined);
     __decorate([
         resizeType()
-    ], exports.Canvas.prototype, "contextSettings", void 0);
+    ], exports.Canvas.prototype, "contextSettings", undefined);
     exports.Canvas = __decorate([
         registerUI()
     ], exports.Canvas);
@@ -8640,76 +8651,76 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(TextData)
-    ], exports.Text.prototype, "__", void 0);
+    ], exports.Text.prototype, "__", undefined);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "width", void 0);
+    ], exports.Text.prototype, "width", undefined);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "height", void 0);
+    ], exports.Text.prototype, "height", undefined);
     __decorate([
         dataType(false)
-    ], exports.Text.prototype, "resizeFontSize", void 0);
+    ], exports.Text.prototype, "resizeFontSize", undefined);
     __decorate([
         surfaceType('#000000')
-    ], exports.Text.prototype, "fill", void 0);
+    ], exports.Text.prototype, "fill", undefined);
     __decorate([
         affectStrokeBoundsType('outside')
-    ], exports.Text.prototype, "strokeAlign", void 0);
+    ], exports.Text.prototype, "strokeAlign", undefined);
     __decorate([
         hitType('all')
-    ], exports.Text.prototype, "hitFill", void 0);
+    ], exports.Text.prototype, "hitFill", undefined);
     __decorate([
         boundsType('')
-    ], exports.Text.prototype, "text", void 0);
+    ], exports.Text.prototype, "text", undefined);
     __decorate([
-        boundsType('L')
-    ], exports.Text.prototype, "fontFamily", void 0);
+        boundsType('caption')
+    ], exports.Text.prototype, "fontFamily", undefined);
     __decorate([
         boundsType(12)
-    ], exports.Text.prototype, "fontSize", void 0);
+    ], exports.Text.prototype, "fontSize", undefined);
     __decorate([
         boundsType('normal')
-    ], exports.Text.prototype, "fontWeight", void 0);
+    ], exports.Text.prototype, "fontWeight", undefined);
     __decorate([
         boundsType(false)
-    ], exports.Text.prototype, "italic", void 0);
+    ], exports.Text.prototype, "italic", undefined);
     __decorate([
         boundsType('none')
-    ], exports.Text.prototype, "textCase", void 0);
+    ], exports.Text.prototype, "textCase", undefined);
     __decorate([
         boundsType('none')
-    ], exports.Text.prototype, "textDecoration", void 0);
+    ], exports.Text.prototype, "textDecoration", undefined);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "letterSpacing", void 0);
+    ], exports.Text.prototype, "letterSpacing", undefined);
     __decorate([
         boundsType({ type: 'percent', value: 1.5 })
-    ], exports.Text.prototype, "lineHeight", void 0);
+    ], exports.Text.prototype, "lineHeight", undefined);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "paraIndent", void 0);
+    ], exports.Text.prototype, "paraIndent", undefined);
     __decorate([
         boundsType(0)
-    ], exports.Text.prototype, "paraSpacing", void 0);
+    ], exports.Text.prototype, "paraSpacing", undefined);
     __decorate([
         boundsType('x')
-    ], exports.Text.prototype, "writingMode", void 0);
+    ], exports.Text.prototype, "writingMode", undefined);
     __decorate([
         boundsType('left')
-    ], exports.Text.prototype, "textAlign", void 0);
+    ], exports.Text.prototype, "textAlign", undefined);
     __decorate([
         boundsType('top')
-    ], exports.Text.prototype, "verticalAlign", void 0);
+    ], exports.Text.prototype, "verticalAlign", undefined);
     __decorate([
         boundsType(true)
-    ], exports.Text.prototype, "autoSizeAlign", void 0);
+    ], exports.Text.prototype, "autoSizeAlign", undefined);
     __decorate([
         boundsType('normal')
-    ], exports.Text.prototype, "textWrap", void 0);
+    ], exports.Text.prototype, "textWrap", undefined);
     __decorate([
         boundsType('show')
-    ], exports.Text.prototype, "textOverflow", void 0);
+    ], exports.Text.prototype, "textOverflow", undefined);
     exports.Text = __decorate([
         registerUI()
     ], exports.Text);
@@ -8722,10 +8733,10 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(PathData)
-    ], exports.Path.prototype, "__", void 0);
+    ], exports.Path.prototype, "__", undefined);
     __decorate([
         affectStrokeBoundsType('center')
-    ], exports.Path.prototype, "strokeAlign", void 0);
+    ], exports.Path.prototype, "strokeAlign", undefined);
     exports.Path = __decorate([
         registerUI()
     ], exports.Path);
@@ -8764,10 +8775,10 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(PenData)
-    ], exports.Pen.prototype, "__", void 0);
+    ], exports.Pen.prototype, "__", undefined);
     __decorate([
         penPathType()
-    ], exports.Pen.prototype, "path", void 0);
+    ], exports.Pen.prototype, "path", undefined);
     exports.Pen = __decorate([
         useModule(PathCreator, ['set', 'path', 'paint']),
         registerUI()
@@ -9401,7 +9412,7 @@ var LeaferUI = (function (exports) {
                 }
                 else {
                     if (!paint.patternTask) {
-                        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, undefined, undefined, function* () {
                             paint.patternTask = null;
                             if (canvas.bounds.hit(ui.__nowWorld))
                                 createPattern(ui, paint, pixelRatio);
@@ -9557,7 +9568,7 @@ var LeaferUI = (function (exports) {
         const end = shadow.length - 1;
         toOffsetOutBounds$1(bounds, offsetOutBounds$1);
         shadow.forEach((item, index) => {
-            other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, item.color);
+            other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, ColorConvert.string(item.color));
             spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
             drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
             copyBounds = bounds;
@@ -9633,7 +9644,7 @@ var LeaferUI = (function (exports) {
                 other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
                 copyBounds = bounds;
             }
-            other.fillWorld(copyBounds, item.color, 'source-in');
+            other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
             if (ui.__worldFlipped) {
                 current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
             }
@@ -9991,11 +10002,11 @@ var LeaferUI = (function (exports) {
     function layoutChar(drawData, style, width, _height) {
         const { rows } = drawData;
         const { textAlign, paraIndent, letterSpacing } = style;
-        let charX, addWordWidth, indentWidth, mode, wordChar;
+        let charX, addWordWidth, indentWidth, mode, wordChar, wordsLength;
         rows.forEach(row => {
             if (row.words) {
-                indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
-                addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
+                indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length;
+                addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && wordsLength > 1) ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
                 mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
                 if (row.isOverflow && !letterSpacing)
                     row.textMode = true;
@@ -10007,7 +10018,7 @@ var LeaferUI = (function (exports) {
                     row.x += indentWidth;
                     charX = row.x;
                     row.data = [];
-                    row.words.forEach(word => {
+                    row.words.forEach((word, index) => {
                         if (mode === WordMode) {
                             wordChar = { char: '', x: charX };
                             charX = toWordChar(word.data, charX, wordChar);
@@ -10017,7 +10028,7 @@ var LeaferUI = (function (exports) {
                         else {
                             charX = toChar(word.data, charX, row.data, row.isOverflow);
                         }
-                        if (addWordWidth && (!row.paraEnd || textAlign === 'both')) {
+                        if (addWordWidth && (!row.paraEnd || textAlign === 'both') && (index !== wordsLength - 1)) {
                             charX += addWordWidth;
                             row.width += addWordWidth;
                         }
@@ -10426,3 +10437,4 @@ var LeaferUI = (function (exports) {
     return exports;
 
 })({});
+//# sourceMappingURL=web.js.map