@visactor/vrender-core 0.19.6-alpha.3 → 0.19.7-alpha.0

package/es/animate/custom-animate.js

@@ -15,9 +15,6 @@ import { pointInterpolation } from "../common/utils";
 import { divideCubic } from "../common/segment/curve/cubic-bezier";
 
 export class IncreaseCount extends ACustomAnimate {
-    fromNumber;
-    toNumber;
-    decimalLength;
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
     }
@@ -27,10 +24,11 @@ export class IncreaseCount extends ACustomAnimate {
         };
     }
     onBind() {
-        this.fromNumber = isNumber(this.from?.text) ? this.from?.text : Number.parseFloat(this.from?.text), 
-        this.toNumber = isNumber(this.to?.text) ? this.to?.text : Number.parseFloat(this.to?.text), 
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.fromNumber = isNumber(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), 
+        this.toNumber = isNumber(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), 
         Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), 
-        !1 !== this.valid && (this.decimalLength = this.params?.fixed ?? Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
+        !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
     }
     onEnd() {}
     onUpdate(end, ratio, out) {
@@ -146,15 +144,19 @@ export class FadeInPlus extends ACustomAnimate {
 }
 
 export class InputText extends ACustomAnimate {
-    fromText="";
-    toText="";
+    constructor() {
+        super(...arguments), this.fromText = "", this.toText = "";
+    }
     getEndProps() {
         return !1 === this.valid ? {} : {
             text: this.to
         };
     }
     onBind() {
-        if (this.fromText = this.from?.text ?? "", this.toText = this.to?.text ?? "", !this.toText || isArray(this.toText)) this.valid = !1; else {
+        var _a, _b, _c, _d;
+        if (this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "", 
+        this.toText = null !== (_d = null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) && void 0 !== _d ? _d : "", 
+        !this.toText || isArray(this.toText)) this.valid = !1; else {
             this.toText = this.toText.toString();
             const root = this.target.attachShadow(), line = application.graphicService.creator.line({
                 x: 0,
@@ -176,10 +178,11 @@ export class InputText extends ACustomAnimate {
         this.target.detachShadow();
     }
     onUpdate(end, ratio, out) {
+        var _a;
         if (!1 === this.valid) return;
         const fromCount = this.fromText.length, toCount = this.toText.length, count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
         out.text = this.toText.substr(0, count);
-        const line = this.target.shadowRoot?.at(0), endX = this.target.clipedWidth + 2;
+        const line = null === (_a = this.target.shadowRoot) || void 0 === _a ? void 0 : _a.at(0), endX = this.target.clipedWidth + 2;
         line.setAttribute("x", endX);
     }
 }
@@ -195,22 +198,22 @@ export class StreamLight extends ACustomAnimate {
         this.target && ("rect" === this.target.type ? this.onStartRect() : "line" === this.target.type ? this.onStartLineOrArea("line") : "area" === this.target.type && this.onStartLineOrArea("area"));
     }
     onStartLineOrArea(type) {
-        const root = this.target.attachShadow(), line = application.graphicService.creator[type]({
-            ...this.params?.attribute
-        });
+        var _a;
+        const root = this.target.attachShadow(), line = application.graphicService.creator[type](Object.assign({}, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute));
         this[type] = line, line.pathProxy = new CustomPath2D, root.add(line);
     }
     onStartRect() {
-        const root = this.target.attachShadow(), height = this.target.AABBBounds.height(), rect = application.graphicService.creator.rect({
-            height: height,
+        var _a, _b, _c;
+        const root = this.target.attachShadow(), isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b, sizeAttr = isHorizontal ? "height" : "width", otherSizeAttr = isHorizontal ? "width" : "height", size = this.target.AABBBounds[sizeAttr](), y = isHorizontal ? 0 : this.target.AABBBounds.y1, rect = application.graphicService.creator.rect(Object.assign(Object.assign({
+            [sizeAttr]: size,
             fill: "#bcdeff",
             shadowBlur: 30,
-            shadowColor: "#bcdeff",
-            ...this.params?.attribute,
+            shadowColor: "#bcdeff"
+        }, null === (_c = this.params) || void 0 === _c ? void 0 : _c.attribute), {
             x: 0,
-            y: 0,
-            width: 0
-        });
+            y: y,
+            [otherSizeAttr]: 0
+        }));
         this.rect = rect, root.add(rect);
     }
     onBind() {}
@@ -221,17 +224,36 @@ export class StreamLight extends ACustomAnimate {
         return this.rect ? this.onUpdateRect(end, ratio, out) : this.line || this.area ? this.onUpdateLineOrArea(end, ratio, out) : void 0;
     }
     onUpdateRect(end, ratio, out) {
-        const parentWidth = this.target.attribute.width ?? 250, streamLength = this.params?.streamLength ?? parentWidth, maxLength = this.params?.attribute?.width ?? 60, startX = -maxLength, currentX = startX + (streamLength - startX) * ratio, x = Math.max(currentX, 0), w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX), width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
-        this.rect.setAttributes({
-            x: x,
-            width: width
-        }, !1, {
-            type: AttributeUpdateType.ANIMATE_PLAY,
-            animationState: {
-                ratio: ratio,
-                end: end
-            }
-        });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b, parentAttr = this.target.attribute;
+        if (isHorizontal) {
+            const parentWidth = null !== (_d = null !== (_c = parentAttr.width) && void 0 !== _c ? _c : parentAttr.x1 - parentAttr.x) && void 0 !== _d ? _d : 250, streamLength = null !== (_f = null === (_e = this.params) || void 0 === _e ? void 0 : _e.streamLength) && void 0 !== _f ? _f : parentWidth, maxLength = null !== (_j = null === (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.attribute) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 60, startX = -maxLength, currentX = startX + (streamLength - startX) * ratio, x = Math.max(currentX, 0), w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX), width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
+            this.rect.setAttributes({
+                x: x,
+                width: width
+            }, !1, {
+                type: AttributeUpdateType.ANIMATE_PLAY,
+                animationState: {
+                    ratio: ratio,
+                    end: end
+                }
+            });
+        } else {
+            const parentHeight = null !== (_l = null !== (_k = parentAttr.height) && void 0 !== _k ? _k : parentAttr.y1 - parentAttr.y) && void 0 !== _l ? _l : 250, streamLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.streamLength) && void 0 !== _o ? _o : parentHeight, maxLength = null !== (_r = null === (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.attribute) || void 0 === _q ? void 0 : _q.height) && void 0 !== _r ? _r : 60, currentY = parentHeight - (streamLength + maxLength) * ratio;
+            let y = Math.min(currentY, parentHeight);
+            const h = Math.min(parentHeight - currentY, maxLength);
+            let height;
+            y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
+                y: y,
+                height: height
+            }, !1, {
+                type: AttributeUpdateType.ANIMATE_PLAY,
+                animationState: {
+                    ratio: ratio,
+                    end: end
+                }
+            });
+        }
     }
     onUpdateLineOrArea(end, ratio, out) {
         const target = this.line || this.area;
@@ -239,10 +261,9 @@ export class StreamLight extends ACustomAnimate {
         const customPath = target.pathProxy, targetLine = this.target;
         targetLine.cache || targetLine.cacheArea ? this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out) : this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
         const targetAttrs = targetLine.attribute;
-        target.setAttributes({
-            stroke: targetAttrs.stroke,
-            ...target.attribute
-        }), target.addUpdateBoundTag();
+        target.setAttributes(Object.assign({
+            stroke: targetAttrs.stroke
+        }, target.attribute)), target.addUpdateBoundTag();
     }
     _onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
         if (customPath.clear(), "line" === g.type) {
@@ -259,7 +280,8 @@ export class StreamLight extends ACustomAnimate {
         }
     }
     _updateCurves(customPath, curves, totalLen, ratio) {
-        const startLen = totalLen * ratio, endLen = Math.min(startLen + this.params?.streamLength ?? 10, totalLen);
+        var _a, _b;
+        const startLen = totalLen * ratio, endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen);
         let lastLen = 0, start = !1;
         for (let i = 0; i < curves.length; i++) {
             const curveItem = curves[i], len = curveItem.getLength(), startPercent = 1 - (lastLen + len - startLen) / len;
@@ -290,11 +312,12 @@ export class StreamLight extends ACustomAnimate {
         }
     }
     _onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
+        var _a, _b;
         const {points: points, curveType: curveType} = line.attribute;
         if (!points || points.length < 2 || "linear" !== curveType) return;
         let totalLen = 0;
         for (let i = 1; i < points.length; i++) totalLen += PointService.distancePP(points[i], points[i - 1]);
-        const startLen = totalLen * ratio, endLen = Math.min(startLen + this.params?.streamLength ?? 10, totalLen), nextPoints = [];
+        const startLen = totalLen * ratio, endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen), nextPoints = [];
         let lastLen = 0;
         for (let i = 1; i < points.length; i++) {
             const len = PointService.distancePP(points[i], points[i - 1]);
@@ -352,9 +375,10 @@ export class Meteor extends ACustomAnimate {
 
 export class MotionPath extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
+        var _a;
         super(from, to, duration, easing, params), params && (this.pathLength = params.path.getLength(), 
         this.path = params.path, this.distance = params.distance, this.to = params.distance * this.pathLength, 
-        this.initAngle = params.initAngle ?? 0, this.changeAngle = !!params.changeAngle, 
+        this.initAngle = null !== (_a = params.initAngle) && void 0 !== _a ? _a : 0, this.changeAngle = !!params.changeAngle, 
         this.cb = params.cb);
     }
     onUpdate(end, ratio, out) {
@@ -365,16 +389,12 @@ export class MotionPath extends ACustomAnimate {
 }
 
 export class TagPointsUpdate extends ACustomAnimate {
-    fromPoints;
-    toPoints;
-    points;
-    interpolatePoints;
-    newPointAnimateType;
     constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.newPointAnimateType = "appear" === params?.newPointAnimateType ? "appear" : "grow";
+        super(from, to, duration, easing, params), this.newPointAnimateType = "appear" === (null == params ? void 0 : params.newPointAnimateType) ? "appear" : "grow";
     }
     onBind() {
-        const originFromPoints = this.from?.points, originToPoints = this.to?.points;
+        var _a, _b;
+        const originFromPoints = null === (_a = this.from) || void 0 === _a ? void 0 : _a.points, originToPoints = null === (_b = this.to) || void 0 === _b ? void 0 : _b.points;
         this.fromPoints = originFromPoints ? Array.isArray(originFromPoints) ? originFromPoints : [ originFromPoints ] : [], 
         this.toPoints = originToPoints ? Array.isArray(originToPoints) ? originToPoints : [ originToPoints ] : [];
         const tagMap = new Map;
@@ -408,9 +428,8 @@ export class TagPointsUpdate extends ACustomAnimate {
 }
 
 export class GraphicAnimate extends ACustomAnimate {
-    graphic;
     constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.graphic = params?.graphic;
+        super(from, to, duration, easing, params), this.graphic = null == params ? void 0 : params.graphic;
     }
     onUpdate(end, ratio, out) {
         this.graphic && Object.keys(this.from).forEach((k => {
@@ -420,15 +439,9 @@ export class GraphicAnimate extends ACustomAnimate {
 }
 
 export class ClipGraphicAnimate extends ACustomAnimate {
-    _group;
-    _clipGraphic;
-    clipFromAttribute;
-    clipToAttribute;
-    _lastClip;
-    _lastPath;
     constructor(from, to, duration, easing, params) {
         super(null, null, duration, easing, params), this.clipFromAttribute = from, this.clipToAttribute = to, 
-        this._group = params?.group, this._clipGraphic = params?.clipGraphic;
+        this._group = null == params ? void 0 : params.group, this._clipGraphic = null == params ? void 0 : params.clipGraphic;
     }
     onBind() {
         this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, 
@@ -464,14 +477,15 @@ export class ClipGraphicAnimate extends ACustomAnimate {
 
 export class ClipAngleAnimate extends ClipGraphicAnimate {
     constructor(from, to, duration, easing, params) {
-        const groupAttribute = params?.group?.attribute ?? {}, width = groupAttribute.width ?? 0, height = groupAttribute.height ?? 0, animationType = params?.animationType ?? "in", startAngle = params?.startAngle ?? 0, orient = params?.orient ?? "clockwise";
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const groupAttribute = null !== (_b = null === (_a = null == params ? void 0 : params.group) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, width = null !== (_c = groupAttribute.width) && void 0 !== _c ? _c : 0, height = null !== (_d = groupAttribute.height) && void 0 !== _d ? _d : 0, animationType = null !== (_e = null == params ? void 0 : params.animationType) && void 0 !== _e ? _e : "in", startAngle = null !== (_f = null == params ? void 0 : params.startAngle) && void 0 !== _f ? _f : 0, orient = null !== (_g = null == params ? void 0 : params.orient) && void 0 !== _g ? _g : "clockwise";
         let arcStartAngle = 0, arcEndAngle = 0;
         "anticlockwise" === orient ? (arcEndAngle = "in" === animationType ? startAngle + 2 * Math.PI : startAngle, 
         arcEndAngle = startAngle + 2 * Math.PI) : (arcStartAngle = startAngle, arcEndAngle = "out" === animationType ? startAngle + 2 * Math.PI : startAngle);
         const arc = application.graphicService.creator.arc({
-            x: params?.center?.x ?? width / 2,
-            y: params?.center?.y ?? height / 2,
-            outerRadius: params?.radius ?? (width + height) / 2,
+            x: null !== (_j = null === (_h = null == params ? void 0 : params.center) || void 0 === _h ? void 0 : _h.x) && void 0 !== _j ? _j : width / 2,
+            y: null !== (_l = null === (_k = null == params ? void 0 : params.center) || void 0 === _k ? void 0 : _k.y) && void 0 !== _l ? _l : height / 2,
+            outerRadius: null !== (_m = null == params ? void 0 : params.radius) && void 0 !== _m ? _m : (width + height) / 2,
             innerRadius: 0,
             startAngle: arcStartAngle,
             endAngle: arcEndAngle,
@@ -487,7 +501,7 @@ export class ClipAngleAnimate extends ClipGraphicAnimate {
         }, toAttributes = {
             endAngle: startAngle + 2 * Math.PI
         }), super("in" === animationType ? fromAttributes : toAttributes, "in" === animationType ? toAttributes : fromAttributes, duration, easing, {
-            group: params?.group,
+            group: null == params ? void 0 : params.group,
             clipGraphic: arc
         });
     }
@@ -495,9 +509,10 @@ export class ClipAngleAnimate extends ClipGraphicAnimate {
 
 export class ClipRadiusAnimate extends ClipGraphicAnimate {
     constructor(from, to, duration, easing, params) {
-        const groupAttribute = params?.group?.attribute ?? {}, width = groupAttribute.width ?? 0, height = groupAttribute.height ?? 0, animationType = params?.animationType ?? "in", startRadius = params?.startRadius ?? 0, endRadius = params?.endRadius ?? Math.sqrt((width / 2) ** 2 + (height / 2) ** 2), arc = application.graphicService.creator.arc({
-            x: params?.center?.x ?? width / 2,
-            y: params?.center?.y ?? height / 2,
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const groupAttribute = null !== (_b = null === (_a = null == params ? void 0 : params.group) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, width = null !== (_c = groupAttribute.width) && void 0 !== _c ? _c : 0, height = null !== (_d = groupAttribute.height) && void 0 !== _d ? _d : 0, animationType = null !== (_e = null == params ? void 0 : params.animationType) && void 0 !== _e ? _e : "in", startRadius = null !== (_f = null == params ? void 0 : params.startRadius) && void 0 !== _f ? _f : 0, endRadius = null !== (_g = null == params ? void 0 : params.endRadius) && void 0 !== _g ? _g : Math.sqrt((width / 2) ** 2 + (height / 2) ** 2), arc = application.graphicService.creator.arc({
+            x: null !== (_j = null === (_h = null == params ? void 0 : params.center) || void 0 === _h ? void 0 : _h.x) && void 0 !== _j ? _j : width / 2,
+            y: null !== (_l = null === (_k = null == params ? void 0 : params.center) || void 0 === _k ? void 0 : _k.y) && void 0 !== _l ? _l : height / 2,
             outerRadius: "out" === animationType ? endRadius : startRadius,
             innerRadius: 0,
             startAngle: 0,
@@ -509,7 +524,7 @@ export class ClipRadiusAnimate extends ClipGraphicAnimate {
             outerRadius: endRadius
         };
         super("in" === animationType ? fromAttributes : toAttributes, "in" === animationType ? toAttributes : fromAttributes, duration, easing, {
-            group: params?.group,
+            group: null == params ? void 0 : params.group,
             clipGraphic: arc
         });
     }
@@ -517,7 +532,8 @@ export class ClipRadiusAnimate extends ClipGraphicAnimate {
 
 export class ClipDirectionAnimate extends ClipGraphicAnimate {
     constructor(from, to, duration, easing, params) {
-        const groupAttribute = params?.group?.attribute ?? {}, width = params?.width ?? groupAttribute.width ?? 0, height = params?.height ?? groupAttribute.height ?? 0, animationType = params?.animationType ?? "in", direction = params?.direction ?? "x", orient = params?.orient ?? "positive", rect = application.graphicService.creator.rect({
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const groupAttribute = null !== (_b = null === (_a = null == params ? void 0 : params.group) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, width = null !== (_d = null !== (_c = null == params ? void 0 : params.width) && void 0 !== _c ? _c : groupAttribute.width) && void 0 !== _d ? _d : 0, height = null !== (_f = null !== (_e = null == params ? void 0 : params.height) && void 0 !== _e ? _e : groupAttribute.height) && void 0 !== _f ? _f : 0, animationType = null !== (_g = null == params ? void 0 : params.animationType) && void 0 !== _g ? _g : "in", direction = null !== (_h = null == params ? void 0 : params.direction) && void 0 !== _h ? _h : "x", orient = null !== (_j = null == params ? void 0 : params.orient) && void 0 !== _j ? _j : "positive", rect = application.graphicService.creator.rect({
             x: 0,
             y: 0,
             width: "in" === animationType && "x" === direction ? 0 : width,
@@ -546,7 +562,7 @@ export class ClipDirectionAnimate extends ClipGraphicAnimate {
         }, toAttributes = {
             width: width
         }), super("in" === animationType ? fromAttributes : toAttributes, "in" === animationType ? toAttributes : fromAttributes, duration, easing, {
-            group: params?.group,
+            group: null == params ? void 0 : params.group,
             clipGraphic: rect
         });
     }