@visactor/vrender 1.0.0-alpha.3 → 1.0.0-alpha.4

package/dist/index.es.js

@@ -1220,6 +1220,9 @@ const isArrayLike = function (value) {
 };
 var isArrayLike$1 = isArrayLike;
 
+const isDate = value => isType$1(value, "Date");
+var isDate$1 = isDate;
+
 const isNumber = function (value) {
   let fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
   const type = typeof value;
@@ -1240,6 +1243,22 @@ const hasOwnProperty = Object.prototype.hasOwnProperty,
   has = (object, key) => null != object && hasOwnProperty.call(object, key);
 var has$1 = has;
 
+function cloneDeep(value, ignoreWhen, excludeKeys) {
+  let result;
+  if (!isValid$1(value) || "object" != typeof value || ignoreWhen && ignoreWhen(value)) return value;
+  const isArr = isArray$1(value),
+    length = value.length;
+  result = isArr ? new Array(length) : "object" == typeof value ? {} : isBoolean$1(value) || isNumber$1(value) || isString$1(value) ? value : isDate$1(value) ? new Date(+value) : void 0;
+  const props = isArr ? void 0 : Object.keys(Object(value));
+  let index = -1;
+  if (result) for (; ++index < (props || value).length;) {
+    const key = props ? props[index] : index,
+      subValue = value[key];
+    excludeKeys && excludeKeys.includes(key.toString()) ? result[key] = subValue : result[key] = cloneDeep(subValue, ignoreWhen, excludeKeys);
+  }
+  return result;
+}
+
 function baseMerge(target, source) {
   let shallowArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
   let skipTargetArray = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
@@ -16844,6 +16863,12 @@ class Stage extends Group {
   get eventSystem() {
     return this._eventSystem;
   }
+  get ticker() {
+    return this._ticker;
+  }
+  set ticker(ticker) {
+    this._ticker && this._ticker.removeListener("tick", this.afterTickCb), ticker.addTimeline(this.timeline), this._ticker = ticker, this._ticker.on("tick", this.afterTickCb);
+  }
   constructor() {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _a, _b;
@@ -16883,10 +16908,10 @@ class Stage extends Group {
   }
   initAnimate(params) {
     var _a;
-    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));
+    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());
+    this._ticker && this.timeline && (this._ticker.start(), this.timeline.resume());
   }
   pauseRender() {
     let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
@@ -17219,7 +17244,7 @@ class Stage extends Group {
       layer.release();
     }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
       item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-    }), this.interactiveLayer.release()), this.window.release(), null === (_a = this.ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this.ticker) || void 0 === _b || _b.removeListener("afterTick", this.afterTickCb), this.renderService.renderTreeRoots = [];
