leafer-game 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$1(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$1(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$5 = 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$3.warn('PartRender: need update attr');
+                return;
             this.mergeBlocks();
             list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
                 this.clipRender(block); });
@@ -7099,6 +7105,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; }
@@ -7571,7 +7578,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');
         }
@@ -7602,199 +7609,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);
@@ -7855,7 +7862,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(GroupData)
-    ], exports.Group.prototype, "__", void 0);
+    ], exports.Group.prototype, "__", undefined);
     exports.Group = __decorate([
         useModule(exports.Branch),
         registerUI()
@@ -8026,8 +8033,6 @@ var LeaferUI = (function (exports) {
         __setAttr(attrName, newValue) {
             if (this.canvas) {
                 if (canvasSizeAttrs.includes(attrName)) {
-                    if (!newValue)
-                        debug$1.warn(attrName + ' is 0');
                     this.__changeCanvasSize(attrName, newValue);
                 }
                 else if (attrName === 'fill') {
@@ -8067,8 +8072,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);
@@ -8082,6 +8085,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);
@@ -8175,10 +8192,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);
@@ -8219,10 +8235,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);
@@ -8235,7 +8251,7 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(RectData)
-    ], exports.Rect.prototype, "__", void 0);
+    ], exports.Rect.prototype, "__", undefined);
     exports.Rect = __decorate([
         useModule(RectRender),
         rewriteAble(),
@@ -8260,6 +8276,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) {
@@ -8324,13 +8342,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$1.__updateStrokeSpread)
     ], exports.Box.prototype, "__updateStrokeSpread", null);
@@ -8369,13 +8387,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);
@@ -8422,16 +8440,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);
@@ -8490,22 +8508,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);
@@ -8538,16 +8556,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);
@@ -8579,13 +8597,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);
@@ -8607,10 +8625,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);
@@ -8673,25 +8691,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);
@@ -8782,76 +8800,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);
@@ -8864,10 +8882,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);
@@ -8906,10 +8924,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()
@@ -10094,9 +10112,9 @@ var LeaferUI = (function (exports) {
         }
         return this.__hit(inner);
     };
-    leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
-    leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
-    leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+    leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitFill(inner, this.__.windingRule); };
+    leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitStroke(inner, strokeWidth); };
+    leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
     leaf.__drawHitPath = function (canvas) { if (canvas)
         this.__drawRenderPath(canvas); };
 
@@ -11135,7 +11153,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);
@@ -11291,7 +11309,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;
@@ -11367,7 +11385,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);
             }
@@ -11729,7 +11747,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;
@@ -11751,7 +11769,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;
                         }
@@ -12140,25 +12158,25 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         dataProcessor(RobotData)
-    ], exports.Robot.prototype, "__", void 0);
+    ], exports.Robot.prototype, "__", undefined);
     __decorate([
         boundsType()
-    ], exports.Robot.prototype, "robot", void 0);
+    ], exports.Robot.prototype, "robot", undefined);
     __decorate([
         dataType()
-    ], exports.Robot.prototype, "actions", void 0);
+    ], exports.Robot.prototype, "actions", undefined);
     __decorate([
         dataType('')
-    ], exports.Robot.prototype, "action", void 0);
+    ], exports.Robot.prototype, "action", undefined);
     __decorate([
         surfaceType(0)
-    ], exports.Robot.prototype, "now", void 0);
+    ], exports.Robot.prototype, "now", undefined);
     __decorate([
         dataType(12)
-    ], exports.Robot.prototype, "FPS", void 0);
+    ], exports.Robot.prototype, "FPS", undefined);
     __decorate([
         dataType(true)
-    ], exports.Robot.prototype, "loop", void 0);
+    ], exports.Robot.prototype, "loop", undefined);
     exports.Robot = __decorate([
         registerUI()
     ], exports.Robot);
