@leafer-game/worker 1.0.9 → 1.1.0

package/dist/worker.js

@@ -111,7 +111,7 @@ var LeaferUI = (function (exports) {
             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;
         },
@@ -1414,14 +1414,13 @@ var LeaferUI = (function (exports) {
         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;
@@ -1445,7 +1444,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -1647,7 +1646,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -2045,8 +2044,9 @@ var LeaferUI = (function (exports) {
                 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();
@@ -2160,6 +2160,17 @@ var LeaferUI = (function (exports) {
             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');
         }
@@ -2170,7 +2181,7 @@ var LeaferUI = (function (exports) {
             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';
@@ -2179,22 +2190,18 @@ var LeaferUI = (function (exports) {
             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();
         }
@@ -2202,6 +2209,14 @@ var LeaferUI = (function (exports) {
             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;
         }
@@ -4153,20 +4168,17 @@ var LeaferUI = (function (exports) {
             }
             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);
@@ -5215,13 +5227,14 @@ var LeaferUI = (function (exports) {
             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);
@@ -5545,11 +5558,11 @@ var LeaferUI = (function (exports) {
         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);
@@ -5563,8 +5576,8 @@ var LeaferUI = (function (exports) {
         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);
@@ -5962,7 +5975,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.9";
+    const version = "1.1.0";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6431,7 +6444,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -6985,6 +6999,12 @@ var LeaferUI = (function (exports) {
                 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; }
@@ -7354,9 +7374,8 @@ var LeaferUI = (function (exports) {
                             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);
@@ -7386,11 +7405,15 @@ var LeaferUI = (function (exports) {
             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);
@@ -7581,6 +7604,15 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.UI.prototype, "padding", void 0);
+    __decorate([
+        boundsType(false)
+    ], exports.UI.prototype, "lockRatio", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "widthRange", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "heightRange", void 0);
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "draggable", void 0);
@@ -7691,17 +7723,17 @@ var LeaferUI = (function (exports) {
             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);
@@ -7814,8 +7846,8 @@ var LeaferUI = (function (exports) {
         }
         onInit() { }
         initType(_type) { }
-        set(data) {
-            this.waitInit(() => { super.set(data); });
+        set(data, transition) {
+            this.waitInit(() => { super.set(data, transition); });
         }
         start() {
             clearTimeout(this.__startTimer);
@@ -7872,8 +7904,6 @@ var LeaferUI = (function (exports) {
         __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);
         }
@@ -8198,9 +8228,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType(false)
     ], exports.Box.prototype, "resizeChildren", void 0);
-    __decorate([
-        dataType(false)
-    ], exports.Box.prototype, "textBox", void 0);
     __decorate([
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
@@ -8310,7 +8337,7 @@ var LeaferUI = (function (exports) {
     ], exports.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;
     exports.Line = class Line extends exports.UI {
         get __tag() { return 'Line'; }
@@ -8324,7 +8351,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -8955,19 +8982,13 @@ var LeaferUI = (function (exports) {
             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);
@@ -9015,10 +9036,8 @@ var LeaferUI = (function (exports) {
             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')
@@ -9028,8 +9047,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -9081,9 +9099,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -9201,7 +9217,8 @@ var LeaferUI = (function (exports) {
     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];
@@ -10470,6 +10487,8 @@ var LeaferUI = (function (exports) {
                 case 'center':
                     canvas.setStroke(stroke, __strokeWidth, options);
                     canvas.stroke();
+                    if (options.__useArrow)
+                        strokeArrow(ui, canvas);
                     break;
                 case 'inside':
                     canvas.save();
@@ -10507,6 +10526,8 @@ var LeaferUI = (function (exports) {
                 case 'center':
                     canvas.setStroke(undefined, __strokeWidth, options);
                     drawStrokesStyle(strokes, false, ui, canvas);
+                    if (options.__useArrow)
+                        strokeArrow(ui, canvas);
                     break;
                 case 'inside':
                     canvas.save();
@@ -10532,6 +10553,14 @@ var LeaferUI = (function (exports) {
             }
         }
     }
+    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) {
@@ -11034,7 +11063,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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 = {};
@@ -11043,7 +11072,7 @@ var LeaferUI = (function (exports) {
         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);
@@ -11071,7 +11100,7 @@ var LeaferUI = (function (exports) {
         return transform;
     }
 
-    const { getDistance } = PointHelper;
+    const { getDistance: getDistance$1 } = PointHelper;
     const { toPoint } = AroundHelper;
     const realFrom = {};
     const realTo = {};
@@ -11079,7 +11108,7 @@ var LeaferUI = (function (exports) {
         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);
@@ -11217,16 +11246,16 @@ var LeaferUI = (function (exports) {
 
     const { excludeRenderBounds } = LeafBoundsHelper;
     exports.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;
@@ -11240,14 +11269,14 @@ var LeaferUI = (function (exports) {
                     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))
@@ -11258,6 +11287,8 @@ var LeaferUI = (function (exports) {
     };
     function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity) {
         switch (maskMode) {
+            case 'grayscale':
+                maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
             case 'alpha':
                 usePixelMask(leaf, canvas, contentCanvas, maskCanvas);
                 break;
@@ -11962,15 +11993,12 @@ var LeaferUI = (function (exports) {
     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) => {
@@ -12059,15 +12087,18 @@ var LeaferUI = (function (exports) {
             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) {
@@ -12095,16 +12126,26 @@ var LeaferUI = (function (exports) {
             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;
@@ -12217,7 +12258,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -12231,14 +12272,14 @@ var LeaferUI = (function (exports) {
                 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;
@@ -12700,7 +12741,8 @@ var LeaferUI = (function (exports) {
                 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;
@@ -12935,7 +12977,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -13311,6 +13353,9 @@ var LeaferUI = (function (exports) {
             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
     };
@@ -13319,6 +13364,10 @@ var LeaferUI = (function (exports) {
         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;
     }
@@ -13387,23 +13436,40 @@ var LeaferUI = (function (exports) {
     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;
@@ -13415,7 +13481,7 @@ var LeaferUI = (function (exports) {
             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 = {};
@@ -13483,11 +13549,12 @@ var LeaferUI = (function (exports) {
             }
             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];
@@ -13517,11 +13584,10 @@ var LeaferUI = (function (exports) {
                         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;
@@ -13538,11 +13604,12 @@ var LeaferUI = (function (exports) {
             }
             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];
@@ -13569,12 +13636,13 @@ var LeaferUI = (function (exports) {
                         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;
@@ -13623,6 +13691,7 @@ var LeaferUI = (function (exports) {
     const { updateMatrix, updateAllMatrix } = LeafHelper;
     const { updateBounds } = BranchHelper;
     motionPathType()(ui, 'motionPath');
+    motionPathType(1)(ui, 'motionPrecision');
     motionPathType()(ui, 'motion');
     motionPathType(true)(ui, 'motionRotation');
     ui.getMotionPathData = function () {
@@ -13633,7 +13702,7 @@ var LeaferUI = (function (exports) {
         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)
@@ -13673,7 +13742,7 @@ var LeaferUI = (function (exports) {
         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));