@visactor/vrender-components 1.1.0-alpha.1 → 1.1.0-alpha.11

package/dist/index.es.js

@@ -5240,11 +5240,23 @@ class StateTransitionOrchestrator {
     if (!hasAnimation) return plan;
     const noWorkAnimateAttr = Object.assign(Object.assign({}, null !== (_a = options.noWorkAnimateAttr) && void 0 !== _a ? _a : {}), normalizeNoAnimateAttrConfig(null === (_b = options.animateConfig) || void 0 === _b ? void 0 : _b.noAnimateAttrs)),
       isClear = !0 === options.isClear,
-      getDefaultAttribute = options.getDefaultAttribute;
+      getDefaultAttribute = options.getDefaultAttribute,
+      shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute,
+      assignTransitionAttr = (key, value) => {
+        if (noWorkAnimateAttr[key]) return plan.jumpAttrs[key] = value, void (plan.noAnimateAttrs[key] = value);
+        if (isClear && void 0 === value) {
+          if (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) return;
+          plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+        } else plan.animateAttrs[key] = value;
+      };
     for (const key in targetAttrs) {
       if (!Object.prototype.hasOwnProperty.call(targetAttrs, key)) continue;
-      const value = targetAttrs[key];
-      noWorkAnimateAttr[key] ? (plan.jumpAttrs[key] = value, plan.noAnimateAttrs[key] = value) : plan.animateAttrs[key] = isClear && void 0 === value && getDefaultAttribute ? getDefaultAttribute(key) : value;
+      assignTransitionAttr(key, targetAttrs[key]);
+    }
+    const extraAnimateAttrs = options.extraAnimateAttrs;
+    if (extraAnimateAttrs) for (const key in extraAnimateAttrs) {
+      const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetAttrs, key);
+      !Object.prototype.hasOwnProperty.call(extraAnimateAttrs, key) || hasTargetAttr && void 0 !== targetAttrs[key] || assignTransitionAttr(key, extraAnimateAttrs[key]);
     }
     return plan;
   }
@@ -5271,12 +5283,14 @@ class StateTransitionOrchestrator {
     }), plan;
   }
   applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const plan = this.analyzeTransition({}, targetAttrs, stateNames, hasAnimation, {
       noWorkAnimateAttr: null === (_a = graphic.getNoWorkAnimateAttr) || void 0 === _a ? void 0 : _a.call(graphic),
       isClear: !0,
       getDefaultAttribute: null === (_b = graphic.getDefaultAttribute) || void 0 === _b ? void 0 : _b.bind(graphic),
-      animateConfig: options.animateConfig
+      shouldSkipDefaultAttribute: null !== (_c = options.shouldSkipDefaultAttribute) && void 0 !== _c ? _c : null === (_d = graphic.shouldSkipStateTransitionDefaultAttribute) || void 0 === _d ? void 0 : _d.bind(graphic),
+      animateConfig: options.animateConfig,
+      extraAnimateAttrs: options.extraAnimateAttrs
     });
     return this.applyTransition(graphic, plan, hasAnimation, options);
   }
@@ -5544,11 +5558,13 @@ class Graphic extends Node {
         stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
       };
     }
-    const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions;
+    const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions,
+      sharedStateProxyModeKey = this.stateProxy ? "shared-missing-only" : "none",
+      sharedStateProxyEligibility = this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0;
     if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
       compiledDefinitions: sharedCompiledDefinitions,
-      stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
-      stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+      stateProxyModeKey: sharedStateProxyModeKey,
+      stateProxyEligibility: sharedStateProxyEligibility
     };
     const localStates = this.states,
       missingLocalStateDefinitions = {},
