@leafer-game/miniapp 1.0.9 → 1.1.0

package/dist/miniapp.module.js

@@ -108,7 +108,7 @@ const MathHelper = {
         return rotation - oldRotation;
     },
     float(num, maxLength) {
-        const a = maxLength ? pow$2(10, maxLength) : 1000000000000;
+        const a = maxLength !== undefined ? pow$2(10, maxLength) : 1000000000000;
         num = round$3(num * a) / a;
         return num === -0 ? 0 : num;
     },
@@ -1411,14 +1411,13 @@ const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
-        if (list$2[tag]) {
+        if (list$2[tag])
             debug$e.repeat(tag);
-        }
-        else {
-            list$2[tag] = UI;
-        }
+        list$2[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
+        if (!list$2[tag])
+            debug$e.error('not register ' + tag);
         const ui = new list$2[tag](data);
         if (x !== undefined) {
             ui.x = x;
@@ -1442,7 +1441,7 @@ const EventCreator = {
         Object.keys(Event).forEach(key => {
             name = Event[key];
             if (typeof name === 'string')
-                nameList[name] ? debug$d.repeat(name) : nameList[name] = Event;
+                nameList[name] && debug$d.repeat(name), nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -1644,7 +1643,7 @@ class LeafData {
         const t = this;
         if (t.blendMode === 'pass-through') {
             const leaf = this.__leaf;
-            if ((t.opacity < 1 && leaf.isBranch) || leaf.__hasEraser || t.eraser) {
+            if ((t.opacity < 1 && (leaf.isBranch || t.__hasMultiPaint)) || leaf.__hasEraser || t.eraser) {
                 t.__single = true;
             }
             else if (t.__single) {
@@ -2042,8 +2041,9 @@ class LeaferCanvasBase extends Canvas$1 {
             takeCanvas = this.getSameCanvas();
             takeCanvas.copyWorld(this);
         }
-        DataHelper.copyAttrs(this.size, size, canvasSizeAttrs);
-        this.size.pixelRatio || (this.size.pixelRatio = 1);
+        const s = this.size;
+        DataHelper.copyAttrs(s, size, canvasSizeAttrs);
+        canvasSizeAttrs.forEach(key => s[key] || (s[key] = 1));
         this.bounds = new Bounds(0, 0, this.width, this.height);
         if (this.context && !this.unreal) {
             this.updateViewSize();
@@ -2157,6 +2157,17 @@ class LeaferCanvasBase extends Canvas$1 {
         if (!onlyResetTransform)
             this.useWorldTransform();
     }
+    useGrayscaleAlpha(bounds) {
+        this.setTempBounds(bounds, true, true);
+        let alpha, pixel;
+        const { context } = this, imageData = context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height), { data } = imageData;
+        for (let i = 0, len = data.length; i < len; i += 4) {
+            pixel = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
+            if (alpha = data[i + 3])
+                data[i + 3] = alpha === 255 ? pixel : alpha * (pixel / 255);
+        }
+        context.putImageData(imageData, tempBounds$1.x, tempBounds$1.y);
+    }
     useMask(maskCanvas, fromBounds, toBounds) {
         this.copyWorld(maskCanvas, fromBounds, toBounds, 'destination-in');
     }
@@ -2167,7 +2178,7 @@ class LeaferCanvasBase extends Canvas$1 {
         if (blendMode)
             this.blendMode = blendMode;
         this.fillStyle = color;
-        tempBounds$1.set(bounds).scale(this.pixelRatio);
+        this.setTempBounds(bounds);
         this.fillRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         if (blendMode)
             this.blendMode = 'source-over';
@@ -2176,22 +2187,18 @@ class LeaferCanvasBase extends Canvas$1 {
         if (blendMode)
             this.blendMode = blendMode;
         this.strokeStyle = color;
-        tempBounds$1.set(bounds).scale(this.pixelRatio);
+        this.setTempBounds(bounds);
         this.strokeRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         if (blendMode)
             this.blendMode = 'source-over';
     }
     clearWorld(bounds, ceilPixel) {
-        tempBounds$1.set(bounds).scale(this.pixelRatio);
-        if (ceilPixel)
-            tempBounds$1.ceil();
+        this.setTempBounds(bounds, ceilPixel);
         this.clearRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
     }
     clipWorld(bounds, ceilPixel) {
         this.beginPath();
-        tempBounds$1.set(bounds).scale(this.pixelRatio);
-        if (ceilPixel)
-            tempBounds$1.ceil();
+        this.setTempBounds(bounds, ceilPixel);
         this.rect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
         this.clip();
     }
@@ -2199,6 +2206,14 @@ class LeaferCanvasBase extends Canvas$1 {
         const { pixelRatio } = this;
         this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
     }
+    setTempBounds(bounds, ceil, intersect) {
+        tempBounds$1.set(bounds);
+        if (intersect)
+            tempBounds$1.intersect(this.bounds);
+        tempBounds$1.scale(this.pixelRatio);
+        if (ceil)
+            tempBounds$1.ceil();
+    }
     isSameSize(size) {
         return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio;
     }
@@ -4150,20 +4165,17 @@ const LeafHelper = {
         }
         return true;
     },
-    moveWorld(t, x, y = 0, isInnerPoint) {
+    moveWorld(t, x, y = 0, isInnerPoint, transition) {
         const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
         isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
-        L$1.moveLocal(t, local.x, local.y);
+        L$1.moveLocal(t, local.x, local.y, transition);
     },
-    moveLocal(t, x, y = 0) {
-        if (typeof x === 'object') {
-            t.x += x.x;
-            t.y += x.y;
-        }
-        else {
-            t.x += x;
-            t.y += y;
-        }
+    moveLocal(t, x, y = 0, transition) {
+        if (typeof x === 'object')
+            y = x.y, x = x.x;
+        x += t.x;
+        y += t.y;
+        transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
     },
     zoomOfWorld(t, origin, scaleX, scaleY, resize) {
         L$1.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
@@ -5212,13 +5224,14 @@ const BranchRender = {
         this.__.__checkSingle();
     },
     __render(canvas, options) {
+        this.__nowWorld = this.__getNowWorld(options);
         if (this.__worldOpacity) {
             if (this.__.__single) {
                 if (this.__.eraser === 'path')
                     return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(false, true);
                 this.__renderBranch(tempCanvas, options);
-                const nowWorld = this.__getNowWorld(options);
+                const nowWorld = this.__nowWorld;
                 canvas.opacity = this.__.opacity;
                 canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, this.__.__blendMode, true);
                 tempCanvas.recycle(nowWorld);
@@ -5542,11 +5555,11 @@ let Leaf = class Leaf {
     transform(matrix, resize) {
         transform(this, matrix, resize);
     }
-    move(x, y) {
-        moveLocal(this, x, y);
+    move(x, y, transition) {
+        moveLocal(this, x, y, transition);
     }
-    moveInner(x, y) {
-        moveWorld(this, x, y, true);
+    moveInner(x, y, transition) {
+        moveWorld(this, x, y, true, transition);
     }
     scaleOf(origin, scaleX, scaleY, resize) {
         zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
@@ -5560,8 +5573,8 @@ let Leaf = class Leaf {
     transformWorld(worldTransform, resize) {
         transformWorld(this, worldTransform, resize);
     }
-    moveWorld(x, y) {
-        moveWorld(this, x, y);
+    moveWorld(x, y, transition) {
+        moveWorld(this, x, y, false, transition);
     }
     scaleOfWorld(worldOrigin, scaleX, scaleY, resize) {
         zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize);
@@ -5959,7 +5972,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.9";
+const version = "1.1.0";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return false; }
@@ -6072,7 +6085,7 @@ function useCanvas(_canvasType, app) {
     Platform.origin = {
         createCanvas: (width, height, _format) => {
             const data = { type: '2d', width, height };
-            app.createOffscreenCanvas ? app.createOffscreenCanvas(data) : app.createOffScreenCanvas(data);
+            return app.createOffscreenCanvas ? app.createOffscreenCanvas(data) : app.createOffScreenCanvas(data);
         },
         canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
         canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
@@ -6183,7 +6196,7 @@ function useCanvas(_canvasType, app) {
 }
 Platform.name = 'miniapp';
 Platform.requestRender = function (render) {
-    const { view } = (Platform.renderCanvas || Platform.canvas);
+    const { view } = Platform.renderCanvas || Platform.canvas;
     view.requestAnimationFrame ? view.requestAnimationFrame(render) : setTimeout(render, 16);
 };
 defineKey(Platform, 'devicePixelRatio', { get() { return Math.max(1, wx.getSystemInfoSync().pixelRatio); } });
@@ -6568,7 +6581,8 @@ class Renderer {
         this.totalBounds = new Bounds();
         debug$5.log(target.innerName, '--->');
         try {
-            target.app.emit(RenderEvent.CHILD_START, target);
+            if (!target.isApp)
+                target.app.emit(RenderEvent.CHILD_START, target);
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(RenderEvent.END, this.totalBounds);
@@ -7122,6 +7136,12 @@ class UIData extends LeafData {
             return strokeWidth;
     }
     get __hasStroke() { return this.stroke && this.strokeWidth; }
+    get __hasMultiPaint() {
+        const t = this;
+        if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
+            return true;
+        return t.fill && this.__hasStroke;
+    }
     get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
     get __autoWidth() { return !this._width; }
     get __autoHeight() { return !this._height; }
@@ -7491,9 +7511,8 @@ const RectRender = {
                         canvas.strokeRect(half, half, width, height);
                         canvas.restore();
                     }
-                    else {
+                    else
                         canvas.strokeRect(half, half, width, height);
-                    }
                     break;
                 case 'outside':
                     canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
@@ -7523,11 +7542,15 @@ let UI = UI_1 = class UI extends Leaf {
         super(data);
     }
     reset(_data) { }
-    set(data, isTemp) {
-        if (isTemp) {
-            this.lockNormalStyle = true;
-            Object.assign(this, data);
-            this.lockNormalStyle = false;
+    set(data, transition) {
+        if (transition) {
+            if (transition === 'temp') {
+                this.lockNormalStyle = true;
+                Object.assign(this, data);
+                this.lockNormalStyle = false;
+            }
+            else
+                this.animate(data, transition);
         }
         else
             Object.assign(this, data);
@@ -7718,6 +7741,15 @@ __decorate([
 __decorate([
     boundsType(0)
 ], UI.prototype, "padding", void 0);
+__decorate([
+    boundsType(false)
+], UI.prototype, "lockRatio", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "widthRange", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "heightRange", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "draggable", void 0);
@@ -7828,17 +7860,17 @@ let Group = class Group extends UI {
         if (!this.children)
             this.children = [];
     }
-    set(data, isTemp) {
+    set(data, transition) {
         if (data.children) {
             const { children } = data;
             delete data.children;
             this.children ? this.clear() : this.__setBranch();
-            super.set(data, isTemp);
+            super.set(data, transition);
             children.forEach(child => this.add(child));
             data.children = children;
         }
         else
-            super.set(data, isTemp);
+            super.set(data, transition);
     }
     toJSON(options) {
         const data = super.toJSON(options);
@@ -7951,8 +7983,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     }
     onInit() { }
     initType(_type) { }
-    set(data) {
-        this.waitInit(() => { super.set(data); });
+    set(data, transition) {
+        this.waitInit(() => { super.set(data, transition); });
     }
     start() {
         clearTimeout(this.__startTimer);
@@ -8009,8 +8041,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     __onResize(event) {
         this.emitEvent(event);
         DataHelper.copyAttrs(this.__, event, canvasSizeAttrs);
-        if (!event.width || !event.height)
-            debug$3.warn('w = 0 or h = 0');
         setTimeout(() => { if (this.canvasManager)
             this.canvasManager.clearRecycled(); }, 0);
     }
@@ -8335,9 +8365,6 @@ __decorate([
 __decorate([
     dataType(false)
 ], Box.prototype, "resizeChildren", void 0);
-__decorate([
-    dataType(false)
-], Box.prototype, "textBox", void 0);
 __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
@@ -8447,7 +8474,7 @@ Ellipse = __decorate([
 ], Ellipse);
 
 const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = PathCommandDataHelper;
-const { rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$2, defaultPoint } = PointHelper;
+const { rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$3, defaultPoint } = PointHelper;
 const { toBounds: toBounds$1 } = PathBounds;
 let Line = class Line extends UI {
     get __tag() { return 'Line'; }
@@ -8461,7 +8488,7 @@ let Line = class Line extends UI {
         return to;
     }
     set toPoint(value) {
-        this.width = getDistance$2(defaultPoint, value);
+        this.width = getDistance$3(defaultPoint, value);
         this.rotation = getAngle$1(defaultPoint, value);
         if (this.height)
             this.height = 0;
@@ -9092,19 +9119,13 @@ class UIEvent extends Event {
         Object.assign(this, params);
     }
     getBoxPoint(relative) {
-        if (!relative)
-            relative = this.current;
-        return relative.getBoxPoint(this);
+        return (relative || this.current).getBoxPoint(this);
     }
     getInnerPoint(relative) {
-        if (!relative)
-            relative = this.current;
-        return relative.getInnerPoint(this);
+        return (relative || this.current).getInnerPoint(this);
     }
     getLocalPoint(relative) {
-        if (!relative)
-            relative = this.current;
-        return relative.getLocalPoint(this);
+        return (relative || this.current).getLocalPoint(this);
     }
     getPagePoint() {
         return this.current.getPagePoint(this);
@@ -9152,10 +9173,8 @@ let DragEvent = class DragEvent extends PointerEvent {
         this.data = data;
     }
     static getValidMove(leaf, start, total) {
-        const { draggable, dragBounds, x, y } = leaf;
-        const move = leaf.getLocalPoint(total, null, true);
-        move.x += start.x - x;
-        move.y += start.y - y;
+        const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
+        PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
         if (dragBounds)
             this.getMoveInDragBounds(leaf.__local, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
         if (draggable === 'x')
@@ -9165,8 +9184,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         return move;
     }
     static getMoveInDragBounds(childBox, dragBounds, move, change) {
-        const x = childBox.x + move.x, y = childBox.y + move.y;
-        const right = x + childBox.width, bottom = y + childBox.height;
+        const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
         const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
         if (!change)
             move = Object.assign({}, move);
@@ -9218,9 +9236,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         return this.getLocalMove(relative, true);
     }
     getPageBounds() {
-        const total = this.getPageTotal();
-        const start = this.getPagePoint();
-        const bounds = {};
+        const total = this.getPageTotal(), start = this.getPagePoint(), bounds = {};
         BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
         BoundsHelper.unsign(bounds);
         return bounds;
@@ -9338,7 +9354,8 @@ const debug$2 = Debug.get('LeaferTypeCreator');
 const LeaferTypeCreator = {
     list: {},
     register(name, fn) {
-        list[name] ? debug$2.repeat(name) : list[name] = fn;
+        list[name] && debug$2.repeat(name);
+        list[name] = fn;
     },
     run(name, leafer) {
         const fn = list[name];
@@ -10712,6 +10729,8 @@ function stroke(stroke, ui, canvas) {
             case 'center':
                 canvas.setStroke(stroke, __strokeWidth, options);
                 canvas.stroke();
+                if (options.__useArrow)
+                    strokeArrow(ui, canvas);
                 break;
             case 'inside':
                 canvas.save();
@@ -10749,6 +10768,8 @@ function strokes(strokes, ui, canvas) {
             case 'center':
                 canvas.setStroke(undefined, __strokeWidth, options);
                 drawStrokesStyle(strokes, false, ui, canvas);
+                if (options.__useArrow)
+                    strokeArrow(ui, canvas);
                 break;
             case 'inside':
                 canvas.save();
@@ -10774,6 +10795,14 @@ function strokes(strokes, ui, canvas) {
         }
     }
 }
+function strokeArrow(ui, canvas) {
+    if (ui.__.dashPattern) {
+        canvas.beginPath();
+        ui.__drawPathByData(canvas, ui.__.__pathForArrow);
+        canvas.dashPattern = null;
+        canvas.stroke();
+    }
+}
 
 const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
 function shape(ui, current, options) {
@@ -11276,7 +11305,7 @@ function applyStops(gradient, stops, opacity) {
     }
 }
 
-const { getAngle, getDistance: getDistance$1 } = PointHelper;
+const { getAngle, getDistance: getDistance$2 } = PointHelper;
 const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
 const { toPoint: toPoint$1 } = AroundHelper;
 const realFrom$1 = {};
@@ -11285,7 +11314,7 @@ function radialGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
     toPoint$1(from || 'center', box, realFrom$1);
     toPoint$1(to || 'bottom', box, realTo$1);
-    const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
+    const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$2(realFrom$1, realTo$1));
     applyStops(style, paint.stops, opacity);
     const data = { type, style };
     const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
@@ -11313,7 +11342,7 @@ function getTransform(box, from, to, stretch, rotate90) {
     return transform;
 }
 
-const { getDistance } = PointHelper;
+const { getDistance: getDistance$1 } = PointHelper;
 const { toPoint } = AroundHelper;
 const realFrom = {};
 const realTo = {};
@@ -11321,7 +11350,7 @@ function conicGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
     toPoint(from || 'center', box, realFrom);
     toPoint(to || 'bottom', box, realTo);
-    const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
+    const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance$1(realFrom, realTo));
     applyStops(style, paint.stops, opacity);
     const data = { type, style };
     const transform = getTransform(box, realFrom, realTo, stretch || 1, Platform.conicGradientRotate90);
@@ -11459,16 +11488,16 @@ const EffectModule = {
 
 const { excludeRenderBounds } = LeafBoundsHelper;
 Group.prototype.__renderMask = function (canvas, options) {
-    let child, maskCanvas, contentCanvas, maskOpacity, currentMask;
+    let child, maskCanvas, contentCanvas, maskOpacity, currentMask, mask;
     const { children } = this;
     for (let i = 0, len = children.length; i < len; i++) {
-        child = children[i];
-        if (child.__.mask) {
+        child = children[i], mask = child.__.mask;
+        if (mask) {
             if (currentMask) {
                 maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
                 maskCanvas = contentCanvas = null;
             }
-            if (child.__.mask === 'path') {
+            if (mask === 'path' || mask === 'clipping-path') {
                 if (child.opacity < 1) {
                     currentMask = 'opacity-path';
                     maskOpacity = child.opacity;
@@ -11482,14 +11511,14 @@ Group.prototype.__renderMask = function (canvas, options) {
                 child.__clip(contentCanvas || canvas, options);
             }
             else {
-                currentMask = 'alpha';
+                currentMask = mask === 'grayscale' ? 'grayscale' : 'alpha';
                 if (!maskCanvas)
                     maskCanvas = getCanvas(canvas);
                 if (!contentCanvas)
                     contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (child.__.mask !== 'clipping')
+            if (!(mask === 'clipping' || mask === 'clipping-path'))
                 continue;
         }
         if (excludeRenderBounds(child, options))
@@ -11500,6 +11529,8 @@ Group.prototype.__renderMask = function (canvas, options) {
 };
 function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity) {
     switch (maskMode) {
+        case 'grayscale':
+            maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
         case 'alpha':
             usePixelMask(leaf, canvas, contentCanvas, maskCanvas);
             break;
@@ -12204,15 +12235,12 @@ const canvas = LeaferCanvasBase.prototype;
 const debug = Debug.get('@leafer-ui/export');
 canvas.export = function (filename, options) {
     const { quality, blob } = FileHelper.getExportOptions(options);
-    if (filename.includes('.')) {
+    if (filename.includes('.'))
         return this.saveAs(filename, quality);
-    }
-    else if (blob) {
+    else if (blob)
         return this.toBlob(filename, quality);
-    }
-    else {
+    else
         return this.toDataURL(filename, quality);
-    }
 };
 canvas.toBlob = function (type, quality) {
     return new Promise((resolve) => {
@@ -12308,15 +12336,18 @@ let Robot = class Robot extends UI {
         if (typeof action === 'number') {
             this.now = action;
         }
-        else if (action instanceof Array) {
-            const { length } = action;
+        else if (typeof action === 'object') {
+            const isArray = action instanceof Array;
+            const keyframes = isArray ? action : action.keyframes;
+            this.__action = isArray ? undefined : action;
+            const { length } = keyframes;
             if (length > 1) {
-                const start = this.now = action[0], end = action[action.length - 1];
+                const start = this.now = keyframes[0], end = keyframes[keyframes.length - 1];
                 this.play();
                 this.__runAction(start, end);
             }
             else if (length)
-                this.now = action[0];
+                this.now = keyframes[0];
         }
     }
     __loadRobot(frame, start, end) {
@@ -12344,16 +12375,26 @@ let Robot = class Robot extends UI {
         this.emitEvent(new ImageEvent(ImageEvent.LOADED, { image }));
     }
     __runAction(start, end) {
+        let { FPS, loop, __action: a } = this;
+        if (a) {
+            if (a.FPS)
+                FPS = a.FPS;
+            if (a.loop !== undefined)
+                loop = a.loop;
+        }
         this.__timer = setTimeout(() => {
             if (this.running) {
-                if (this.now === end)
+                if (this.now === end) {
+                    if (!loop)
+                        return this.stop();
                     this.now = start;
+                }
                 else
                     this.now++;
                 this.__updateRobotBounds();
             }
             this.__runAction(start, end);
-        }, 1000 / this.FPS);
+        }, 1000 / FPS);
     }
     __updateRobotBounds() {
         const { nowFrame } = this;
@@ -12466,7 +12507,7 @@ function updateStyle(leaf, style, type) {
     const fromStyle = transition ? getFromStyle(leaf, style) : undefined;
     leaf.killAnimate('transition');
     if (normalStyle)
-        leaf.set(normalStyle, true);
+        leaf.set(normalStyle, 'temp');
     const statesStyle = getStyle(leaf);
     if (statesStyle) {
         const { animation } = statesStyle;
@@ -12480,14 +12521,14 @@ function updateStyle(leaf, style, type) {
             delete statesStyle.animation;
         }
         leaf.normalStyle = filterStyle(statesStyle, leaf);
-        leaf.set(statesStyle, true);
+        leaf.set(statesStyle, 'temp');
     }
     else {
         leaf.normalStyle = undefined;
     }
     if (transition) {
         const toStyle = filterStyle(fromStyle, leaf);
-        leaf.set(fromStyle, true);
+        leaf.set(fromStyle, 'temp');
         leaf.animate([fromStyle, toStyle], transition, 'transition', true);
     }
     leaf.__layout.stateStyleChanged = false;
@@ -12949,7 +12990,8 @@ let Animate = class Animate extends Eventer {
             return;
         if (typeof time === 'object')
             time = UnitConvert.number(time, this.duration);
-        time /= this.speed;
+        if (time)
+            time /= this.speed;
         if (!this.started || time < this.time)
             this.start(true);
         this.time = time;
@@ -13184,7 +13226,7 @@ let Animate = class Animate extends Eventer {
         this.emit(AnimateEvent.UPDATE, this);
     }
     setStyle(style) {
-        this.target.set(style, this.isTemp);
+        this.target.set(style, this.isTemp ? 'temp' : false);
     }
     clearTimer(fn) {
         if (this.timer) {
@@ -13560,6 +13602,9 @@ const TransitionList = {
         from = fourNumber(from), to = fourNumber(to);
         return from.map((f, i) => number(f, to[i], t));
     },
+    text(from, to, t) {
+        return (typeof from === 'number' || typeof to === 'number') ? MathHelper.float(number(from, to, t), Math.max(getDecimalLen(from), getDecimalLen(to))) : to;
+    },
     shadow,
     innerShadow: shadow
 };
@@ -13568,6 +13613,10 @@ const TransitionModule = {
     number,
     color
 };
+function getDecimalLen(num) {
+    const decimal = String(num).split('.')[1];
+    return decimal ? decimal.length : 0;
+}
 function value(from, to, t) {
     return (typeof from === 'number' && typeof to === 'number') ? from + (to - from) * t : to;
 }
@@ -13636,23 +13685,40 @@ const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.97
 const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443];
 const { sqrt } = Math;
 const HighBezierHelper = {
-    getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY) {
-        let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y;
+    getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY, t = 1) {
+        let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y, half = t / 2;
         for (let i = 0; i < gaussNodes.length; i++) {
-            t1 = 0.5 * (1 + gaussNodes[i]);
-            t2 = 0.5 * (1 - gaussNodes[i]);
+            t1 = half * (1 + gaussNodes[i]);
+            t2 = half * (1 - gaussNodes[i]);
             d1X = getDerivative(t1, fromX, x1, x2, toX);
             d1Y = getDerivative(t1, fromY, y1, y2, toY);
             d2X = getDerivative(t2, fromX, x1, x2, toX);
             d2Y = getDerivative(t2, fromY, y1, y2, toY);
             distance += gaussWeights[i] * (sqrt(d1X * d1X + d1Y * d1Y) + sqrt(d2X * d2X + d2Y * d2Y));
         }
-        return distance * 0.5;
+        return distance * half;
     },
     getDerivative(t, fromV, v1, v2, toV) {
         const o = 1 - t;
         return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
     },
+    getRotation(t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
+        const dx = getDerivative(t, fromX, x1, x2, toX);
+        const dy = getDerivative(t, fromY, y1, y2, toY);
+        return Math.atan2(dy, dx) / OneRadian;
+    },
+    getT(distance, totalDistance, fromX, fromY, x1, y1, x2, y2, toX, toY, precision = 1) {
+        let low = 0, high = 1, middle = distance / totalDistance, realPrecision = precision / totalDistance / 3;
+        if (middle >= 1)
+            return 1;
+        if (middle <= 0)
+            return 0;
+        while (high - low > realPrecision) {
+            getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY, middle) < distance ? low = middle : high = middle;
+            middle = (low + high) / 2;
+        }
+        return middle;
+    },
     cut(data, t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
         const o = 1 - t;
         const ax = o * fromX + t * x1, ay = o * fromY + t * y1;
@@ -13664,7 +13730,7 @@ const HighBezierHelper = {
         data.push(PathCommandMap.C, ax, ay, bx, by, cx, cy);
     }
 };
-const { getDerivative } = HighBezierHelper;
+const { getDerivative, getDistance } = HighBezierHelper;
 
 const { M, L, C, Z } = PathCommandMap;
 const tempPoint = {}, tempFrom = {};
@@ -13732,11 +13798,12 @@ const HighCurveHelper = {
         }
         return { total, segments, data };
     },
-    getDistancePoint(distanceData, motionDistance) {
+    getDistancePoint(distanceData, motionDistance, motionPrecision) {
         const { segments, data } = distanceData;
         motionDistance = UnitConvert.number(motionDistance, distanceData.total);
         let total = 0, distance, to = {};
         let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
+        let x1, y1, x2, y2, t;
         const len = data.length;
         while (i < len) {
             command = data[i];
@@ -13766,11 +13833,10 @@ const HighCurveHelper = {
                     toY = data[i + 6];
                     distance = segments[index];
                     if (total + distance > motionDistance) {
-                        const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
-                        motionDistance -= total;
-                        BezierHelper.getPointAndSet(motionDistance / distance, x, y, x1, y1, x2, y2, toX, toY, to);
-                        BezierHelper.getPointAndSet(Math.max(0, motionDistance - 0.1) / distance, x, y, x1, y1, x2, y2, toX, toY, tempFrom);
-                        to.rotation = PointHelper.getAngle(tempFrom, to);
+                        x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
+                        t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
+                        BezierHelper.getPointAndSet(t, x, y, x1, y1, x2, y2, toX, toY, to);
+                        to.rotation = HighBezierHelper.getRotation(t, x, y, x1, y1, x2, y2, toX, toY);
                         return to;
                     }
                     x = toX;
@@ -13787,11 +13853,12 @@ const HighCurveHelper = {
         }
         return to;
     },
-    getDistancePath(distanceData, motionDistance) {
+    getDistancePath(distanceData, motionDistance, motionPrecision) {
         const { segments, data } = distanceData, path = [];
         motionDistance = UnitConvert.number(motionDistance, distanceData.total);
         let total = 0, distance, to = {};
         let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
+        let x1, y1, x2, y2, t;
         const len = data.length;
         while (i < len) {
             command = data[i];
@@ -13818,12 +13885,13 @@ const HighCurveHelper = {
                     path.push(command, x, y);
                     break;
                 case C:
-                    const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
+                    x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
                     toX = data[i + 5];
                     toY = data[i + 6];
                     distance = segments[index];
                     if (total + distance > motionDistance) {
-                        HighBezierHelper.cut(path, (motionDistance - total) / distance, x, y, x1, y1, x2, y2, toX, toY);
+                        t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
+                        HighBezierHelper.cut(path, t, x, y, x1, y1, x2, y2, toX, toY);
                         return path;
                     }
                     x = toX;
@@ -13872,6 +13940,7 @@ const ui = UI.prototype;
 const { updateMatrix, updateAllMatrix } = LeafHelper;
 const { updateBounds } = BranchHelper;
 motionPathType()(ui, 'motionPath');
+motionPathType(1)(ui, 'motionPrecision');
 motionPathType()(ui, 'motion');
 motionPathType(true)(ui, 'motionRotation');
 ui.getMotionPathData = function () {
@@ -13882,7 +13951,7 @@ ui.getMotionPoint = function (motionDistance) {
     const data = getMotionPathData(path);
     if (!data.total)
         return {};
-    const point = HighCurveHelper.getDistancePoint(data, motionDistance);
+    const point = HighCurveHelper.getDistancePoint(data, motionDistance, path.motionPrecision);
     MatrixHelper.toOuterPoint(path.localTransform, point);
     const { motionRotation } = this;
     if (motionRotation === false)
@@ -13922,7 +13991,7 @@ function updateMotion(leaf) {
     if (leaf.motionPath) {
         const data = getMotionPathData(leaf);
         if (data.total)
-            leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion);
+            leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion, leaf.motionPrecision);
     }
     else {
         leaf.set(leaf.getMotionPoint(motion));