@visactor/vrender 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/index.js

@@ -16889,7 +16889,7 @@
       }
       initAnimate(params) {
         var _a;
-        this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), "effect" !== (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this.ticker.setFPS(30), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
+        this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this.ticker.setFPS(30), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
       }
       startAnimate() {
         this.ticker && this.timeline && (this.ticker.start(), this.timeline.resume());
@@ -30099,10 +30099,12 @@
     function noop() {}
     class Step {
       constructor(type, props, duration, easing) {
-        this._startTime = 0, this._hasFirstRun = !1, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId();
+        this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
+          this.target.setAttributes(this.target.attribute);
+        }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
       }
       bind(target, animate) {
-        this.target = target, this.animate = animate, this.onBind();
+        this.target = target, this.animate = animate, this.onBind(), this.syncAttributeUpdate();
       }
       append(step) {
         this.next = step, step.prev = this, step.setStartTime(this.getStartTime() + this.duration, !1);
@@ -30145,7 +30147,9 @@
       getStartTime() {
         return this._startTime;
       }
-      onBind() {}
+      onBind() {
+        "glyph" === this.target.type && (this.syncAttributeUpdate = this._syncAttributeUpdate);
+      }
       onFirstRun() {}
       onStart() {
         if (!this._hasFirstRun) {
@@ -30185,7 +30189,7 @@
           if (!this.animate.validAttr(this.propKeys[index])) return;
           const key = this.propKeys[index];
           func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-        }), this.onUpdate(end, easedRatio, out);
+        }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
       }
       onUpdate(end, ratio, out) {}
       onEnd(cb) {
@@ -30886,6 +30890,7 @@
           delayAfterValue = isFunction$1(delayAfter) ? delayAfter(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : delayAfter;
         delayValue > 0 && animate.wait(delayValue);
         (Array.isArray(effects) ? effects : [effects]).forEach(effect => {
+          var _a, _b;
           const {
             type = "fromTo",
             channel: channel,
@@ -30896,7 +30901,10 @@
           let parsedFromProps = null,
             props = effect.to,
             from = effect.from;
-          props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, effect.custom, effect.customType, from, props, duration, easing, customParameters, options, type, graphic);
+          props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
+          const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
+            customType = null !== (_b = effect.customType) && void 0 !== _b ? _b : custom && isFunction$1(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
+          this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
         }), delayAfterValue > 0 && animate.wait(delayAfterValue);
       }
       createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
@@ -31168,7 +31176,7 @@
       update(end, ratio, out) {
         if (this.onStart(), !this.props || !this.propKeys) return;
         const easedRatio = this.easing(ratio);
-        this.onUpdate(end, easedRatio, out);
+        this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
       }
       setProps(props) {
         this.props = props, this.propKeys = Object.keys(props), this.animate.reSyncProps();
@@ -31362,7 +31370,7 @@
         super(null, null, duration, easing, params), this.clipFromAttribute = from, this.clipToAttribute = to, 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, this._lastPath = this._group.attribute.path, this._group.setAttributes({
+        super.onBind(), this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, this._lastPath = this._group.attribute.path, this._group.setAttributes({
           clip: !0,
           path: [this._clipGraphic]
         }, !1, {
@@ -31520,6 +31528,7 @@
         return [];
       }
       onBind() {
+        super.onBind();
         const {
             points: points,
             segments: segments
@@ -31601,6 +31610,7 @@
       }
       onBind() {
         var _a;
+        super.onBind();
         const attrs = this.target.getFinalAttribute(),
           fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {},
           to = {},
@@ -31627,6 +31637,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
+        super.onBind();
         const attrs = this.target.attribute,
           to = {},
           from = {};
@@ -31670,7 +31681,9 @@
         let theta = Math.acos((startX - center.x) / r / Math.sin(phi));
         startZ - center.z < 0 && (theta = pi2 - theta), this.theta = theta, this.phi = phi;
       }
-      onBind() {}
+      onBind() {
+        super.onBind();
+      }
       onEnd() {}
       onUpdate(end, ratio, out) {
         if (null == this.phi || null == this.theta) return;
@@ -31834,6 +31847,7 @@
     class GrowAngleIn extends GrowAngleBase {
       onBind() {
         var _a, _b;
+        super.onBind();
         const {
             from: from,
             to: to
@@ -31846,6 +31860,7 @@
     }
     class GrowAngleOut extends GrowAngleBase {
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -31984,6 +31999,7 @@
       }
       onBind() {
         var _a, _b;
+        super.onBind();
         const {
             from: from,
             to: to
@@ -32008,6 +32024,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -32089,6 +32106,7 @@
       }
       onBind() {
         var _a, _b;
+        super.onBind();
         const {
             from: from,
             to: to
@@ -32151,6 +32169,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -32203,7 +32222,7 @@
     }
     class GrowPointsIn extends GworPointsBase {
       onBind() {
-        if (["area", "line", "polygon"].includes(this.target.type)) {
+        if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
@@ -32216,7 +32235,7 @@
     }
     class GrowPointsOut extends GworPointsBase {
       onBind() {
-        if (["area", "line"].includes(this.target.type)) {
+        if (super.onBind(), ["area", "line"].includes(this.target.type)) {
           const attrs = this.target.getFinalAttribute(),
             {
               from: from,
@@ -32267,7 +32286,7 @@
       };
     class GrowPointsXIn extends GworPointsBase {
       onBind() {
-        if (["area", "line", "polygon"].includes(this.target.type)) {
+        if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
@@ -32280,7 +32299,7 @@
     }
     class GrowPointsXOut extends GworPointsBase {
       onBind() {
-        if (["area", "line"].includes(this.target.type)) {
+        if (super.onBind(), ["area", "line"].includes(this.target.type)) {
           const attrs = this.target.getFinalAttribute(),
             {
               from: from,
@@ -32331,7 +32350,7 @@
       };
     class GrowPointsYIn extends GworPointsBase {
       onBind() {
-        if (["area", "line", "polygon"].includes(this.target.type)) {
+        if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
@@ -32344,7 +32363,7 @@
     }
     class GrowPointsYOut extends GworPointsBase {
       onBind() {
-        if (["area", "line", "polygon"].includes(this.target.type)) {
+        if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
@@ -32444,6 +32463,7 @@
     class GrowRadiusIn extends GrowPointsBase {
       onBind() {
         var _a, _b;
+        super.onBind();
         const {
             from: from,
             to: to
@@ -32456,6 +32476,7 @@
     }
     class GrowRadiusOut extends GrowPointsBase {
       onBind() {
+        super.onBind();
         const {
           to: to
         } = (graphic = this.target, options = this.params.options, this.params, !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growRadiusOutOverall(graphic, options) : growRadiusOutIndividual(graphic, options));
@@ -32566,6 +32587,7 @@
       }
       onBind() {
         var _a, _b;
+        super.onBind();
         const {
             from: from,
             to: to
@@ -32590,6 +32612,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -32610,6 +32633,7 @@
 
     class LabelItemAppear extends AComponentAnimate {
       onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration,
@@ -32748,6 +32772,7 @@
     }
     class LabelItemDisappear extends AComponentAnimate {
       onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration,
@@ -32830,6 +32855,7 @@
 
     class PoptipAppear extends AComponentAnimate {
       onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration,
@@ -32912,6 +32938,7 @@
     }
     class PoptipDisappear extends AComponentAnimate {
       onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration,
@@ -33321,6 +33348,7 @@
       onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         let from, to;
+        super.onBind();
         const attrs = this.target.getFinalAttribute(),
           fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {};
         switch (null === (_b = this.params) || void 0 === _b ? void 0 : _b.direction) {
@@ -33378,6 +33406,7 @@
       onBind() {
         var _a, _b, _c, _d, _e;
         let from, to;
+        super.onBind();
         const attrs = this.target.attribute;
         switch (null === (_a = this.params) || void 0 === _a ? void 0 : _a.direction) {
           case "x":
@@ -33427,7 +33456,7 @@
           if (!this.animate.validAttr(this.propKeys[index])) return;
           const key = this.propKeys[index];
           func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-        }), this.onUpdate(end, easedRatio, out);
+        }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
       }
     }
 
@@ -33437,6 +33466,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        super.onBind();
         const attrs = this.target.getFinalAttribute(),
           direction = (null === (_a = this.params) || void 0 === _a ? void 0 : _a.direction) || "right",
           distance = (null === (_b = this.params) || void 0 === _b ? void 0 : _b.distance) || 50,
@@ -33464,6 +33494,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f, _g;
+        super.onBind();
         const attrs = this.target.getFinalAttribute(),
           fromScale = null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.fromScale) && void 0 !== _b ? _b : 0,
           direction = (null === (_c = this.params) || void 0 === _c ? void 0 : _c.direction) || "xy",
@@ -33491,6 +33522,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super.onBind();
         const attrs = this.target.getFinalAttribute(),
           fromAngle = null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.fromAngle) && void 0 !== _b ? _b : 2 * Math.PI,
           fromScale = null !== (_d = null === (_c = this.params) || void 0 === _c ? void 0 : _c.fromScale) && void 0 !== _d ? _d : 0,
@@ -33527,6 +33559,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f;
+        super.onBind();
         const executor = new AnimateExecutor(this.target);
         executor.execute({
           type: "custom",
@@ -33562,6 +33595,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f;
+        super.onBind();
         const executor = new AnimateExecutor(this.target);
         executor.execute({
           type: "custom",
@@ -33757,6 +33791,7 @@
       }
       onBind() {
         var _a, _b;
+        super.onBind();
         let {
           diffAttrs = {}
         } = null !== (_a = this.target.context) && void 0 !== _a ? _a : {};
@@ -33889,6 +33924,7 @@
     }
     class MoveIn extends MoveBase {
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -33900,6 +33936,7 @@
     }
     class MoveOut extends MoveBase {
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -33947,6 +33984,7 @@
     }
     class RotateIn extends RotateBase {
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -33958,6 +33996,7 @@
     }
     class RotateOut extends RotateBase {
       onBind() {
+        super.onBind();
         const {
           from: from,
           to: to
@@ -33968,33 +34007,36 @@
 
     class FromTo extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.from = from, this.to = to;
+        super(from, to, duration, easing, params), this.from = null != from ? from : {};
       }
       onBind() {
+        super.onBind();
+        const finalAttribute = this.target.getFinalAttribute();
+        Object.keys(this.from).forEach(key => {
+          null == this.props[key] && (this.props[key] = finalAttribute[key]);
+        });
+      }
+      onFirstRun() {
         var _a;
-        const finalAttribute = this.target.getFinalAttribute(),
-          currAttribute = this.target.attribute,
-          fromKeys = Object.keys(this.from),
-          toKeys = Object.keys(this.to);
-        if (fromKeys.forEach(key => {
-          var _a;
-          null == this.to[key] && (this.to[key] = null !== (_a = finalAttribute[key]) && void 0 !== _a ? _a : 0);
-        }), toKeys.forEach(key => {
+        this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
+        const startProps = this.animate.getStartProps();
+        if (this.propKeys && this.propKeys.forEach(key => {
           var _a;
-          null == this.from[key] && (this.from[key] = null !== (_a = currAttribute[key]) && void 0 !== _a ? _a : 0);
-        }), this.propKeys = Object.keys(this.from), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState)) {
+          this.from[key] = null !== (_a = this.from[key]) && void 0 !== _a ? _a : startProps[key];
+        }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState)) {
           const finalAttribute = this.target.getFinalAttribute();
           this.target.setAttributes(finalAttribute);
         }
+        this.target.setAttributes(this.from);
       }
       update(end, ratio, out) {
         if (this.onStart(), !this.props || !this.propKeys) return;
         const easedRatio = this.easing(ratio);
-        this.interpolateUpdateFunctions.forEach((func, index) => {
+        this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.from, this.props, easedRatio, this, this.target) : this.interpolateUpdateFunctions.forEach((func, index) => {
           if (!this.animate.validAttr(this.propKeys[index])) return;
           const key = this.propKeys[index];
-          func(key, this.from[key], this.to[key], easedRatio, this, this.target);
-        });
+          func(key, this.from[key], this.props[key], easedRatio, this, this.target);
+        }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
       }
     }
 
@@ -34002,7 +34044,7 @@
       AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut);
     };
 
-    const version = "1.0.0-alpha.1";
+    const version = "1.0.0-alpha.2";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);