@@ -12226,7 +12244,9 @@ var LeaferUI = (function (exports) {
             type = null;
         let transition = type ? getTransition(type, style, leaf) : false;
         const fromStyle = transition ? getFromStyle(leaf, style) : undefined;
-        leaf.killAnimate('transition');
+        const nextStyle = State.canAnimate && getStyle(leaf);
+        if (nextStyle)
+            leaf.killAnimate('transition');
         if (normalStyle)
             leaf.set(normalStyle, 'temp');
         const statesStyle = getStyle(leaf);
@@ -12256,7 +12276,8 @@ var LeaferUI = (function (exports) {
     }
     function getStyle(leaf) {
         let exist;
-        const style = {}, { state } = leaf, button = findParentButton(leaf);
+        const style = {}, button = findParentButton(leaf);
+        const state = button ? (leaf.state || button.state) : leaf.state;
         const stateStyle = state && leaf.states[state];
         if (stateStyle && State.isState(state, leaf, button))
             exist = assign(style, stateStyle);
@@ -12327,7 +12348,7 @@ var LeaferUI = (function (exports) {
         if (leaf.button)
             setChildrenState(leaf.children, null, stateName);
     }
-    function setChildrenState(children, stateType, state) {
+    function setChildrenState(children, stateType, stateName) {
         if (!children)
             return;
         let leaf, update;
@@ -12351,10 +12372,10 @@ var LeaferUI = (function (exports) {
                 if (update)
                     setPointerState(leaf, stateType);
             }
-            else if (state)
-                setState(leaf, state);
+            else if (stateName !== undefined)
+                setState(leaf, stateName);
             if (leaf.isBranch)
-                setChildrenState(leaf.children, stateType, state);
+                setChildrenState(leaf.children, stateType, stateName);
         }
     }
 
@@ -12370,7 +12391,7 @@ var LeaferUI = (function (exports) {
         if (leaf.button)
             unsetChildrenState(leaf.children, null, stateName);
     }
-    function unsetChildrenState(children, stateType, state) {
+    function unsetChildrenState(children, stateType, stateName) {
         if (!children)
             return;
         let leaf;
@@ -12378,10 +12399,10 @@ var LeaferUI = (function (exports) {
             leaf = children[i];
             if (stateType)
                 unsetPointerState(leaf, stateType);
-            else if (state)
-                unsetState(leaf, state);
+            else if (stateName !== undefined)
+                unsetState(leaf, stateName);
             if (leaf.isBranch)
-                unsetChildrenState(leaf.children, stateType, state);
+                unsetChildrenState(leaf.children, stateType, stateName);
         }
     }
 
@@ -12599,8 +12620,11 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 this.__setAttr(key, value);
-                if (this.leafer)
-                    value ? this.animate(value, undefined, 'animation') : this.killAnimate('animation');
+                if (this.leafer) {
+                    this.killAnimate('animation');
+                    if (value)
+                        this.animate(value, undefined, 'animation');
+                }
             }
         }));
     }
@@ -12637,22 +12661,29 @@ var LeaferUI = (function (exports) {
         get completed() { return this.time >= this.duration && !this.started; }
         get frame() { return this.frames[this.nowIndex]; }
         get frameTotalTime() { return this.frame.totalTime || this.frame.duration || 0; }
+        get nowReverse() { return (this.mainReverse ? 1 : 0) + (this.frameReverse ? 1 : 0) === 1; }
         get realEnding() {
             let count;
-            const { ending, reverse, loop } = this;
+            const { ending, reverse, swing, loop } = this;
             if (ending === 'from')
                 count = 0;
             else if (ending === 'to')
                 count = 1;
             else {
                 count = reverse ? 0 : 1;
-                if (loop && typeof loop === 'number')
+                if (swing && loop && typeof loop === 'number')
                     count += loop - 1;
             }
             return count % 2 ? 'to' : 'from';
         }
         constructor(target, keyframe, options, isTemp) {
             super();
+            if (keyframe) {
+                if (keyframe.keyframes)
+                    options = keyframe, keyframe = keyframe.keyframes;
+                else if (keyframe.style)
+                    options = keyframe, keyframe = keyframe.style;
+            }
             this.init(target, keyframe, options, isTemp);
         }
         init(target, keyframe, options, isTemp) {
@@ -12668,16 +12699,14 @@ var LeaferUI = (function (exports) {
                     break;
                 case 'object': this.config = options, options.event && (this.event = options.event);
             }
-            if (!keyframe)
-                return;
-            this.keyframes = keyframe instanceof Array ? keyframe : [keyframe];
+            this.keyframes = keyframe instanceof Array ? keyframe : (keyframe ? [keyframe] : []);
             const { easing, attrs } = this;
             this.easingFn = AnimateEasing.get(easing);
             if (attrs || this.attrsMap)
                 this.attrsMap = attrs ? attrs.reduce((map, value) => { map[value] = true; return map; }, {}) : undefined;
             this.frames = [];
             this.create();
-            if (this.autoplay)
+            if (this.autoplay && this.frames.length)
                 this.timer = setTimeout(() => {
                     this.timer = 0;
                     this.play();
@@ -12726,7 +12755,7 @@ var LeaferUI = (function (exports) {
         }
         create() {
             const { target, frames, keyframes, config } = this, { length } = keyframes, joinBefore = length > 1 ? this.join : true;
-            let addedDuration = 0, totalAutoDuration = 0, before, keyframe, item, style;
+            let totalTime = 0, totalAutoTime = 0, before, keyframe, item, style, times;
             if (length > 1)
                 this.fromStyle = {}, this.toStyle = {};
             for (let i = 0; i < length; i++) {
@@ -12735,27 +12764,32 @@ var LeaferUI = (function (exports) {
                 if (!before)
                     before = joinBefore ? target : style;
                 item = { style, beforeStyle: {} };
+                times = 1;
                 if (keyframe.style) {
-                    const { duration, autoDuration, delay, autoDelay, easing } = keyframe;
+                    const { duration, autoDuration, delay, autoDelay, easing, swing, loop } = keyframe;
+                    if (swing)
+                        item.swing = typeof swing === 'number' ? swing : 2, times = item.swing * 2 - 1;
+                    if (loop)
+                        item.loop = times = typeof loop === 'number' ? loop : 2;
                     if (duration) {
-                        item.duration = duration, addedDuration += duration;
+                        item.duration = duration, totalTime += duration * times;
                         if (delay)
                             item.totalTime = duration + delay;
                     }
                     else {
                         if (autoDuration)
-                            item.autoDuration = autoDuration, totalAutoDuration += autoDuration;
+                            item.autoDuration = autoDuration, totalAutoTime += autoDuration * times;
                     }
                     if (delay)
-                        item.delay = delay, addedDuration += delay;
+                        item.delay = delay, totalTime += delay * times;
                     else if (autoDelay)
-                        item.autoDelay = autoDelay, totalAutoDuration += autoDelay;
+                        item.autoDelay = autoDelay, totalAutoTime += autoDelay * times;
                     if (easing)
                         item.easingFn = AnimateEasing.get(easing);
                 }
                 if (!item.autoDuration && item.duration === undefined) {
                     if (length > 1)
-                        (i > 0 || joinBefore) ? totalAutoDuration++ : item.duration = 0;
+                        (i > 0 || joinBefore) ? totalAutoTime += times : item.duration = 0;
                     else
                         item.duration = this.duration;
                 }
@@ -12771,14 +12805,14 @@ var LeaferUI = (function (exports) {
                 before = style;
                 frames.push(item);
             }
-            if (totalAutoDuration) {
-                if (this.duration <= addedDuration || !(config && config.duration))
-                    this.changeDuration(addedDuration + frameDuration * totalAutoDuration);
-                this.allocateTime((this.duration - addedDuration) / totalAutoDuration);
+            if (totalAutoTime) {
+                if (this.duration <= totalTime || !(config && config.duration))
+                    this.changeDuration(totalTime + frameDuration * totalAutoTime);
+                this.allocateTime((this.duration - totalTime) / totalAutoTime);
             }
             else {
-                if (addedDuration)
-                    this.changeDuration(addedDuration);
+                if (totalTime)
+                    this.changeDuration(totalTime);
             }
             this.emit(AnimateEvent.CREATED, this);
         }
@@ -12805,7 +12839,7 @@ var LeaferUI = (function (exports) {
                     if (frame.autoDelay)
                         frame.delay = frame.autoDelay * partTime;
                     if (frame.delay)
-                        frame.totalTime = frame.duration, frame.totalTime += frame.delay;
+                        frame.totalTime = frame.duration + frame.delay;
                 }
             }
         }
@@ -12823,7 +12857,7 @@ var LeaferUI = (function (exports) {
             if (realTime < duration) {
                 while (realTime - this.playedTotalTime > this.frameTotalTime) {
                     this.transition(1);
-                    this.nowReverse ? this.reverseNextFrame() : this.nextFrame();
+                    this.mainReverse ? this.reverseNextFrame() : this.nextFrame();
                 }
                 const itemDelay = this.nowReverse ? 0 : (this.frame.delay || 0);
                 const itemPlayedTime = realTime - this.playedTotalTime - itemDelay;
@@ -12847,9 +12881,9 @@ var LeaferUI = (function (exports) {
                     const { loop, loopDelay, swing } = this;
                     if (loop !== false || swing) {
                         this.looped ? this.looped++ : this.looped = 1;
-                        if (!(typeof loop === 'number' && (!loop || this.looped >= loop))) {
+                        if (this.needLoop(this.looped, loop, swing)) {
                             if (swing)
-                                this.nowReverse = !this.nowReverse;
+                                this.mainReverse = !this.mainReverse;
                             if (loopDelay)
                                 this.timer = setTimeout(() => { this.timer = 0, this.begin(); }, loopDelay / this.speed * 1000);
                             else
@@ -12864,8 +12898,8 @@ var LeaferUI = (function (exports) {
         start(seek) {
             this.requestAnimateTime = 1;
             const { reverse } = this;
-            if (reverse || this.nowReverse)
-                this.nowReverse = reverse;
+            if (reverse || this.mainReverse)
+                this.mainReverse = reverse;
             if (this.looped)
                 this.looped = 0;
             if (seek)
@@ -12883,12 +12917,12 @@ var LeaferUI = (function (exports) {
         }
         begin(seek) {
             this.playedTotalTime = this.time = 0;
-            this.nowReverse ? this.setTo() : this.setFrom();
+            this.mainReverse ? this.setTo() : this.setFrom();
             if (!seek)
                 this.requestAnimate();
         }
         end() {
-            this.nowReverse ? this.setFrom() : this.setTo();
+            this.mainReverse ? this.setFrom() : this.setTo();
         }
         complete() {
             this.requestAnimateTime = 0;
@@ -12911,15 +12945,19 @@ var LeaferUI = (function (exports) {
             this.setStyle(this.toStyle);
         }
         nextFrame() {
+            if (this.needLoopFrame())
+                return this.increaseTime();
             if (this.nowIndex + 1 >= this.frames.length)
                 return;
-            this.playedTotalTime += this.frameTotalTime;
+            this.increaseTime();
             this.nowIndex++;
         }
         reverseNextFrame() {
+            if (this.needLoopFrame())
+                return this.increaseTime();
             if (this.nowIndex - 1 < 0)
                 return;
-            this.playedTotalTime += this.frameTotalTime;
+            this.increaseTime();
             this.nowIndex--;
         }
         transition(t) {
@@ -12955,6 +12993,27 @@ var LeaferUI = (function (exports) {
                 target.__ ? target.set(style, this.isTemp ? 'temp' : false) : Object.assign(target, style);
             }
         }
+        increaseTime() {
+            this.playedTotalTime += this.frameTotalTime;
+        }
+        needLoop(looped, loop, swing) {
+            return !(this.needStopLoop(looped, loop) || this.needStopLoop(looped, swing, true));
+        }
+        needStopLoop(looped, times, swing) {
+            return typeof times === 'number' && (!times || looped >= (swing ? times * 2 - 1 : times));
+        }
+        needLoopFrame() {
+            const { loop, swing } = this.frame;
+            if (loop || swing) {
+                this.frameLooped ? this.frameLooped++ : this.frameLooped = 1;
+                if (swing)
+                    this.frameReverse = !this.frameReverse;
+                if (this.needLoop(this.frameLooped, loop, swing))
+                    return true;
+                this.frameLooped = this.frameReverse = undefined;
+            }
+            return false;
+        }
         clearTimer(fn) {
             if (this.timer) {
                 clearTimeout(this.timer), this.timer = 0;
@@ -12976,44 +13035,102 @@ var LeaferUI = (function (exports) {
     };
     __decorate([
         animateAttr('ease')
-    ], exports.Animate.prototype, "easing", void 0);
+    ], exports.Animate.prototype, "easing", undefined);
     __decorate([
         animateAttr(0)
-    ], exports.Animate.prototype, "delay", void 0);
+    ], exports.Animate.prototype, "delay", undefined);
     __decorate([
         animateAttr(frameDuration)
-    ], exports.Animate.prototype, "duration", void 0);
+    ], exports.Animate.prototype, "duration", undefined);
     __decorate([
         animateAttr('auto')
-    ], exports.Animate.prototype, "ending", void 0);
+    ], exports.Animate.prototype, "ending", undefined);
     __decorate([
         animateAttr(false)
-    ], exports.Animate.prototype, "reverse", void 0);
+    ], exports.Animate.prototype, "reverse", undefined);
     __decorate([
         animateAttr(false)
-    ], exports.Animate.prototype, "swing", void 0);
+    ], exports.Animate.prototype, "swing", undefined);
     __decorate([
         animateAttr(false)
-    ], exports.Animate.prototype, "loop", void 0);
+    ], exports.Animate.prototype, "loop", undefined);
     __decorate([
         animateAttr(0)
-    ], exports.Animate.prototype, "loopDelay", void 0);
+    ], exports.Animate.prototype, "loopDelay", undefined);
     __decorate([
         animateAttr(1)
-    ], exports.Animate.prototype, "speed", void 0);
+    ], exports.Animate.prototype, "speed", undefined);
     __decorate([
         animateAttr(true)
-    ], exports.Animate.prototype, "autoplay", void 0);
+    ], exports.Animate.prototype, "autoplay", undefined);
     __decorate([
         animateAttr()
-    ], exports.Animate.prototype, "join", void 0);
+    ], exports.Animate.prototype, "join", undefined);
     __decorate([
         animateAttr()
-    ], exports.Animate.prototype, "attrs", void 0);
+    ], exports.Animate.prototype, "attrs", undefined);
     exports.Animate = __decorate([
         useModule(LeafEventer)
     ], exports.Animate);
 
+    exports.AnimateList = class AnimateList extends exports.Animate {
+        get completed() { return this.list.every(item => item.completed); }
+        get endingStyle() { return this._endingStyle; }
+        constructor(target, animation, isTemp) {
+            super(target, null);
+            this.list = [];
+            this.updateList(animation, isTemp);
+        }
+        updateList(animation, isTemp) {
+            this.fromStyle = {};
+            this.toStyle = {};
+            this._endingStyle = {};
+            if (!animation)
+                animation = this.list.filter(item => {
+                    const { completed } = item;
+                    if (completed)
+                        item.destroy();
+                    return !completed;
+                });
+            this.list = animation.map(item => {
+                const animate = item.target ? item : new exports.Animate(this.target, item, isTemp);
+                Object.assign(this.fromStyle, animate.fromStyle);
+                Object.assign(this.toStyle, animate.toStyle);
+                Object.assign(this._endingStyle, animate.endingStyle);
+                return animate;
+            });
+        }
+        play() {
+            this.each(item => item.play());
+        }
+        pause() {
+            this.each(item => item.pause());
+        }
+        stop() {
+            this.each(item => item.stop());
+        }
+        seek(time) {
+            this.each(item => item.seek(time));
+        }
+        kill(complete, killStyle) {
+            this.each(item => item.kill(complete, killStyle));
+            this.destroy();
+        }
+        each(func) {
+            this.list.forEach(func);
+        }
+        destroy(complete) {
+            const { list } = this;
+            if (list.length) {
+                this.each(item => item.destroy(complete));
+                list.length = 0;
+            }
+        }
+    };
+    exports.AnimateList = __decorate([
+        useModule(LeafEventer)
+    ], exports.AnimateList);
+
     const colorNames = {
         transparent: 'FFF0',
         aliceblue: 'F0F8FF',
@@ -13350,7 +13467,8 @@ var LeaferUI = (function (exports) {
         return decimal ? decimal.length : 0;
     }
     function value(from, to, t) {
-        return (typeof from === 'number' && typeof to === 'number') ? from + (to - from) * t : to;
+        const fromIsNumber = typeof from === 'number', toIsNumber = typeof to === 'number';
+        return (fromIsNumber && toIsNumber) ? from + (to - from) * t : ((toIsNumber || fromIsNumber) ? number(from, to, t) : from);
     }
     function number(from, to, t, roundValue) {
         from || (from = 0), to || (to = 0);
@@ -13394,23 +13512,40 @@ var LeaferUI = (function (exports) {
     ui$2.animate = function (keyframe, options, kill, isTemp) {
         if (keyframe === undefined)
             return this.__animate;
-        if (typeof keyframe === 'object') {
-            if (keyframe.keyframes)
-                options = keyframe, keyframe = keyframe.keyframes;
-            else if (keyframe.style)
-                options = keyframe, keyframe = keyframe.style;
-        }
-        const animate = new exports.Animate(this, keyframe, options, isTemp);
-        this.killAnimate(kill, animate.toStyle);
-        return this.__animate = animate;
+        const isAnimationList = keyframe instanceof Array && !options && kill;
+        let nextAnimate = isAnimationList ? new exports.AnimateList(this, keyframe, isTemp) : new exports.Animate(this, keyframe, options, isTemp);
+        this.killAnimate(kill, nextAnimate.toStyle);
+        const animate = this.__animate;
+        if (animate) {
+            if (nextAnimate instanceof exports.AnimateList)
+                nextAnimate.list.unshift(animate);
+            else
+                nextAnimate = new exports.AnimateList(this, [animate, nextAnimate]);
+        }
+        return this.__animate = nextAnimate;
     };
-    ui$2.killAnimate = function (_type, killStyle) {
+    ui$2.killAnimate = function (_type, nextStyle) {
         const animate = this.__animate;
-        if (animate)
-            animate.kill(true, killStyle), this.__animate = null;
+        if (animate) {
+            let kill = false;
+            if (nextStyle && !animate.completed) {
+                if (animate instanceof exports.AnimateList)
+                    animate.updateList();
+                const { toStyle } = animate;
+                for (let key in nextStyle)
+                    if (key in toStyle) {
+                        kill = true;
+                        break;
+                    }
+            }
+            else
+                kill = true;
+            if (kill)
+                animate.kill(true, nextStyle), this.__animate = null;
+        }
     };
     ui$2.__runAnimation = function (type, complete) {
-        this.animate(type === 'in' ? this.animation : this.animationOut);
+        this.animate(type === 'in' ? this.animation : this.animationOut, undefined, 'animation');
         if (complete)
             this.__animate.on(AnimateEvent.COMPLETED, complete);
     };
@@ -13704,12 +13839,12 @@ var LeaferUI = (function (exports) {
             data.__pathForMotion = undefined;
         if (this.motionPath) {
             let child;
-            const { children } = this.parent, { leaferIsReady } = this;
+            const { children } = this.parent;
             for (let i = 0; i < children.length; i++) {
                 child = children[i];
                 if (!isNull(child.motion) && !child.__layout.matrixChanged) {
-                    if (leaferIsReady && child !== this)
-                        this.leafer.layouter.addExtra(child);
+                    if (child !== this)
+                        child.__extraUpdate();
                     updateMotion(child);
                 }
             }