@@ -5557,8 +5573,8 @@ class Graphic extends Node {
       sharedCompiledDefinitions.has(stateName) || (missingLocalStateDefinitions[stateName] = localStates[stateName], missingStateNames.push(stateName));
     }), !missingStateNames.length) return this.localFallbackCompiledDefinitions = void 0, {
       compiledDefinitions: sharedCompiledDefinitions,
-      stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
-      stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+      stateProxyModeKey: sharedStateProxyModeKey,
+      stateProxyEligibility: sharedStateProxyEligibility
     };
     const localStatesVersion = this.getLocalStatesVersion(),
       stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join("|")}` : "none",
@@ -5566,7 +5582,7 @@ class Graphic extends Node {
     return this.localFallbackCompiledDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.localFallbackCompiledDefinitions = new StateDefinitionCompiler().compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions)), this.compiledStateDefinitionsCacheKey = cacheKey), {
       compiledDefinitions: this.localFallbackCompiledDefinitions,
       stateProxyModeKey: stateProxyModeKey,
-      stateProxyEligibility: this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0
+      stateProxyEligibility: sharedStateProxyEligibility
     };
   }
   recomputeCurrentStatePatch() {
@@ -5590,6 +5606,23 @@ class Graphic extends Node {
       "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
     }), snapshot) : snapshot;
   }
+  buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+    const extraAttrs = {};
+    if (!previousResolvedStatePatch) return extraAttrs;
+    const snapshot = this.buildStaticAttributeSnapshot(),
+      staticTargetAttrs = snapshot;
+    return Object.keys(previousResolvedStatePatch).forEach(key => {
+      const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
+      if (hasTargetAttr && void 0 !== targetStateAttrs[key]) return;
+      const assignFallbackAttr = value => {
+        void 0 === value && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs) || (extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value));
+      };
+      if (hasTargetAttr) assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));else if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
+        const snapshotValue = snapshot[key];
+        assignFallbackAttr(void 0 === snapshotValue ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
+      } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+    }), extraAttrs;
+  }
   syncObjectToSnapshot(target, snapshot) {
     const delta = new Map();
     return new Set([...Object.keys(target), ...Object.keys(snapshot)]).forEach(key => {
@@ -6011,21 +6044,31 @@ class Graphic extends Node {
     var _a, _b, _c;
     return null !== (_c = null !== (_a = null != animateConfig ? animateConfig : this.stateAnimateConfig) && void 0 !== _a ? _a : null === (_b = this.context) || void 0 === _b ? void 0 : _b.stateAnimateConfig) && void 0 !== _c ? _c : DefaultStateAnimateConfig;
   }
-  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig) {
+  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
     const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0,
       transitionOptions = resolvedAnimateConfig ? {
-        animateConfig: resolvedAnimateConfig
+        animateConfig: resolvedAnimateConfig,
+        extraAnimateAttrs: extraAnimateAttrs,
+        shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
       } : void 0;
     if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
     const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
       noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
-      animateConfig: resolvedAnimateConfig
+      animateConfig: resolvedAnimateConfig,
+      extraAnimateAttrs: extraAnimateAttrs,
+      shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
     });
     this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
   }
   updateNormalAttrs(stateAttrs) {
     this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
   }
+  getStateTransitionDefaultAttribute(key, targetAttrs) {
+    return this.getDefaultAttribute(key);
+  }
+  shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
+    return !1;
+  }
   stopStateAnimates(type = "end") {
     const stopAnimationState = this.stopAnimationState;
     if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
@@ -6042,13 +6085,14 @@ class Graphic extends Node {
   clearStates(hasAnimation) {
     var _a, _b, _c;
     const previousStates = this.currentStates ? this.currentStates.slice() : [],
+      previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0,
       transition = this.createStateModel().clearStates();
     if (!transition.changed && 0 === previousStates.length) return this.currentStates = [], this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, void this.clearSharedStateActiveRegistrations();
     const resolvedStateAttrs = cloneAttributeValue(null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : {});
     transition.changed && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0) || (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), null === (_b = getStageStatePerfMonitor(this.stage)) || void 0 === _b || _b.incrementCounter("stateCommits"), null === (_c = getStageStatePerfMonitor(this.stage)) || void 0 === _c || _c.recordEvent("state-commit", {
       graphicId: this._uid,
       targetStates: []
-    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0)) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
+    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }), this._emitCustomEvent("afterStateUpdate", {
       type: AttributeUpdateType.STATE
@@ -6070,6 +6114,7 @@ class Graphic extends Node {
     var _a, _b, _c, _d, _e;
     if (!states.length) return void this.clearStates(hasAnimation);
     const previousStates = this.currentStates ? this.currentStates.slice() : [],
+      previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0,
       stateResolveBaseAttrs = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
       stateModel = this.createStateModel();
     null === (_b = this.stateEngine) || void 0 === _b || _b.setResolveContext(this, stateResolveBaseAttrs);
@@ -6080,7 +6125,7 @@ class Graphic extends Node {
     this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) && (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), null === (_d = getStageStatePerfMonitor(this.stage)) || void 0 === _d || _d.incrementCounter("stateCommits"), null === (_e = getStageStatePerfMonitor(this.stage)) || void 0 === _e || _e.recordEvent("state-commit", {
       graphicId: this._uid,
       targetStates: [...transition.states]
-    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation)) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
+    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }), this._emitCustomEvent("afterStateUpdate", {
       type: AttributeUpdateType.STATE
@@ -7499,6 +7544,52 @@ class Rect extends Graphic {
   needUpdateTag(key) {
     return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
   }
+  shouldSkipStateTransitionDefaultAttribute(key, targetAttrs) {
+    var _a;
+    const attrs = null !== (_a = null != targetAttrs ? targetAttrs : this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
+      hasValue = attrKey => null != attrs[attrKey],
+      isNilValue = attrKey => null == attrs[attrKey];
+    switch (key) {
+      case "width":
+        return isNilValue("width") && hasValue("x") && hasValue("x1");
+      case "height":
+        return isNilValue("height") && hasValue("y") && hasValue("y1");
+      case "x1":
+        return isNilValue("x1") && hasValue("x") && hasValue("width");
+      case "y1":
+        return isNilValue("y1") && hasValue("y") && hasValue("height");
+      default:
+        return !1;
+    }
+  }
+  getStateTransitionDefaultAttribute(key, targetAttrs) {
+    var _a;
+    const attrs = null !== (_a = null != targetAttrs ? targetAttrs : this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
+      getNumber = attrKey => {
+        const value = attrs[attrKey];
+        return "number" == typeof value && Number.isFinite(value) ? value : void 0;
+      },
+      x = getNumber("x"),
+      y = getNumber("y"),
+      x1 = getNumber("x1"),
+      y1 = getNumber("y1"),
+      width = getNumber("width"),
+      height = getNumber("height");
+    switch (key) {
+      case "width":
+        if (null == width && null != x && null != x1) return x1 - x;
+        break;
+      case "height":
+        if (null == height && null != y && null != y1) return y1 - y;
+        break;
+      case "x1":
+        if (null == x1 && null != x && null != width) return x + width;
+        break;
+      case "y1":
+        if (null == y1 && null != y && null != height) return y + height;
+    }
+    return super.getStateTransitionDefaultAttribute(key, targetAttrs);
+  }
   toCustomPath() {
     let path = super.toCustomPath();
     if (path) return path;
@@ -18239,6 +18330,26 @@ class AnimateComponent extends AbstractComponent {
     }
 }
 
+function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
+    var _a, _b, _c, _d;
+    if (!graphic || !targetAttrs) {
+        return;
+    }
+    const committedTargetAttrs = cloneDeep(targetAttrs);
+    const transientStartAttrs = cloneDeep(startAttrs !== null && startAttrs !== void 0 ? startAttrs : graphic.attribute);
+    graphic.setAttributes(committedTargetAttrs);
+    const baseAttributes = graphic.baseAttributes;
+    if (baseAttributes && typeof baseAttributes === 'object') {
+        Object.keys(committedTargetAttrs).forEach(key => {
+            baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);
+        });
+    }
+    (_b = (_a = graphic).setFinalAttributes) === null || _b === void 0 ? void 0 : _b.call(_a, committedTargetAttrs);
+    (_d = (_c = graphic).setAttributesAndPreventAnimate) === null || _d === void 0 ? void 0 : _d.call(_c, transientStartAttrs, false, {
+        type: AttributeUpdateType.ANIMATE_BIND
+    });
+}
+
 const DefaultAxisAnimation = {
     type: 'default',
     duration: 300,
@@ -18640,11 +18751,10 @@ class AxisBase extends AnimateComponent {
                 var _a;
                 if (el.type !== 'group' && el.id) {
                     const oldEl = prevInnerView[el.id];
-                    el.setFinalAttributes(el.attribute);
                     if (oldEl) {
                         oldEl.release();
-                        const oldAttrs = oldEl.attribute;
-                        const finalAttrs = el.getFinalAttribute();
+                        const oldAttrs = cloneDeep(oldEl.attribute);
+                        const finalAttrs = cloneDeep(el.attribute);
                         const diffAttrs = diff(oldAttrs, finalAttrs);
                         let hasDiff = Object.keys(diffAttrs).length > 0;
                         if ('opacity' in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity) {
@@ -18655,10 +18765,9 @@ class AxisBase extends AnimateComponent {
                             this._newElementAttrMap[el.id] = {
                                 state: 'update',
                                 node: el,
-                                attrs: el.attribute
+                                attrs: finalAttrs
                             };
-                            const oldAttrs = oldEl.attribute;
-                            el.setAttributes(oldAttrs);
+                            commitUpdateAnimationTarget(el, finalAttrs, oldAttrs);
                             el.applyAnimationState(['update'], [
                                 {
                                     name: 'update',
@@ -19385,6 +19494,16 @@ function commonInterpolateUpdate(key, from, to, ratio, step, target) {
   return !1;
 }
 
+function applyAnimationTransientAttributes(target, attributes, type = AttributeUpdateType.ANIMATE_UPDATE) {
+  var _a;
+  if (!attributes) return;
+  const context = {
+      type: type
+    },
+    transientTarget = target;
+  "function" != typeof transientTarget.applyTransientAttributes ? "function" != typeof transientTarget.setAttributesAndPreventAnimate ? (transientTarget.attribute || (transientTarget.attribute = {}), Object.assign(transientTarget.attribute, attributes), null === (_a = transientTarget.onAttributeUpdate) || void 0 === _a || _a.call(transientTarget, context)) : transientTarget.setAttributesAndPreventAnimate(attributes, !1, context) : transientTarget.applyTransientAttributes(attributes, !1, context);
+}
+
 function noop() {}
 class Step {
   constructor(type, props, duration, easing) {
@@ -19510,7 +19629,7 @@ class WaitStep extends Step {
   onStart() {
     super.onStart();
     const fromProps = this.getFromProps();
-    this.target.setAttributes(fromProps);
+    applyAnimationTransientAttributes(this.target, fromProps, AttributeUpdateType.ANIMATE_START);
   }
   update(end, ratio, out) {
     this.onStart();
@@ -19686,7 +19805,7 @@ class Animate {
     this.target = target;
     const trackerTarget = this.target;
     return "function" == typeof trackerTarget.trackAnimate ? trackerTarget.trackAnimate(this) : (this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this)), this.onRemove(() => {
-      this.stop(), "function" == typeof trackerTarget.restoreStaticAttribute && trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
+      this.stop(), this.__skipRestoreStaticAttributeOnRemove || "function" != typeof trackerTarget.restoreStaticAttribute || trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
     }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
   to(props, duration = 300, easing = "linear") {
@@ -19822,7 +19941,7 @@ class Animate {
     if (nextTime >= this._startTime + this._totalDuration) {
       null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), this.status = AnimateStatus.END;
       const trackerTarget = this.target;
-      return void ("function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute());
+      return "function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
     }
     this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
     let cycleTime = nextTime - this._startTime,
@@ -19833,7 +19952,7 @@ class Animate {
       const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
       newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
     }
-    newLoop && !bounceTime && this.target.setAttributes(this._startProps);
+    newLoop && !bounceTime && applyAnimationTransientAttributes(this.target, this._startProps, AttributeUpdateType.ANIMATE_START);
     let targetStep = null;
     if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
       let currentStep = this._firstStep;
@@ -20068,6 +20187,9 @@ class AnimationTransitionRegistry {
     })), this.registerTransition("state", "*", () => ({
       allowTransition: !0,
       stopOriginalTransition: !1
+    })), this.registerTransition("state", "state", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
     })), this.registerTransition("state", "disappear", () => ({
       allowTransition: !0,
       stopOriginalTransition: !0
@@ -20347,7 +20469,8 @@ class AnimateExecutor {
       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);
     }), diffAttrs) for (const key in diffAttrs) {
       const value = diffAttrs[key];
-      void 0 !== value && (props.hasOwnProperty(key) || (attrOutChannel[key] = value, hasAttrs = !0));
+      if (void 0 === value) continue;
+      props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (attrOutChannel[key] = value, hasAttrs = !0);
     }
     return {
       from: from,
@@ -20372,7 +20495,7 @@ class AnimateExecutor {
   stop(type, callEnd = !0) {
     for (; this._animates.length > 0;) {
       const animate = this._animates.pop();
-      !1 === callEnd && (animate.status = AnimateStatus.END), null == animate || animate.stop(type);
+      !1 === callEnd && (animate.status = AnimateStatus.END, animate.__skipRestoreStaticAttributeOnRemove = !0), null == animate || animate.stop(type);
     }
     this._animates = [], this._activeCount = 0, this._started && (this._started = !1, callEnd && this.onEnd());
   }
@@ -20805,7 +20928,9 @@ class IncreaseCount extends ACustomAnimate {
       const parts = formattedNumber.toString().split(".");
       parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), formattedWithBasicFormat = parts.join(".");
     } else formattedWithBasicFormat = formattedNumber;
-    formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, this.target.setAttribute("text", formattedText);
+    formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, applyAnimationTransientAttributes(this.target, {
+      text: formattedText
+    });
   }
 }
 
@@ -20825,7 +20950,7 @@ class AxisEnter extends AComponentAnimate {
             const point = getTickCoord(oldValue);
             const newX = this.target.attribute.x;
             const newY = this.target.attribute.y;
-            this.target.setAttributes({ x: point.x, y: point.y });
+            commitUpdateAnimationTarget(this.target, { x: newX, y: newY }, { x: point.x, y: point.y });
             animator.animate(this.target, {
                 type: 'to',
                 to: { x: newX, y: newY },
@@ -20848,7 +20973,8 @@ class AxisUpdate extends AComponentAnimate {
         this._animator = animator;
         const duration = this.duration;
         const easing = this.easing;
-        const { config, diffAttrs } = this.params;
+        const { diffAttrs } = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs));
         animator.animate(this.target, {
             type: 'to',
             to: Object.assign({}, diffAttrs),
@@ -21895,6 +22021,7 @@ class GroupTransition extends ACustomAnimate {
         this.mode = AnimateMode.NORMAL;
     }
     onBind() {
+        this._started = false;
         const currentInnerView = this.target.getInnerView();
         const prevInnerView = this.target.getPrevInnerView();
         if (!prevInnerView) {
@@ -21913,7 +22040,7 @@ class GroupTransition extends ACustomAnimate {
                             node: el,
                             attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
                         };
-                        el.setAttributes(oldEl.attribute);
+                        commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
                     }
                 }
                 else {
@@ -21927,7 +22054,7 @@ class GroupTransition extends ACustomAnimate {
                         node: el,
                         attrs: finalOpacityAttrs
                     };
-                    el.setAttributes({
+                    commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                         opacity: 0,
                         fillOpacity: 0,
                         strokeOpacity: 0
@@ -21937,6 +22064,10 @@ class GroupTransition extends ACustomAnimate {
         });
     }
     onStart() {
+        if (this._started) {
+            return;
+        }
+        this._started = true;
         let duration = this.duration;
         let easing = this.easing;
         this._newElementAttrMap &&
@@ -24052,6 +24183,8 @@ class LabelBase extends AnimateComponent {
     _runUpdateAnimation(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
+        commitUpdateAnimationTarget(prevText, curText === null || curText === void 0 ? void 0 : curText.attribute);
+        commitUpdateAnimationTarget(prevLabelLine, curLabelLine === null || curLabelLine === void 0 ? void 0 : curLabelLine.attribute);
         prevText.applyAnimationState(['update'], [
             {
                 name: 'update',
@@ -24083,7 +24216,7 @@ class LabelBase extends AnimateComponent {
         this.runEnterAnimation(text, labelLine);
     }
     _updateLabel(prevLabel, currentLabel) {
-        const { text: prevText, labelLine: prevLabelLine } = prevLabel;
+        const { labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
         if (this._enableAnimation === false || this._animationConfig.update === false) {
             prevLabel.text.setAttributes(curText.attribute);
@@ -26979,7 +27112,10 @@ function graphicFadeIn(graphic, delay, duration, easing) {
     (_a = graphic === null || graphic === void 0 ? void 0 : graphic.animates) === null || _a === void 0 ? void 0 : _a.forEach(a => a.stop('end'));
     const fillOpacityConfig = (_c = (_b = graphic.attribute) === null || _b === void 0 ? void 0 : _b.fillOpacity) !== null && _c !== void 0 ? _c : 1;
     const strokeOpacityConfig = (_e = (_d = graphic.attribute) === null || _d === void 0 ? void 0 : _d.strokeOpacity) !== null && _e !== void 0 ? _e : 1;
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+    }, {
         fillOpacity: 0,
         strokeOpacity: 0
     });
@@ -27009,7 +27145,10 @@ function graphicFadeOut(graphic, delay, duration, easing) {
     if (!graphic) {
         return;
     }
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: 0,
+        strokeOpacity: 0
+    }, {
         fillOpacity: (_b = (_a = graphic.attribute) === null || _a === void 0 ? void 0 : _a.fillOpacity) !== null && _b !== void 0 ? _b : 1,
         strokeOpacity: (_d = (_c = graphic.attribute) === null || _c === void 0 ? void 0 : _c.strokeOpacity) !== null && _d !== void 0 ? _d : 1
     });
@@ -27038,7 +27177,7 @@ function commonLineClipIn(line, label, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing);
-    line.lines.forEach(line => line.setAttribute('clipRange', 0));
+    line.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     line.lines.forEach((l, index) => {
         const stepDuration = lineDuration / line.lines.length;
         l.animate()
@@ -27121,7 +27260,7 @@ function pointCallIn(itemLine, decorativeLine, item, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing);
-    itemLine.lines.forEach(line => line.setAttribute('clipRange', 0));
+    itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     itemLine.lines.forEach((l, index) => {
         const stepDuration = lineDuration / itemLine.lines.length;
         l.animate()
@@ -29620,9 +29759,9 @@ class DiscreteLegend extends LegendBase {
             }
             if (!this._itemContext.isScrollbar) {
                 if (animation) {
-                    this._itemsContainer
-                        .animate()
-                        .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -(newPage - 1) * pageSize };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
@@ -29640,7 +29779,9 @@ class DiscreteLegend extends LegendBase {
                 const startOffset = containerSize * start;
                 this.updateScrollMask();
                 if (animation) {
-                    this._itemsContainer.animate().to({ [channel]: -startOffset }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -startOffset };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -startOffset);
@@ -33593,6 +33734,7 @@ class Timeline extends AbstractComponent {
         setActive(symbolGroup, activeSymbolStyle);
     }
     appearAnimate(animateConfig) {
+        var _a;
         const { duration = 1000, easing = 'quadOut' } = animateConfig;
         const { activeLabelStyle, activeSymbolStyle } = this.attribute;
         const percent = duration / 1000;
@@ -33603,30 +33745,33 @@ class Timeline extends AbstractComponent {
         const symbolDelay = percent * 100;
         const symbolNormalDelay = percent * 600;
         if (this._line) {
-            this._line.setAttributes({ clipRange: 0 });
+            commitUpdateAnimationTarget(this._line, { clipRange: 1 }, { clipRange: 0 });
             this._line.animate().to({ clipRange: 1 }, lineDuration, easing);
         }
         if (this._activeLine) {
-            this._activeLine.setAttributes({ opacity: 0 });
+            const opacity = (_a = this._activeLine.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+            commitUpdateAnimationTarget(this._activeLine, { opacity }, { opacity: 0 });
             this._activeLine
                 .animate()
                 .wait(500)
-                .to({ opacity: 1 }, activeLineDuration, easing);
+                .to({ opacity }, activeLineDuration, easing);
         }
         if (this._symbolGroup) {
             const size = this._symbolGroup.count - 1;
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._symbolGroup.forEachChildren((symbol, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeSymbolStyle).forEach(k => {
                     originAttrs[k] = symbol.attribute[k];
                 });
-                symbol.setAttributes({ opacity: 0 });
+                const opacity = (_a = symbol.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(symbol, { opacity }, { opacity: 0 });
                 symbol
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 symbol
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33639,15 +33784,17 @@ class Timeline extends AbstractComponent {
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._labelGroup.forEachChildren((label, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeLabelStyle).forEach(k => {
                     originAttrs[k] = label.attribute[k];
                 });
-                label.setAttributes({ opacity: 0 });
+                const opacity = (_a = label.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(label, { opacity }, { opacity: 0 });
                 label
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 label
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33687,6 +33834,7 @@ class Timeline extends AbstractComponent {
         const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;
         if (animation) {
             const { duration = 1000, easing = 'quadOut' } = animateConfig;
+            commitUpdateAnimationTarget(this, { clipRange: nextClipRange }, { clipRange });
             this.animate().to({ clipRange: nextClipRange }, duration, easing);
         }
         else {
@@ -35533,6 +35681,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.0-alpha.1";
+const version = "1.1.0-alpha.11";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, installPoptipToApp, installScrollbarToApp, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/animation/axis-animate.js

@@ -1,5 +1,7 @@
 import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from "@visactor/vrender-animate";
 
+import { commitUpdateAnimationTarget } from "./static-truth";
+
 export class AxisEnter extends AComponentAnimate {
     onBind() {
         var _a;
@@ -11,7 +13,10 @@ export class AxisEnter extends AComponentAnimate {
         if (lastScale && getTickCoord && currData) {
             ratio = .7;
             const point = getTickCoord(lastScale.scale(currData.rawValue)), newX = this.target.attribute.x, newY = this.target.attribute.y;
-            this.target.setAttributes({
+            commitUpdateAnimationTarget(this.target, {
+                x: newX,
+                y: newY
+            }, {
                 x: point.x,
                 y: point.y
             }), animator.animate(this.target, {
@@ -37,8 +42,8 @@ export class AxisUpdate extends AComponentAnimate {
     onBind() {
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
-        const duration = this.duration, easing = this.easing, {config: config, diffAttrs: diffAttrs} = this.params;
-        animator.animate(this.target, {
+        const duration = this.duration, easing = this.easing, {diffAttrs: diffAttrs} = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs)), animator.animate(this.target, {
             type: "to",
             to: Object.assign({}, diffAttrs),
             duration: duration,