+    }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.renderService.renderTreeRoots = [];
   }
   setStage(stage) {}
   dirty(b, matrix) {
@@ -30158,7 +30183,7 @@ class Step {
   tryPreventConflict() {
     const animate = this.animate;
     this.target.animates.forEach(a => {
-      if (a === animate || a.priority > animate.priority) return;
+      if (a === animate || a.priority > animate.priority || a.priority === 1 / 0) return;
       const fromProps = a.getStartProps();
       this.propKeys.forEach(key => {
         null != fromProps[key] && a.preventAttr(key);
@@ -30204,6 +30229,13 @@ class WaitStep extends Step {
   constructor(type, props, duration, easing) {
     super(type, props, duration, easing);
   }
+  onStart() {
+    super.onStart();
+  }
+  onFirstRun() {
+    const fromProps = this.getFromProps();
+    this.target.setAttributes(fromProps);
+  }
   update(end, ratio, out) {
     this.onStart();
   }
@@ -30435,11 +30467,11 @@ class Animate {
     return this._bounce = b, this;
   }
   advance(delta) {
-    var _a;
+    var _a, _b, _c;
     if (this.status === AnimateStatus.END) return void console.warn("aaa 动画已经结束，不能推进");
     const nextTime = this.currentTime + delta;
     if (nextTime < this._startTime) return void (this.currentTime = nextTime);
-    if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(), this.onEnd(), void (this.status = AnimateStatus.END);
+    if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), void (this.status = AnimateStatus.END);
     this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
     let cycleTime = nextTime - this._startTime,
       newLoop = !1,
@@ -30464,9 +30496,10 @@ class Animate {
       }
     }
     if (!targetStep) return;
+    targetStep !== this.lastRunStep && (null === (_c = this.lastRunStep) || void 0 === _c || _c.onEnd()), this.lastRunStep = targetStep;
     const ratio = (cycleTime - targetStep.getStartTime()) / targetStep.getDuration(),
       isEnd = ratio >= 1;
-    targetStep.update(isEnd, ratio, {}), isEnd && targetStep.onEnd();
+    targetStep.update(isEnd, ratio, {}), isEnd && (targetStep.onEnd(), this.lastRunStep = null);
   }
   updateDuration() {
     this._lastStep ? (this._duration = this._lastStep.getStartTime() + this._lastStep.getDuration(), this._totalDuration = this._duration * (this._loopCount + 1)) : this._duration = 0;
@@ -30613,8 +30646,16 @@ class ManualTickHandler {
   getTime() {
     return this.currentTime;
   }
+  tickTo(time, cb) {
+    this.startTime < 0 && (this.startTime = 0, this.currentTime = 0);
+    const interval = time - this.currentTime;
+    this.tick(interval, cb);
+  }
 }
 class ManualTicker extends DefaultTicker {
+  constructor(stage) {
+    super(stage), this.lastFrameTime = 0, this.status = STATUS$1.RUNNING;
+  }
   setupTickHandler() {
     const handler = new ManualTickHandler();
     return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
@@ -30622,6 +30663,19 @@ class ManualTicker extends DefaultTicker {
   getTime() {
     return this.tickerHandler.getTime();
   }
+  tickAt(time) {
+    this.tickTo(time);
+  }
+  start() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+    if (this.status === STATUS$1.RUNNING) return !1;
+    if (!this.tickerHandler) return !1;
+    if (!force) {
+      if (this.status === STATUS$1.PAUSE) return !1;
+      if (this.ifCanStop()) return !1;
+    }
+    return this.status = STATUS$1.RUNNING, !0;
+  }
 }
 
 function generatorPathEasingFunc(path) {
@@ -30732,47 +30786,49 @@ class AnimateExecutor {
       index >= 0 && this._animates.splice(index, 1), 0 === this._activeCount && this._started && (this._started = !1, this.onEnd());
     });
   }
-  parseParams(params, isTimeline) {
+  parseParams(params, isTimeline, child) {
     var _a, _b;
     const totalTime = this.resolveValue(params.totalTime, void 0, void 0),
       startTime = this.resolveValue(params.startTime, void 0, 0),
-      parsedParams = Object.assign({}, params);
+      parsedParams = cloneDeep(params);
     parsedParams.oneByOneDelay = 0, parsedParams.startTime = startTime, parsedParams.totalTime = totalTime;
-    const oneByOne = this.resolveValue(params.oneByOne, void 0, !1);
+    const oneByOne = this.resolveValue(params.oneByOne, child, !1);
     if (isTimeline) {
       const timeSlices = parsedParams.timeSlices;
       isArray$1(timeSlices) || (parsedParams.timeSlices = [timeSlices]);
       let sliceTime = 0;
       parsedParams.timeSlices.forEach(slice => {
-        slice.delay = this.resolveValue(slice.delay, void 0, 0), slice.delayAfter = this.resolveValue(slice.delayAfter, void 0, 0), slice.duration = this.resolveValue(slice.duration, void 0, 300), sliceTime += slice.delay + slice.duration + slice.delayAfter;
+        slice.delay = this.resolveValue(slice.delay, child, 0), slice.delayAfter = this.resolveValue(slice.delayAfter, child, 0), slice.duration = this.resolveValue(slice.duration, child, 300), sliceTime += slice.delay + slice.duration + slice.delayAfter;
       });
       let oneByOneDelay = 0,
         oneByOneTime = 0;
-      if (oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, totalTime) {
-        const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2),
-          scale = totalTime ? totalTime / _totalTime : 1;
-        parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
-          let effects = slice.effects;
-          return Array.isArray(effects) || (effects = [effects]), Object.assign(Object.assign({}, slice), {
-            delay: slice.delay * scale,
-            delayAfter: slice.delayAfter * scale,
-            duration: slice.duration * scale,
-            effects: effects.map(effect => {
-              var _a, _b;
-              const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = effect.type) && void 0 !== _b ? _b : "fromTo"],
-                customType = custom && isFunction$1(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
-              return Object.assign(Object.assign({}, effect), {
-                custom: custom,
-                customType: customType
-              });
-            })
-          });
-        }), parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
+      oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay;
+      let scale = 1;
+      if (totalTime) {
+        const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
+        scale = totalTime ? totalTime / _totalTime : 1;
       }
+      parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+        let effects = slice.effects;
+        return Array.isArray(effects) || (effects = [effects]), Object.assign(Object.assign({}, slice), {
+          delay: slice.delay * scale,
+          delayAfter: slice.delayAfter * scale,
+          duration: slice.duration * scale,
+          effects: effects.map(effect => {
+            var _a, _b;
+            const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = effect.type) && void 0 !== _b ? _b : "fromTo"],
+              customType = custom && isFunction$1(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
+            return Object.assign(Object.assign({}, effect), {
+              custom: custom,
+              customType: customType
+            });
+          })
+        });
+      }), parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
     } else {
-      const delay = this.resolveValue(params.delay, void 0, 0),
-        delayAfter = this.resolveValue(params.delayAfter, void 0, 0),
-        duration = this.resolveValue(params.duration, void 0, 300);
+      const delay = this.resolveValue(params.delay, child, 0),
+        delayAfter = this.resolveValue(params.delayAfter, child, 0),
+        duration = this.resolveValue(params.duration, child, 300);
       let oneByOneDelay = 0,
         oneByOneTime = 0;
       oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = duration + oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, parsedParams.custom = null !== (_a = params.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = params.type) && void 0 !== _b ? _b : "fromTo"];
@@ -30793,20 +30849,21 @@ class AnimateExecutor {
     const isTimeline = ("timeSlices" in params);
     let filteredChildren;
     isTimeline && params.partitioner && (filteredChildren = (null != filteredChildren ? filteredChildren : this._target.getChildren()).filter(child => {
-      var _a;
-      return params.partitioner(null === (_a = child.context) || void 0 === _a ? void 0 : _a.data, child, {});
-    })), isTimeline && params.sort && (filteredChildren = null != filteredChildren ? filteredChildren : this._target.getChildren(), filteredChildren.sort((a, b) => {
       var _a, _b;
-      return params.sort(null === (_a = a.context) || void 0 === _a ? void 0 : _a.data, null === (_b = b.context) || void 0 === _b ? void 0 : _b.data, a, b, {});
+      return params.partitioner(null === (_b = null === (_a = child.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], child, {});
+    })), isTimeline && params.sort && (filteredChildren = null != filteredChildren ? filteredChildren : this._target.getChildren(), filteredChildren.sort((a, b) => {
+      var _a, _b, _c, _d;
+      return params.sort(null === (_b = null === (_a = a.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], null === (_d = null === (_c = b.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], a, b, {});
     }));
-    const parsedParams = this.parseParams(params, isTimeline),
-      cb = isTimeline ? (child, index, count) => {
-        const animate = this.executeTimelineItem(parsedParams, child, index, count);
-        animate && this._trackAnimation(animate);
-      } : (child, index, count) => {
-        const animate = this.executeTypeConfigItem(parsedParams, child, index, count);
-        animate && this._trackAnimation(animate);
-      };
+    const cb = isTimeline ? (child, index, count) => {
+      const parsedParams = this.parseParams(params, isTimeline, child),
+        animate = this.executeTimelineItem(parsedParams, child, index, count);
+      animate && this._trackAnimation(animate);
+    } : (child, index, count) => {
+      const parsedParams = this.parseParams(params, isTimeline, child),
+        animate = this.executeTypeConfigItem(parsedParams, child, index, count);
+      animate && this._trackAnimation(animate);
+    };
     filteredChildren ? filteredChildren.forEach((child, index) => cb(child, index, filteredChildren.length)) : this._target.count <= 1 ? cb(this._target, 0, 1) : this._target.forEachChildren((child, index) => cb(child, index, this._target.count - 1));
   }
   executeTypeConfigItem(params, graphic, index, count) {
@@ -30834,22 +30891,24 @@ class AnimateExecutor {
     const delayValue = isFunction$1(delay) ? delay(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : delay,
       datum = null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0],
       indexKey = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.indexKey;
-    datum && indexKey && (index = null !== (_f = datum[indexKey]) && void 0 !== _f ? _f : index), animate.startAt(startTime + delayValue);
-    const wait = index * oneByOneDelay;
+    datum && indexKey && (index = null !== (_f = datum[indexKey]) && void 0 !== _f ? _f : index), animate.startAt(startTime);
+    const wait = index * oneByOneDelay + delayValue;
     wait > 0 && animate.wait(wait);
     let parsedFromProps = null,
       props = params.to,
       from = params.from;
-    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic), oneByOneDelay && animate.wait(oneByOneDelay * (count - index - 1));
+    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+    let totalDelay = 0;
+    oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
     const delayAfterValue = isFunction$1(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
-    return delayAfterValue > 0 && animate.wait(delayAfterValue), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
+    return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
   }
-  _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic) {
+  _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
     var _a, _b, _c, _d;
     if (custom && customType) {
       const customParams = this.resolveValue(customParameters, graphic, {}),
         objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
-      customParams.options = objOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
+      customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
     } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
   }
   executeTimelineItem(params, graphic, index, count) {
@@ -30884,7 +30943,7 @@ class AnimateExecutor {
       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;
+      var _a;
       const {
         type = "fromTo",
         channel: channel,
@@ -30897,8 +30956,8 @@ class AnimateExecutor {
         from = effect.from;
       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);
+        customType = effect.customType;
+      this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, null, options, type, graphic);
     }), delayAfterValue > 0 && animate.wait(delayAfterValue);
   }
   createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
@@ -30921,9 +30980,9 @@ class AnimateExecutor {
       const value = null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs) || void 0 === _b ? void 0 : _b[key];
       void 0 !== value && (props[key] = value);
     }) : Object.keys(channel).forEach(key => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       const config = channel[key];
-      void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data, graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_b = graphic.context) || void 0 === _b ? void 0 : _b.data, graphic, {}) : from[key] = config.from);
+      void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
     }), {
       from: from,
       props: props
@@ -30933,8 +30992,8 @@ class AnimateExecutor {
     };
   }
   resolveValue(value, graphic, defaultValue) {
-    var _a;
-    return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data, graphic, {}) : value;
+    var _a, _b;
+    return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : value;
   }
   executeItem(params, graphic) {
     let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -31157,6 +31216,10 @@ class AnimateExtension {
   getFinalAttribute() {
     return this.finalAttribute;
   }
+  getGraphicAttribute(key) {
+    let prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+    return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
+  }
 }
 
 function registerAnimate() {
@@ -31603,21 +31666,18 @@ class CommonIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a;
+    var _a, _b, _c;
     super.onBind();
     const attrs = this.target.getFinalAttribute(),
       fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {},
       to = {},
-      from = {};
+      from = null !== (_b = this.from) && void 0 !== _b ? _b : {};
     this.keys.forEach(key => {
-      var _a, _b;
-      to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_b = fromAttrs[key]) && void 0 !== _b ? _b : 0;
+      var _a, _b, _c;
+      to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_c = null !== (_b = from[key]) && void 0 !== _b ? _b : fromAttrs[key]) && void 0 !== _c ? _c : 0;
     });
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, this.target.setAttributes(from);
-  }
-  onEnd(cb) {
-    super.onEnd(cb);
+    finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
   }
   onUpdate(end, ratio, out) {
     const attribute = this.target.attribute;
@@ -31653,7 +31713,9 @@ class CommonOut extends ACustomAnimate {
 
 class GroupFadeIn extends CommonIn {
   constructor(from, to, duration, easing, params) {
-    super(from, to, duration, easing, params), this.keys = ["baseOpacity"];
+    super(from, to, duration, easing, params), this.keys = ["baseOpacity"], this.from = {
+      baseOpacity: 0
+    };
   }
 }
 class GroupFadeOut extends CommonOut {
@@ -31699,7 +31761,9 @@ class RotateBySphereAnimate extends ACustomAnimate {
 
 class ClipIn extends CommonIn {
   constructor(from, to, duration, easing, params) {
-    super(from, to, duration, easing, params), this.keys = ["clipRange"];
+    super(from, to, duration, easing, params), this.keys = ["clipRange"], this.from = {
+      clipRange: 0
+    };
   }
 }
 class ClipOut extends CommonOut {
@@ -31710,7 +31774,9 @@ class ClipOut extends CommonOut {
 
 class FadeIn extends CommonIn {
   constructor(from, to, duration, easing, params) {
-    super(from, to, duration, easing, params), this.keys = ["opacity"];
+    super(from, to, duration, easing, params), this.keys = ["opacity"], this.from = {
+      opacity: 0
+    };
   }
 }
 class FadeOut extends CommonOut {
@@ -32216,6 +32282,7 @@ class GworPointsBase extends ACustomAnimate {
 }
 class GrowPointsIn extends GworPointsBase {
   onBind() {
+    var _a;
     if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
@@ -32223,7 +32290,7 @@ class GrowPointsIn extends GworPointsBase {
       } = growPointsIn(this.target, this.params.options, this.params);
       this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
       const finalAttribute = this.target.getFinalAttribute();
-      finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+      finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
     } else this.valid = !1;
   }
 }
@@ -32248,10 +32315,9 @@ class GrowPointsOut extends GworPointsBase {
   }
 }
 const changePointsX = (graphic, options, animationParameters) => graphic.getFinalAttribute().points.map(point => {
-    var _a;
     if (options && "negative" === options.orient) {
-      let groupRight = animationParameters.width;
-      return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), Object.assign(Object.assign({}, point), {
+      let groupRight = graphic.stage.viewWidth;
+      return graphic.parent.parent.parent && (groupRight = graphic.parent.parent.parent.AABBBounds.width()), Object.assign(Object.assign({}, point), {
         x: groupRight,
         y: point.y,
         x1: groupRight,
@@ -32271,7 +32337,7 @@ const changePointsX = (graphic, options, animationParameters) => graphic.getFina
     const attrs = graphic.getFinalAttribute();
     return {
       from: {
-        points: changePointsX(graphic, options, animationParameters)
+        points: changePointsX(graphic, options)
       },
       to: {
         points: attrs.points
@@ -32280,6 +32346,7 @@ const changePointsX = (graphic, options, animationParameters) => graphic.getFina
   };
 class GrowPointsXIn extends GworPointsBase {
   onBind() {
+    var _a;
     if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
@@ -32287,7 +32354,7 @@ class GrowPointsXIn extends GworPointsBase {
       } = growPointsXIn(this.target, this.params.options, this.params);
       this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
       const finalAttribute = this.target.getFinalAttribute();
-      finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+      finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
     } else this.valid = !1;
   }
 }
@@ -32298,24 +32365,23 @@ class GrowPointsXOut extends GworPointsBase {
         {
           from: from,
           to: to
-        } = (graphic = this.target, options = this.params.options, animationParameters = this.params, {
+        } = (graphic = this.target, options = this.params.options, this.params, {
           from: {
             points: graphic.getFinalAttribute().points
           },
           to: {
-            points: changePointsX(graphic, options, animationParameters)
+            points: changePointsX(graphic, options)
           }
         });
       this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from || attrs, this.to = to;
     } else this.valid = !1;
-    var graphic, options, animationParameters;
+    var graphic, options;
   }
 }
 const changePointsY = (graphic, options, animationParameters) => graphic.getFinalAttribute().points.map(point => {
-    var _a;
     if (options && "negative" === options.orient) {
-      let groupBottom = animationParameters.height;
-      return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), Object.assign(Object.assign({}, point), {
+      let groupBottom = graphic.stage.viewHeight;
+      return graphic.parent.parent.parent && (groupBottom = graphic.parent.parent.parent.AABBBounds.height()), Object.assign(Object.assign({}, point), {
         x: point.x,
         y: groupBottom,
         x1: point.x1,
@@ -32335,7 +32401,7 @@ const changePointsY = (graphic, options, animationParameters) => graphic.getFina
     const attrs = graphic.getFinalAttribute();
     return {
       from: {
-        points: changePointsY(graphic, options, animationParameters)
+        points: changePointsY(graphic, options)
       },
       to: {
         points: attrs.points
@@ -32344,6 +32410,7 @@ const changePointsY = (graphic, options, animationParameters) => graphic.getFina
   };
 class GrowPointsYIn extends GworPointsBase {
   onBind() {
+    var _a;
     if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
@@ -32351,7 +32418,7 @@ class GrowPointsYIn extends GworPointsBase {
       } = growPointsYIn(this.target, this.params.options, this.params);
       this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
       const finalAttribute = this.target.getFinalAttribute();
-      finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+      finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
     } else this.valid = !1;
   }
 }
@@ -32361,17 +32428,17 @@ class GrowPointsYOut extends GworPointsBase {
       const {
         from: from,
         to: to
-      } = (graphic = this.target, options = this.params.options, animationParameters = this.params, {
+      } = (graphic = this.target, options = this.params.options, this.params, {
         from: {
           points: graphic.getFinalAttribute().points
         },
         to: {
-          points: changePointsY(graphic, options, animationParameters)
+          points: changePointsY(graphic, options)
         }
       });
       this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = null != from ? from : this.target.attribute, this.to = to;
     } else this.valid = !1;
-    var graphic, options, animationParameters;
+    var graphic, options;
   }
 }
 
@@ -33340,7 +33407,7 @@ class ScaleIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     let from, to;
     super.onBind();
     const attrs = this.target.getFinalAttribute(),
@@ -33370,7 +33437,7 @@ class ScaleIn extends ACustomAnimate {
         }, this._updateFunction = this.updateXY;
     }
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.from = from, this.to = to, this.target.setAttributes(from);
+    finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.from = from, this.to = to, !1 !== (null === (_l = this.params.controlOptions) || void 0 === _l ? void 0 : _l.immediatelyApply) && this.target.setAttributes(from);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -33818,8 +33885,8 @@ const moveIn = (graphic, options, animationParameters) => {
   } = null != options ? options : {};
   let changedX = 0,
     changedY = 0;
-  "negative" === orient && (animationParameters.group ? (changedX = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), changedY = null !== (_b = animationParameters.groupHeight) && void 0 !== _b ? _b : animationParameters.group.getBounds().height(), animationParameters.groupWidth = changedX, animationParameters.groupHeight = changedY) : (changedX = animationParameters.width, changedY = animationParameters.height)), changedX += offset, changedY += offset;
-  const point = isFunction$1(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt,
+  "negative" === orient && (changedX = graphic.stage.viewWidth, changedY = graphic.stage.viewHeight), changedX += offset, changedY += offset;
+  const point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, animationParameters) : pointOpt,
     fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
     fromY = point && isValidNumber$1(point.y) ? point.y : changedY,
     finalAttrs = graphic.getFinalAttribute(),
@@ -33865,12 +33932,11 @@ const moveOut = (graphic, options, animationParameters) => {
       direction: direction,
       point: pointOpt
     } = null != options ? options : {},
-    groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null,
-    groupWidth = null !== (_a = null == groupBounds ? void 0 : groupBounds.width()) && void 0 !== _a ? _a : animationParameters.width,
-    groupHeight = null !== (_b = null == groupBounds ? void 0 : groupBounds.height()) && void 0 !== _b ? _b : animationParameters.height,
+    groupWidth = graphic.stage.viewWidth,
+    groupHeight = graphic.stage.viewHeight,
     changedX = ("negative" === orient ? groupWidth : 0) + offset,
     changedY = ("negative" === orient ? groupHeight : 0) + offset,
-    point = isFunction$1(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt,
+    point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, animationParameters) : pointOpt,
     fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
     fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
   switch (direction) {
@@ -33918,6 +33984,7 @@ class MoveBase extends ACustomAnimate {
 }
 class MoveIn extends MoveBase {
   onBind() {
+    var _a;
     super.onBind();
     const {
       from: from,
@@ -33925,7 +33992,7 @@ class MoveIn extends MoveBase {
     } = moveIn(this.target, this.params.options, this.params);
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+    finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
   }
 }
 class MoveOut extends MoveBase {
@@ -33978,6 +34045,7 @@ class RotateBase extends ACustomAnimate {
 }
 class RotateIn extends RotateBase {
   onBind() {
+    var _a;
     super.onBind();
     const {
       from: from,
@@ -33985,7 +34053,7 @@ class RotateIn extends RotateBase {
     } = rotateIn(this.target, this.params.options);
     this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+    finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
   }
 }
 class RotateOut extends RotateBase {
@@ -34026,11 +34094,12 @@ class FromTo extends ACustomAnimate {
     super(from, to, duration, easing, params), this.from = null != from ? from : {};
   }
   onBind() {
+    var _a, _b;
     super.onBind();
     const finalAttribute = this.target.getFinalAttribute();
     Object.keys(this.from).forEach(key => {
       null == this.props[key] && (this.props[key] = finalAttribute[key]);
-    });
+    }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_b = this.params.controlOptions) || void 0 === _b ? void 0 : _b.immediatelyApply) && this.target.setAttributes(this.from);
   }
   onFirstRun() {
     var _a;
@@ -34241,7 +34310,7 @@ const registerCustomAnimate = () => {
   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), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight);
 };
 
-const version = "1.0.0-alpha.3";
+const version = "1.0.0-alpha.4";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);