leafer-draw 1.3.1 → 1.3.3

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;
@@ -5178,8 +5178,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 +5331,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 +5442,10 @@ var LeaferUI = (function (exports) {
         forceRender(_bounds, _sync) {
             this.forceUpdate('surface');
         }
+        __extraUpdate() {
+            if (this.leaferIsReady)
+                this.leafer.layouter.addExtra(this);
+        }
         __updateWorldMatrix() { }
         __updateLocalMatrix() { }
         __updateWorldBounds() { }
@@ -6010,7 +6013,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.3.1";
+    const version = "1.3.3";
 
     const debug$4 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6229,7 +6232,7 @@ var LeaferUI = (function (exports) {
             },
             loadImage(src) {
                 return new Promise((resolve, reject) => {
-                    const img = new Image();
+                    const img = new Platform.origin.Image();
                     const { crossOrigin } = Platform.image;
                     if (crossOrigin) {
                         img.setAttribute('crossOrigin', crossOrigin);
@@ -6239,7 +6242,10 @@ var LeaferUI = (function (exports) {
                     img.onerror = (e) => { reject(e); };
                     img.src = Platform.image.getRealURL(src);
                 });
-            }
+            },
+            Image,
+            PointerEvent,
+            DragEvent
         };
         Platform.event = {
             stopDefault(origin) { origin.preventDefault(); },
@@ -6528,7 +6534,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;
@@ -6715,7 +6721,7 @@ var LeaferUI = (function (exports) {
         partRender() {
             const { canvas, updateBlocks: list } = this;
             if (!list)
-                return debug$2.warn('PartRender: need update attr');
+                return;
             this.mergeBlocks();
             list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
                 this.clipRender(block); });
@@ -6943,6 +6949,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; }
@@ -7415,7 +7422,7 @@ var LeaferUI = (function (exports) {
         animate(_keyframe, _options, _type, _isTemp) {
             return Plugin.need('animate');
         }
-        killAnimate(_type, _killStyle) { }
+        killAnimate(_type, _nextStyle) { }
         export(_filename, _options) {
             return Plugin.need('export');
         }
@@ -7446,199 +7453,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);
@@ -7699,7 +7706,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(GroupData)
-    ], exports.Group.prototype, "__", void 0);
+    ], exports.Group.prototype, "__", undefined);
     exports.Group = __decorate([
         useModule(exports.Branch),
         registerUI()
@@ -7870,8 +7877,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') {
@@ -7911,8 +7916,6 @@ var LeaferUI = (function (exports) {
             this.created = true;
         }
         __onReady() {
-            if (this.ready)
-                return;
             this.ready = true;
             this.emitLeafer(LeaferEvent.BEFORE_READY);
             this.emitLeafer(LeaferEvent.READY);
@@ -7926,6 +7929,20 @@ var LeaferUI = (function (exports) {
             this.emitLeafer(LeaferEvent.VIEW_READY);
             WaitHelper.run(this.__viewReadyWait);
         }
+        __onLayoutEnd() {
+            const { grow, growWidth, growHeight } = this.config;
+            if (grow) {
+                let { width, height, pixelRatio } = this;
+                const bounds = grow === 'box' ? this.worldBoxBounds : this.__world;
+                if (growWidth !== false)
+                    width = Math.max(1, bounds.x + bounds.width);
+                if (growHeight !== false)
+                    height = Math.max(1, bounds.y + bounds.height);
+                this.__doResize({ width, height, pixelRatio });
+            }
+            if (!this.ready)
+                this.__onReady();
+        }
         __onNextRender() {
             if (this.viewReady) {
                 WaitHelper.run(this.__nextRenderWait);
@@ -8019,10 +8036,9 @@ var LeaferUI = (function (exports) {
             const runId = Run.start('FirstCreate ' + this.innerName);
             this.once(LeaferEvent.START, () => Run.end(runId));
             this.once(LayoutEvent.START, () => this.updateLazyBounds());
-            this.once(LayoutEvent.END, () => this.__onReady());
             this.once(RenderEvent.START, () => this.__onCreated());
             this.once(RenderEvent.END, () => this.__onViewReady());
-            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
+            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(LayoutEvent.END, this.__onLayoutEnd, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
@@ -8063,10 +8079,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);
@@ -8079,7 +8095,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(RectData)
-    ], exports.Rect.prototype, "__", void 0);
+    ], exports.Rect.prototype, "__", undefined);
     exports.Rect = __decorate([
         useModule(RectRender),
         rewriteAble(),
@@ -8104,6 +8120,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) {
@@ -8168,13 +8186,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);
@@ -8213,13 +8231,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);
@@ -8266,16 +8284,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);
@@ -8334,22 +8352,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);
@@ -8382,16 +8400,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);
@@ -8423,13 +8441,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);
@@ -8451,10 +8469,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);
@@ -8517,25 +8535,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);
@@ -8626,76 +8644,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);
@@ -8708,10 +8726,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);
@@ -8750,10 +8768,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()
@@ -9387,7 +9405,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);
@@ -9543,7 +9561,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;
@@ -9619,7 +9637,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);
             }
@@ -9981,7 +9999,7 @@ var LeaferUI = (function (exports) {
         rows.forEach(row => {
             if (row.words) {
                 indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
-                addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
+                addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
                 mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
                 if (row.isOverflow && !letterSpacing)
                     row.textMode = true;
@@ -10003,7 +10021,7 @@ var LeaferUI = (function (exports) {
                         else {
                             charX = toChar(word.data, charX, row.data, row.isOverflow);
                         }
-                        if (!row.paraEnd && addWordWidth) {
+                        if (addWordWidth && (!row.paraEnd || textAlign === 'both')) {
                             charX += addWordWidth;
                             row.width += addWordWidth;
                         }