@visactor/vchart 2.1.0-alpha.1 → 2.1.0-alpha.2

package/build/index.es.js

@@ -14961,6 +14961,12 @@ function ensureStageStatePerfMonitor(stage) {
 function getStageStatePerfMonitor(stage) {
   if (stage) return stage[STAGE_PERF_MONITOR];
 }
+function getActiveStageStatePerfMonitor(stage) {
+  var _a;
+  if (!stage) return;
+  const current = getStageStatePerfMonitor(stage);
+  return current || (!0 === (null === (_a = stage.statePerfConfig) || void 0 === _a ? void 0 : _a.enabled) ? ensureStageStatePerfMonitor(stage) : void 0);
+}
 
 function isPlainObject$1(value) {
   return null != value && "object" == typeof value && !Array.isArray(value);
@@ -15056,7 +15062,7 @@ class StateEngine {
   }
   invalidateResolverCache() {
     var _a, _b;
-    this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, null === (_b = getStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage)) || void 0 === _b || _b.recordResolver("invalidations");
+    this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, null === (_b = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage)) || void 0 === _b || _b.recordResolver("invalidations");
   }
   hasState(stateName) {
     return !!this._activeStates.length && (null == stateName || this._activeStates.includes(stateName));
@@ -15103,7 +15109,7 @@ class StateEngine {
   }
   recomputePatch(effectiveStates) {
     var _a;
-    const perfMonitor = getStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage),
+    const perfMonitor = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage),
       patchStart = perfMonitor ? performance.now() : 0;
     let resolverCost = 0;
     const cacheKey = effectiveStates.join(","),
@@ -15351,32 +15357,6 @@ class StateStyleResolver {
       }
     }), resolvedAttrs;
   }
-  resolveWithCompiled(normalAttrs, compiledDefinitions, stateProxy, effectiveStates, resolvedPatch) {
-    var _a, _b;
-    const mergeMode = null !== (_a = this.options.mergeMode) && void 0 !== _a ? _a : "shallow",
-      resolvedAttrs = null !== (_b = cloneValue(resolvedPatch)) && void 0 !== _b ? _b : {};
-    return effectiveStates.forEach(stateName => {
-      const proxyPatch = null == stateProxy ? void 0 : stateProxy(stateName, effectiveStates);
-      null != proxyPatch && Object.keys(proxyPatch).forEach(key => {
-        const nextValue = proxyPatch[key],
-          hasCompiledDefinition = compiledDefinitions.has(stateName);
-        if ("deep" === mergeMode && isPlainObject(nextValue) && (isPlainObject(resolvedAttrs[key]) || !hasCompiledDefinition && isPlainObject(normalAttrs[key]))) {
-          const baseValue = isPlainObject(resolvedAttrs[key]) ? resolvedAttrs[key] : isPlainObject(normalAttrs[key]) ? normalAttrs[key] : {};
-          resolvedAttrs[key] = deepMerge(baseValue, nextValue);
-        } else resolvedAttrs[key] = cloneValue(nextValue);
-      });
-    }), resolvedAttrs;
-  }
-  computeNormalAttrsBackup(normalAttrs, targetAttrs, finalAttribute) {
-    const nextNormalAttrs = {},
-      nextTargetAttrs = Object.assign({}, targetAttrs);
-    for (const key in targetAttrs) Object.prototype.hasOwnProperty.call(targetAttrs, key) && (nextNormalAttrs[key] = cloneValue(normalAttrs && key in normalAttrs ? normalAttrs[key] : finalAttribute[key]));
-    if (normalAttrs) for (const key in normalAttrs) Object.prototype.hasOwnProperty.call(normalAttrs, key) && !(key in targetAttrs) && (nextTargetAttrs[key] = cloneValue(normalAttrs[key]));
-    return {
-      attrs: nextTargetAttrs,
-      normalAttrs: nextNormalAttrs
-    };
-  }
 }
 
 function hasOwnKeys(value) {
@@ -15511,7 +15491,7 @@ function rebuildSharedStateScope(scope) {
 }
 function ensureSharedStateScopeFresh(scope) {
   var _a;
-  if (scope) return null === (_a = getStageStatePerfMonitor(scope.ownerStage)) || void 0 === _a || _a.recordRefresh("ensureFreshCalls"), scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
+  if (scope) return null === (_a = getActiveStageStatePerfMonitor(scope.ownerStage)) || void 0 === _a || _a.recordRefresh("ensureFreshCalls"), scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
 }
 function collectSharedStateScopeChain(scope) {
   const chain = [];
@@ -15522,7 +15502,7 @@ function collectSharedStateScopeChain(scope) {
 
 function scheduleStageSharedStateRefresh(stage) {
   var _a;
-  stage && "released" !== stage.releaseStatus && (null === (_a = getStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordRefresh("renderScheduled"), stage.renderNextFrame());
+  stage && "released" !== stage.releaseStatus && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordRefresh("renderScheduled"), stage.renderNextFrame());
 }
 function enqueueGraphicSharedStateRefresh(stage, graphic) {
   var _a;
@@ -15530,7 +15510,7 @@ function enqueueGraphicSharedStateRefresh(stage, graphic) {
   const pending = null !== (_a = stage._pendingSharedStateRefreshGraphics) && void 0 !== _a ? _a : stage._pendingSharedStateRefreshGraphics = new Set();
   if (!pending.has(graphic)) {
     pending.add(graphic);
-    const perfMonitor = getStageStatePerfMonitor(stage);
+    const perfMonitor = getActiveStageStatePerfMonitor(stage);
     null == perfMonitor || perfMonitor.recordRefresh("queuedGraphics"), null == perfMonitor || perfMonitor.recordAllocation("refreshQueuePushes");
   }
 }
@@ -15545,12 +15525,13 @@ function markScopeActiveDescendantsDirty(scope, stage) {
 function flushStageSharedStateRefresh(stage) {
   const pending = stage._pendingSharedStateRefreshGraphics;
   if (!pending || !pending.size) return;
-  const perfMonitor = getStageStatePerfMonitor(stage),
+  const perfMonitor = getActiveStageStatePerfMonitor(stage),
     start = perfMonitor ? performance.now() : 0,
     graphics = Array.from(pending.values());
   pending.clear(), null == perfMonitor || perfMonitor.recordRefresh("flushedGraphics", graphics.length), graphics.forEach(graphic => {
     if ("released" === graphic.releaseStatus) return;
     if (graphic.stage !== stage) return;
+    if (!graphic.sharedStateDirty) return;
     const refresh = graphic.refreshSharedStateBeforeRender;
     "function" == typeof refresh && (refresh.call(graphic), null == perfMonitor || perfMonitor.incrementCounter("sharedRefreshCommits"));
   }), perfMonitor && (perfMonitor.recordCost("sharedRefresh", performance.now() - start), perfMonitor.recordEvent("shared-refresh-flush", {
@@ -15567,9 +15548,12 @@ const tempConstantXYKey = ["x", "y"],
   tempConstantScaleXYKey = ["scaleX", "scaleY"],
   tempConstantAngleKey = ["angle"],
   builtinTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave"]),
-  point = new Point();
+  FULL_STATE_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]),
+  point = new Point(),
+  EMPTY_STATE_NAMES = [],
+  BROAD_UPDATE_CATEGORY = UpdateCategory.PAINT | UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.TRANSFORM | UpdateCategory.LAYOUT;
 function isPlainObjectValue(value) {
-  return "object" == typeof value && null != value && !isArray$1(value);
+  return "object" == typeof value && null != value && !Array.isArray(value);
 }
 function cloneAttributeValue(value) {
   if (!isPlainObjectValue(value)) return value;
@@ -15580,12 +15564,6 @@ function cloneAttributeValue(value) {
     clone[key] = isPlainObjectValue(nextValue) ? cloneAttributeValue(nextValue) : nextValue;
   }), clone;
 }
-function cloneSimpleAttributeRecord(value) {
-  return isPlainObjectValue(value) ? Object.assign({}, value) : value;
-}
-function shouldUseSimpleAttributeFastPath(value) {
-  return !!isPlainObjectValue(value) && !Object.keys(value).some(key => isPlainObjectValue(value[key]));
-}
 function cloneAttributeSurface(value) {
   if (!isPlainObjectValue(value)) return value;
   const source = value,
@@ -15595,6 +15573,9 @@ function cloneAttributeSurface(value) {
     clone[key] = isPlainObjectValue(nextValue) ? Object.assign({}, nextValue) : nextValue;
   }), clone;
 }
+function areAttributeValuesEqual(left, right) {
+  return left === right || !!(isPlainObjectValue(left) || isPlainObjectValue(right) || Array.isArray(left) || Array.isArray(right)) && isEqual(left, right);
+}
 function deepMergeAttributeValue(base, value) {
   var _a;
   const result = null !== (_a = cloneAttributeValue(base)) && void 0 !== _a ? _a : {};
@@ -15657,18 +15638,24 @@ class Graphic extends Node {
   get globalTransMatrix() {
     return this.tryUpdateGlobalTransMatrix(!0);
   }
+  get baseAttributes() {
+    var _a;
+    return null !== (_a = this._baseAttributes) && void 0 !== _a ? _a : this.attribute;
+  }
+  set baseAttributes(value) {
+    value !== this.attribute ? this._baseAttributes = value : this._baseAttributes = void 0;
+  }
   constructor(params = {}) {
     var _a;
-    super(), this.resolverEpoch = 0, this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT;
-    const useSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath(params),
-      initialBaseAttributes = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(params) : cloneAttributeValue(params);
-    this.baseAttributes = initialBaseAttributes, this.attribute = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(initialBaseAttributes) : cloneAttributeSurface(initialBaseAttributes), this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+    super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), params.texture && isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
   }
   get normalAttrs() {
     return this.baseAttributes;
   }
-  set normalAttrs(value) {
-    this._deprecatedNormalAttrsView = null != value ? value : void 0;
+  set normalAttrs(_value) {}
+  getBaseAttributesStorage() {
+    var _a;
+    return null !== (_a = this._baseAttributes) && void 0 !== _a ? _a : this.attribute;
   }
   getGraphicService() {
     var _a, _b;
@@ -15699,10 +15686,18 @@ class Graphic extends Node {
     const nextScope = this.resolveBoundSharedStateScope();
     return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.syncSharedStateActiveRegistrations(), markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), !0);
   }
-  syncSharedStateActiveRegistrations() {
+  syncSharedStateScopeBindingOnTreeChange(markDirty = !0) {
     var _a, _b;
-    const nextScopes = (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.boundSharedStateScope ? new Set(collectSharedStateScopeChain(this.boundSharedStateScope)) : new Set();
-    (null !== (_b = this.registeredActiveScopes) && void 0 !== _b ? _b : new Set()).forEach(scope => {
+    return !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || this.boundSharedStateScope || (null === (_b = this.registeredActiveScopes) || void 0 === _b ? void 0 : _b.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingFromTree(markDirty);
+  }
+  syncSharedStateActiveRegistrations() {
+    var _a;
+    const previousScopes = this.registeredActiveScopes;
+    if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || !this.boundSharedStateScope) return (null == previousScopes ? void 0 : previousScopes.size) && (previousScopes.forEach(scope => {
+      scope.subtreeActiveDescendants.delete(this);
+    }), previousScopes.clear()), void (this.registeredActiveScopes = void 0);
+    const nextScopes = new Set(collectSharedStateScopeChain(this.boundSharedStateScope));
+    null == previousScopes || previousScopes.forEach(scope => {
       nextScopes.has(scope) || scope.subtreeActiveDescendants.delete(this);
     }), nextScopes.forEach(scope => {
       scope.subtreeActiveDescendants.add(this);
@@ -15718,15 +15713,13 @@ class Graphic extends Node {
     this.sharedStateDirty = !0, enqueueGraphicSharedStateRefresh(this.stage, this), scheduleStageSharedStateRefresh(this.stage);
   }
   onParentSharedStateTreeChanged(stage, layer) {
-    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingFromTree() : this.setStage(stage, layer);
+    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingOnTreeChange() : this.setStage(stage, layer);
   }
   refreshSharedStateBeforeRender() {
     var _a;
     (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? (this.syncSharedStateScopeBindingFromTree(!1), this.boundSharedStateScope && ensureSharedStateScopeFresh(this.boundSharedStateScope), this.recomputeCurrentStatePatch(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    }), this.sharedStateDirty = !1) : this.sharedStateDirty = !1;
+    }), this.emitStateUpdateEvent(), this.sharedStateDirty = !1) : this.sharedStateDirty = !1;
   }
   getLocalStatesVersion() {
     var _a, _b;
@@ -15784,7 +15777,7 @@ class Graphic extends Node {
     const transition = stateModel.useStates(this.currentStates),
       effectiveStates = null !== (_d = transition.effectiveStates) && void 0 !== _d ? _d : transition.states,
       resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
-    this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.syncSharedStateActiveRegistrations();
+    this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
   }
   buildStaticAttributeSnapshot() {
     var _a;
@@ -15823,16 +15816,17 @@ class Graphic extends Node {
         next: void 0
       }), delete target[key]));
       const nextValue = snapshot[key];
-      isEqual(previousValue, nextValue) || (delta.set(key, {
+      areAttributeValuesEqual(previousValue, nextValue) || (delta.set(key, {
         prev: previousValue,
         next: nextValue
       }), target[key] = cloneAttributeValue(nextValue));
     }), delta;
   }
   _syncAttribute() {
+    this.attribute === this.baseAttributes && this.resolvedStatePatch && this.detachAttributeFromBaseAttributes();
     const snapshot = this.buildStaticAttributeSnapshot(),
       delta = this.syncObjectToSnapshot(this.attribute, snapshot);
-    return this.valid = this.isValid(), delta;
+    return this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, delta;
   }
   _syncFinalAttributeFromStaticTruth() {
     const target = this.finalAttribute;
@@ -15840,47 +15834,146 @@ class Graphic extends Node {
     const snapshot = this.buildStaticAttributeSnapshot();
     this.syncObjectToSnapshot(target, snapshot);
   }
-  submitUpdateByDelta(delta, forceUpdateTag = !1) {
+  mergeAttributeDeltaCategory(category, key, prev, next) {
+    var _a;
+    let nextCategory = "stroke" === key || "shadowBlur" === key ? classifyAttributeDelta(key, prev, next) : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
+    return nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), category | nextCategory;
+  }
+  submitUpdateByCategory(category, forceUpdateTag = !1) {
     var _a;
     if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), void this.addUpdateLayoutTag();
+    if (category !== UpdateCategory.NONE) {
+      const stage = this.stage;
+      stage && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordCategory(category));
+    }
+    (category & BROAD_UPDATE_CATEGORY) !== BROAD_UPDATE_CATEGORY ? (category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag()) : this.addBroadUpdateTag();
+  }
+  submitUpdateByDelta(delta, forceUpdateTag = !1) {
     let category = UpdateCategory.NONE;
     delta.forEach((entry, key) => {
-      let nextCategory = classifyAttributeDelta(key, entry.prev, entry.next);
-      nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), category |= nextCategory;
-    }), category !== UpdateCategory.NONE && (null === (_a = getStageStatePerfMonitor(this.stage)) || void 0 === _a || _a.recordCategory(category)), category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag();
+      category = this.mergeAttributeDeltaCategory(category, key, entry.prev, entry.next);
+    }), this.submitUpdateByCategory(category, forceUpdateTag);
+  }
+  submitTouchedKeyUpdate(keys, forceUpdateTag = !1) {
+    this.submitTouchedUpdate(forceUpdateTag || this.needUpdateTags(keys));
+  }
+  submitTouchedUpdate(needsShapeAndBounds) {
+    !this.updateShapeAndBoundsTagSetted() && needsShapeAndBounds ? this.addUpdateShapeAndBoundsTag() : this.addUpdateBoundTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag();
   }
   commitBaseAttributeMutation(forceUpdateTag = !1, context) {
-    var _a, _b;
-    (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && (this.resolverEpoch += 1, null === (_b = this.stateEngine) || void 0 === _b || _b.invalidateResolverCache(), this.recomputeCurrentStatePatch());
+    var _a, _b, _c;
+    (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && (this.resolverEpoch = (null !== (_b = this.resolverEpoch) && void 0 !== _b ? _b : 0) + 1, null === (_c = this.stateEngine) || void 0 === _c || _c.invalidateResolverCache(), this.recomputeCurrentStatePatch());
     const delta = this._syncAttribute();
     this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
   }
+  canCommitBaseAttributesByTouchedKeys() {
+    var _a, _b;
+    return !((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || this.resolvedStatePatch || this.attributeMayContainTransientAttrs) && (!(null === (_b = this.animates) || void 0 === _b ? void 0 : _b.size) && !this._animationStateManager || !this.hasAnyTrackedAnimate());
+  }
+  detachAttributeFromBaseAttributes() {
+    this.attribute === this.baseAttributes && (this._baseAttributes = this.attribute, this.attribute = cloneAttributeSurface(this.attribute));
+  }
+  commitInternalBaseAttributes(params, context) {
+    params && Object.keys(params).length && (this.canCommitBaseAttributesByTouchedKeys() ? this.commitBaseAttributesByTouchedKeys(params, !1, context) : (this.detachAttributeFromBaseAttributes(), this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context)));
+  }
+  commitBaseAttributesByTouchedKeys(params, forceUpdateTag = !1, context) {
+    const source = params,
+      baseAttributes = this.getBaseAttributesStorage();
+    let hasKeys = !1,
+      needsShapeAndBounds = forceUpdateTag;
+    for (const key in source) Object.prototype.hasOwnProperty.call(source, key) && (hasKeys = !0, baseAttributes[key] = source[key], !needsShapeAndBounds && this.needUpdateTag(key) && (needsShapeAndBounds = !0));
+    hasKeys && (this.attribute = baseAttributes, this._baseAttributes = void 0, this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, this.submitTouchedUpdate(needsShapeAndBounds), this.onAttributeUpdate(context));
+  }
+  commitBaseAttributeBySingleKey(key, value, forceUpdateTag = !1, context) {
+    this.getBaseAttributesStorage()[key] = value, this.attribute = this.getBaseAttributesStorage(), this._baseAttributes = void 0, this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, this.submitTouchedUpdate(forceUpdateTag || this.needUpdateTag(key)), this.onAttributeUpdate(context);
+  }
   applyBaseAttributes(params) {
     const keys = Object.keys(params);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
-      this.baseAttributes[key] = cloneAttributeValue(params[key]);
+      this.getBaseAttributesStorage()[key] = params[key];
     }
   }
+  applyAnimationTransientAttributes(params, forceUpdateTag = !1, context) {
+    const source = params;
+    let target,
+      needsShapeAndBounds = forceUpdateTag;
+    for (const key in source) Object.prototype.hasOwnProperty.call(source, key) && (target || (this.detachAttributeFromBaseAttributes(), target = this.attribute), target[key] = source[key], !needsShapeAndBounds && this.needUpdateTag(key) && (needsShapeAndBounds = !0));
+    target && (this.attributeMayContainTransientAttrs = !0, this.valid = this.isValid(), this.submitTouchedUpdate(needsShapeAndBounds), this.onAttributeUpdate(context));
+  }
   applyTransientAttributes(params, forceUpdateTag = !1, context) {
+    this.detachAttributeFromBaseAttributes();
     const delta = new Map(),
       keys = Object.keys(params);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i],
         previousValue = this.attribute[key],
         nextValue = params[key];
-      isEqual(previousValue, nextValue) || (delta.set(key, {
+      areAttributeValuesEqual(previousValue, nextValue) || (delta.set(key, {
         prev: previousValue,
         next: nextValue
-      }), this.attribute[key] = cloneAttributeValue(nextValue));
+      }), this.attribute[key] = nextValue);
     }
-    this.valid = this.isValid(), this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
+    delta.size && (this.attributeMayContainTransientAttrs = !0), this.valid = this.isValid(), this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
   }
   _restoreAttributeFromStaticTruth(context) {
     this._syncFinalAttributeFromStaticTruth();
     const delta = this._syncAttribute();
     this.submitUpdateByDelta(delta), this.onAttributeUpdate(context);
   }
+  collectStatePatchDeltaKeys(previousPatch, nextPatch) {
+    const keys = previousPatch ? Object.keys(previousPatch) : [];
+    if (!nextPatch) return keys;
+    for (const key in nextPatch) Object.prototype.hasOwnProperty.call(nextPatch, key) && !Object.prototype.hasOwnProperty.call(null != previousPatch ? previousPatch : {}, key) && keys.push(key);
+    return keys;
+  }
+  getStaticTruthValueForStateKey(key, nextPatch) {
+    var _a;
+    const baseAttributes = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : {},
+      patch = nextPatch;
+    if (patch && Object.prototype.hasOwnProperty.call(patch, key)) {
+      const patchValue = patch[key],
+        baseValue = baseAttributes[key];
+      return "deep" === this.stateMergeMode && isPlainObjectValue(baseValue) && isPlainObjectValue(patchValue) ? {
+        hasValue: !0,
+        value: deepMergeAttributeValue(baseValue, patchValue)
+      } : {
+        hasValue: !0,
+        value: patchValue
+      };
+    }
+    return Object.prototype.hasOwnProperty.call(baseAttributes, key) ? {
+      hasValue: !0,
+      value: baseAttributes[key]
+    } : {
+      hasValue: !1,
+      value: void 0
+    };
+  }
+  syncStatePatchDeltaToTarget(target, keys, nextPatch, collectCategory = !1) {
+    let category = UpdateCategory.NONE;
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i],
+        previousValue = target[key],
+        next = this.getStaticTruthValueForStateKey(key, nextPatch);
+      if (!next.hasValue) {
+        Object.prototype.hasOwnProperty.call(target, key) && (delete target[key], collectCategory && (category = this.mergeAttributeDeltaCategory(category, key, previousValue, void 0)));
+        continue;
+      }
+      if (areAttributeValuesEqual(previousValue, next.value)) continue;
+      const nextValue = cloneAttributeValue(next.value);
+      target[key] = nextValue, collectCategory && (category = this.mergeAttributeDeltaCategory(category, key, previousValue, nextValue));
+    }
+    return category;
+  }
+  restoreAttributeFromStatePatchDelta(previousPatch, nextPatch, context) {
+    this.detachAttributeFromBaseAttributes();
+    const keys = this.collectStatePatchDeltaKeys(previousPatch, nextPatch),
+      finalAttribute = this.finalAttribute;
+    finalAttribute && this.syncStatePatchDeltaToTarget(finalAttribute, keys, nextPatch, !1);
+    const category = this.syncStatePatchDeltaToTarget(this.attribute, keys, nextPatch, !0);
+    this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, this.submitUpdateByCategory(category), this.onAttributeUpdate(context);
+  }
   setMode(mode) {
     "3d" === mode ? this.set3dMode() : this.set2dMode();
   }
@@ -15903,7 +15996,7 @@ class Graphic extends Node {
     return point;
   }
   onAnimateBind(animate) {
-    this._emitCustomEvent("animate-bind", animate);
+    this.detachAttributeFromBaseAttributes(), this._emitCustomEvent("animate-bind", animate);
   }
   visitTrackedAnimates(cb) {
     const hook = this.forEachTrackedAnimate;
@@ -15916,8 +16009,22 @@ class Graphic extends Node {
     const getTrackedAnimates = this.getTrackedAnimates;
     return "function" == typeof getTrackedAnimates ? getTrackedAnimates.call(this).size > 0 : !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size);
   }
+  mayHaveTrackedAnimates() {
+    var _a;
+    return !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size) || !!this._animationStateManager;
+  }
   tryUpdateAABBBounds() {
+    if (!(this.shadowRoot || this._updateTag & UpdateTag.UPDATE_BOUNDS)) return this._AABBBounds;
     const full = "imprecise" === this.attribute.boundsMode;
+    if (!this.shadowRoot) {
+      const graphicService = this.getGraphicService(),
+        graphicTheme = this.getGraphicTheme();
+      if (!graphicService.validCheck(this.attribute, graphicTheme, this._AABBBounds, this)) return this._AABBBounds;
+      if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
+      graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+      const bounds = this.doUpdateAABBBounds(full, graphicTheme);
+      return graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+    }
     if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
     if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
     this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
@@ -15990,14 +16097,14 @@ class Graphic extends Node {
     const _parsedPath = new CustomSymbolClass(symbolType, cache);
     return Graphic.userSymbolMap[symbolType] = _parsedPath, _parsedPath;
   }
-  doUpdateAABBBounds(full) {
+  doUpdateAABBBounds(full, graphicTheme) {
     this.updateAABBBoundsStamp++;
-    const graphicTheme = this.getGraphicTheme();
+    const resolvedGraphicTheme = null != graphicTheme ? graphicTheme : this.getGraphicTheme();
     this._AABBBounds.clear();
     const attribute = this.attribute,
-      bounds = this.updateAABBBounds(attribute, graphicTheme, this._AABBBounds, full),
+      bounds = this.updateAABBBounds(attribute, resolvedGraphicTheme, this._AABBBounds, full),
       {
-        boundsPadding = graphicTheme.boundsPadding
+        boundsPadding = resolvedGraphicTheme.boundsPadding
       } = attribute,
       paddingArray = parsePadding(boundsPadding);
     return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
@@ -16065,25 +16172,63 @@ class Graphic extends Node {
     this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
   }
   setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
-    this.visitTrackedAnimates(animate => {
-      (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
-        animate.preventAttr(key);
-      });
+    if (!params) return;
+    const keys = Object.keys(params);
+    this.captureTransientFromAttrsBeforePreventAnimate(params, keys, context), this.visitTrackedAnimates(animate => {
+      (animate.priority !== 1 / 0 || ignorePriority) && animate.preventAttrs(keys);
     }), this.applyTransientAttributes(params, forceUpdateTag, context);
   }
+  captureTransientFromAttrsBeforePreventAnimate(params, keys, context) {
+    var _a, _b;
+    const graphicContext = this.context,
+      diffAttrs = null !== (_a = null == graphicContext ? void 0 : graphicContext.diffAttrs) && void 0 !== _a ? _a : params,
+      updateType = null == context ? void 0 : context.type;
+    if (!keys.length || !diffAttrs || updateType === AttributeUpdateType.STATE || null != updateType && updateType >= AttributeUpdateType.ANIMATE_BIND && updateType <= AttributeUpdateType.ANIMATE_END) return;
+    const sameDiffAttrs = this.transientFromAttrsBeforePreventAnimateDiffAttrs === diffAttrs;
+    let fromAttrs = sameDiffAttrs && null !== (_b = this.transientFromAttrsBeforePreventAnimate) && void 0 !== _b ? _b : null;
+    sameDiffAttrs || (this.transientFromAttrsBeforePreventAnimate = null, this.transientFromAttrsBeforePreventAnimateDiffAttrs = null);
+    let captured = !1;
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (!Object.prototype.hasOwnProperty.call(diffAttrs, key)) continue;
+      const previousValue = this.attribute[key],
+        nextValue = params[key];
+      isEqual(previousValue, nextValue) || (null != fromAttrs || (fromAttrs = {}), fromAttrs[key] = cloneAttributeValue(previousValue), captured = !0);
+    }
+    captured && (this.transientFromAttrsBeforePreventAnimate = fromAttrs, this.transientFromAttrsBeforePreventAnimateDiffAttrs = diffAttrs);
+  }
+  consumeTransientFromAttrsBeforePreventAnimate(diffAttrs) {
+    const transientFromAttrs = this.transientFromAttrsBeforePreventAnimate,
+      sourceDiffAttrs = this.transientFromAttrsBeforePreventAnimateDiffAttrs;
+    if (!transientFromAttrs || !sourceDiffAttrs) return null;
+    for (const key in diffAttrs) if (Object.prototype.hasOwnProperty.call(diffAttrs, key) && (!Object.prototype.hasOwnProperty.call(sourceDiffAttrs, key) || !isEqual(sourceDiffAttrs[key], diffAttrs[key]))) return null;
+    let fromAttrs = null,
+      remaining = !1;
+    for (const key in transientFromAttrs) Object.prototype.hasOwnProperty.call(transientFromAttrs, key) && (Object.prototype.hasOwnProperty.call(diffAttrs, key) ? (null != fromAttrs || (fromAttrs = {}), fromAttrs[key] = transientFromAttrs[key]) : remaining = !0);
+    if (remaining) {
+      const nextTransientFromAttrs = {};
+      for (const key in transientFromAttrs) Object.prototype.hasOwnProperty.call(transientFromAttrs, key) && !Object.prototype.hasOwnProperty.call(diffAttrs, key) && (nextTransientFromAttrs[key] = transientFromAttrs[key]);
+      this.transientFromAttrsBeforePreventAnimate = nextTransientFromAttrs;
+    } else this.transientFromAttrsBeforePreventAnimate = null, this.transientFromAttrsBeforePreventAnimateDiffAttrs = null;
+    return fromAttrs;
+  }
   setAttributes(params, forceUpdateTag = !1, context) {
-    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
+    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), params.texture && isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
   }
   _setAttributes(params, forceUpdateTag = !1, context) {
-    this.applyBaseAttributes(params), this.commitBaseAttributeMutation(forceUpdateTag, context);
+    this.canCommitBaseAttributesByTouchedKeys() ? this.commitBaseAttributesByTouchedKeys(params, forceUpdateTag, context) : (this.detachAttributeFromBaseAttributes(), this.applyBaseAttributes(params), this.commitBaseAttributeMutation(forceUpdateTag, context));
   }
   setAttribute(key, value, forceUpdateTag, context) {
     const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
       [key]: value
     }, this.attribute, key, context);
-    params ? this._setAttributes(params, forceUpdateTag, context) : (this.applyBaseAttributes({
-      [key]: value
-    }), this.commitBaseAttributeMutation(!!forceUpdateTag, context)), "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
+    if (params) this._setAttributes(params, forceUpdateTag, context);else if (this.canCommitBaseAttributesByTouchedKeys()) this.commitBaseAttributeBySingleKey(key, value, !!forceUpdateTag, context);else {
+      const nextAttrs = {
+        [key]: value
+      };
+      this.applyBaseAttributes(nextAttrs), this.commitBaseAttributeMutation(!!forceUpdateTag, context);
+    }
+    "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
   }
   needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
     for (let i = 0; i < k.length; i++) {
@@ -16102,7 +16247,7 @@ class Graphic extends Node {
     const context = {
       type: AttributeUpdateType.INIT
     };
-    params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.baseAttributes = cloneAttributeValue(params), this.attribute || (this.attribute = {}), this.resolvedStatePatch = void 0, this._syncAttribute(), params.background && this.loadImage(params.background, !0), isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
+    params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, this._baseAttributes = void 0, this.resolvedStatePatch = void 0, this.attributeMayContainTransientAttrs = !1, this.valid = this.isValid(), params.background && this.loadImage(params.background, !0), params.texture && isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
   }
   translate(x, y) {
     var _a, _b;
@@ -16114,10 +16259,15 @@ class Graphic extends Node {
         x: x,
         y: y
       }, this.attribute, tempConstantXYKey, context);
-    params && (x = params.x, y = params.y, delete params.x, delete params.y, this.applyBaseAttributes(params));
+    params && (x = params.x, y = params.y, delete params.x, delete params.y);
     const attribute = this.baseAttributes,
-      postMatrix = attribute.postMatrix;
-    return postMatrix ? application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y), this.commitBaseAttributeMutation(!1, context), this;
+      postMatrix = attribute.postMatrix,
+      nextAttrs = params || {};
+    if (postMatrix) {
+      const nextPostMatrix = postMatrix.clone();
+      application.transformUtil.fromMatrix(nextPostMatrix, nextPostMatrix).translate(x, y), nextAttrs.postMatrix = nextPostMatrix;
+    } else nextAttrs.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, nextAttrs.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y;
+    return this.commitInternalBaseAttributes(nextAttrs, context), this;
   }
   translateTo(x, y) {
     const attribute = this.baseAttributes;
@@ -16129,7 +16279,10 @@ class Graphic extends Node {
         x: x,
         y: y
       }, this.attribute, tempConstantXYKey, context);
-    return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), this) : (attribute.x = x, attribute.y = y, this.commitBaseAttributeMutation(!1, context), this);
+    return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+      x: x,
+      y: y
+    }, context), this);
   }
   scale(scaleX, scaleY, scaleCenter) {
     var _a, _b;
@@ -16142,15 +16295,16 @@ class Graphic extends Node {
         scaleY: scaleY,
         scaleCenter: scaleCenter
       }, this.attribute, tempConstantScaleXYKey, context);
-    params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, delete params.scaleY, this.applyBaseAttributes(params));
-    const attribute = this.baseAttributes;
+    params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, delete params.scaleY);
+    const attribute = this.baseAttributes,
+      nextAttrs = params || {};
     if (scaleCenter) {
       let {
         postMatrix: postMatrix
-      } = this.attribute;
-      postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
-    } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
-    return this.commitBaseAttributeMutation(!1, context), this;
+      } = this.baseAttributes;
+      postMatrix = postMatrix ? postMatrix.clone() : new Matrix(), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter), nextAttrs.postMatrix = postMatrix;
+    } else nextAttrs.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, nextAttrs.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
+    return this.commitInternalBaseAttributes(nextAttrs, context), this;
   }
   scaleTo(scaleX, scaleY) {
     const attribute = this.baseAttributes;
@@ -16162,7 +16316,10 @@ class Graphic extends Node {
         scaleX: scaleX,
         scaleY: scaleY
       }, this.attribute, tempConstantScaleXYKey, context);
-    return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.commitBaseAttributeMutation(!1, context), this);
+    return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+      scaleX: scaleX,
+      scaleY: scaleY
+    }, context), this);
   }
   rotate(angle, rotateCenter) {
     var _a;
@@ -16174,24 +16331,26 @@ class Graphic extends Node {
         angle: angle,
         rotateCenter: rotateCenter
       }, this.attribute, tempConstantAngleKey, context);
-    params && (delete params.angle, this.applyBaseAttributes(params));
-    const attribute = this.baseAttributes;
+    params && delete params.angle;
+    const attribute = this.baseAttributes,
+      nextAttrs = params || {};
     if (rotateCenter) {
       let {
         postMatrix: postMatrix
       } = this.baseAttributes;
-      postMatrix || (postMatrix = new Matrix(), this.baseAttributes.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
-    } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
-    return this.commitBaseAttributeMutation(!1, context), this;
+      postMatrix = postMatrix ? postMatrix.clone() : new Matrix(), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter), nextAttrs.postMatrix = postMatrix;
+    } else nextAttrs.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
+    return this.commitInternalBaseAttributes(nextAttrs, context), this;
   }
   rotateTo(angle) {
-    const attribute = this.baseAttributes;
-    if (attribute.angle === angle) return this;
+    if (this.baseAttributes.angle === angle) return this;
     const context = {
         type: AttributeUpdateType.ROTATE_TO
       },
       params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
-    return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), this) : (attribute.angle = angle, this.commitBaseAttributeMutation(!1, context), this);
+    return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+      angle: angle
+    }, context), this);
   }
   skewTo(b, c) {
     return this;
@@ -16230,6 +16389,131 @@ class Graphic extends Node {
       stateEngine: this.stateEngine
     });
   }
+  resolveSimpleLocalStateTransition(states, previousStates) {
+    var _a;
+    if (!this.states || this.stateProxy || this.stateSort || "deep" === this.stateMergeMode || this.parent || (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope) || this.boundSharedStateScope) return null;
+    if (1 === states.length) {
+      const stateName = states[0],
+        hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName),
+        nextStates = [stateName],
+        changed = !this.sameStateNames(previousStates, nextStates),
+        resolvedStateAttrs = {};
+      if (hasDefinition) {
+        const attrs = this.states[stateName];
+        if (null != attrs) {
+          if (!isPlainObjectValue(attrs)) return null;
+          const keys = Object.keys(attrs);
+          for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+            const key = keys[keyIndex];
+            if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
+            const attrValue = attrs[key];
+            resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
+          }
+        }
+      }
+      return {
+        changed: changed,
+        states: nextStates,
+        effectiveStates: nextStates,
+        resolvedStateAttrs: resolvedStateAttrs
+      };
+    }
+    const uniqueStates = Array.from(new Set(states)),
+      withDefinition = [],
+      withoutDefinition = [];
+    for (let i = 0; i < uniqueStates.length; i++) {
+      const stateName = uniqueStates[i];
+      Object.prototype.hasOwnProperty.call(this.states, stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
+    }
+    withDefinition.sort((left, right) => left.localeCompare(right));
+    const nextStates = withDefinition.concat(withoutDefinition),
+      changed = !this.sameStateNames(previousStates, nextStates),
+      resolvedStateAttrs = {};
+    for (let i = 0; i < nextStates.length; i++) {
+      const stateName = nextStates[i];
+      if (!Object.prototype.hasOwnProperty.call(this.states, stateName)) continue;
+      const attrs = this.states[stateName];
+      if (null == attrs) continue;
+      if (!isPlainObjectValue(attrs)) return null;
+      const keys = Object.keys(attrs);
+      for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+        const key = keys[keyIndex];
+        if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
+        const attrValue = attrs[key];
+        resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
+      }
+    }
+    return {
+      changed: changed,
+      states: nextStates,
+      effectiveStates: nextStates,
+      resolvedStateAttrs: resolvedStateAttrs
+    };
+  }
+  resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = !1) {
+    var _a, _b, _c, _d;
+    let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
+    const isSimpleLocalTransition = !!transition;
+    let resolvedStateAttrs;
+    if (transition) resolvedStateAttrs = transition.resolvedStateAttrs;else {
+      const 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), forceResolverRefresh && (null === (_c = this.stateEngine) || void 0 === _c || _c.invalidateResolverCache()), transition = stateModel.useStates(states), resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+    }
+    return {
+      transition: transition,
+      effectiveStates: null !== (_d = transition.effectiveStates) && void 0 !== _d ? _d : transition.states,
+      resolvedStateAttrs: resolvedStateAttrs,
+      isSimpleLocalTransition: isSimpleLocalTransition
+    };
+  }
+  normalizeSetStatesOptions(options) {
+    return options && "object" == typeof options ? {
+      hasAnimation: options.animate,
+      animateSameStatePatchChange: !0 === options.animateSameStatePatchChange,
+      shouldRefreshSameStatePatch: !0
+    } : {
+      hasAnimation: "boolean" == typeof options ? options : void 0,
+      animateSameStatePatchChange: !1,
+      shouldRefreshSameStatePatch: !1
+    };
+  }
+  sameStatePatches(left, right) {
+    const leftRecord = null != left ? left : {},
+      rightRecord = null != right ? right : {},
+      keys = new Set([...Object.keys(leftRecord), ...Object.keys(rightRecord)]);
+    for (const key of keys) {
+      if (Object.prototype.hasOwnProperty.call(leftRecord, key) !== Object.prototype.hasOwnProperty.call(rightRecord, key)) return !1;
+      if (!areAttributeValuesEqual(leftRecord[key], rightRecord[key])) return !1;
+    }
+    return !0;
+  }
+  commitSameStatePatchRefresh(states, hasAnimation, animateSameStatePatchChange = !1) {
+    var _a;
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      previousResolvedStatePatch = this.resolvedStatePatch,
+      {
+        transition: transition,
+        effectiveStates: effectiveStates,
+        resolvedStateAttrs: resolvedStateAttrs,
+        isSimpleLocalTransition: isSimpleLocalTransition
+      } = this.resolveGraphicStateTransition(states, previousStates, !0),
+      patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
+    if ((!patchChanged || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) && (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged)) {
+      if (this.stage) {
+        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
+          graphicId: this._uid,
+          targetStates: [...transition.states]
+        });
+      }
+      hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+        type: AttributeUpdateType.STATE
+      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+        type: AttributeUpdateType.STATE
+      }), this.emitStateUpdateEvent());
+    }
+  }
   resolveStateAnimateConfig(animateConfig) {
     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;
@@ -16250,9 +16534,7 @@ class Graphic extends Node {
     });
     this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
   }
-  updateNormalAttrs(stateAttrs) {
-    this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
-  }
+  updateNormalAttrs(_stateAttrs) {}
   getStateTransitionDefaultAttribute(key, targetAttrs) {
     return this.getDefaultAttribute(key);
   }
@@ -16262,6 +16544,7 @@ class Graphic extends Node {
   stopStateAnimates(type = "end") {
     const stopAnimationState = this.stopAnimationState;
     if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
+    if (!this.mayHaveTrackedAnimates()) return;
     const stateAnimates = [];
     this.visitTrackedAnimates(animate => {
       animate.stateNames && stateAnimates.push(animate);
@@ -16274,19 +16557,25 @@ 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,
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      previousResolvedStatePatch = this.resolvedStatePatch,
       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, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
-      type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    })));
+    const resolvedStateAttrs = hasAnimation || this.hasCustomEvent("beforeStateUpdate") ? cloneAttributeValue(null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : {}) : null !== (_c = this.baseAttributes) && void 0 !== _c ? _c : {};
+    if (!transition.changed || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0)) {
+      if (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), this.stage) {
+        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
+          graphicId: this._uid,
+          targetStates: []
+        });
+      }
+      hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+        type: AttributeUpdateType.STATE
+      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
+        type: AttributeUpdateType.STATE
+      }), this.emitStateUpdateEvent());
+    }
   }
   removeState(stateName, hasAnimation) {
     const transition = this.createStateModel().removeState(stateName);
@@ -16300,39 +16589,59 @@ class Graphic extends Node {
     const transition = this.createStateModel().addState(stateName, keepCurrentStates);
     transition.changed && this.useStates(transition.states, hasAnimation);
   }
+  setStates(states, options) {
+    var _a, _b, _c;
+    const {
+        hasAnimation: hasAnimation,
+        animateSameStatePatchChange: animateSameStatePatchChange,
+        shouldRefreshSameStatePatch: shouldRefreshSameStatePatch
+      } = this.normalizeSetStatesOptions(options),
+      nextStates = (null == states ? void 0 : states.length) ? states : EMPTY_STATE_NAMES,
+      hasCurrentState = !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || (null === (_b = this.effectiveStates) || void 0 === _b ? void 0 : _b.length) || this.resolvedStatePatch || (null === (_c = this.registeredActiveScopes) || void 0 === _c ? void 0 : _c.size));
+    if (nextStates.length) {
+      if (this.sameStateNames(this.currentStates, nextStates)) return shouldRefreshSameStatePatch ? void this.commitSameStatePatchRefresh(nextStates, hasAnimation, animateSameStatePatchChange) : void (this.sharedStateDirty && this.refreshSharedStateBeforeRender());
+      this.useStates(nextStates, hasAnimation);
+    } else {
+      if (!hasCurrentState && !this.sharedStateDirty) return;
+      this.clearStates(hasAnimation);
+    }
+  }
   useStates(states, hasAnimation) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     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);
-    const transition = stateModel.useStates(states);
-    if (!transition.changed && this.sameStateNames(previousStates, transition.states)) return;
-    const effectiveStates = null !== (_c = transition.effectiveStates) && void 0 !== _c ? _c : transition.states,
-      resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
-    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, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
-      type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    })));
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      previousResolvedStatePatch = this.resolvedStatePatch,
+      {
+        transition: transition,
+        effectiveStates: effectiveStates,
+        resolvedStateAttrs: resolvedStateAttrs,
+        isSimpleLocalTransition: isSimpleLocalTransition
+      } = this.resolveGraphicStateTransition(states, previousStates);
+    if ((transition.changed || !this.sameStateNames(previousStates, transition.states)) && this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) {
+      if (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stage) {
+        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
+          graphicId: this._uid,
+          targetStates: [...transition.states]
+        });
+      }
+      hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+        type: AttributeUpdateType.STATE
+      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+        type: AttributeUpdateType.STATE
+      }), this.emitStateUpdateEvent());
+    }
   }
   invalidateResolver() {
-    var _a, _b;
+    var _a, _b, _c;
     if (!this.stateEngine || !(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || !this.compiledStateDefinitions) return;
     const stateResolveBaseAttrs = null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : this.attribute;
-    this.stateEngine.setResolveContext(this, stateResolveBaseAttrs), this.resolverEpoch += 1, this.stateEngine.invalidateResolverCache();
+    this.stateEngine.setResolveContext(this, stateResolveBaseAttrs), this.resolverEpoch = (null !== (_c = this.resolverEpoch) && void 0 !== _c ? _c : 0) + 1, this.stateEngine.invalidateResolverCache();
     const transition = this.stateEngine.applyStates(this.currentStates),
       resolvedStateAttrs = Object.assign({}, this.stateEngine.resolvedPatch);
-    this.effectiveStates = [...transition.effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
-      type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
+    this.effectiveStates = [...transition.effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
-    });
+    }), this.emitStateUpdateEvent();
   }
   sameStateNames(left, right) {
     const normalizedLeft = null != left ? left : [],
@@ -16353,6 +16662,9 @@ class Graphic extends Node {
   addUpdateShapeAndBoundsTag() {
     this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
   }
+  addBroadUpdateTag() {
+    this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS | UpdateTag.UPDATE_PAINT | UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX | UpdateTag.UPDATE_LAYOUT, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+  }
   updateShapeAndBoundsTagSetted() {
     return (this._updateTag & UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
   }
@@ -16440,13 +16752,13 @@ class Graphic extends Node {
     }
   }
   setStage(stage, layer) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
       previousStage = this.stage;
     if (this.stage !== stage || this.layer !== layer) {
-      if (this.stage = stage, this.layer = layer, this.syncSharedStateScopeBindingFromTree(!!(null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length)), this.setStageToShadowRoot(stage, layer), this.hasAnyTrackedAnimate()) {
-        const previousTimeline = null === (_e = null == previousStage ? void 0 : previousStage.getTimeline) || void 0 === _e ? void 0 : _e.call(previousStage),
-          nextTimeline = null === (_f = null == stage ? void 0 : stage.getTimeline) || void 0 === _f ? void 0 : _f.call(stage),
+      if (this.stage = stage, this.layer = layer, ((null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0), this.setStageToShadowRoot(stage, layer), this.mayHaveTrackedAnimates() && this.hasAnyTrackedAnimate()) {
+        const previousTimeline = null === (_f = null == previousStage ? void 0 : previousStage.getTimeline) || void 0 === _f ? void 0 : _f.call(previousStage),
+          nextTimeline = null === (_g = null == stage ? void 0 : stage.getTimeline) || void 0 === _g ? void 0 : _g.call(stage),
           detachedStageAnimates = [];
         this.visitTrackedAnimates(a => {
           (!!previousTimeline && a.timeline === previousTimeline || a.timeline.isGlobal) && (nextTimeline ? a.timeline !== nextTimeline && (previousTimeline && a.timeline === previousTimeline && previousTimeline.removeAnimate(a, !1), a.setTimeline(nextTimeline), nextTimeline.addAnimate(a)) : previousTimeline && a.timeline === previousTimeline && (previousTimeline.removeAnimate(a, !1), detachedStageAnimates.push(a)));
@@ -16459,9 +16771,13 @@ class Graphic extends Node {
           type: AttributeUpdateType.ANIMATE_END
         }));
       }
-      return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_g = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _g || _g.call(graphicService, this, stage));
+      return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_h = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _h || _h.call(graphicService, this, stage));
     }
-    this.syncSharedStateScopeBindingFromTree(!!(null === (_h = this.currentStates) || void 0 === _h ? void 0 : _h.length));
+    ((null === (_j = this.currentStates) || void 0 === _j ? void 0 : _j.length) || this.boundSharedStateScope || (null === (_k = this.registeredActiveScopes) || void 0 === _k ? void 0 : _k.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0);
+  }
+  detachStageForRelease() {
+    var _a, _b, _c;
+    (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.sharedStateDirty = !1, this.stage = null, this.layer = null, this.shadowRoot && (null === (_c = (_b = this.shadowRoot).detachStageForRelease) || void 0 === _c || _c.call(_b));
   }
   setStageToShadowRoot(stage, layer) {
     this.shadowRoot && this.shadowRoot.setStage(stage, layer);
@@ -16528,6 +16844,7 @@ class Graphic extends Node {
     res && (res.state = "fail", cb && cb());
   }
   _stopAnimates() {
+    if (!this.mayHaveTrackedAnimates()) return;
     const animates = [];
     this.visitTrackedAnimates(animate => {
       animates.push(animate);
@@ -16541,14 +16858,17 @@ class Graphic extends Node {
     });
   }
   release() {
-    var _a, _b, _c;
-    this.releaseStatus = "released", this.clearSharedStateActiveRegistrations(), this.stopAnimates();
-    const graphicService = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.graphicService) && void 0 !== _b ? _b : application.graphicService;
-    null === (_c = null == graphicService ? void 0 : graphicService.onRelease) || void 0 === _c || _c.call(graphicService, this), super.release();
+    var _a, _b, _c, _d;
+    this.releaseStatus = "released", (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates();
+    const graphicService = null !== (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService;
+    null === (_d = null == graphicService ? void 0 : graphicService.onRelease) || void 0 === _d || _d.call(graphicService, this), super.release();
+  }
+  hasCustomEvent(type) {
+    return !!this._events && type in this._events;
   }
   _dispatchCustomEvent(type, context) {
     var _a, _b;
-    if (this._events && type in this._events) {
+    if (this.hasCustomEvent(type)) {
       const changeEvent = new CustomEvent(type, context);
       changeEvent.bubbles = !1;
       const manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager;
@@ -16557,7 +16877,7 @@ class Graphic extends Node {
     return !0;
   }
   beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
-    return this._dispatchCustomEvent("beforeStateUpdate", {
+    return !this.hasCustomEvent("beforeStateUpdate") || this._dispatchCustomEvent("beforeStateUpdate", {
       type: AttributeUpdateType.STATE,
       attrs: Object.assign({}, attrs),
       prevStates: prevStates.slice(),
@@ -16566,6 +16886,11 @@ class Graphic extends Node {
       isClear: !!isClear
     });
   }
+  emitStateUpdateEvent() {
+    this.hasCustomEvent("afterStateUpdate") && this._emitCustomEvent("afterStateUpdate", {
+      type: AttributeUpdateType.STATE
+    });
+  }
   _emitCustomEvent(type, context) {
     this._dispatchCustomEvent(type, context);
   }
@@ -19572,13 +19897,15 @@ var GroupUpdateAABBBoundsMode;
 }(GroupUpdateAABBBoundsMode || (GroupUpdateAABBBoundsMode = {}));
 let Group$1 = class Group extends Graphic {
   constructor(params) {
-    super(params), this.type = "group", this.parent = null, this.isContainer = !0, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
+    super(params), this.type = "group", this.parent = null, this.isContainer = !0, this._hasSharedStateDefinitions = !1, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
   }
   get sharedStateDefinitions() {
     return this._sharedStateDefinitions;
   }
   set sharedStateDefinitions(value) {
-    this._sharedStateDefinitions !== value && (this._sharedStateDefinitions = value, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)));
+    if (this._sharedStateDefinitions === value) return;
+    const previousScope = this.sharedStateScope;
+    this._sharedStateDefinitions = value, this._hasSharedStateDefinitions = !!value && Object.keys(value).length > 0, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)), previousScope !== this.sharedStateScope && this.notifyChildrenSharedStateTreeChanged();
   }
   setMode(mode) {
     "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -19703,9 +20030,10 @@ let Group$1 = class Group extends Graphic {
   insertInto(newNode, idx) {
     return this._updateChildToStage(super.insertInto(newNode, idx));
   }
-  removeChild(child) {
+  removeChild(child, highPerformance = !1) {
+    var _a;
     const data = super.removeChild(child);
-    return this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data;
+    return data ? highPerformance ? (null === (_a = child.detachStageForRelease) || void 0 === _a || _a.call(child), data) : (this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data) : data;
   }
   removeAllChild(deep = !1) {
     const children = this.children.slice();
@@ -19717,11 +20045,13 @@ let Group$1 = class Group extends Graphic {
   }
   setStage(stage, layer) {
     var _a, _b, _c, _d, _e, _f;
-    const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService;
-    if (this.stage !== stage) return this.stage = stage, this.layer = layer, this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingFromTree(!!(null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_e = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _e || _e.call(graphicService, this, stage), void this.forEachChildren(item => {
+    const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
+      needsSharedStateTreeSync = this._hasSharedStateDefinitions || this.sharedStateScope || (null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty;
+    if (this.stage !== stage) return this.stage = stage, this.layer = layer, needsSharedStateTreeSync && (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_f = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _f || _f.call(graphicService, this, stage), void this.forEachChildren(item => {
       item.setStage(stage, this.layer);
     });
-    this.layer !== layer && (this.layer = layer), this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingFromTree(!!(null === (_f = this.currentStates) || void 0 === _f ? void 0 : _f.length)), this.forEachChildren(item => {
+    const layerChanged = this.layer !== layer;
+    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.forEachChildren(item => {
       item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(stage, this.layer);
     });
   }
@@ -19768,15 +20098,29 @@ let Group$1 = class Group extends Graphic {
       g.release(all);
     }), super.release();
   }
+  detachStageForRelease() {
+    super.detachStageForRelease(), this.sharedStateScope = void 0, this.forEachChildren(item => {
+      var _a;
+      null === (_a = item.detachStageForRelease) || void 0 === _a || _a.call(item);
+    });
+  }
   ensureSharedStateScopeBound() {
     var _a, _b, _c;
+    if (!this.hasSharedStateDefinitions()) return void (this.sharedStateScope = void 0);
     const parentScope = null !== (_b = null === (_a = this.parent) || void 0 === _a ? void 0 : _a.sharedStateScope) && void 0 !== _b ? _b : null === (_c = this.stage) || void 0 === _c ? void 0 : _c.rootSharedStateScope;
     this.sharedStateScope ? (this.sharedStateScope.ownerGroup = this, this.sharedStateScope.ownerStage = this.stage, setSharedStateScopeParent(this.sharedStateScope, parentScope), this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions && setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions)) : this.sharedStateScope = createGroupSharedStateScope(this, parentScope, this._sharedStateDefinitions);
   }
+  hasSharedStateDefinitions() {
+    return this._hasSharedStateDefinitions;
+  }
+  notifyChildrenSharedStateTreeChanged() {
+    this.forEachChildren(item => {
+      item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(this.stage, this.layer);
+    });
+  }
   onParentSharedStateTreeChanged(stage, layer) {
-    this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingFromTree(), this.forEachChildren(item => {
-      item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(stage, this.layer);
-    })) : this.setStage(stage, layer);
+    var _a;
+    this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)), this.notifyChildrenSharedStateTreeChanged()) : this.setStage(stage, layer);
   }
 };
 Group$1.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
@@ -20124,7 +20468,10 @@ class DefaultGraphicService {
       beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
       afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"]),
       clearAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds"])
-    }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds();
+    }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds(), this.tempAABBBoundsResult = {
+      tb1: this.tempAABBBounds1,
+      tb2: this.tempAABBBounds2
+    };
   }
   onAttributeUpdate(graphic) {
     this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
@@ -20224,10 +20571,7 @@ class DefaultGraphicService {
   updateTempAABBBounds(aabbBounds) {
     const tb1 = this.tempAABBBounds1,
       tb2 = this.tempAABBBounds2;
-    return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), {
-      tb1: tb1,
-      tb2: tb2
-    };
+    return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.tempAABBBoundsResult;
   }
 }
 
@@ -21569,7 +21913,7 @@ class IncrementalAutoRenderPlugin {
 const globalBounds = new AABBBounds();
 class DirtyBoundsPlugin {
   constructor() {
-    this.name = "DirtyBoundsPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.handlePaintOnlyUpdate = graphic => {
+    this.name = "DirtyBoundsPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.dirtyBoundsHooksRegistered = !1, this.handlePaintOnlyUpdate = graphic => {
       var _a, _b, _c, _d;
       const stage = this.pluginService.stage;
       if (!stage || stage !== graphic.stage || !stage.renderCount) return;
@@ -21589,12 +21933,13 @@ class DirtyBoundsPlugin {
     owner._AABBBounds && "function" == typeof owner._AABBBounds.empty && !owner._AABBBounds.empty() || "function" != typeof owner.doUpdateAABBBounds || owner.doUpdateAABBBounds("imprecise" === (null === (_a = owner.attribute) || void 0 === _a ? void 0 : _a.boundsMode));
     return owner._globalAABBBounds && "function" == typeof owner._globalAABBBounds.empty && !owner._globalAABBBounds.empty() || "function" != typeof owner.tryUpdateGlobalAABBBounds || owner.tryUpdateGlobalAABBBounds(), null !== (_b = owner._globalAABBBounds) && void 0 !== _b ? _b : owner.globalAABBBounds;
   }
-  activate(context) {
-    this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
-      stage && stage === this.pluginService.stage && stage.dirtyBounds.clear();
-    });
-    const stage = this.pluginService.stage;
-    stage && (stage.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handlePaintOnlyUpdate), stage.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
+  getRemoveDirtyBounds(graphic) {
+    var _a;
+    const cachedBounds = (null !== (_a = graphic.glyphHost) && void 0 !== _a ? _a : graphic)._globalAABBBounds;
+    if (cachedBounds && "function" == typeof cachedBounds.empty && !cachedBounds.empty()) return cachedBounds;
+  }
+  registerDirtyBoundsHooks(stage) {
+    this.dirtyBoundsHooksRegistered || (stage.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handlePaintOnlyUpdate), stage.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
       graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && stage.renderCount && (graphic.isContainer && !graphic.shouldSelfChangeUpdateAABBBounds() || willUpdate && (globalBounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), stage.dirty(globalBounds, graphic.parent && graphic.parent.globalTransMatrix)));
     }), stage.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
       stage && stage === this.pluginService.stage && stage.renderCount && (graphic.isContainer && !selfChange || stage.dirty(params.globalAABBBounds));
@@ -21602,12 +21947,21 @@ class DirtyBoundsPlugin {
       stage && stage === this.pluginService.stage && stage.renderCount && stage && stage.dirty(bounds);
     }), stage.graphicService.hooks.onRemove.tap(this.key, graphic => {
       const stage = graphic.stage;
-      stage && stage === this.pluginService.stage && stage.renderCount && stage && stage.dirty(graphic.globalAABBBounds);
-    }));
+      if (!stage || stage !== this.pluginService.stage || !stage.renderCount) return;
+      const bounds = this.getRemoveDirtyBounds(graphic);
+      bounds && !bounds.empty() && stage.dirty(bounds);
+    }), this.dirtyBoundsHooksRegistered = !0);
+  }
+  activate(context) {
+    this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
+      stage && stage === this.pluginService.stage && (stage.dirtyBounds.clear(), this.registerDirtyBoundsHooks(stage));
+    });
+    const stage = this.pluginService.stage;
+    stage && stage.renderCount && this.registerDirtyBoundsHooks(stage);
   }
   deactivate(context) {
     const stage = this.pluginService.stage;
-    stage && (stage.graphicService.hooks.onAttributeUpdate.taps = stage.graphicService.hooks.onAttributeUpdate.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.beforeUpdateAABBBounds.taps = stage.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.afterUpdateAABBBounds.taps = stage.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.clearAABBBounds.taps = stage.graphicService.hooks.clearAABBBounds.taps.filter(item => item.name !== this.key), stage.hooks.afterRender.taps = stage.hooks.afterRender.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.onRemove.taps = stage.graphicService.hooks.onRemove.taps.filter(item => item.name !== this.key));
+    stage && (stage.graphicService.hooks.onAttributeUpdate.taps = stage.graphicService.hooks.onAttributeUpdate.taps.filter(item => item.name !== this.key), this.dirtyBoundsHooksRegistered = !1, stage.graphicService.hooks.beforeUpdateAABBBounds.taps = stage.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.afterUpdateAABBBounds.taps = stage.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.clearAABBBounds.taps = stage.graphicService.hooks.clearAABBBounds.taps.filter(item => item.name !== this.key), stage.hooks.afterRender.taps = stage.hooks.afterRender.taps.filter(item => item.name !== this.key), stage.graphicService.hooks.onRemove.taps = stage.graphicService.hooks.onRemove.taps.filter(item => item.name !== this.key));
   }
 }
 
@@ -21963,7 +22317,7 @@ class Stage extends Group$1 {
     ticker.bindStage(this), this._ticker && this._ticker.removeListener("tick", this.afterTickCb), ticker.addTimeline(this.timeline), this._ticker = ticker, this._ticker.on("tick", this.afterTickCb);
   }
   constructor(params = {}, deps = {}) {
-    var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
       if (!(this._skipRender < 0)) if (visible) {
         if (this.dirtyBounds) {
@@ -21973,7 +22327,8 @@ class Stage extends Group$1 {
         this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
       } else this._skipRender = 1;
     }, this.beforeRender = stage => {
-      flushStageSharedStateRefresh(this), this._beforeRenderList.forEach(cb => cb(stage));
+      const pendingSharedRefresh = this._pendingSharedStateRefreshGraphics;
+      (null == pendingSharedRefresh ? void 0 : pendingSharedRefresh.size) && flushStageSharedStateRefresh(this), this._beforeRenderList.forEach(cb => cb(stage));
     }, this.afterClearScreen = drawParams => {
       this._afterClearScreen && this._afterClearScreen(drawParams);
     }, this.afterClearRect = drawParams => {
@@ -21998,14 +22353,17 @@ class Stage extends Group$1 {
       canvas: params.canvas
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_w = params.background) && void 0 !== _w ? _w : DefaultConfig.BACKGROUND, this.stage = this, this.appendChild(this.layerService.createLayer(this, {
       main: !0
-    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, ensureStageStatePerfMonitor(this), this._stateBatchScheduler = new StateBatchScheduler(this, ensureStageStatePerfMonitor(this)), this.rootSharedStateScope = createRootSharedStateScope(this, null === (_x = this.theme) || void 0 === _x ? void 0 : _x.stateDefinitions), this.theme.onStateDefinitionsChange = () => {
+    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.theme.onStateDefinitionsChange = () => {
       var _a;
-      this.rootSharedStateScope && (setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, null === (_a = this.theme) || void 0 === _a ? void 0 : _a.stateDefinitions), markScopeActiveDescendantsDirty(this.rootSharedStateScope, this));
+      const definitions = null === (_a = this.theme) || void 0 === _a ? void 0 : _a.stateDefinitions;
+      if (!definitions || !Object.keys(definitions).length) return void (this.rootSharedStateScope && (setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, definitions), markScopeActiveDescendantsDirty(this.rootSharedStateScope, this)));
+      const rootScope = this.ensureRootSharedStateScope(definitions);
+      setRootSharedStateScopeThemeDefinitions(rootScope, definitions), markScopeActiveDescendantsDirty(rootScope, this);
     }, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), params.beforeRender && this._beforeRenderList.push(params.beforeRender), params.afterRender && this._afterRenderList.push(params.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
       tickRenderMode: "effect"
     }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
-    }), this.initAnimate(params), this.rafId = null !== (_y = params.rafId) && void 0 !== _y ? _y : Math.floor(6 * Math.random());
+    }), this.initAnimate(params), this.rafId = null !== (_x = params.rafId) && void 0 !== _x ? _x : Math.floor(6 * Math.random());
   }
   initAnimate(params) {
     var _a;
@@ -22265,8 +22623,14 @@ class Stage extends Group$1 {
       this._doRenderInThisFrame(), this.willNextFrameRender = !1;
     }));
   }
+  ensureRootSharedStateScope(themeStateDefinitions) {
+    return this.rootSharedStateScope ? (this.rootSharedStateScope.ownerStage = this, this.rootSharedStateScope) : (this.rootSharedStateScope = createRootSharedStateScope(this, themeStateDefinitions), this.rootSharedStateScope);
+  }
+  getStateBatchScheduler() {
+    return this._stateBatchScheduler || (this._stateBatchScheduler = new StateBatchScheduler(this, ensureStageStatePerfMonitor(this))), this._stateBatchScheduler;
+  }
   scheduleStateBatch(graphics, targetStates) {
-    this._stateBatchScheduler.schedule(graphics, targetStates);
+    this.getStateBatchScheduler().schedule(graphics, targetStates);
   }
   getStatePerfSnapshot() {
     return ensureStageStatePerfMonitor(this).getSnapshot();
@@ -24767,7 +25131,11 @@ const result = {
 };
 class BaseRender {
   init(contributions) {
-    contributions && (this._renderContribitions = contributions.getContributions()), this._renderContribitions || (this._renderContribitions = []), this.builtinContributions || (this.builtinContributions = []), this.builtinContributions.push(defaultBaseClipRenderBeforeContribution), this.builtinContributions.push(defaultBaseClipRenderAfterContribution), this.builtinContributions.forEach(item => this._renderContribitions.push(item)), this._renderContribitions.length && (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
+    this.builtinContributions || (this.builtinContributions = []), this._renderContribitions = contributions ? contributions.getContributions().slice() : [];
+    const addContribution = item => {
+      this._renderContribitions.includes(item) || this._renderContribitions.push(item);
+    };
+    this.builtinContributions.forEach(addContribution), addContribution(defaultBaseClipRenderBeforeContribution), addContribution(defaultBaseClipRenderAfterContribution), this._renderContribitions.length ? (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke)) : (this._beforeRenderContribitions = [], this._afterRenderContribitions = []);
   }
   reInit() {
     this.init(this.graphicRenderContributions);
@@ -29816,8 +30184,8 @@ class FlexLayoutPlugin {
       graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && graphic.isContainer && !this.skipBoundsTrigger && _tempBounds.copy(bounds);
     }), stage.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
       stage && stage === this.pluginService.stage && graphic.isContainer && !this.skipBoundsTrigger && (_tempBounds.equals(bounds) || this.tryLayout(graphic, !1));
-    }), stage.graphicService.hooks.onSetStage.tap(this.key, graphic => {
-      graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic, !1);
+    }), stage.graphicService.hooks.onSetStage.tap(this.key, (graphic, nextStage) => {
+      nextStage && nextStage === this.pluginService.stage && (graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic, !1));
     }));
   }
   deactivate(context) {
@@ -30380,7 +30748,6 @@ var VRenderCore = /*#__PURE__*/Object.freeze({
     segments: segments,
     shouldClipImageByLayout: shouldClipImageByLayout,
     shouldUseMat4: shouldUseMat4,
-    shouldUseSimpleAttributeFastPath: shouldUseSimpleAttributeFastPath,
     snapLength: snapLength,
     splitArc: splitArc,
     splitArea: splitArea,
@@ -38062,15 +38429,38 @@ function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
   if (!graphic || !targetAttrs) return;
   const committedTargetAttrs = cloneDeep(targetAttrs),
     transientStartAttrs = cloneDeep(null != startAttrs ? startAttrs : graphic.attribute);
-  graphic.setAttributes(committedTargetAttrs);
-  const baseAttributes = graphic.baseAttributes;
-  baseAttributes && "object" == typeof baseAttributes && Object.keys(committedTargetAttrs).forEach(key => {
-    baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);
-  }), null === (_b = (_a = graphic).setFinalAttributes) || void 0 === _b || _b.call(_a, committedTargetAttrs), null === (_d = (_c = graphic).setAttributesAndPreventAnimate) || void 0 === _d || _d.call(_c, transientStartAttrs, !1, {
+  graphic.setAttributes(committedTargetAttrs), null === (_b = (_a = graphic).setFinalAttributes) || void 0 === _b || _b.call(_a, committedTargetAttrs), null === (_d = (_c = graphic).setAttributesAndPreventAnimate) || void 0 === _d || _d.call(_c, transientStartAttrs, !1, {
     type: AttributeUpdateType.ANIMATE_BIND
   });
 }
 
+function collectTrackedAnimates(graphic, animates = [], visited = new Set()) {
+  var _a, _b, _c, _d, _e;
+  const trackedAnimates = null !== (_c = null === (_b = (_a = graphic).getTrackedAnimates) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : graphic.animates;
+  return null == trackedAnimates || trackedAnimates.forEach(animate => {
+    animate && !visited.has(animate) && (visited.add(animate), animates.push(animate));
+  }), null === (_e = (_d = graphic).forEachChildren) || void 0 === _e || _e.call(_d, child => {
+    collectTrackedAnimates(child, animates, visited);
+  }), animates;
+}
+function appendExitReleaseCallback(state, callback) {
+  callback && (null == state || state.onComplete.push(callback));
+}
+function runExitReleaseCallbacks(callbacks) {
+  callbacks.forEach(callback => {
+    callback();
+  });
+}
+function bindExitReleaseAnimates(exitAnimates, getState, finalize) {
+  const finish = animate => {
+    const state = getState();
+    state && !state.finalized && state.pendingAnimates.has(animate) && (state.pendingAnimates.delete(animate), state.pendingAnimates.size || finalize());
+  };
+  exitAnimates.forEach(animate => {
+    animate.onEnd(() => finish(animate)), animate.onRemove(() => finish(animate));
+  });
+}
+
 const DefaultAxisAnimation = {
   type: "default",
   duration: 300,
@@ -38102,12 +38492,65 @@ class AxisBase extends AnimateComponent {
     });
     return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
   }
+  _finalizeExitRelease() {
+    var _a, _b;
+    const state = this._exitReleaseState;
+    if (null == state ? void 0 : state.finalized) return;
+    state && (state.finalized = !0);
+    const parent = this.parent,
+      removeFromParent = !!(null == state ? void 0 : state.removeFromParent),
+      callbacks = null !== (_a = null == state ? void 0 : state.onComplete) && void 0 !== _a ? _a : [];
+    this._exitReleaseState = void 0, this._prevInnerView = null, this._innerView = null, this.axisLabelsContainer = null, this.axisContainer = null, this.removeAllChild(!0), super.release(!0), removeFromParent && (null === (_b = null != parent ? parent : this.parent) || void 0 === _b || _b.removeChild(this)), runExitReleaseCallbacks(callbacks);
+  }
+  _runExitAnimationBeforeRelease(options = {}) {
+    var _a, _b, _c;
+    if (this._exitReleaseState && !this._exitReleaseState.finalized) return this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent, appendExitReleaseCallback(this._exitReleaseState, options.onComplete), !0;
+    if (!this.stage || !1 === this.attribute.animation || !1 === this.attribute.animationExit || !this._innerView) return !1;
+    if (this._prepare(), !(null === (_a = this._animationConfig) || void 0 === _a ? void 0 : _a.exit)) return !1;
+    const exitTargets = new Set();
+    if (traverseGroup(this._innerView, el => {
+      "group" !== el.type && exitTargets.add(el);
+    }), !exitTargets.size) return !1;
+    const existingAnimates = collectTrackedAnimates(this),
+      {
+        delay = 0,
+        duration = DefaultAxisAnimation.duration,
+        easing = DefaultAxisAnimation.easing
+      } = this._animationConfig.exit;
+    exitTargets.forEach(target => {
+      var _a, _b, _c;
+      const startAttrs = {
+          opacity: null !== (_a = target.attribute.opacity) && void 0 !== _a ? _a : 1,
+          fillOpacity: null !== (_b = target.attribute.fillOpacity) && void 0 !== _b ? _b : 1,
+          strokeOpacity: null !== (_c = target.attribute.strokeOpacity) && void 0 !== _c ? _c : 1
+        },
+        endAttrs = {
+          opacity: 0,
+          fillOpacity: 0,
+          strokeOpacity: 0
+        };
+      commitUpdateAnimationTarget(target, endAttrs, startAttrs), target.animate().wait(delay).to(endAttrs, duration, easing);
+    });
+    const exitAnimates = collectTrackedAnimates(this).filter(animate => !existingAnimates.includes(animate));
+    if (!exitAnimates.length) return !1;
+    this.setAttribute("childrenPickable", !1), null === (_c = (_b = this._innerView).removeAllEventListeners) || void 0 === _c || _c.call(_b), this.releaseStatus = "willRelease";
+    const pendingAnimates = new Set(exitAnimates);
+    return this._exitReleaseState = {
+      pendingAnimates: pendingAnimates,
+      finalized: !1,
+      removeFromParent: !!options.removeFromParent,
+      onComplete: options.onComplete ? [options.onComplete] : []
+    }, bindExitReleaseAnimates(exitAnimates, () => this._exitReleaseState, () => this._finalizeExitRelease()), !0;
+  }
+  releaseWithExitAnimation(options = {}) {
+    return "released" !== this.releaseStatus && this._runExitAnimationBeforeRelease(options);
+  }
   render() {
-    this._prepare(), this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator.group({
+    this._exitReleaseState || (this._prepare(), this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator.group({
       x: 0,
       y: 0,
       pickable: !1
-    }), this.add(this._innerView), this._renderInner(this._innerView), this._bindEvent(), this.runAnimation();
+    }), this.add(this._innerView), this._renderInner(this._innerView), this._bindEvent(), this.runAnimation());
   }
   _prepare() {
     this._prepareAnimate(DefaultAxisAnimation);
@@ -38439,8 +38882,8 @@ class AxisBase extends AnimateComponent {
       });
     }
   }
-  release() {
-    super.release(), this._prevInnerView = null, this._innerView = null;
+  release(all) {
+    this._exitReleaseState ? this._finalizeExitRelease() : (all && this.removeAllChild(!0), super.release(all), all && this.removeAllChild(!0), this._prevInnerView = null, this._innerView = null);
   }
 }
 
@@ -38952,20 +39395,67 @@ function commonInterpolateUpdate(key, from, to, ratio, step, target) {
   return !1;
 }
 
+const animateUpdateContext = {
+    type: AttributeUpdateType.ANIMATE_UPDATE
+  },
+  animateBindContext = {
+    type: AttributeUpdateType.ANIMATE_BIND
+  },
+  animateStartContext = {
+    type: AttributeUpdateType.ANIMATE_START
+  };
+function getAnimationContext(type) {
+  switch (type) {
+    case AttributeUpdateType.ANIMATE_UPDATE:
+      return animateUpdateContext;
+    case AttributeUpdateType.ANIMATE_BIND:
+      return animateBindContext;
+    case AttributeUpdateType.ANIMATE_START:
+      return animateStartContext;
+    default:
+      return {
+        type: type
+      };
+  }
+}
+function prepareAnimationFrameAttribute(target) {
+  const transientTarget = target;
+  return transientTarget.attribute || (transientTarget.attribute = {}), transientTarget.attribute === transientTarget.baseAttributes && "function" == typeof transientTarget.detachAttributeFromBaseAttributes && transientTarget.detachAttributeFromBaseAttributes(), transientTarget.attributeMayContainTransientAttrs = !0, transientTarget.attribute;
+}
+function commitAnimationFrameAttribute(target) {
+  var _a, _b;
+  null === (_b = (_a = target).onAttributeUpdate) || void 0 === _b || _b.call(_a, animateUpdateContext);
+}
+function applyAnimationFrameAttributes(target, attributes) {
+  if (!attributes) return;
+  const targetAttribute = prepareAnimationFrameAttribute(target);
+  for (const key in attributes) Object.prototype.hasOwnProperty.call(attributes, key) && (targetAttribute[key] = attributes[key]);
+  commitAnimationFrameAttribute(target);
+}
+function applyAnimationFrameNumberAttributes(target, keys, from, to, ratio) {
+  const targetAttribute = prepareAnimationFrameAttribute(target);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    targetAttribute[key] = from[key] + (to[key] - from[key]) * ratio;
+  }
+  commitAnimationFrameAttribute(target);
+}
 function applyAnimationTransientAttributes(target, attributes, type = AttributeUpdateType.ANIMATE_UPDATE) {
   var _a;
   if (!attributes) return;
-  const context = {
-      type: type
-    },
+  const context = getAnimationContext(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" != typeof transientTarget.applyAnimationTransientAttributes ? "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) : transientTarget.applyAnimationTransientAttributes(attributes, !1, context);
 }
 function applyAppearStartAttributes(target, attributes) {
   applyAnimationTransientAttributes(target, attributes, AttributeUpdateType.ANIMATE_BIND);
 }
 
 function noop() {}
+function includesKey$1(keys, key) {
+  for (let i = 0; i < keys.length; i++) if (keys[i] === key) return !0;
+  return !1;
+}
 class Step {
   constructor(type, props, duration, easing) {
     var _a;
@@ -39021,6 +39511,17 @@ class Step {
   onBind() {
     "glyph" === this.target.type && (this.syncAttributeUpdate = this._syncAttributeUpdate);
   }
+  runInterpolateUpdate(fromProps, toProps, ratio) {
+    if (this.animate.interpolateUpdateFunction) return void this.animate.interpolateUpdateFunction(fromProps, toProps, ratio, this, this.target);
+    const funcs = this.interpolateUpdateFunctions,
+      propKeys = this.propKeys;
+    if (funcs && propKeys) for (let index = 0; index < funcs.length; index++) {
+      const key = propKeys[index],
+        fromValue = fromProps[key],
+        toValue = toProps[key];
+      funcs[index](key, fromValue, toValue, ratio, this, this.target);
+    }
+  }
   onFirstRun() {}
   onStart() {
     if (!this._hasFirstRun) {
@@ -39035,23 +39536,49 @@ class Step {
   tryPreventConflict() {
     var _a, _b;
     const animate = this.animate,
-      target = this.target;
-    (null !== (_b = null === (_a = target.forEachTrackedAnimate) || void 0 === _a ? void 0 : _a.bind(target)) && void 0 !== _b ? _b : cb => {
-      var _a;
-      null === (_a = target.animates) || void 0 === _a || _a.forEach(cb);
-    })(a => {
+      target = this.target,
+      forEachTrackedAnimate = null !== (_b = null === (_a = target.forEachTrackedAnimate) || void 0 === _a ? void 0 : _a.bind(target)) && void 0 !== _b ? _b : cb => {
+        var _a;
+        null === (_a = target.animates) || void 0 === _a || _a.forEach(cb);
+      },
+      propKeys = this.propKeys;
+    forEachTrackedAnimate(a => {
       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);
-      });
+      let conflictKeys = null;
+      for (let i = 0; i < propKeys.length; i++) {
+        const key = propKeys[i];
+        null != fromProps[key] && (null != conflictKeys ? conflictKeys : conflictKeys = []).push(key);
+      }
+      conflictKeys && a.preventAttrs(conflictKeys);
     });
   }
+  removeKeysFromRecord(record, keys) {
+    if (!record) return record;
+    let hasBlockedKey = !1;
+    for (const key in record) if (Object.prototype.hasOwnProperty.call(record, key) && includesKey$1(keys, key)) {
+      hasBlockedKey = !0;
+      break;
+    }
+    if (!hasBlockedKey) return record;
+    const nextRecord = {};
+    for (const key in record) Object.prototype.hasOwnProperty.call(record, key) && !includesKey$1(keys, key) && (nextRecord[key] = record[key]);
+    return nextRecord;
+  }
   deleteSelfAttr(key) {
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
     var _a;
-    delete this.props[key], this.fromProps && delete this.fromProps[key];
-    const index = this.propKeys.indexOf(key);
-    -1 !== index && (this.propKeys.splice(index, 1), null === (_a = this.interpolateUpdateFunctions) || void 0 === _a || _a.splice(index, 1));
+    if ((null == keys ? void 0 : keys.length) && (this.props = this.removeKeysFromRecord(this.props, keys), this.fromProps = this.removeKeysFromRecord(this.fromProps, keys), this.fromParsedProps = this.removeKeysFromRecord(this.fromParsedProps, keys), this.toParsedProps = this.removeKeysFromRecord(this.toParsedProps, keys), null === (_a = this.propKeys) || void 0 === _a ? void 0 : _a.length)) {
+      const funcs = this.interpolateUpdateFunctions;
+      let writeIndex = 0;
+      for (let readIndex = 0; readIndex < this.propKeys.length; readIndex++) {
+        const propKey = this.propKeys[readIndex];
+        includesKey$1(keys, propKey) || (writeIndex !== readIndex && (this.propKeys[writeIndex] = propKey, funcs && (funcs[writeIndex] = funcs[readIndex])), writeIndex++);
+      }
+      this.propKeys.length = writeIndex, funcs && (funcs.length = writeIndex);
+    }
   }
   trySyncStartProps() {
     this.propKeys.forEach(key => {
@@ -39061,11 +39588,7 @@ class Step {
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, 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.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+    this.runInterpolateUpdate(this.fromProps, this.props, easedRatio), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
   onUpdate(end, ratio, out) {}
   onEnd(cb) {
@@ -39269,19 +39792,34 @@ class FromTo extends ACustomAnimate {
     }), this.applyTransientFromAttributes();
   }
   deleteSelfAttr(key) {
-    super.deleteSelfAttr(key), delete this.from[key];
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
+    super.deleteSelfAttrs(keys), this.from = this.removeKeysFromRecord(this.from, keys);
   }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    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.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+    this.runInterpolateUpdate(this.from, this.props, easedRatio), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
 }
 
+function includesKey(keys, key) {
+  for (let i = 0; i < keys.length; i++) if (keys[i] === key) return !0;
+  return !1;
+}
+function removeKeysFromRecord(record, keys) {
+  if (!record) return record;
+  let hasBlockedKey = !1;
+  for (const key in record) if (Object.prototype.hasOwnProperty.call(record, key) && includesKey(keys, key)) {
+    hasBlockedKey = !0;
+    break;
+  }
+  if (!hasBlockedKey) return record;
+  const nextRecord = {};
+  for (const key in record) Object.prototype.hasOwnProperty.call(record, key) && !includesKey(keys, key) && (nextRecord[key] = record[key]);
+  return nextRecord;
+}
 class Animate {
   constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
     this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
@@ -39304,7 +39842,7 @@ class Animate {
   bind(target) {
     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(() => {
+    return "function" == typeof trackerTarget.detachAttributeFromBaseAttributes && trackerTarget.detachAttributeFromBaseAttributes(), "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(), 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;
   }
@@ -39369,12 +39907,14 @@ class Animate {
     cb ? (this._onRemove || (this._onRemove = []), this._onRemove.push(cb)) : null === (_a = this._onRemove) || void 0 === _a || _a.forEach(cb => cb());
   }
   preventAttr(key) {
-    this._preventAttrs.add(key), delete this._startProps[key], delete this._endProps[key];
-    let step = this._firstStep;
-    for (; step;) step.deleteSelfAttr(key), step = step.next;
+    this.preventAttrs([key]);
   }
   preventAttrs(keys) {
-    keys.forEach(key => this._preventAttrs.add(key));
+    if (!(null == keys ? void 0 : keys.length)) return;
+    for (let i = 0; i < keys.length; i++) this._preventAttrs.add(keys[i]);
+    this._startProps = removeKeysFromRecord(this._startProps, keys), this._endProps = removeKeysFromRecord(this._endProps, keys);
+    let step = this._firstStep;
+    for (; step;) step.deleteSelfAttrs(keys), step = step.next;
   }
   validAttr(key) {
     return !this._preventAttrs.has(key);
@@ -39793,6 +40333,33 @@ class AnimateExecutor {
       cb();
     });
   }
+  getActiveAttrKeys() {
+    const keys = [];
+    for (let i = 0; i < this._animates.length; i++) {
+      const animate = this._animates[i];
+      if (animate.status === AnimateStatus.END) continue;
+      const endProps = animate.getEndProps();
+      if (endProps) for (const key in endProps) Object.prototype.hasOwnProperty.call(endProps, key) && keys.indexOf(key) < 0 && keys.push(key);
+    }
+    return keys;
+  }
+  hasActiveAttrs() {
+    for (let i = 0; i < this._animates.length; i++) {
+      const animate = this._animates[i];
+      if (animate.status === AnimateStatus.END) continue;
+      const endProps = animate.getEndProps();
+      if (endProps) for (const key in endProps) if (Object.prototype.hasOwnProperty.call(endProps, key)) return !0;
+    }
+    return !1;
+  }
+  preventAttrs(keys) {
+    if (!(null == keys ? void 0 : keys.length)) return this.hasActiveAttrs();
+    for (let i = 0; i < this._animates.length; i++) {
+      const animate = this._animates[i];
+      animate.status !== AnimateStatus.END && animate.preventAttrs(keys);
+    }
+    return this.hasActiveAttrs();
+  }
   _trackAnimation(animate) {
     this._animates.push(animate), this._activeCount++, 1 !== this._activeCount || this._started || (this._started = !0, this.onStart()), animate.onEnd(() => {
       this._activeCount--;
@@ -39915,7 +40482,8 @@ class AnimateExecutor {
     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), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+    const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
+    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), 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;
@@ -39978,7 +40546,8 @@ class AnimateExecutor {
       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), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
+      const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
+      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
       const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
         customType = effect.custom ? effect.customType : getCustomType(custom);
       this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
@@ -39992,11 +40561,14 @@ class AnimateExecutor {
       interpolator(ratio, from, to, step, target, animate.target, customParams);
     }, animate.to(props, duration, easing);
   }
+  shouldCommitAttrOutChannel(type) {
+    return "update" !== type;
+  }
   createCustomAnimation(animate, CustomAnimateConstructor, from, props, duration, easing, customParams) {
     const customAnimate = new CustomAnimateConstructor(from, props, duration, easing, customParams);
     animate.play(customAnimate);
   }
-  createPropsFromChannel(channel, graphic) {
+  createPropsFromChannel(channel, graphic, includeAttrOutChannel = !0) {
     var _a;
     const props = {};
     let from = null;
@@ -40005,7 +40577,7 @@ class AnimateExecutor {
       props: props,
       attrOutChannel: null
     };
-    const attrOutChannel = {};
+    const attrOutChannel = includeAttrOutChannel ? {} : null;
     let hasAttrs = !1;
     const diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
     if (Array.isArray(channel) && (channel = channel.reduce((res, key) => (void 0 === diffAttrs[key] || (res[key] = {
@@ -40014,7 +40586,7 @@ class AnimateExecutor {
       var _a, _b, _c, _d;
       const config = channel[key];
       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) {
+    }), diffAttrs && attrOutChannel) for (const key in diffAttrs) {
       const value = diffAttrs[key];
       if (void 0 === value) continue;
       props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (attrOutChannel[key] = value, hasAttrs = !0);
@@ -40093,8 +40665,22 @@ class AnimationStateManager {
   hasTrackedAnimate() {
     return this.trackedAnimates.size > 0;
   }
+  hasStateInfo(list, target) {
+    for (let i = 0; i < list.length; i++) if (list[i] === target) return !0;
+    return !1;
+  }
+  takeOverUpdateAttrs(nextState, currentStates, shouldStopState) {
+    if (nextState.state !== AnimationStates$1.UPDATE || !currentStates.length) return;
+    const nextKeys = nextState.executor.getActiveAttrKeys();
+    if (nextKeys.length) for (let i = 0; i < currentStates.length; i++) {
+      const currentState = currentStates[i];
+      currentState.state !== AnimationStates$1.UPDATE || currentState === nextState || this.hasStateInfo(shouldStopState, currentState) || currentState.executor.preventAttrs(nextKeys) || (currentState.executor.stop(null, !1), shouldStopState.push(currentState));
+    }
+  }
   applyState(nextState, animationConfig, callback) {
+    var _a;
     const registry = AnimationTransitionRegistry.getInstance(),
+      currentStateList = null !== (_a = this.stateList) && void 0 !== _a ? _a : [],
       shouldStopState = [],
       shouldApplyState = [];
     if (this.stateList && this.stateList.length ? nextState.forEach((state, index) => {
@@ -40102,14 +40688,14 @@ class AnimationStateManager {
         allowTransition: !0,
         stopOriginalTransition: !0
       };
-      this.stateList.forEach(currState => {
+      currentStateList.forEach(currState => {
         const _result = registry.isTransitionAllowed(currState.state, state, this.graphic);
         result.allowTransition = result.allowTransition && _result.allowTransition;
       }), result.allowTransition && (shouldApplyState.push({
         state: state,
         animationConfig: isArray$1(animationConfig[index]) ? animationConfig[index].map(item => item.animation) : animationConfig[index].animation,
         executor: new AnimateExecutor(this.graphic)
-      }), this.stateList.forEach(currState => {
+      }), currentStateList.forEach(currState => {
         registry.isTransitionAllowed(currState.state, state, this.graphic).stopOriginalTransition && shouldStopState.push(currState);
       }));
     }) : nextState.forEach((state, index) => {
@@ -40121,12 +40707,18 @@ class AnimationStateManager {
     }), shouldStopState.forEach(state => {
       state.executor.stop(null, !1);
     }), shouldApplyState.length) {
-      shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig);
+      shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig), this.takeOverUpdateAttrs(shouldApplyState[0], currentStateList, shouldStopState);
       for (let i = 0; i < shouldApplyState.length; i++) {
         const nextState = shouldApplyState[i + 1],
           currentState = shouldApplyState[i];
         currentState.executor.onEnd(() => {
-          nextState && nextState.executor.execute(nextState.animationConfig), this.stateList = this.stateList.filter(state => state !== currentState), i === shouldApplyState.length - 1 && callback && callback(!1);
+          var _a;
+          if (nextState) {
+            nextState.executor.execute(nextState.animationConfig);
+            const stoppedStates = [];
+            this.takeOverUpdateAttrs(nextState, null !== (_a = this.stateList) && void 0 !== _a ? _a : [], stoppedStates), stoppedStates.length && this.stateList && (this.stateList = this.stateList.filter(state => !this.hasStateInfo(stoppedStates, state)));
+          }
+          this.stateList = this.stateList.filter(state => state !== currentState), i === shouldApplyState.length - 1 && callback && callback(!1);
         });
       }
     } else callback && callback(!0);
@@ -40369,8 +40961,11 @@ class ComponentAnimator {
     }), this));
   }
   deleteSelfAttr(key) {
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
     this.tasks.forEach(task => {
-      task.animate && task.animate.forEach(animate => animate.preventAttr(key));
+      task.animate && task.animate.forEach(animate => animate.preventAttrs(keys));
     });
   }
   stop(type) {
@@ -40934,6 +41529,25 @@ class ClipDirectionAnimate extends ClipGraphicAnimate {
   }
 }
 
+function buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs) {
+  var _a;
+  const commitTarget = target,
+    contextFinalAttrs = null === (_a = commitTarget.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+    finalAttribute = "function" == typeof commitTarget.getFinalAttribute ? commitTarget.getFinalAttribute() : commitTarget.finalAttribute;
+  let commitAttrs = null;
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    animate && !animate.validAttr(key) || (contextFinalAttrs && Object.prototype.hasOwnProperty.call(contextFinalAttrs, key) ? (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = contextFinalAttrs[key]) : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, key) ? (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = finalAttribute[key]) : fallbackAttrs && Object.prototype.hasOwnProperty.call(fallbackAttrs, key) && (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = fallbackAttrs[key]));
+  }
+  return commitAttrs;
+}
+function commitAnimationStaticAttrs(target, keys, animate, fallbackAttrs) {
+  const commitAttrs = buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs);
+  return !!commitAttrs && (target.setAttributes(commitAttrs, !1, {
+    type: AttributeUpdateType.ANIMATE_END
+  }), !0);
+}
+
 class TagPointsUpdate extends ACustomAnimate {
   constructor(from, to, duration, easing, params) {
     var _a, _b;
@@ -40952,21 +41566,9 @@ class TagPointsUpdate extends ACustomAnimate {
   }
   onBind() {
     super.onBind();
-    const {
-        points: points,
-        segments: segments
-      } = this.target.attribute,
-      {
-        points: pointsTo,
-        segments: segmentsTo
-      } = this.target.getFinalAttribute();
-    this.from = {
-      points: points,
-      segments: segments
-    }, this.to = {
-      points: pointsTo,
-      segments: segmentsTo
-    }, this.props = this.to;
+    const currentAttribute = this.target.attribute,
+      finalAttribute = this.target.getFinalAttribute();
+    this.from = {}, this.to = {}, Object.prototype.hasOwnProperty.call(currentAttribute, "points") && (this.from.points = currentAttribute.points), Object.prototype.hasOwnProperty.call(currentAttribute, "segments") && (this.from.segments = currentAttribute.segments), finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, "points") && (this.to.points = finalAttribute.points), finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, "segments") && (this.to.segments = finalAttribute.segments), this.props = this.to;
     const originFromPoints = this.getPoints(this.from),
       originToPoints = this.getPoints(this.to, !0);
     this.fromPoints = originFromPoints ? Array.isArray(originFromPoints) ? originFromPoints : [originFromPoints] : [], this.toPoints = originToPoints ? Array.isArray(originToPoints) ? originToPoints : [originToPoints] : [];
@@ -41002,31 +41604,42 @@ class TagPointsUpdate extends ACustomAnimate {
     const lastClipRange = this.target.attribute.clipRange;
     isValidNumber$1(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
   }
+  onEnd(cb) {
+    cb ? super.onEnd(cb) : (this.to && commitAnimationStaticAttrs(this.target, Object.keys(this.to), this.animate, this.to), super.onEnd());
+  }
+  applyPointTransientAttributes(attributes) {
+    const validAttrs = {};
+    Object.keys(attributes).forEach(key => {
+      this.animate.validAttr(key) && (validAttrs[key] = attributes[key]);
+    }), Object.keys(validAttrs).length && (applyAnimationFrameAttributes(this.target, validAttrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag());
+  }
   onUpdate(end, ratio, out) {
-    if (end) return Object.keys(this.to).forEach(k => {
-      this.target.attribute[k] = this.to[k];
-    }), this.target.addUpdatePositionTag(), void this.target.addUpdateShapeAndBoundsTag();
-    if (this.points = this.points.map((point, index) => {
-      const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
-      return newPoint.context = point.context, newPoint;
-    }), this.clipRange) {
-      if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
-      applyAnimationTransientAttributes(this.target, {
-        clipRange: this.clipRange + (1 - this.clipRange) * ratio
-      });
-    }
-    if (this.segmentsCache && this.to.segments) {
-      let start = 0;
-      const segments = this.to.segments.map((segment, index) => {
-        const end = start + this.segmentsCache[index],
-          points = this.points.slice(start, end);
-        return start = end, Object.assign(Object.assign({}, segment), {
-          points: points
+    if (end) this.applyPointTransientAttributes(this.to);else {
+      if (this.points = this.points.map((point, index) => {
+        const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
+        return newPoint.context = point.context, newPoint;
+      }), this.clipRange) {
+        if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
+        applyAnimationTransientAttributes(this.target, {
+          clipRange: this.clipRange + (1 - this.clipRange) * ratio
         });
+      }
+      if (this.segmentsCache && this.to.segments) {
+        let start = 0;
+        const segments = this.to.segments.map((segment, index) => {
+          const end = start + this.segmentsCache[index],
+            points = this.points.slice(start, end);
+          return start = end, Object.assign(Object.assign({}, segment), {
+            points: points
+          });
+        });
+        this.applyPointTransientAttributes({
+          segments: segments
+        });
+      } else this.applyPointTransientAttributes({
+        points: this.points
       });
-      this.target.attribute.segments = segments;
-    } else this.target.attribute.points = this.points;
-    this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    }
   }
 }
 
@@ -41047,10 +41660,10 @@ class CommonIn extends ACustomAnimate {
     }), null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, from);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 class CommonOut extends ACustomAnimate {
@@ -41065,16 +41678,16 @@ class CommonOut extends ACustomAnimate {
     this.keys.forEach(key => {
       var _a;
       to[key] = 0, from[key] = null !== (_a = attrs[key]) && void 0 !== _a ? _a : 1;
-    }), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, Object.assign(this.target.attribute, from), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag();
+    }), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, applyAnimationTransientAttributes(this.target, from, AttributeUpdateType.ANIMATE_BIND), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag();
   }
   onEnd(cb) {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 
@@ -41104,8 +41717,7 @@ class RotateBySphereAnimate extends ACustomAnimate {
   onEnd() {}
   onUpdate(end, ratio, out) {
     if (null == this.phi || null == this.theta) return;
-    const target = this.target,
-      {
+    const {
         center: center,
         r: r,
         cb: cb
@@ -41116,8 +41728,15 @@ class RotateBySphereAnimate extends ACustomAnimate {
       x = r * Math.sin(phi) * Math.cos(theta) + center.x,
       y = r * Math.cos(phi) + center.y,
       z = r * Math.sin(phi) * Math.sin(theta) + center.z;
-    for (target.attribute.x = x, target.attribute.y = y, target.attribute.z = z, target.attribute.alpha = theta + pi$1 / 2; target.attribute.alpha > pi2;) target.attribute.alpha -= pi2;
-    target.attribute.alpha = pi2 - target.attribute.alpha, target.attribute.zIndex = -1e4 * target.attribute.z, cb && cb(out);
+    let alpha = theta + pi$1 / 2;
+    for (; alpha > pi2;) alpha -= pi2;
+    alpha = pi2 - alpha, applyAnimationFrameAttributes(this.target, {
+      x: x,
+      y: y,
+      z: z,
+      alpha: alpha,
+      zIndex: -1e4 * z
+    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag(), cb && cb(out);
   }
 }
 
@@ -41259,15 +41878,23 @@ class GrowAngleBase extends ACustomAnimate {
     this.propKeys ? this.propKeys && this.propKeys.length > 1 ? this._updateFunction = this.updateAngle : "startAngle" === this.propKeys[0] ? this._updateFunction = this.updateStartAngle : "endAngle" === this.propKeys[0] ? this._updateFunction = this.updateEndAngle : this.valid = !1 : this.valid = !1;
   }
   deleteSelfAttr(key) {
-    delete this.props[key], this.fromProps && delete this.fromProps[key];
-    const index = this.propKeys.indexOf(key);
-    -1 !== index && this.propKeys.splice(index, 1), this.propKeys && this.propKeys.length > 1 ? this._updateFunction = this.updateAngle : "startAngle" === this.propKeys[0] ? this._updateFunction = this.updateStartAngle : "endAngle" === this.propKeys[0] ? this._updateFunction = this.updateEndAngle : this._updateFunction = null;
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
+    var _a;
+    super.deleteSelfAttrs(keys);
+    const firstKey = null === (_a = this.propKeys) || void 0 === _a ? void 0 : _a[0];
+    this.propKeys && this.propKeys.length > 1 ? this._updateFunction = this.updateAngle : this._updateFunction = "startAngle" === firstKey ? this.updateStartAngle : "endAngle" === firstKey ? this.updateEndAngle : null;
   }
   updateStartAngle(ratio) {
-    this.target.attribute.startAngle = this.from.startAngle + (this.to.startAngle - this.from.startAngle) * ratio;
+    applyAnimationFrameAttributes(this.target, {
+      startAngle: this.from.startAngle + (this.to.startAngle - this.from.startAngle) * ratio
+    });
   }
   updateEndAngle(ratio) {
-    this.target.attribute.endAngle = this.from.endAngle + (this.to.endAngle - this.from.endAngle) * ratio;
+    applyAnimationFrameAttributes(this.target, {
+      endAngle: this.from.endAngle + (this.to.endAngle - this.from.endAngle) * ratio
+    });
   }
   updateAngle(ratio) {
     this.updateStartAngle(ratio), this.updateEndAngle(ratio);
@@ -41441,10 +42068,10 @@ class GrowCenterIn extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 class GrowCenterOut extends ACustomAnimate {
@@ -41463,10 +42090,10 @@ class GrowCenterOut extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 
@@ -41546,10 +42173,7 @@ class GrowHeightIn extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyAnimationFrameNumberAttributes(this.target, this.propKeys, this.from, this.to, ratio), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 function growHeightOutIndividual(graphic, options, animationParameters) {
@@ -41607,10 +42231,7 @@ class GrowHeightOut extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyAnimationFrameNumberAttributes(this.target, this.propKeys, this.from, this.to, ratio), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 
@@ -41643,7 +42264,9 @@ class GworPointsBase extends ACustomAnimate {
     var _a, _b;
     const fromPoints = null === (_a = this.from) || void 0 === _a ? void 0 : _a.points,
       toPoints = null === (_b = this.to) || void 0 === _b ? void 0 : _b.points;
-    fromPoints && toPoints && (this.target.attribute.points = fromPoints.map((point, index) => pointInterpolation(fromPoints[index], toPoints[index], ratio)), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag());
+    fromPoints && toPoints && (applyAnimationFrameAttributes(this.target, {
+      points: fromPoints.map((point, index) => pointInterpolation(fromPoints[index], toPoints[index], ratio))
+    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag());
   }
 }
 class GrowPointsIn extends GworPointsBase {
@@ -41875,10 +42498,10 @@ class GrowPointsBase extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 class GrowRadiusIn extends GrowPointsBase {
@@ -42018,10 +42641,7 @@ class GrowWidthIn extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyAnimationFrameNumberAttributes(this.target, this.propKeys, this.from, this.to, ratio), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 class GrowWidthOut extends ACustomAnimate {
@@ -42041,10 +42661,7 @@ class GrowWidthOut extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyAnimationFrameNumberAttributes(this.target, this.propKeys, this.from, this.to, ratio), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 
@@ -42817,18 +43434,26 @@ class ScaleIn extends ACustomAnimate {
     super.onEnd(cb);
   }
   updateX(ratio) {
-    this.target.attribute.scaleX = this.from.scaleX + (this.to.scaleX - this.from.scaleX) * ratio;
+    this.applyScaleTransientAttrs(ratio, !0, !1);
   }
   updateY(ratio) {
-    this.target.attribute.scaleY = this.from.scaleY + (this.to.scaleY - this.from.scaleY) * ratio;
+    this.applyScaleTransientAttrs(ratio, !1, !0);
   }
   updateXY(ratio) {
-    this.updateX(ratio), this.updateY(ratio);
+    this.applyScaleTransientAttrs(ratio, !0, !0);
+  }
+  applyScaleTransientAttrs(ratio, scaleX, scaleY) {
+    const attrs = {};
+    scaleX && (attrs.scaleX = this.from.scaleX + (this.to.scaleX - this.from.scaleX) * ratio), scaleY && (attrs.scaleY = this.from.scaleY + (this.to.scaleY - this.from.scaleY) * ratio), applyAnimationFrameAttributes(this.target, attrs);
   }
   deleteSelfAttr(key) {
-    delete this.props[key], this.fromProps && delete this.fromProps[key];
-    const index = this.propKeys.indexOf(key);
-    -1 !== index && this.propKeys.splice(index, 1), this.propKeys && this.propKeys.length > 1 ? this._updateFunction = this.updateXY : "scaleX" === this.propKeys[0] ? this._updateFunction = this.updateX : "scaleY" === this.propKeys[0] ? this._updateFunction = this.updateY : this._updateFunction = null;
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
+    var _a;
+    super.deleteSelfAttrs(keys);
+    const firstKey = null === (_a = this.propKeys) || void 0 === _a ? void 0 : _a[0];
+    this.propKeys && this.propKeys.length > 1 ? this._updateFunction = this.updateXY : this._updateFunction = "scaleX" === firstKey ? this.updateX : "scaleY" === firstKey ? this.updateY : null;
   }
   onUpdate(end, ratio, out) {
     this._updateFunction && (this._updateFunction(ratio), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag());
@@ -42873,10 +43498,10 @@ class ScaleOut extends ACustomAnimate {
     super.onEnd(cb);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag();
   }
 }
 
@@ -42887,14 +43512,19 @@ class State extends ACustomAnimate {
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, 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.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+    this.runInterpolateUpdate(this.fromProps, this.props, easedRatio), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
 }
 
+function buildInterpolatedAttrs(keys, from, to, ratio) {
+  const attrs = {};
+  return keys.forEach(key => {
+    attrs[key] = from[key] + (to[key] - from[key]) * ratio;
+  }), attrs;
+}
+function applyStoryFrame(target, attrs) {
+  applyAnimationFrameAttributes(target, attrs), target.addUpdatePositionTag(), target.addUpdateShapeAndBoundsTag();
+}
 class SlideIn extends ACustomAnimate {
   constructor(from, to, duration, easing, params) {
     super(from, to, duration, easing, params);
@@ -42917,10 +43547,7 @@ class SlideIn extends ACustomAnimate {
     "top" === direction ? (from.y = (null !== (_e = attrs.y) && void 0 !== _e ? _e : 0) - distance, to.y = null !== (_f = attrs.y) && void 0 !== _f ? _f : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "bottom" === direction ? (from.y = (null !== (_g = attrs.y) && void 0 !== _g ? _g : 0) + distance, to.y = null !== (_h = attrs.y) && void 0 !== _h ? _h : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "left" === direction ? (from.x = (null !== (_j = attrs.x) && void 0 !== _j ? _j : 0) - distance, to.x = null !== (_k = attrs.x) && void 0 !== _k ? _k : 0, this.propKeys = ["opacity", "baseOpacity", "x"]) : (from.x = (null !== (_l = attrs.x) && void 0 !== _l ? _l : 0) + distance, to.x = null !== (_m = attrs.x) && void 0 !== _m ? _m : 0, this.propKeys = ["opacity", "baseOpacity", "x"]), this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyStoryFrame(this.target, buildInterpolatedAttrs(this.propKeys, this.from, this.to, ratio));
   }
 }
 class GrowIn extends ACustomAnimate {
@@ -42945,10 +43572,7 @@ class GrowIn extends ACustomAnimate {
     this.propKeys = ["opacity", "baseOpacity"], "x" !== direction && "xy" !== direction || (from.scaleX = fromScale, to.scaleX = null !== (_f = attrs.scaleX) && void 0 !== _f ? _f : 1, this.propKeys.push("scaleX")), "y" !== direction && "xy" !== direction || (from.scaleY = fromScale, to.scaleY = null !== (_g = attrs.scaleY) && void 0 !== _g ? _g : 1, this.propKeys.push("scaleY")), this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyStoryFrame(this.target, buildInterpolatedAttrs(this.propKeys, this.from, this.to, ratio));
   }
 }
 class SpinIn extends ACustomAnimate {
@@ -42979,10 +43603,7 @@ class SpinIn extends ACustomAnimate {
     this.propKeys = ["opacity", "baseOpacity", "angle", "scaleX", "scaleY"], this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyStoryFrame(this.target, buildInterpolatedAttrs(this.propKeys, this.from, this.to, ratio));
   }
 }
 class StrokeIn extends ACustomAnimate {
@@ -43027,8 +43648,10 @@ class StrokeIn extends ACustomAnimate {
   }
   onUpdate(end, ratio, out) {
     var _a;
-    const attribute = this.target.attribute;
-    attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio, (null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
+    const attrs = {
+      lineDashOffset: this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio
+    };
+    (null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attrs.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio), applyAnimationTransientAttributes(this.target, attrs);
   }
   onEnd() {
     var _a;
@@ -43079,8 +43702,10 @@ class StrokeOut extends ACustomAnimate {
   }
   onUpdate(end, ratio, out) {
     var _a;
-    const attribute = this.target.attribute;
-    attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio, (null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
+    const attrs = {
+      lineDashOffset: this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio
+    };
+    (null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attrs.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio), applyAnimationTransientAttributes(this.target, attrs);
   }
 }
 class MoveScaleIn extends ACustomAnimate {
@@ -43177,10 +43802,7 @@ class SlideOut extends ACustomAnimate {
     "top" === direction ? (from.y = null !== (_g = attrs.y) && void 0 !== _g ? _g : 0, to.y = (null !== (_h = attrs.y) && void 0 !== _h ? _h : 0) - distance, this.propKeys = ["opacity", "baseOpacity", "y"]) : "bottom" === direction ? (from.y = null !== (_j = attrs.y) && void 0 !== _j ? _j : 0, to.y = (null !== (_k = attrs.y) && void 0 !== _k ? _k : 0) + distance, this.propKeys = ["opacity", "baseOpacity", "y"]) : "left" === direction ? (from.x = null !== (_l = attrs.x) && void 0 !== _l ? _l : 0, to.x = (null !== (_m = attrs.x) && void 0 !== _m ? _m : 0) - distance, this.propKeys = ["opacity", "baseOpacity", "x"]) : (from.x = null !== (_o = attrs.x) && void 0 !== _o ? _o : 0, to.x = (null !== (_p = attrs.x) && void 0 !== _p ? _p : 0) + distance, this.propKeys = ["opacity", "baseOpacity", "x"]), this.from = from, this.to = to, this.props = to;
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyStoryFrame(this.target, buildInterpolatedAttrs(this.propKeys, this.from, this.to, ratio));
   }
 }
 class GrowOut extends ACustomAnimate {
@@ -43205,10 +43827,7 @@ class GrowOut extends ACustomAnimate {
     this.propKeys = ["opacity", "baseOpacity"], "x" !== direction && "xy" !== direction || (from.scaleX = null !== (_h = attrs.scaleX) && void 0 !== _h ? _h : 1, to.scaleX = toScale, this.propKeys.push("scaleX")), "y" !== direction && "xy" !== direction || (from.scaleY = null !== (_j = attrs.scaleY) && void 0 !== _j ? _j : 1, to.scaleY = toScale, this.propKeys.push("scaleY")), this.from = from, this.to = to, this.props = to;
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyStoryFrame(this.target, buildInterpolatedAttrs(this.propKeys, this.from, this.to, ratio));
   }
 }
 class SpinOut extends ACustomAnimate {
@@ -43239,10 +43858,7 @@ class SpinOut extends ACustomAnimate {
     this.propKeys = ["opacity", "baseOpacity", "angle", "scaleX", "scaleY"], this.from = from, this.to = to, this.props = to;
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
-    this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+    applyStoryFrame(this.target, buildInterpolatedAttrs(this.propKeys, this.from, this.to, ratio));
   }
 }
 class MoveScaleOut extends ACustomAnimate {
@@ -43327,20 +43943,20 @@ class PulseAnimate extends ACustomAnimate {
   onUpdate(end, ratio, out) {
     const angle = ratio * Math.PI * this.pulseCount,
       pulseValue = Math.abs(Math.sin(angle)),
-      attribute = this.target.attribute;
+      attrs = {};
     if (this.useOpacity) {
       const opacity = 1 + (this.pulseOpacity - 1) * pulseValue;
-      this.useStroke && (attribute.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity), this.useFill && (attribute.fillOpacity = (this.originalAttributes.fillOpacity || 1) * opacity);
+      this.useStroke && (attrs.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity), this.useFill && (attrs.fillOpacity = (this.originalAttributes.fillOpacity || 1) * opacity);
     }
     if (this.useScale) {
       const scale = 1 + (this.pulseScale - 1) * pulseValue;
-      attribute.scaleX = (this.originalAttributes.scaleX || 1) * scale, attribute.scaleY = (this.originalAttributes.scaleY || 1) * scale;
+      attrs.scaleX = (this.originalAttributes.scaleX || 1) * scale, attrs.scaleY = (this.originalAttributes.scaleY || 1) * scale;
     }
-    this.useColor && this.pulseColor && this.applyColorPulse(attribute, pulseValue), this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag();
+    this.useColor && this.pulseColor && this.applyColorPulse(attrs, pulseValue), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag();
   }
-  applyColorPulse(attribute, pulseValue) {
+  applyColorPulse(attrs, pulseValue) {
     const colorRatio = this.pulseColorIntensity * pulseValue;
-    this.useFill && this.originalFill && this.pulseColor && (attribute.fill = interpolateColor(this.originalFill, this.pulseColor, colorRatio, !0)), this.useStroke && this.originalStroke && this.pulseColor && (attribute.stroke = interpolateColor(this.originalStroke, this.pulseColor, colorRatio, !0));
+    this.useFill && this.originalFill && this.pulseColor && (attrs.fill = interpolateColor(this.originalFill, this.pulseColor, colorRatio, !0)), this.useStroke && this.originalStroke && this.pulseColor && (attrs.stroke = interpolateColor(this.originalStroke, this.pulseColor, colorRatio, !0));
   }
   onEnd() {
     super.onEnd(), this.target.setAttributes(this.originalAttributes);
@@ -43355,52 +43971,51 @@ const clipPathGeometryAttrs = {
   width: !0,
   height: !0
 };
+function includesChannel(channels, key) {
+  for (let i = 0; i < channels.length; i++) if (channels[i] === key) return !0;
+  return !1;
+}
+function filterExcludedChannels(diffAttrs, excludeChannels) {
+  if (!(null == excludeChannels ? void 0 : excludeChannels.length)) return diffAttrs;
+  const nextAttrs = {};
+  for (const key in diffAttrs) Object.prototype.hasOwnProperty.call(diffAttrs, key) && !includesChannel(excludeChannels, key) && (nextAttrs[key] = diffAttrs[key]);
+  return nextAttrs;
+}
 class Update extends ACustomAnimate {
   constructor(from, to, duration, easing, params) {
-    super(from, to, duration, easing, params), this.clipPathSyncKeys = null, this.clipPathSyncParent = null, this.clipPathSyncChildIndex = -1, this.clipPathSyncDisabled = !1;
+    super(from, to, duration, easing, params), this.updateFromAttrs = null, this.clipPathSyncKeys = null, this.clipPathSyncParent = null, this.clipPathSyncChildIndex = -1, this.clipPathSyncDisabled = !1;
   }
   onBind() {
-    var _a, _b;
+    var _a;
     super.onBind();
+    const targetContext = null !== (_a = this.target.context) && void 0 !== _a ? _a : {};
     let {
       diffAttrs = {}
-    } = null !== (_a = this.target.context) && void 0 !== _a ? _a : {};
+    } = targetContext;
     const {
       options: options
     } = this.params;
-    diffAttrs = Object.assign({}, diffAttrs), (null === (_b = null == options ? void 0 : options.excludeChannels) || void 0 === _b ? void 0 : _b.length) && options.excludeChannels.forEach(channel => {
-      delete diffAttrs[channel];
-    }), this.props = diffAttrs, this.clipPathSyncKeys = Object.keys(diffAttrs).filter(key => clipPathGeometryAttrs[key]), this.clipPathSyncDisabled = !this.clipPathSyncKeys.length, this.syncParentClipPathToTarget();
+    diffAttrs = filterExcludedChannels(diffAttrs, null == options ? void 0 : options.excludeChannels), this.props = diffAttrs;
+    const consumeTransientFromAttrs = this.target.consumeTransientFromAttrsBeforePreventAnimate;
+    this.updateFromAttrs = "function" == typeof consumeTransientFromAttrs ? consumeTransientFromAttrs.call(this.target, diffAttrs) : null, this.clipPathSyncKeys = Object.keys(diffAttrs).filter(key => clipPathGeometryAttrs[key]), this.clipPathSyncDisabled = !this.clipPathSyncKeys.length, this.syncParentClipPathToTarget();
   }
-  getStaticCommitAttrs() {
-    var _a;
-    if (!this.props) return null;
-    const target = this.target,
-      contextFinalAttrs = null === (_a = target.context) || void 0 === _a ? void 0 : _a.finalAttrs,
-      finalAttribute = "function" == typeof target.getFinalAttribute ? target.getFinalAttribute() : target.finalAttribute,
-      commitAttrs = {};
-    return Object.keys(this.props).forEach(key => {
-      contextFinalAttrs && Object.prototype.hasOwnProperty.call(contextFinalAttrs, key) ? commitAttrs[key] = contextFinalAttrs[key] : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, key) ? commitAttrs[key] = finalAttribute[key] : this.animate.validAttr(key) && (commitAttrs[key] = this.props[key]);
-    }), Object.keys(commitAttrs).length ? commitAttrs : null;
+  trySyncStartProps() {
+    const updateFromAttrs = this.updateFromAttrs;
+    this.propKeys.forEach(key => {
+      this.fromProps[key] = updateFromAttrs && Object.prototype.hasOwnProperty.call(updateFromAttrs, key) ? updateFromAttrs[key] : this.animate.target.getComputedAttribute(key);
+    });
   }
   onEnd(cb) {
-    if (cb) return void super.onEnd(cb);
-    const commitAttrs = this.getStaticCommitAttrs();
-    commitAttrs && this.target.setAttributes(commitAttrs, !1, {
-      type: AttributeUpdateType.ANIMATE_END
-    }), this.syncParentClipPathToTarget(), super.onEnd();
+    var _a;
+    cb ? super.onEnd(cb) : (this.props && commitAnimationStaticAttrs(this.target, null !== (_a = this.propKeys) && void 0 !== _a ? _a : Object.keys(this.props), this.animate, this.props), this.syncParentClipPathToTarget(), super.onEnd());
   }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, 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.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.syncParentClipPathToTarget(), this.onUpdate(end, easedRatio, out);
+    this.runInterpolateUpdate(this.fromProps, this.props, easedRatio), this.syncParentClipPathToTarget(), this.onUpdate(end, easedRatio, out);
   }
   syncParentClipPathToTarget() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (this.clipPathSyncDisabled) return;
     const target = this.target,
       parent = target.parent,
@@ -43411,7 +44026,7 @@ class Update extends ACustomAnimate {
     const clipGraphic = path[childIndex];
     if (!(null == clipGraphic ? void 0 : clipGraphic.attribute) || clipGraphic.type !== target.type || !this.isClipPathStaticTarget(clipGraphic)) return;
     const syncAttrs = this.buildClipPathTransientAttrs(clipGraphic);
-    syncAttrs && applyAnimationTransientAttributes(clipGraphic, syncAttrs, AttributeUpdateType.ANIMATE_UPDATE);
+    syncAttrs && (applyAnimationFrameAttributes(clipGraphic, syncAttrs), null === (_c = clipGraphic.addUpdatePositionTag) || void 0 === _c || _c.call(clipGraphic), null === (_d = clipGraphic.addUpdateShapeAndBoundsTag) || void 0 === _d || _d.call(clipGraphic));
   }
   getClipPathSyncChildIndex(parent) {
     var _a;
@@ -43555,10 +44170,10 @@ class MoveBase extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 class MoveIn extends MoveBase {
@@ -43614,10 +44229,10 @@ class RotateBase extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onUpdate(end, ratio, out) {
-    const attribute = this.target.attribute;
+    const attrs = {};
     this.propKeys.forEach(key => {
-      attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-    }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
+      attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+    }), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
   }
 }
 class RotateIn extends RotateBase {
@@ -43660,7 +44275,7 @@ class MotionPath extends ACustomAnimate {
         pos: pos,
         angle: angle
       } = this.path.getAttrAt(at);
-    attrs.x = pos.x, attrs.y = pos.y, this.changeAngle && (attrs.angle = angle + this.initAngle), this.cb && this.cb(this.from, this.to, ratio, this.target), end && this.commitOnEnd ? this.target.setAttributes(attrs) : applyAnimationTransientAttributes(this.target, attrs);
+    attrs.x = pos.x, attrs.y = pos.y, this.changeAngle && (attrs.angle = angle + this.initAngle), this.cb && this.cb(this.from, this.to, ratio, this.target), end && this.commitOnEnd ? this.target.setAttributes(attrs) : (applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag());
   }
 }
 
@@ -45179,7 +45794,10 @@ class AxisUpdate extends AComponentAnimate {
     }), this.completeBind(animator);
   }
   deleteSelfAttr(key) {
-    super.deleteSelfAttr(key), this._animator.deleteSelfAttr(key);
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
+    super.deleteSelfAttrs(keys), this._animator.deleteSelfAttrs(keys);
   }
   tryPreventConflict() {}
 }
@@ -45725,8 +46343,8 @@ class LineAxis extends AxisBase {
     const orient = this.attribute.orient;
     return "left" === orient || "right" === orient ? this.attribute.width ? this.attribute.width : (this.attribute.maxWidth && (offset = Math.min(offset, this.attribute.maxWidth)), this.attribute.minWidth && (offset = Math.max(offset, this.attribute.minWidth)), offset) : offset;
   }
-  release() {
-    super.release(), this._breaks = null;
+  release(all) {
+    super.release(all), this._breaks = null;
   }
 }
 LineAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(LineAxis, LineAxisMixin);
@@ -48099,6 +48717,14 @@ var __rest$8 = undefined && undefined.__rest || function (s, e) {
   }
   return t;
 };
+function cloneAttributeSnapshot(value) {
+  if (!isObject$2(value) || isArray$1(value)) return value;
+  const snapshot = {};
+  return Object.keys(value).forEach(key => {
+    const nextValue = value[key];
+    snapshot[key] = isObject$2(nextValue) && !isArray$1(nextValue) ? cloneAttributeSnapshot(nextValue) : nextValue;
+  }), snapshot;
+}
 loadLabelComponent();
 class LabelBase extends AnimateComponent {
   setBitmap(bitmap) {
@@ -48163,11 +48789,56 @@ class LabelBase extends AnimateComponent {
       return baseMark && baseMark.getAttributes(!0).fill && lineGraphic.setAttribute("stroke", baseMark.getAttributes(!0).fill), this.attribute.line && !isEmpty(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), this._setStatesOfLabelLine(lineGraphic), lineGraphic;
     }
   }
+  _finalizeExitRelease() {
+    var _a, _b, _c, _d;
+    const state = this._exitReleaseState;
+    if (null == state ? void 0 : state.finalized) return;
+    state && (state.finalized = !0);
+    const parent = this.parent,
+      removeFromParent = !!(null == state ? void 0 : state.removeFromParent),
+      callbacks = null !== (_a = null == state ? void 0 : state.onComplete) && void 0 !== _a ? _a : [];
+    this._exitReleaseState = void 0, this._graphicToText = new Map(), null === (_b = this._idToGraphic) || void 0 === _b || _b.clear(), null === (_c = this._idToPoint) || void 0 === _c || _c.clear(), this._baseMarks = void 0, this.removeAllChild(!0), super.release(!0), removeFromParent && (null === (_d = null != parent ? parent : this.parent) || void 0 === _d || _d.removeChild(this)), runExitReleaseCallbacks(callbacks);
+  }
+  _runExitAnimationBeforeRelease(options = {}) {
+    var _a, _b;
+    if (this._exitReleaseState && !this._exitReleaseState.finalized) return this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent, appendExitReleaseCallback(this._exitReleaseState, options.onComplete), !0;
+    if (!this.stage || !1 === this.attribute.animation || !1 === this.attribute.animationExit || !(null === (_a = this._graphicToText) || void 0 === _a ? void 0 : _a.size)) return !1;
+    if (this._prepareAnimate(DefaultLabelAnimation), !(null === (_b = this._animationConfig) || void 0 === _b ? void 0 : _b.exit)) return !1;
+    const exitTargets = new Set();
+    if (this._graphicToText.forEach(label => {
+      (null == label ? void 0 : label.text) && exitTargets.add(label.text), (null == label ? void 0 : label.labelLine) && exitTargets.add(label.labelLine);
+    }), !exitTargets.size) return !1;
+    const existingAnimates = collectTrackedAnimates(this);
+    exitTargets.forEach(target => {
+      var _a;
+      target.applyAnimationState(["exit"], [{
+        name: "exit",
+        animation: Object.assign(Object.assign({}, this._animationConfig.exit), {
+          type: null !== (_a = this._animationConfig.exit.type) && void 0 !== _a ? _a : "fadeOut",
+          selfOnly: !0
+        })
+      }]);
+    });
+    const exitAnimates = collectTrackedAnimates(this).filter(animate => !existingAnimates.includes(animate));
+    if (!exitAnimates.length) return !1;
+    this.setAttribute("childrenPickable", !1), this.releaseStatus = "willRelease";
+    const pendingAnimates = new Set(exitAnimates);
+    return this._exitReleaseState = {
+      pendingAnimates: pendingAnimates,
+      finalized: !1,
+      removeFromParent: !!options.removeFromParent,
+      onComplete: options.onComplete ? [options.onComplete] : []
+    }, bindExitReleaseAnimates(exitAnimates, () => this._exitReleaseState, () => this._finalizeExitRelease()), !0;
+  }
+  releaseWithExitAnimation(options = {}) {
+    return "released" !== this.releaseStatus && this._runExitAnimationBeforeRelease(options);
+  }
   render() {
+    if (this._exitReleaseState) return;
     if (this._prepare(), isNil$1(this._idToGraphic) || this._isCollectionBase && isNil$1(this._idToPoint)) return;
     const markAttributeList = [];
     !1 !== this._enableAnimation && this._baseMarks.forEach(mark => {
-      markAttributeList.push(mark.attribute), mark.initAttributes(mark.getAttributes(!0));
+      markAttributeList.push(cloneAttributeSnapshot(mark.attribute)), mark.initAttributes(mark.getAttributes(!0));
     });
     const {
       overlap: overlap,
@@ -48733,6 +49404,10 @@ class LabelBase extends AnimateComponent {
   _canPlaceInside(textBound, shapeBound) {
     return !(!textBound || !shapeBound) && shapeBound.encloses(textBound);
   }
+  release(all) {
+    var _a, _b;
+    this._exitReleaseState ? this._finalizeExitRelease() : (all && this.removeAllChild(!0), super.release(all), this._graphicToText = new Map(), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), null === (_b = this._idToPoint) || void 0 === _b || _b.clear(), this._baseMarks = void 0);
+  }
   setLocation(point) {
     this.translateTo(point.x, point.y);
   }
@@ -49502,6 +50177,7 @@ class DataLabel extends AbstractComponent {
   }
   render() {
     var _a;
+    if (this._exitReleaseState) return;
     const {
       dataLabels: dataLabels,
       size: size
@@ -49536,6 +50212,47 @@ class DataLabel extends AbstractComponent {
       currentComponentMap.get(key) || this.removeChild(cp);
     }), this._componentMap = currentComponentMap;
   }
+  _finalizeExitRelease() {
+    var _a, _b, _c;
+    const state = this._exitReleaseState;
+    if (null == state ? void 0 : state.finalized) return;
+    state && (state.finalized = !0);
+    const parent = this.parent,
+      removeFromParent = !!(null == state ? void 0 : state.removeFromParent),
+      callbacks = null !== (_a = null == state ? void 0 : state.onComplete) && void 0 !== _a ? _a : [];
+    this._exitReleaseState = void 0, null === (_b = this._componentMap) || void 0 === _b || _b.clear(), this.removeAllChild(!0), super.release(!0), removeFromParent && (null === (_c = null != parent ? parent : this.parent) || void 0 === _c || _c.removeChild(this)), runExitReleaseCallbacks(callbacks);
+  }
+  releaseWithExitAnimation(options = {}) {
+    var _a;
+    if ("released" === this.releaseStatus) return !1;
+    if (this._exitReleaseState && !this._exitReleaseState.finalized) return this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent, appendExitReleaseCallback(this._exitReleaseState, options.onComplete), !0;
+    if (!this.stage || !(null === (_a = this._componentMap) || void 0 === _a ? void 0 : _a.size)) return !1;
+    const state = {
+        pendingCount: 0,
+        finalized: !1,
+        removeFromParent: !!options.removeFromParent,
+        onComplete: options.onComplete ? [options.onComplete] : []
+      },
+      exitingComponents = [],
+      fallbackComponents = [];
+    let initializing = !0;
+    const finish = () => {
+      state.finalized || (state.pendingCount -= 1, state.pendingCount <= 0 && !initializing && this._finalizeExitRelease());
+    };
+    return this._exitReleaseState = state, this._componentMap.forEach(component => {
+      state.pendingCount += 1;
+      component.releaseWithExitAnimation({
+        removeFromParent: !1,
+        onComplete: finish
+      }) ? exitingComponents.push(component) : (state.pendingCount -= 1, fallbackComponents.push(component));
+    }), exitingComponents.length ? (fallbackComponents.forEach(component => {
+      component.release(!0), this.removeChild(component);
+    }), this.setAttribute("childrenPickable", !1), this.releaseStatus = "willRelease", initializing = !1, state.pendingCount <= 0 && this._finalizeExitRelease(), !0) : (this._exitReleaseState = void 0, !1);
+  }
+  release(all) {
+    var _a;
+    this._exitReleaseState ? this._finalizeExitRelease() : (all && this.removeAllChild(!0), super.release(all), null === (_a = this._componentMap) || void 0 === _a || _a.clear());
+  }
   setLocation(point) {
     this.translateTo(point.x, point.y);
   }
@@ -51169,14 +51886,51 @@ class Marker extends AbstractComponent {
       y: clipInRange ? -(null !== (_b = limitRect.y) && void 0 !== _b ? _b : 0) : 0
     });
   }
-  render() {
+  _finalizeExitRelease() {
+    var _a, _b;
+    const state = this._exitReleaseState;
+    if (null == state ? void 0 : state.finalized) return;
+    state && (state.finalized = !0);
+    const parent = this.parent,
+      removeFromParent = !!(null == state ? void 0 : state.removeFromParent),
+      releaseSelf = !!(null == state ? void 0 : state.releaseSelf),
+      callbacks = null !== (_a = null == state ? void 0 : state.onComplete) && void 0 !== _a ? _a : [];
+    this._exitReleaseState = void 0, this._releaseEvent(), this._container = null, this._containerClip = null, this.removeAllChild(!0), releaseSelf && (super.release(!0), removeFromParent && (null === (_b = null != parent ? parent : this.parent) || void 0 === _b || _b.removeChild(this))), runExitReleaseCallbacks(callbacks);
+  }
+  _runExitAnimationBeforeCleanup(options = {}) {
     var _a;
+    const releaseSelf = !!options.releaseSelf;
+    if (this._exitReleaseState && !this._exitReleaseState.finalized) return this._exitReleaseState.releaseSelf = this._exitReleaseState.releaseSelf || releaseSelf, this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent, appendExitReleaseCallback(this._exitReleaseState, options.onComplete), !0;
+    if (!this.stage || !1 === this.attribute.animation || !1 === this.attribute.animationExit || !this._container) return !1;
+    if (this.transAnimationConfig(), !(null === (_a = this._animationConfig) || void 0 === _a ? void 0 : _a.exit)) return !1;
+    const existingAnimates = collectTrackedAnimates(this);
+    this.markerAnimate("exit");
+    const exitAnimates = collectTrackedAnimates(this).filter(animate => !existingAnimates.includes(animate));
+    if (!exitAnimates.length) return !1;
+    this._releaseEvent(), this.setAttribute("childrenPickable", !1), releaseSelf && (this.releaseStatus = "willRelease");
+    const pendingAnimates = new Set(exitAnimates);
+    return this._exitReleaseState = {
+      pendingAnimates: pendingAnimates,
+      finalized: !1,
+      releaseSelf: releaseSelf,
+      removeFromParent: !!options.removeFromParent,
+      onComplete: options.onComplete ? [options.onComplete] : []
+    }, bindExitReleaseAnimates(exitAnimates, () => this._exitReleaseState, () => this._finalizeExitRelease()), !0;
+  }
+  releaseWithExitAnimation(options = {}) {
+    return "released" !== this.releaseStatus && this._runExitAnimationBeforeCleanup(Object.assign(Object.assign({}, options), {
+      releaseSelf: !0
+    }));
+  }
+  render() {
+    var _a, _b;
+    if (null === (_a = this._exitReleaseState) || void 0 === _a ? void 0 : _a.releaseSelf) return;
     this.transAnimationConfig(), this.setAttribute("pickable", !1);
-    const markerVisible = null === (_a = this.attribute.visible) || void 0 === _a || _a;
-    !1 === this.attribute.interactive && this.setAttribute("childrenPickable", !1), markerVisible && this.isValidPoints() ? this._container ? (this._updateContainer(), this.updateMarker(), this.markerAnimate("update")) : (this._initContainer(), this.initMarker(this._container), this.markerAnimate("enter")) : (this.markerAnimate("exit"), this._container = null, this.removeAllChild(!0)), this._releaseEvent(), this._bindEvent();
+    const markerVisible = null === (_b = this.attribute.visible) || void 0 === _b || _b;
+    !1 === this.attribute.interactive && this.setAttribute("childrenPickable", !1), markerVisible && this.isValidPoints() ? (this._exitReleaseState && this._finalizeExitRelease(), this._container ? (this._updateContainer(), this.updateMarker(), this.markerAnimate("update")) : (this._initContainer(), this.initMarker(this._container), this.markerAnimate("enter"))) : this._runExitAnimationBeforeCleanup() || (this._container = null, this._containerClip = null, this.removeAllChild(!0)), this._releaseEvent(), this._bindEvent();
   }
-  release() {
-    this.markerAnimate("exit"), super.release(), this._releaseEvent(), this._container = null;
+  release(all) {
+    this._exitReleaseState ? this._finalizeExitRelease() : (!1 !== this.attribute.animation && !1 !== this.attribute.animationExit && this.markerAnimate("exit"), all && this.removeAllChild(!0), super.release(all), this._releaseEvent(), this._container = null, this._containerClip = null);
   }
 }
 
@@ -53439,7 +54193,10 @@ let DiscreteLegend$1 = class DiscreteLegend extends LegendBase {
     const innerGroupHeight = innerGroupBounds.height(),
       itemGroupWidth = isValid$1(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3],
       itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
-    return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
+    return itemGroup.setAttributes({
+      width: itemGroupWidth,
+      height: itemGroupHeight
+    }), focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
   }
   _createPager(compStyle) {
     var _a, _b;
@@ -55076,7 +55833,11 @@ let Title$1 = class Title extends AbstractComponent {
       subTextBoundsWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
     let totalWidth = Math.max(mainTextBoundsWidth, subTextBoundsWidth),
       totalHeight = mainTextBoundsHeight + (null !== (_q = subtextStyle.height) && void 0 !== _q ? _q : subTextBoundsHeight);
-    if (isValid$1(width) && (totalWidth = width), isValid$1(height) && (totalHeight = height), isValid$1(minWidth) && totalWidth < minWidth && (totalWidth = minWidth), isValid$1(maxWidth) && totalWidth > maxWidth && (totalWidth = maxWidth), isValid$1(minHeight) && totalHeight < minHeight && (totalHeight = minHeight), isValid$1(maxHeight) && totalHeight > maxHeight && (totalHeight = maxHeight), group.attribute.width = totalWidth, group.attribute.height = totalHeight, group.attribute.boundsPadding = parsedPadding, this._mainTitle) {
+    if (isValid$1(width) && (totalWidth = width), isValid$1(height) && (totalHeight = height), isValid$1(minWidth) && totalWidth < minWidth && (totalWidth = minWidth), isValid$1(maxWidth) && totalWidth > maxWidth && (totalWidth = maxWidth), isValid$1(minHeight) && totalHeight < minHeight && (totalHeight = minHeight), isValid$1(maxHeight) && totalHeight > maxHeight && (totalHeight = maxHeight), group.setAttributes({
+      width: totalWidth,
+      height: totalHeight,
+      boundsPadding: parsedPadding
+    }), this._mainTitle) {
       if (isValid$1(align) || isValid$1(textStyle.align)) {
         const mainTitleAlign = textStyle.align ? textStyle.align : align,
           mainTitleWidth = null !== (_r = textStyle.width) && void 0 !== _r ? _r : totalWidth;
@@ -60309,7 +61070,7 @@ class Compiler {
                 stage.release();
             }
             else if (rootGroup) {
-                stage.defaultLayer.removeChild(rootGroup);
+                stage.defaultLayer.removeChild(rootGroup, true);
                 rootGroup.release();
             }
         }
@@ -60327,7 +61088,7 @@ class Compiler {
         if (removeGraphicItems) {
             this._rootMarks.forEach(g => {
                 traverseGroupMark(g, m => {
-                    m.removeProduct();
+                    m.removeProduct(true);
                 }, null, true);
             });
         }
@@ -60502,6 +61263,71 @@ function calculateChartSize(spec, option, defaultSize) {
         height
     };
 }
+const UPDATE_SPEC_EFFECT_KEYS = [
+    'remake',
+    'compile',
+    'render',
+    'layout',
+    'data',
+    'scaleDomain',
+    'series',
+    'component',
+    'animation',
+    'localOnly'
+];
+function mergeUpdateSpecEffects(target, ...sources) {
+    sources.forEach(source => {
+        const sourceEffects = source === null || source === void 0 ? void 0 : source.effects;
+        if (!sourceEffects) {
+            return;
+        }
+        if (!target.effects) {
+            target.effects = {};
+        }
+        const targetEffects = target.effects;
+        UPDATE_SPEC_EFFECT_KEYS.forEach(key => {
+            if (sourceEffects[key]) {
+                targetEffects[key] = targetEffects[key] || sourceEffects[key];
+            }
+        });
+    });
+}
+function isUpdateSpecResultLocalOnly(result) {
+    const effects = result.effects;
+    return (!!(effects === null || effects === void 0 ? void 0 : effects.localOnly) &&
+        !result.reMake &&
+        !result.reCompile &&
+        !result.reRender &&
+        !result.reSize &&
+        !effects.remake &&
+        !effects.compile &&
+        !effects.render &&
+        !effects.layout &&
+        !effects.data &&
+        !effects.scaleDomain &&
+        !effects.series &&
+        !result.reTransformSpec &&
+        !result.reAnimate &&
+        !result.changeTheme &&
+        !result.changeBackground);
+}
+function isUpdateSpecResultComponentOnly(result) {
+    const effects = result.effects;
+    return (!!(effects === null || effects === void 0 ? void 0 : effects.component) &&
+        !result.reMake &&
+        !result.reCompile &&
+        !result.reSize &&
+        !effects.remake &&
+        !effects.compile &&
+        !effects.data &&
+        !effects.scaleDomain &&
+        !effects.series &&
+        !effects.animation &&
+        !result.reTransformSpec &&
+        !result.reAnimate &&
+        !result.changeTheme &&
+        !result.changeBackground);
+}
 function mergeUpdateResult(target, ...sources) {
     const merge = (key) => sources.reduce((value, cur) => value || (cur === null || cur === void 0 ? void 0 : cur[key]), target[key]);
     Object.assign(target, {
@@ -60514,6 +61340,7 @@ function mergeUpdateResult(target, ...sources) {
         changeTheme: merge('changeTheme'),
         changeBackground: merge('changeBackground')
     });
+    mergeUpdateSpecEffects(target, ...sources);
     return target;
 }
 function getTrimPaddingConfig(chartType, spec) {
@@ -62728,7 +63555,7 @@ class CompilableData extends GrammarItem {
         this._data = null;
         this._data = dataView;
     }
-    removeProduct() {
+    removeProduct(_releaseDetach) {
         this._product = null;
         this._prevProduct = null;
         this._compiledProductId = null;
@@ -62902,6 +63729,34 @@ const morph = (prevMarks, nextMarks, morphConfig = {}) => {
 };
 
 const normalizeStates = (states) => (Array.isArray(states) ? states : states ? [states] : []);
+const isSameStates = (currentStates, nextStates) => {
+    const current = currentStates !== null && currentStates !== void 0 ? currentStates : [];
+    if (current.length !== nextStates.length) {
+        return false;
+    }
+    return current.every((stateName, index) => stateName === nextStates[index]);
+};
+const setGraphicStates = (graphic, nextStates, hasAnimation) => {
+    var _a;
+    if (graphic.setStates) {
+        graphic.setStates(nextStates, {
+            animate: hasAnimation,
+            animateSameStatePatchChange: true
+        });
+        return;
+    }
+    const normalizedNextStates = nextStates !== null && nextStates !== void 0 ? nextStates : [];
+    if (isSameStates(graphic.currentStates, normalizedNextStates)) {
+        (_a = graphic.invalidateResolver) === null || _a === void 0 ? void 0 : _a.call(graphic);
+        return;
+    }
+    if (normalizedNextStates.length) {
+        graphic.useStates(normalizedNextStates, hasAnimation);
+    }
+    else {
+        graphic.clearStates(hasAnimation);
+    }
+};
 const addGraphicState = (graphic, state, keepCurrentStates = true, hasAnimation) => {
     var _a;
     if (!state) {
@@ -62909,7 +63764,7 @@ const addGraphicState = (graphic, state, keepCurrentStates = true, hasAnimation)
     }
     const currentStates = keepCurrentStates ? (_a = graphic.currentStates) !== null && _a !== void 0 ? _a : [] : [];
     const nextStates = keepCurrentStates ? Array.from(new Set([...currentStates, state])) : [state];
-    graphic.useStates(nextStates, hasAnimation);
+    setGraphicStates(graphic, nextStates, hasAnimation);
 };
 const removeGraphicState = (graphic, state, hasAnimation) => {
     var _a;
@@ -62919,9 +63774,10 @@ const removeGraphicState = (graphic, state, hasAnimation) => {
     }
     const currentStates = ((_a = graphic.currentStates) !== null && _a !== void 0 ? _a : []);
     const nextStates = currentStates.filter((stateName) => !states.includes(stateName));
-    graphic.useStates(nextStates, hasAnimation);
+    setGraphicStates(graphic, nextStates, hasAnimation);
 };
 
+const statesClearedBeforeReInitKey = Symbol('statesClearedBeforeReInit');
 class BaseMark extends GrammarItem {
     commit(render, recursion) {
         if (recursion && this.getMarks().length > 0) {
@@ -63127,9 +63983,9 @@ class BaseMark extends GrammarItem {
     }
     resumeAnimationByState(state) {
     }
-    removeProduct() {
+    removeProduct(releaseDetach) {
         if (this._product && this._product.parent) {
-            this._product.parent.removeChild(this._product);
+            this._product.parent.removeChild(this._product, releaseDetach);
         }
         this._product = null;
         this._compiledProductId = null;
@@ -63159,6 +64015,9 @@ class BaseMark extends GrammarItem {
         this._unCompileChannel = {};
         this._disabledAnimationStates = [];
         this._skipBeforeLayouted = false;
+        this._sharedStateDefinitionRefIds = new WeakMap();
+        this._sharedStateDefinitionRefId = 0;
+        this._dynamicSharedStateNames = new Set();
         this._extensionChannel = {};
         this._computeExChannel = {};
         this._graphicMap = new Map();
@@ -63193,11 +64052,19 @@ class BaseMark extends GrammarItem {
             }
         };
         this._setStateOfGraphic = (g, hasAnimation) => {
-            g.clearStates();
+            var _a, _b, _c;
             g.stateProxy = null;
-            if (g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update) {
-                g.context.states && g.useStates(g.context.states, hasAnimation);
+            const targetStates = g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update
+                ? g.context.states
+                : undefined;
+            const hasCurrentState = !!((_a = g.currentStates) === null || _a === void 0 ? void 0 : _a.length) ||
+                !!((_b = g.effectiveStates) === null || _b === void 0 ? void 0 : _b.length) ||
+                !!g.resolvedStatePatch ||
+                !!((_c = g.registeredActiveScopes) === null || _c === void 0 ? void 0 : _c.size);
+            if (!(targetStates === null || targetStates === void 0 ? void 0 : targetStates.length) && !hasCurrentState) {
+                return;
             }
+            setGraphicStates(g, targetStates, hasAnimation);
         };
         this.name = name;
         this.model = option.model;
@@ -63731,6 +64598,9 @@ class BaseMark extends GrammarItem {
             if (state === 'appear') {
                 return;
             }
+            if (state === 'update' && !this._hasDiffAttrs(g)) {
+                return;
+            }
             const config = animationConfig[state];
             if (config && config.length > 0) {
                 const configList = config.map((item, index) => ({
@@ -63896,6 +64766,48 @@ class BaseMark extends GrammarItem {
         });
         return { updateStyles, groupStyles };
     }
+    _getSharedStateDefinitionRefId(value) {
+        if ((typeof value !== 'object' && typeof value !== 'function') || value === null) {
+            return `${value}`;
+        }
+        const objectValue = value;
+        let id = this._sharedStateDefinitionRefIds.get(objectValue);
+        if (!id) {
+            id = ++this._sharedStateDefinitionRefId;
+            this._sharedStateDefinitionRefIds.set(objectValue, id);
+        }
+        return `ref:${id}`;
+    }
+    _getSharedStateDefinitionValueKey(value) {
+        try {
+            const jsonValue = JSON.stringify(value);
+            return jsonValue !== null && jsonValue !== void 0 ? jsonValue : `${value}`;
+        }
+        catch (_error) {
+            return this._getSharedStateDefinitionRefId(value);
+        }
+    }
+    _isStaticSharedStateAttribute(stateName, key) {
+        var _a, _b;
+        const stateStyle = (_a = this.stateStyle[stateName]) === null || _a === void 0 ? void 0 : _a[key];
+        if (!stateStyle || stateStyle.referer || isFunction$1(stateStyle.postProcess) || key in this._computeExChannel) {
+            return false;
+        }
+        const style = stateStyle.style;
+        if (isFunction$1(style)) {
+            return false;
+        }
+        if (GradientType.includes(style === null || style === void 0 ? void 0 : style.gradient)) {
+            return false;
+        }
+        if (['outerBorder', 'innerBorder'].includes(key)) {
+            return false;
+        }
+        if (isValidScaleType((_b = style === null || style === void 0 ? void 0 : style.scale) === null || _b === void 0 ? void 0 : _b.type)) {
+            return false;
+        }
+        return true;
+    }
     _applySharedStateDefinitions() {
         var _a;
         if (!this._product) {
@@ -63903,7 +64815,10 @@ class BaseMark extends GrammarItem {
         }
         const stateNames = Object.keys((_a = this._encoderOfState) !== null && _a !== void 0 ? _a : {}).filter(stateName => stateName !== 'group' && stateName !== 'update');
         if (!stateNames.length) {
-            this._product.sharedStateDefinitions = undefined;
+            this._dynamicSharedStateNames.clear();
+            if (this._product.sharedStateDefinitions !== undefined) {
+                this._product.sharedStateDefinitions = undefined;
+            }
             return;
         }
         const sortedStateNames = this._stateSort ? stateNames.slice().sort(this._stateSort) : stateNames;
@@ -63912,15 +64827,71 @@ class BaseMark extends GrammarItem {
             statePriority.set(stateName, index);
         });
         const sharedStateDefinitions = {};
+        const cacheKeys = [];
+        const dynamicSharedStateNames = new Set();
         stateNames.forEach(stateName => {
             var _a;
             const encoder = this._encoderOfState[stateName];
-            sharedStateDefinitions[stateName] = {
-                priority: (_a = statePriority.get(stateName)) !== null && _a !== void 0 ? _a : 0,
-                declaredAffectedKeys: Object.keys(encoder !== null && encoder !== void 0 ? encoder : {}),
-                resolver: ({ graphic }) => this._runEncoderOfGraphic(encoder, graphic)
+            const patch = {};
+            const dynamicEncoder = {};
+            const patchKeys = [];
+            const dynamicKeys = [];
+            Object.keys(encoder !== null && encoder !== void 0 ? encoder : {}).forEach(key => {
+                if (this._isStaticSharedStateAttribute(stateName, key)) {
+                    patch[key] = this._computeAttribute(key, stateName)(undefined);
+                    patchKeys.push(key);
+                }
+                else {
+                    dynamicEncoder[key] = encoder[key];
+                    dynamicKeys.push(key);
+                }
+            });
+            if (!patchKeys.length && !dynamicKeys.length) {
+                return;
+            }
+            const definition = {
+                priority: (_a = statePriority.get(stateName)) !== null && _a !== void 0 ? _a : 0
             };
+            if (patchKeys.length) {
+                definition.patch = patch;
+            }
+            if (dynamicKeys.length) {
+                dynamicSharedStateNames.add(stateName);
+                definition.declaredAffectedKeys = dynamicKeys;
+                definition.resolver = ({ graphic }) => this._runEncoderOfGraphic(dynamicEncoder, graphic);
+            }
+            sharedStateDefinitions[stateName] = definition;
+            cacheKeys.push([
+                stateName,
+                definition.priority,
+                patchKeys.sort().map(key => `${key}:${this._getSharedStateDefinitionValueKey(patch[key])}`),
+                dynamicKeys.sort().map(key => {
+                    var _a;
+                    const stateStyle = (_a = this.stateStyle[stateName]) === null || _a === void 0 ? void 0 : _a[key];
+                    const styleId = this._getSharedStateDefinitionRefId(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.style);
+                    const postProcessId = this._getSharedStateDefinitionRefId(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.postProcess);
+                    const refererId = this._getSharedStateDefinitionRefId(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.referer);
+                    return `${key}:${styleId}:${postProcessId}:${refererId}`;
+                })
+            ].join('|'));
         });
+        if (!cacheKeys.length) {
+            this._dynamicSharedStateNames.clear();
+            if (this._product.sharedStateDefinitions !== undefined) {
+                this._product.sharedStateDefinitions = undefined;
+            }
+            return;
+        }
+        const cacheKey = cacheKeys.sort().join('||');
+        this._dynamicSharedStateNames = dynamicSharedStateNames;
+        if (cacheKey === this._sharedStateDefinitionsCacheKey && this._sharedStateDefinitionsCache) {
+            if (this._product.sharedStateDefinitions !== this._sharedStateDefinitionsCache) {
+                this._product.sharedStateDefinitions = this._sharedStateDefinitionsCache;
+            }
+            return;
+        }
+        this._sharedStateDefinitionsCacheKey = cacheKey;
+        this._sharedStateDefinitionsCache = sharedStateDefinitions;
         this._product.sharedStateDefinitions = sharedStateDefinitions;
     }
     _addProgressiveGraphic(parent, g) {
@@ -63939,6 +64910,36 @@ class BaseMark extends GrammarItem {
             g.context.finalAttrs = finalAttrs;
         });
     }
+    _excludeStateControlledDiffAttrs(g, diffAttrs) {
+        var _a;
+        if (!diffAttrs || !Object.keys(diffAttrs).length) {
+            return diffAttrs;
+        }
+        let nextDiffAttrs;
+        const excludeKey = (key) => {
+            if (!(key in diffAttrs)) {
+                return;
+            }
+            if (!nextDiffAttrs) {
+                nextDiffAttrs = Object.assign({}, diffAttrs);
+            }
+            delete nextDiffAttrs[key];
+        };
+        if (g.resolvedStatePatch) {
+            Object.keys(g.resolvedStatePatch).forEach(excludeKey);
+        }
+        (_a = g.context.states) === null || _a === void 0 ? void 0 : _a.forEach(stateName => {
+            var _a;
+            const encoder = (_a = this._encoderOfState) === null || _a === void 0 ? void 0 : _a[stateName];
+            if (encoder) {
+                Object.keys(encoder).forEach(excludeKey);
+            }
+        });
+        return nextDiffAttrs !== null && nextDiffAttrs !== void 0 ? nextDiffAttrs : diffAttrs;
+    }
+    _hasDiffAttrs(g) {
+        return !!g.context.diffAttrs && Object.keys(g.context.diffAttrs).length > 0;
+    }
     _runApplyGraphic(graphics) {
         const hasAnimation = this.hasAnimation();
         graphics.forEach((g, index) => {
@@ -63971,11 +64972,11 @@ class BaseMark extends GrammarItem {
                 }
             }
             else {
-                const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
+                const diffAttrs = this._excludeStateControlledDiffAttrs(g, getDiffAttributesOfGraphic(g, finalAttrs));
                 g.context.diffAttrs = diffAttrs;
                 if (g.context.reusing) {
                     g.context.lastAttrs = g.attribute;
-                    g.initAttributes({});
+                    g.initAttributes(finalAttrs);
                     g.context.reusing = false;
                 }
                 else if (!hasStateAnimation) {
@@ -64127,11 +65128,24 @@ class BaseMark extends GrammarItem {
         }
         const stateInfo = this.state.getStateInfo(key);
         this._graphics.forEach(g => {
+            const reinitStateGraphic = g;
+            const statesClearedBeforeReInit = reinitStateGraphic[statesClearedBeforeReInitKey];
+            const wasStateClearedBeforeReInit = statesClearedBeforeReInit === null || statesClearedBeforeReInit === void 0 ? void 0 : statesClearedBeforeReInit.includes(key);
+            const hasStateAnimation = wasStateClearedBeforeReInit ? false : this.hasAnimationByState('state');
             if (this.state.checkOneState(g, g.context.data, stateInfo) === 'in') {
-                addGraphicState(g, key, true, this.hasAnimationByState('state'));
+                addGraphicState(g, key, true, hasStateAnimation);
             }
             else {
-                removeGraphicState(g, key, this.hasAnimationByState('state'));
+                removeGraphicState(g, key, hasStateAnimation);
+            }
+            if (wasStateClearedBeforeReInit) {
+                const nextStates = statesClearedBeforeReInit.filter(stateName => stateName !== key);
+                if (nextStates.length) {
+                    reinitStateGraphic[statesClearedBeforeReInitKey] = nextStates;
+                }
+                else {
+                    delete reinitStateGraphic[statesClearedBeforeReInitKey];
+                }
             }
         });
     }
@@ -64159,7 +65173,9 @@ class BaseMark extends GrammarItem {
                         animation: Object.assign(Object.assign({}, item), { customParameters: g.context })
                     }));
                     g.applyAnimationState(['exit'], [exitConfigList.length === 1 ? exitConfigList[0] : exitConfigList], () => {
-                        doRemove(g, key);
+                        if (g.context.diffState === DiffState.exit && g.isExiting && this._graphicMap.get(key) === g) {
+                            doRemove(g, key);
+                        }
                     });
                 }
             }
@@ -64334,7 +65350,10 @@ class BaseMark extends GrammarItem {
         this.uncommit();
         this.stateStyle = {};
         this.getGraphics().forEach(g => {
-            g.clearStates();
+            var _a;
+            if ((_a = g.currentStates) === null || _a === void 0 ? void 0 : _a.length) {
+                g[statesClearedBeforeReInitKey] = g.currentStates.slice();
+            }
         });
     }
 }
@@ -64465,7 +65484,7 @@ class GroupMark extends BaseMark {
     }
     release() {
         super.release();
-        this.removeProduct();
+        this.removeProduct(true);
     }
 }
 GroupMark.type = "group";
@@ -65279,6 +66298,38 @@ class VChartPluginService extends BasePluginService {
     }
 }
 
+const releaseVRenderComponentSync = (component, removeFromParent = true) => {
+    var _a, _b, _c, _d, _e;
+    const parent = component.parent;
+    (_a = component.release) === null || _a === void 0 ? void 0 : _a.call(component, true);
+    (_c = (_b = component).removeAllChild) === null || _c === void 0 ? void 0 : _c.call(_b, true);
+    if (removeFromParent) {
+        (_e = ((_d = component.parent) !== null && _d !== void 0 ? _d : parent)) === null || _e === void 0 ? void 0 : _e.removeChild(component, true);
+    }
+};
+const collectVRenderComponents = (component) => {
+    var _a, _b;
+    const components = [component];
+    (_b = (_a = component).forEachChildren) === null || _b === void 0 ? void 0 : _b.call(_a, child => {
+        components.push(...collectVRenderComponents(child));
+    });
+    return components;
+};
+const releaseVRenderComponent = (component, options = {}) => {
+    var _a, _b;
+    const { enableExitAnimation = true, removeFromParent = true, onComplete } = options;
+    const releasedWithExit = enableExitAnimation &&
+        ((_b = (_a = component).releaseWithExitAnimation) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            removeFromParent,
+            onComplete
+        }));
+    if (releasedWithExit) {
+        return true;
+    }
+    releaseVRenderComponentSync(component, removeFromParent);
+    return false;
+};
+
 class VChart {
     static useRegisters(comps) {
         comps.forEach((fn) => {
@@ -65528,7 +66579,7 @@ class VChart {
         this._compiler.updateLayoutTag();
         this._setFontFamilyTheme(this.getTheme('fontFamily'));
         this._initDataSet(this._option.dataSet);
-        this._autoSize = isTrueBrowseEnv ? ((_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true) : false;
+        this._autoSize = isTrueBrowseEnv ? (_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true : false;
         this._bindResizeEvent();
         this._bindViewEvent();
         this._initChartPlugin();
@@ -65682,6 +66733,9 @@ class VChart {
             this._updateAnimateState(true);
         }
         this._reCompile(updateSpecResult);
+        if (isUpdateSpecResultLocalOnly(updateSpecResult)) {
+            return this;
+        }
         if (sync) {
             return this._renderSync(option);
         }
@@ -65699,7 +66753,7 @@ class VChart {
         if (updateResult.reMake) {
             this._releaseData();
             this._initDataSet();
-            (_a = this._chart) === null || _a === void 0 ? void 0 : _a.release();
+            (_a = this._chart) === null || _a === void 0 ? void 0 : _a.release(false);
             this._chart = null;
         }
         if (updateResult.reTransformSpec) {
@@ -65810,6 +66864,7 @@ class VChart {
         this._chartPluginApply('releaseAll');
         this._chartPlugin = null;
         this._chartSpecTransformer = null;
+        this._forceReleaseExitingVRenderComponents();
         (_b = this._chart) === null || _b === void 0 ? void 0 : _b.release();
         (_c = this._eventDispatcher) === null || _c === void 0 ? void 0 : _c.release();
         (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.release();
@@ -65832,6 +66887,25 @@ class VChart {
         this._isReleased = true;
         InstanceManager.unregisterInstance(this);
     }
+    _registerExitingVRenderComponent(component) {
+        var _a;
+        this._exitingVRenderComponents = (_a = this._exitingVRenderComponents) !== null && _a !== void 0 ? _a : new Set();
+        this._exitingVRenderComponents.add(component);
+    }
+    _unregisterExitingVRenderComponent(component) {
+        var _a;
+        (_a = this._exitingVRenderComponents) === null || _a === void 0 ? void 0 : _a.delete(component);
+    }
+    _forceReleaseExitingVRenderComponents() {
+        var _a;
+        if (!((_a = this._exitingVRenderComponents) === null || _a === void 0 ? void 0 : _a.size)) {
+            return;
+        }
+        this._exitingVRenderComponents.forEach(component => {
+            releaseVRenderComponentSync(component);
+        });
+        this._exitingVRenderComponents.clear();
+    }
     updateData(id, data, parserOptions, userUpdateOptions) {
         return __awaiter$b(this, void 0, void 0, function* () {
             return this.updateDataSync(id, data, parserOptions, userUpdateOptions);
@@ -65995,9 +67069,13 @@ class VChart {
             spec = mergeSpec({}, model.getSpec(), spec);
         }
         const result = model.updateSpec(spec);
-        model.reInit(spec);
-        if (result.change || result.reCompile || result.reMake || result.reSize || result.reRender) {
-            this._chart.reDataFlow();
+        const localOnly = isUpdateSpecResultLocalOnly(result);
+        const componentOnly = isUpdateSpecResultComponentOnly(result);
+        if (!localOnly) {
+            model.reInit(spec);
+            if (!componentOnly && (result.change || result.reCompile || result.reMake || result.reSize || result.reRender)) {
+                this._chart.reDataFlow();
+            }
         }
         return this.updateCustomConfigAndRerender(result, sync, {
             morphConfig,
@@ -66178,7 +67256,7 @@ class VChart {
             resize = true;
         }
         const lasAutoSize = this._autoSize;
-        this._autoSize = isTrueBrowser(this._option.mode) ? ((_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true) : false;
+        this._autoSize = isTrueBrowser(this._option.mode) ? (_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true : false;
         if (this._autoSize !== lasAutoSize) {
             resize = true;
         }
@@ -67331,6 +68409,8 @@ const defaultSeriesIgnoreCheckKeys = {
     data: true
 };
 const defaultSeriesCompileCheckKeys = {
+    xField: true,
+    yField: true,
     invalidType: true,
     animation: true,
     animationAppear: true,
@@ -67339,6 +68419,13 @@ const defaultSeriesCompileCheckKeys = {
     animationExit: true,
     animationNormal: true
 };
+const defaultSeriesCompileOnlyCheckKeys = {
+    animationAppear: true,
+    animationEnter: true,
+    animationUpdate: true,
+    animationExit: true,
+    animationNormal: true
+};
 
 const AnimationStates = [...Object.keys(DEFAULT_ANIMATION_CONFIG), 'normal'];
 function animationConfig(defaultConfig = {}, userConfig, params) {
@@ -67694,6 +68781,40 @@ function getDefaultInteractionConfigByMode(mode) {
     return null;
 }
 
+const defaultSeriesDataRelatedCheckKeys = Object.keys(defaultSeriesCompileCheckKeys).reduce((keys, key) => {
+    if (!defaultSeriesCompileOnlyCheckKeys[key]) {
+        keys[key] = true;
+    }
+    return keys;
+}, {});
+const defaultSeriesSpecUpdatePolicy = {
+    compileOnlyKeys: defaultSeriesCompileOnlyCheckKeys,
+    dataRelatedKeys: defaultSeriesDataRelatedCheckKeys
+};
+const isSpecObject = (value) => isObject$2(value) && !isArray$1(value) && !isFunction$1(value);
+const hasOnlyAllowedSubKeyChanges = (specValue, prevSpecValue, allowedSubKeys) => {
+    if (!isSpecObject(specValue) || !isSpecObject(prevSpecValue)) {
+        return false;
+    }
+    let changed = false;
+    const subKeys = Array.from(new Set([...Object.keys(prevSpecValue), ...Object.keys(specValue)]));
+    for (const subKey of subKeys) {
+        if (!isEqual(specValue[subKey], prevSpecValue[subKey])) {
+            if (!allowedSubKeys[subKey]) {
+                return false;
+            }
+            changed = true;
+        }
+    }
+    return changed;
+};
+function markSeriesCompileEffect(compareResult, dataRelated = false) {
+    compareResult.effects = Object.assign(Object.assign({}, compareResult.effects), { series: true, compile: true, layout: true, render: true });
+    if (dataRelated) {
+        compareResult.effects.data = true;
+        compareResult.effects.scaleDomain = true;
+    }
+}
 class BaseSeries extends BaseModel {
     getRegion() {
         return this._region;
@@ -68392,9 +69513,14 @@ class BaseSeries extends BaseModel {
                 return !isEqual(prev, newLabels[index]);
             })) {
             compareResult.reCompile = true;
+            markSeriesCompileEffect(compareResult);
         }
     }
+    _getSpecUpdatePolicy() {
+        return defaultSeriesSpecUpdatePolicy;
+    }
     _compareSpec(spec, prevSpec, ignoreCheckKeys) {
+        var _a, _b, _c, _d;
         const result = super._compareSpec(spec, prevSpec);
         const currentKeys = Object.keys(prevSpec || {}).sort();
         const nextKeys = Object.keys(spec || {}).sort();
@@ -68402,7 +69528,12 @@ class BaseSeries extends BaseModel {
             result.reMake = true;
             return result;
         }
-        const ignores = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys), { extensionMark: true, label: true, totalLabel: true });
+        const specUpdatePolicy = this._getSpecUpdatePolicy();
+        const compileOnlyKeys = (_a = specUpdatePolicy.compileOnlyKeys) !== null && _a !== void 0 ? _a : {};
+        const dataRelatedKeys = (_b = specUpdatePolicy.dataRelatedKeys) !== null && _b !== void 0 ? _b : {};
+        const compileOnlySubKeys = (_c = specUpdatePolicy.compileOnlySubKeys) !== null && _c !== void 0 ? _c : {};
+        const compileCheckKeys = Object.assign(Object.assign({}, compileOnlyKeys), dataRelatedKeys);
+        const ignores = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), compileCheckKeys), ignoreCheckKeys), { extensionMark: true, label: true, totalLabel: true });
         this._compareExtensionMarksSpec(array(spec.extensionMark), array(prevSpec.extensionMark), result);
         !result.reMake && this._compareLabelSpec(array(spec.label), array(prevSpec.label), result);
         !result.reMake &&
@@ -68418,12 +69549,27 @@ class BaseSeries extends BaseModel {
             })) {
             result.reCompile = true;
         }
-        if (!result.reCompile &&
-            currentKeys.some((k) => {
-                return defaultSeriesCompileCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
-            })) {
+        const changedCompileKeys = currentKeys.filter((k) => {
+            return compileCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
+        });
+        const changedCompileOnlySubKeys = currentKeys.filter((k) => {
+            return (compileOnlySubKeys[k] &&
+                hasOnlyAllowedSubKeyChanges(spec[k], prevSpec[k], compileOnlySubKeys[k]));
+        });
+        changedCompileOnlySubKeys.forEach(k => {
+            ignores[k] = true;
+        });
+        if (!result.reCompile && (changedCompileKeys.length || changedCompileOnlySubKeys.length)) {
             result.reCompile = true;
         }
+        if (changedCompileKeys.some(k => dataRelatedKeys[k])) {
+            markSeriesCompileEffect(result, true);
+        }
+        else if (result.reCompile &&
+            !((_d = result.effects) === null || _d === void 0 ? void 0 : _d.series) &&
+            (changedCompileKeys.length || changedCompileOnlySubKeys.length)) {
+            markSeriesCompileEffect(result);
+        }
         if (currentKeys.some((k) => {
             return !ignores[k] && !isEqual(spec[k], prevSpec[k]);
         })) {
@@ -68572,7 +69718,7 @@ class BaseSeries extends BaseModel {
             attributeContext: this._markAttributeContext,
             componentType: option.componentType,
             noSeparateStyle,
-            parent: parent !== false ? (parent !== null && parent !== void 0 ? parent : this._rootMark) : null
+            parent: parent !== false ? parent !== null && parent !== void 0 ? parent : this._rootMark : null
         });
         if (isValid$1(m)) {
             const spec = this.getSpec() || {};
@@ -68605,11 +69751,22 @@ class BaseSeries extends BaseModel {
         if (!datum) {
             return key;
         }
-        const dimensionFields = this.getDimensionField();
-        key = dimensionFields.map(field => datum[field]).join('_');
         const seriesField = this.getSeriesField();
-        if (seriesField && !dimensionFields.includes(seriesField)) {
-            key += `_${datum[seriesField]}`;
+        const dimensionFields = this.getDimensionField();
+        const seriesFieldValue = seriesField ? datum[seriesField] : undefined;
+        let hasSeriesFieldInDimension = false;
+        let lastDimensionValue;
+        for (let i = 0; i < dimensionFields.length; i++) {
+            const field = dimensionFields[i];
+            const dimensionValue = datum[field];
+            key += `${i > 0 ? '_' : ''}${isNil$1(dimensionValue) ? '' : dimensionValue}`;
+            hasSeriesFieldInDimension || (hasSeriesFieldInDimension = field === seriesField);
+            lastDimensionValue = dimensionValue;
+        }
+        if (seriesField &&
+            !hasSeriesFieldInDimension &&
+            !(dimensionFields.length > 1 && lastDimensionValue === seriesFieldValue)) {
+            key += `_${seriesFieldValue}`;
         }
         return key;
     }
@@ -69534,6 +70691,10 @@ const lineLikeSeriesMark = {
     ["line"]: { name: "line", type: "line" }
 };
 
+const LINE_LIKE_SERIES_DATA_RELATED_KEYS = {
+    sampling: true,
+    samplingFactor: true
+};
 class LineLikeSeriesMixin {
     addSamplingCompile() {
         if (this._spec.sampling) {
@@ -70807,6 +71968,7 @@ class BaseComponent extends LayoutModel {
         this.name = 'component';
         this.modelType = 'component';
         this.transformerConstructor = BaseComponentSpecTransformer;
+        this._forceReleaseVRenderComponents = false;
         this._delegateEvent = (component, event, type, item = null, datum = null) => {
             var _a, _b;
             if (!(event instanceof CustomEvent)) {
@@ -70870,23 +72032,72 @@ class BaseComponent extends LayoutModel {
         }
         return result;
     }
+    beforeRelease() {
+        super.beforeRelease();
+        this._forceReleaseVRenderComponents = true;
+        this._forceReleaseExitingVRenderComponents();
+    }
     release() {
         var _a;
-        super.release();
+        if (this._shouldReleaseVRenderComponentsImmediately()) {
+            this._forceReleaseExitingVRenderComponents();
+        }
         this.clear();
+        super.release();
         (_a = this.pluginService) === null || _a === void 0 ? void 0 : _a.releaseAll();
         this.pluginService = null;
     }
+    _shouldReleaseVRenderComponentsImmediately() {
+        return this._forceReleaseVRenderComponents;
+    }
+    _forceReleaseExitingVRenderComponents() {
+        var _a;
+        if (!((_a = this._exitingVRenderComponents) === null || _a === void 0 ? void 0 : _a.size)) {
+            return;
+        }
+        this._exitingVRenderComponents.forEach(component => {
+            var _a, _b, _c;
+            releaseVRenderComponentSync(component);
+            (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance) === null || _b === void 0 ? void 0 : _b._unregisterExitingVRenderComponent) === null || _c === void 0 ? void 0 : _c.call(_b, component);
+        });
+        this._exitingVRenderComponents.clear();
+    }
+    _releaseVRenderComponent(component) {
+        var _a;
+        const forceRelease = this._shouldReleaseVRenderComponentsImmediately();
+        if (!forceRelease) {
+            const exitingComponents = collectVRenderComponents(component);
+            const releasedWithExit = releaseVRenderComponent(component, {
+                enableExitAnimation: true,
+                removeFromParent: true,
+                onComplete: () => {
+                    exitingComponents.forEach(exitingComponent => {
+                        var _a, _b, _c, _d;
+                        (_a = this._exitingVRenderComponents) === null || _a === void 0 ? void 0 : _a.delete(exitingComponent);
+                        (_d = (_c = (_b = this._option) === null || _b === void 0 ? void 0 : _b.globalInstance) === null || _c === void 0 ? void 0 : _c._unregisterExitingVRenderComponent) === null || _d === void 0 ? void 0 : _d.call(_c, exitingComponent);
+                    });
+                }
+            });
+            if (releasedWithExit) {
+                this._exitingVRenderComponents = (_a = this._exitingVRenderComponents) !== null && _a !== void 0 ? _a : new Set();
+                exitingComponents.forEach(exitingComponent => {
+                    var _a, _b, _c;
+                    this._exitingVRenderComponents.add(exitingComponent);
+                    (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance) === null || _b === void 0 ? void 0 : _b._registerExitingVRenderComponent) === null || _c === void 0 ? void 0 : _c.call(_b, exitingComponent);
+                });
+                return;
+            }
+            return;
+        }
+        releaseVRenderComponentSync(component);
+    }
     clear() {
         var _a;
         const components = this._getNeedClearVRenderComponents();
         if (components && components.length) {
             components.forEach(c => {
-                var _a;
                 if (c) {
-                    c.release(true);
-                    (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(c);
-                    c = null;
+                    this._releaseVRenderComponent(c);
                 }
             });
         }
@@ -70946,13 +72157,91 @@ class ComponentMark extends BaseMark {
     getComponent() {
         return this._component;
     }
-    clearComponent() {
-        if (this._component) {
-            if (this._component.parent) {
-                this._component.parent.removeChild(this._component);
+    _clearExitingComponent(component) {
+        if (this._exitingComponent === component) {
+            this._unregisterExitingComponent(component);
+            this._exitingComponent = undefined;
+            this._exitingProduct = undefined;
+        }
+    }
+    _removeProductAfterExit(component, product) {
+        if (product.parent) {
+            product.parent.removeChild(product, true);
+        }
+        if (this._product === product) {
+            this._product = null;
+            this._compiledProductId = null;
+        }
+        this._clearExitingComponent(component);
+    }
+    _registerExitingComponent(component) {
+        var _a, _b, _c, _d, _e;
+        (_e = (_d = (_c = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.getOption) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.globalInstance) === null || _d === void 0 ? void 0 : _d._registerExitingVRenderComponent) === null || _e === void 0 ? void 0 : _e.call(_d, component);
+    }
+    _unregisterExitingComponent(component) {
+        var _a, _b, _c, _d, _e;
+        (_e = (_d = (_c = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.getOption) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.globalInstance) === null || _d === void 0 ? void 0 : _d._unregisterExitingVRenderComponent) === null || _e === void 0 ? void 0 : _e.call(_d, component);
+    }
+    _releaseComponentWithExitAnimation(component, releaseProduct) {
+        var _a, _b;
+        const product = this._product;
+        if (!component || ((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a._shouldReleaseVRenderComponentsImmediately) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+            return false;
+        }
+        const releasedWithExit = releaseVRenderComponent(component, {
+            enableExitAnimation: true,
+            removeFromParent: true,
+            onComplete: () => {
+                if (releaseProduct && product) {
+                    this._removeProductAfterExit(component, product);
+                }
+                else {
+                    this._clearExitingComponent(component);
+                }
             }
-            this._component = null;
+        });
+        if (releasedWithExit) {
+            this._exitingComponent = component;
+            this._exitingProduct = releaseProduct ? product : undefined;
+            this._registerExitingComponent(component);
+        }
+        return releasedWithExit;
+    }
+    clearComponent() {
+        var _a, _b;
+        const component = this._component;
+        if (!component) {
+            return;
         }
+        if ((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a._shouldReleaseVRenderComponentsImmediately) === null || _b === void 0 ? void 0 : _b.call(_a)) {
+            releaseVRenderComponentSync(component);
+        }
+        else {
+            this._releaseComponentWithExitAnimation(component, false);
+        }
+        this._component = null;
+    }
+    releaseWithExitAnimation() {
+        const component = this._component;
+        if (!this._releaseComponentWithExitAnimation(component, true)) {
+            return false;
+        }
+        this._component = null;
+        this._exitingComponent = component;
+        return true;
+    }
+    forceReleaseExitAnimation() {
+        var _a;
+        if (!this._exitingComponent) {
+            return;
+        }
+        releaseVRenderComponentSync(this._exitingComponent);
+        this._unregisterExitingComponent(this._exitingComponent);
+        if ((_a = this._exitingProduct) === null || _a === void 0 ? void 0 : _a.parent) {
+            this._exitingProduct.parent.removeChild(this._exitingProduct, true);
+        }
+        this._exitingComponent = undefined;
+        this._exitingProduct = undefined;
     }
     _getAttrsFromConfig(attrs = {}) {
         const configAttrs = super._getAttrsFromConfig(attrs);
@@ -71013,8 +72302,26 @@ class ComponentMark extends BaseMark {
         this.needClear = true;
     }
     release() {
+        var _a, _b;
+        if ((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a._shouldReleaseVRenderComponentsImmediately) === null || _b === void 0 ? void 0 : _b.call(_a)) {
+            this.forceReleaseExitAnimation();
+            super.release();
+            this.removeProduct(true);
+            return;
+        }
+        if (this._exitingComponent) {
+            if (!this._releaseComponentWithExitAnimation(this._exitingComponent, true)) {
+                this.removeProduct(true);
+            }
+            super.release();
+            return;
+        }
+        if (this.releaseWithExitAnimation()) {
+            super.release();
+            return;
+        }
         super.release();
-        this.removeProduct();
+        this.removeProduct(true);
     }
 }
 ComponentMark.type = "component";
@@ -71026,6 +72333,19 @@ const scaleParser = (scale) => {
     return scale;
 };
 
+const AXIS_COMPONENT_ONLY_CHANGE_KEYS = {
+    grid: true,
+    subGrid: true,
+    tick: true,
+    subTick: true,
+    label: true,
+    domainLine: true,
+    title: true,
+    maxWidth: true,
+    minWidth: true,
+    maxHeight: true,
+    minHeight: true
+};
 class AxisComponent extends BaseComponent {
     getOrient() {
         return this._orient;
@@ -71331,6 +72651,7 @@ class AxisComponent extends BaseComponent {
         if (result.reMake) {
             return result;
         }
+        const specChanged = !isEqual(prevSpec, spec);
         result.reRender = true;
         if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.type) !== (spec === null || spec === void 0 ? void 0 : spec.type) || (prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.visible) !== (spec === null || spec === void 0 ? void 0 : spec.visible)) {
             result.reMake = true;
@@ -71340,8 +72661,17 @@ class AxisComponent extends BaseComponent {
             var _a, _b;
             return ((_a = prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[k]) === null || _a === void 0 ? void 0 : _a.visible) !== ((_b = spec === null || spec === void 0 ? void 0 : spec[k]) === null || _b === void 0 ? void 0 : _b.visible);
         });
+        if (specChanged && !result.reMake && this._isComponentOnlySpecChange(spec, prevSpec)) {
+            result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+        }
         return result;
     }
+    _isComponentOnlySpecChange(spec, prevSpec) {
+        const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+        return keys.every(key => {
+            return isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[key], spec === null || spec === void 0 ? void 0 : spec[key]) || AXIS_COMPONENT_ONLY_CHANGE_KEYS[key];
+        });
+    }
     _getAxisAttributes() {
         const spec = this._spec;
         const axisAttrs = {
@@ -73935,6 +75265,10 @@ class LineSeries extends CartesianSeries {
         this.transformerConstructor = LineLikeSeriesSpecTransformer;
         this._sortDataByAxis = false;
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { dataRelatedKeys: Object.assign(Object.assign({}, policy.dataRelatedKeys), LINE_LIKE_SERIES_DATA_RELATED_KEYS) });
+    }
     compile() {
         super.compile();
         this.addSamplingCompile();
@@ -74611,6 +75945,11 @@ class Interaction {
     }
 }
 
+const MARKER_COMPONENT_SPEC_KEYS = {
+    [ComponentTypeEnum.markPoint]: true,
+    [ComponentTypeEnum.markLine]: true,
+    [ComponentTypeEnum.markArea]: true
+};
 class BaseChart extends CompilableBase {
     getSpec() {
         return this._spec;
@@ -74664,6 +76003,7 @@ class BaseChart extends CompilableBase {
         this._regions = [];
         this._series = [];
         this._components = [];
+        this._specTransformer = null;
         this._layoutRect = {
             x: 0,
             y: 0,
@@ -74795,6 +76135,7 @@ class BaseChart extends CompilableBase {
         this._spec = spec;
     }
     created(transformer) {
+        this._specTransformer = transformer;
         this._chartData.parseData(this._spec.data);
         this._createGlobalScale();
         this._createBackground();
@@ -75171,12 +76512,18 @@ class BaseChart extends CompilableBase {
         }
     }
     _getSpecKeys(spec) {
-        const ignoreKeys = { width: true, height: true };
+        const ignoreKeys = {
+            width: true,
+            height: true,
+            xField: true,
+            yField: true
+        };
         return Object.keys(spec)
             .filter(key => !ignoreKeys[key])
             .sort();
     }
     updateSpec(spec) {
+        var _a;
         const result = {
             change: false,
             reMake: false,
@@ -75184,49 +76531,83 @@ class BaseChart extends CompilableBase {
             reSize: false,
             reCompile: false
         };
-        this.setLayoutTag(true, null, false);
         if (spec.type !== this.type) {
             result.reMake = true;
+            this.setLayoutTag(true, null, false);
             return result;
         }
         const currentKeys = this._getSpecKeys(this._spec);
         const nextKeys = this._getSpecKeys(spec);
         if (!isEqual(currentKeys, nextKeys)) {
             result.reMake = true;
+            this.setLayoutTag(true, null, false);
             return result;
         }
         for (let i = 0; i < currentKeys.length; i++) {
             const key = currentKeys[i];
-            if (isArray$1(this._spec[key]) && this._spec[key].length !== array(spec[key]).length) {
+            const currentSpec = this._spec[key];
+            const nextSpec = spec[key];
+            if (isArray$1(currentSpec) &&
+                currentSpec.length !== array(nextSpec).length &&
+                !this._canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec)) {
                 result.reMake = true;
+                this.setLayoutTag(true, null, false);
                 return result;
             }
         }
         const oldSpec = this._spec;
+        const onlyMarkerComponentsRemoved = this._isOnlyMarkerComponentsRemoved(this._spec, spec, currentKeys);
+        const onlyComponentSpecsChanged = this._isOnlyComponentSpecsChanged(this._spec, spec, currentKeys);
+        const onlySeriesSpecsChanged = this._isOnlySeriesSpecsChanged(this._spec, spec, currentKeys);
         this._spec = spec;
+        if (onlyMarkerComponentsRemoved) {
+            this._removeMarkerComponentsForEmptySpecs(result);
+            return result;
+        }
         this.updateChartConfig(result, oldSpec);
         if (result.reMake) {
+            this.setLayoutTag(true, null, false);
             return result;
         }
         this.updateGlobalScale(result);
         if (result.reMake) {
+            this.setLayoutTag(true, null, false);
             return result;
         }
         this.updateRegionSpec(result);
         if (result.reMake) {
+            this.setLayoutTag(true, null, false);
             return result;
         }
-        this.updateComponentSpec(result);
+        const componentUpdateResult = this.updateComponentSpec(result);
         if (result.reMake) {
+            this.setLayoutTag(true, null, false);
+            return result;
+        }
+        if (isUpdateSpecResultLocalOnly(result)) {
             return result;
         }
+        if (onlyComponentSpecsChanged &&
+            !componentUpdateResult.hasNonComponentOnlyUpdate &&
+            isUpdateSpecResultComponentOnly(result)) {
+            componentUpdateResult.componentOnlyUpdatedComponents.forEach(component => {
+                component.reInit(component.getSpec());
+            });
+            if ((_a = result.effects) === null || _a === void 0 ? void 0 : _a.layout) {
+                this.setLayoutTag(true, null, false);
+            }
+            return result;
+        }
+        this.setLayoutTag(true, null, false);
         this.updateSeriesSpec(result);
         if (result.reMake) {
             return result;
         }
         this.reInit();
-        this.updateDataSpec();
-        this.updateGlobalScaleDomain();
+        if (!onlySeriesSpecsChanged || !this._canSkipChartDataStages(result)) {
+            this.updateDataSpec();
+            this.updateGlobalScaleDomain();
+        }
         return result;
     }
     updateChartConfig(result, oldSpec) {
@@ -75254,12 +76635,15 @@ class BaseChart extends CompilableBase {
         });
     }
     updateComponentSpec(result) {
+        const componentOnlyUpdatedComponents = [];
+        let hasNonComponentOnlyUpdate = false;
         const componentCache = {};
         const checkVisibleComponents = {
             [ComponentTypeEnum.title]: true,
             [ComponentTypeEnum.brush]: true,
             [ComponentTypeEnum.indicator]: true
         };
+        const removedComponents = [];
         this._components.forEach(c => {
             var _a, _b;
             if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) {
@@ -75275,11 +76659,32 @@ class BaseChart extends CompilableBase {
                     specCount: cmpSpec.length,
                     componentCount: 0
                 };
+                if (this._canRemoveMarkerComponentsWithoutRemake(compSpecKey, [c.getSpec()], cmpSpec)) {
+                    removedComponents.push(c);
+                    return;
+                }
                 componentCache[compSpecKey].componentCount++;
-                mergeUpdateResult(result, c.updateSpec((_b = cmpSpec[c.getSpecIndex()]) !== null && _b !== void 0 ? _b : {}, cmpSpec));
+                const componentSpec = (_b = cmpSpec[c.getSpecIndex()]) !== null && _b !== void 0 ? _b : {};
+                const previousComponentSpec = c.getSpec();
+                const componentResult = c.updateSpec(componentSpec, cmpSpec);
+                if (isUpdateSpecResultComponentOnly(componentResult)) {
+                    componentOnlyUpdatedComponents.push(c);
+                }
+                else if (!isEqual(previousComponentSpec, componentSpec)) {
+                    hasNonComponentOnlyUpdate = true;
+                }
+                mergeUpdateResult(result, componentResult);
             }
             else {
-                mergeUpdateResult(result, c.updateSpec(cmpSpec));
+                const previousComponentSpec = c.getSpec();
+                const componentResult = c.updateSpec(cmpSpec);
+                if (isUpdateSpecResultComponentOnly(componentResult)) {
+                    componentOnlyUpdatedComponents.push(c);
+                }
+                else if (!isEqual(previousComponentSpec, cmpSpec)) {
+                    hasNonComponentOnlyUpdate = true;
+                }
+                mergeUpdateResult(result, componentResult);
             }
         });
         for (const key in componentCache) {
@@ -75290,6 +76695,13 @@ class BaseChart extends CompilableBase {
                 }
             }
         }
+        if (removedComponents.length) {
+            removedComponents.forEach(component => {
+                this._removeComponent(component);
+            });
+            result.change = true;
+            result.effects = Object.assign(Object.assign({}, result.effects), { component: true, localOnly: true });
+        }
         const isVisible = (compSpec) => compSpec && compSpec.visible !== false;
         Object.keys(checkVisibleComponents).forEach(type => {
             if (checkVisibleComponents[type]) {
@@ -75300,6 +76712,92 @@ class BaseChart extends CompilableBase {
                 }
             }
         });
+        return {
+            componentOnlyUpdatedComponents,
+            hasNonComponentOnlyUpdate
+        };
+    }
+    _canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
+        return (MARKER_COMPONENT_SPEC_KEYS[key] &&
+            isArray$1(currentSpec) &&
+            currentSpec.length > 0 &&
+            isArray$1(nextSpec) &&
+            nextSpec.length === 0);
+    }
+    _isOnlyMarkerComponentsRemoved(currentSpec, nextSpec, specKeys) {
+        let hasMarkerRemoval = false;
+        const onlyMarkerRemoval = specKeys.every(key => {
+            if (this._canRemoveMarkerComponentsWithoutRemake(key, currentSpec[key], nextSpec[key])) {
+                hasMarkerRemoval = true;
+                return true;
+            }
+            return isEqual(currentSpec[key], nextSpec[key]);
+        });
+        return hasMarkerRemoval && onlyMarkerRemoval;
+    }
+    _isComponentSpecKey(key) {
+        return this._components.some(component => {
+            return (component.specKey || component.type) === key;
+        });
+    }
+    _isOnlyComponentSpecsChanged(currentSpec, nextSpec, specKeys) {
+        let hasComponentSpecChange = false;
+        const currentSpecRecord = currentSpec;
+        const nextSpecRecord = nextSpec;
+        const onlyComponentSpecChange = specKeys.every(key => {
+            if (isEqual(currentSpecRecord[key], nextSpecRecord[key])) {
+                return true;
+            }
+            if (this._isComponentSpecKey(key)) {
+                hasComponentSpecChange = true;
+                return true;
+            }
+            return false;
+        });
+        return hasComponentSpecChange && onlyComponentSpecChange;
+    }
+    _isOnlySeriesSpecsChanged(currentSpec, nextSpec, specKeys) {
+        var _a, _b;
+        let hasSeriesSpecChange = false;
+        const currentSpecRecord = currentSpec;
+        const nextSpecRecord = nextSpec;
+        const seriesRelatedSpecKeys = (_b = (_a = this._specTransformer) === null || _a === void 0 ? void 0 : _a.getSeriesRelatedSpecKeys()) !== null && _b !== void 0 ? _b : {};
+        const onlySeriesSpecChange = specKeys.every(key => {
+            if (isEqual(currentSpecRecord[key], nextSpecRecord[key])) {
+                return true;
+            }
+            if (seriesRelatedSpecKeys[key]) {
+                hasSeriesSpecChange = true;
+                return true;
+            }
+            return false;
+        });
+        return hasSeriesSpecChange && onlySeriesSpecChange;
+    }
+    _canSkipChartDataStages(result) {
+        const effects = result.effects;
+        return !!(effects === null || effects === void 0 ? void 0 : effects.series) && !effects.remake && !effects.data && !effects.scaleDomain && !result.reMake;
+    }
+    _removeMarkerComponentsForEmptySpecs(result) {
+        const removedComponents = this._components.filter(component => {
+            var _a;
+            const compSpecKey = component.specKey || component.type;
+            const cmpSpec = (_a = this._spec[compSpecKey]) !== null && _a !== void 0 ? _a : {};
+            return this._canRemoveMarkerComponentsWithoutRemake(compSpecKey, [component.getSpec()], cmpSpec);
+        });
+        if (!removedComponents.length) {
+            return;
+        }
+        removedComponents.forEach(component => {
+            this._removeComponent(component);
+        });
+        result.change = true;
+        result.effects = Object.assign(Object.assign({}, result.effects), { component: true, localOnly: true });
+    }
+    _removeComponent(component) {
+        this._components = this._components.filter(c => c !== component);
+        this._idMap.delete(component.id);
+        component.release();
     }
     updateSeriesSpec(result) {
         if (this._spec.series.length !== this._series.length) {
@@ -75410,10 +76908,12 @@ class BaseChart extends CompilableBase {
         });
         (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterComponentCompile) === null || _d === void 0 ? void 0 : _d.call(_c, this._option.globalInstance);
     }
-    release() {
-        [...this._components, ...this._regions, ...this._series].forEach(m => {
-            m.beforeRelease();
-        });
+    release(forceReleaseVRenderComponents = true) {
+        if (forceReleaseVRenderComponents) {
+            [...this._components, ...this._regions, ...this._series].forEach(m => {
+                m.beforeRelease();
+            });
+        }
         super.release();
         this.clear();
         [...this._components, ...this._regions, ...this._series].forEach(m => {
@@ -75672,8 +77172,18 @@ const getRelatedSeriesInfo = (modelInfo, currentChartSpecInfo) => {
     return undefined;
 };
 
+const DEFAULT_SERIES_RELATED_CHART_SPEC_KEYS = {
+    series: true,
+    label: true,
+    animationAppear: true,
+    animationEnter: true,
+    animationUpdate: true,
+    animationExit: true,
+    animationNormal: true
+};
 class BaseChartSpecTransformer {
     constructor(option) {
+        this._seriesRelatedSpecKeys = Object.assign({}, DEFAULT_SERIES_RELATED_CHART_SPEC_KEYS);
         this._option = option;
         this.type = option.type;
         this.seriesType = option.seriesType;
@@ -75769,8 +77279,19 @@ class BaseChartSpecTransformer {
     _isValidSeries(seriesType) {
         return true;
     }
+    getSeriesRelatedSpecKeys() {
+        return this._seriesRelatedSpecKeys;
+    }
+    _addSeriesRelatedSpecKeys(...keysList) {
+        keysList.forEach(keys => {
+            keys === null || keys === void 0 ? void 0 : keys.forEach(key => {
+                this._seriesRelatedSpecKeys[key] = true;
+            });
+        });
+    }
     _getDefaultSeriesSpec(chartSpec, pickKeys, pickKeys2) {
         var _a, _b, _c, _d, _e;
+        this._addSeriesRelatedSpecKeys(pickKeys, pickKeys2);
         const series = {
             dataKey: chartSpec.dataKey,
             hover: chartSpec.hover,
@@ -77256,6 +78777,10 @@ class AreaSeries extends CartesianSeries {
         this.transformerConstructor = AreaSeriesSpecTransformer;
         this._sortDataByAxis = false;
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { dataRelatedKeys: Object.assign(Object.assign({}, policy.dataRelatedKeys), LINE_LIKE_SERIES_DATA_RELATED_KEYS) });
+    }
     initMark() {
         var _a;
         const seriesMark = (_a = this._spec.seriesMark) !== null && _a !== void 0 ? _a : 'area';
@@ -77646,6 +79171,14 @@ const bar = {
 };
 
 const DefaultBandWidth$2 = 6;
+const BAR_SERIES_COMPILE_ONLY_KEYS = {
+    barWidth: true,
+    barMinWidth: true,
+    barMaxWidth: true,
+    barGapInGroup: true,
+    barMinHeight: true,
+    stackCornerRadius: true
+};
 class BarSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
@@ -77747,6 +79280,10 @@ class BarSeries extends CartesianSeries {
             this._barBackgroundPositionYEncoder = encoder.bind(this);
         };
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), BAR_SERIES_COMPILE_ONLY_KEYS) });
+    }
     initMark() {
         this._initBarBackgroundMark();
         this._barMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), { name: this._barMarkName, type: this._barMarkType }), {
@@ -77771,6 +79308,19 @@ class BarSeries extends CartesianSeries {
                 fill: this.getColorAttribute()
             }, 'normal', AttributeLevel.Series);
         }
+        this.initRectMarkStyle();
+    }
+    initRectMarkStyle() {
+        var _a;
+        if (!this._barMark) {
+            return;
+        }
+        const bandAxisHelper = this.direction === "vertical" ? this._xAxisHelper : this._yAxisHelper;
+        const scale = (_a = bandAxisHelper === null || bandAxisHelper === void 0 ? void 0 : bandAxisHelper.getScale) === null || _a === void 0 ? void 0 : _a.call(bandAxisHelper, 0);
+        if (!scale) {
+            return;
+        }
+        scale.type === 'band' ? this.initBandRectMarkStyle() : this.initLinearRectMarkStyle();
     }
     initLabelMarkStyle(textMark) {
         if (!textMark) {
@@ -77883,14 +79433,8 @@ class BarSeries extends CartesianSeries {
         this._barBackgroundViewData = new CompilableData(this._option, barBackgroundData);
     }
     init(option) {
-        var _a, _b;
         super.init(option);
-        if (this.direction === 'vertical') {
-            ((_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale(0).type) === 'band' ? this.initBandRectMarkStyle() : this.initLinearRectMarkStyle();
-        }
-        else {
-            ((_b = this._yAxisHelper) === null || _b === void 0 ? void 0 : _b.getScale(0).type) === 'band' ? this.initBandRectMarkStyle() : this.initLinearRectMarkStyle();
-        }
+        this.initRectMarkStyle();
     }
     _shouldDoPreCalculate() {
         const region = this.getRegion();
@@ -78013,6 +79557,13 @@ class BarSeries extends CartesianSeries {
     _initStackBarMarkStyle() {
         var _a, _b, _c, _d;
         if (!this._spec.stackCornerRadius) {
+            const markConfig = this._barMark.getMarkConfig();
+            if (markConfig.clip || !isNil$1(markConfig.clipPath)) {
+                this._barMark.setMarkConfig({
+                    clip: false,
+                    clipPath: []
+                });
+            }
             return;
         }
         const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
@@ -78442,6 +79993,9 @@ const scatter = {
     }
 };
 
+const SCATTER_SERIES_DATA_RELATED_KEYS = {
+    sizeField: true
+};
 class ScatterSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
@@ -78449,6 +80003,10 @@ class ScatterSeries extends CartesianSeries {
         this.transformerConstructor = ScatterSeriesSpecTransformer;
         this._invalidType = 'zero';
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { dataRelatedKeys: Object.assign(Object.assign({}, policy.dataRelatedKeys), SCATTER_SERIES_DATA_RELATED_KEYS) });
+    }
     setAttrFromSpec() {
         super.setAttrFromSpec();
         this._size = this._spec.size;
@@ -80903,6 +82461,9 @@ const waterfall = {
     }
 };
 
+const WATERFALL_SERIES_DATA_RELATED_KEYS = {
+    calculationMode: true
+};
 class WaterfallSeries extends BarSeries {
     constructor() {
         super(...arguments);
@@ -80923,6 +82484,10 @@ class WaterfallSeries extends BarSeries {
         var _a;
         return (_a = this._totalData) === null || _a === void 0 ? void 0 : _a.getLatestData();
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { dataRelatedKeys: Object.assign(Object.assign({}, policy.dataRelatedKeys), WATERFALL_SERIES_DATA_RELATED_KEYS) });
+    }
     initGroups() {
         const groupFields = this.getGroupFields();
         if (groupFields && groupFields.length) {
@@ -81978,6 +83543,12 @@ const DEFAULT_SHAFT_SHAPE = 'line';
 const DEFAULT_FILL_COLOR = '#FFF';
 const DEFAULT_STROKE_COLOR = '#000';
 const DEFAULT_OUTLIER_SIZE = 10;
+const BOX_PLOT_SERIES_COMPILE_ONLY_KEYS = {
+    boxWidth: true,
+    boxMinWidth: true,
+    boxMaxWidth: true,
+    boxGapInGroup: true
+};
 class BoxPlotSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
@@ -82015,6 +83586,10 @@ class BoxPlotSeries extends CartesianSeries {
     getOutliersStyle() {
         return this._outliersStyle;
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), BOX_PLOT_SERIES_COMPILE_ONLY_KEYS) });
+    }
     setAttrFromSpec() {
         var _a, _b, _c, _d, _e, _f, _g;
         super.setAttrFromSpec();
@@ -82088,6 +83663,7 @@ class BoxPlotSeries extends CartesianSeries {
                 size: isNumber$2((_f = this._outliersStyle) === null || _f === void 0 ? void 0 : _f.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
         }
+        this.initBoxPlotMarkStyle();
     }
     initBoxPlotMarkStyle() {
         var _a, _b;
@@ -83418,6 +84994,16 @@ const pie = {
     }
 };
 
+const PIE_SERIES_DATA_RELATED_KEYS = {
+    valueField: true,
+    angleField: true,
+    startAngle: true,
+    endAngle: true,
+    minAngle: true
+};
+const PIE_SERIES_COMPILE_ONLY_KEYS = {
+    outerRadius: true
+};
 class BasePieSeries extends PolarSeries {
     constructor() {
         super(...arguments);
@@ -83668,6 +85254,10 @@ class BasePieSeries extends PolarSeries {
     computeDatumRadius(datum, state) {
         return this._computeLayoutRadius() * this.getRadius(state) + this._centerOffset;
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), PIE_SERIES_COMPILE_ONLY_KEYS), dataRelatedKeys: Object.assign(Object.assign({}, policy.dataRelatedKeys), PIE_SERIES_DATA_RELATED_KEYS) });
+    }
     _compareSpec(spec, prevSpec, ignoreCheckKeys) {
         ignoreCheckKeys = ignoreCheckKeys !== null && ignoreCheckKeys !== void 0 ? ignoreCheckKeys : { data: true };
         const defaultIgnoreKeys = [
@@ -85990,6 +87580,9 @@ const circularProgress = {
     }
 };
 
+const CIRCULAR_PROGRESS_SERIES_COMPILE_ONLY_KEYS = {
+    cornerRadius: true
+};
 class CircularProgressSeries extends ProgressLikeSeries {
     constructor() {
         super(...arguments);
@@ -86019,6 +87612,10 @@ class CircularProgressSeries extends ProgressLikeSeries {
                 this.radiusAxisHelper.getScale(0).step());
         };
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), CIRCULAR_PROGRESS_SERIES_COMPILE_ONLY_KEYS) });
+    }
     getStackGroupFields() {
         return this.getGroupFields();
     }
@@ -86210,6 +87807,17 @@ const linearProgress = {
     }
 };
 
+const LINEAR_PROGRESS_SERIES_COMPILE_ONLY_KEYS = {
+    bandWidth: true
+};
+const LINEAR_PROGRESS_SERIES_COMPILE_ONLY_SUB_KEYS = {
+    progress: {
+        topPadding: true,
+        bottomPadding: true,
+        leftPadding: true,
+        rightPadding: true
+    }
+};
 class LinearProgressSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
@@ -86276,6 +87884,10 @@ class LinearProgressSeries extends CartesianSeries {
             return path;
         };
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), LINEAR_PROGRESS_SERIES_COMPILE_ONLY_KEYS), compileOnlySubKeys: Object.assign(Object.assign({}, policy.compileOnlySubKeys), LINEAR_PROGRESS_SERIES_COMPILE_ONLY_SUB_KEYS) });
+    }
     initMark() {
         this._initTrackMark();
         this._initProgressMark();
@@ -96339,6 +97951,9 @@ const heatmap = {
 };
 
 const DefaultBandWidth = 6;
+const HEATMAP_SERIES_DATA_RELATED_KEYS = {
+    valueField: true
+};
 class HeatmapSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
@@ -96351,6 +97966,10 @@ class HeatmapSeries extends CartesianSeries {
     setFieldValue(f) {
         this._fieldValue = array(f);
     }
+    _getSpecUpdatePolicy() {
+        const policy = super._getSpecUpdatePolicy();
+        return Object.assign(Object.assign({}, policy), { dataRelatedKeys: Object.assign(Object.assign({}, policy.dataRelatedKeys), HEATMAP_SERIES_DATA_RELATED_KEYS) });
+    }
     setAttrFromSpec() {
         super.setAttrFromSpec();
         this.setFieldValue(this._spec.valueField);
@@ -98234,6 +99853,7 @@ class BasePieChartSpecTransformer extends PolarChartSpecTransformer {
             'useSequentialAnimation',
             'layoutRadius'
         ]);
+        this._addSeriesRelatedSpecKeys(['valueField', 'angleField']);
         seriesSpec.categoryField = spec.categoryField || spec.seriesField;
         seriesSpec.valueField = spec.valueField || spec.angleField;
         seriesSpec.emptyCircle = (_a = spec.emptyPlaceholder) === null || _a === void 0 ? void 0 : _a.emptyCircle;
@@ -98938,6 +100558,7 @@ class CircularProgressChartSpecTransformer extends ProgressLikeChartSpecTransfor
     _getDefaultSeriesSpec(spec) {
         var _a, _b;
         const series = super._getDefaultSeriesSpec(spec);
+        this._addSeriesRelatedSpecKeys(['cornerRadius']);
         series.progress = spec.progress;
         series.track = spec.track;
         series.tickMask = spec.tickMask;
@@ -99539,6 +101160,7 @@ class WaterfallChartSpecTransformer extends BarChartSpecTransformer {
     }
     _getDefaultSeriesSpec(spec) {
         const series = super._getDefaultSeriesSpec(spec);
+        this._addSeriesRelatedSpecKeys(['bar', 'stackLabel', 'leaderLine', 'total', 'calculationMode']);
         series.bar = spec.bar;
         series.stackLabel = spec.stackLabel;
         series.leaderLine = spec.leaderLine;
@@ -99990,6 +101612,13 @@ const discreteLegendFilter = (data, op) => {
     return data;
 };
 
+const LEGEND_COMPONENT_ONLY_CHANGE_KEYS = {
+    position: true,
+    item: true,
+    title: true,
+    pager: true,
+    background: true
+};
 class BaseLegend extends BaseComponent {
     constructor() {
         super(...arguments);
@@ -100055,15 +101684,31 @@ class BaseLegend extends BaseComponent {
     _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
         result.reRender = true;
+        const specChanged = !isEqual(prevSpec, spec);
+        if (result.reMake) {
+            return result;
+        }
         if ((spec === null || spec === void 0 ? void 0 : spec.orient) !== (prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.orient)) {
             result.reMake = true;
             return result;
         }
-        if (!isEqual(prevSpec, spec)) {
+        if (specChanged && !result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec)) {
+            result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+            return result;
+        }
+        if (specChanged) {
             result.reCompile = true;
         }
         return result;
     }
+    _isComponentOnlySpecChange(spec, prevSpec) {
+        const prevSpecRecord = prevSpec;
+        const specRecord = spec;
+        const keys = Object.keys(Object.assign(Object.assign({}, prevSpec), spec));
+        return keys.every(key => {
+            return isEqual(prevSpecRecord === null || prevSpecRecord === void 0 ? void 0 : prevSpecRecord[key], specRecord === null || specRecord === void 0 ? void 0 : specRecord[key]) || LEGEND_COMPONENT_ONLY_CHANGE_KEYS[key];
+        });
+    }
     _bindLegendDataChange() {
         this._preSelectedData = this._selectedData.slice();
         this._initSelectedData();
@@ -105805,10 +107450,72 @@ function markerFilter(data, options) {
     return data;
 }
 
+const getDataViewsInDataSet = (dataView) => {
+    var _a;
+    const dataViewMap = (_a = dataView === null || dataView === void 0 ? void 0 : dataView.dataSet) === null || _a === void 0 ? void 0 : _a.dataViewMap;
+    return dataViewMap ? Object.values(dataViewMap).filter(Boolean) : [];
+};
+const detachDataViewListener = (source, target) => {
+    var _a, _b;
+    (_a = source === null || source === void 0 ? void 0 : source.target) === null || _a === void 0 ? void 0 : _a.removeListener('change', target.reRunAllTransform);
+    (_b = source === null || source === void 0 ? void 0 : source.target) === null || _b === void 0 ? void 0 : _b.removeListener('markRunning', target.markRunning);
+};
+const detachDataViewDependencies = (dataView) => {
+    if (!dataView) {
+        return;
+    }
+    const dataViews = getDataViewsInDataSet(dataView);
+    dataViews.forEach(source => {
+        detachDataViewListener(source, dataView);
+    });
+    const dependencies = dataView === null || dataView === void 0 ? void 0 : dataView.rawData;
+    if (Array.isArray(dependencies)) {
+        dependencies.forEach(dependency => {
+            detachDataViewListener(dependency, dataView);
+        });
+    }
+};
+const releaseDataViews = (dataViews) => {
+    const releaseDataViews = Array.from(new Set(dataViews.filter(Boolean)));
+    if (!releaseDataViews.length) {
+        return;
+    }
+    releaseDataViews.forEach(detachDataViewDependencies);
+    releaseDataViews.forEach(dataView => {
+        var _a;
+        (_a = dataView.destroy) === null || _a === void 0 ? void 0 : _a.call(dataView);
+    });
+};
+const releaseDataViewWithDependencies = (dataView, shouldReleaseDependency) => {
+    if (!dataView) {
+        return;
+    }
+    const dataViewsInDataSet = new Set(getDataViewsInDataSet(dataView));
+    const releaseDependencies = [];
+    const collectReleaseDependencies = (currentDataView) => {
+        const dependencies = currentDataView === null || currentDataView === void 0 ? void 0 : currentDataView.rawData;
+        if (!Array.isArray(dependencies)) {
+            return;
+        }
+        dependencies.forEach(dependency => {
+            if (dataViewsInDataSet.has(dependency) &&
+                shouldReleaseDependency(dependency) &&
+                !releaseDependencies.includes(dependency)) {
+                releaseDependencies.push(dependency);
+                collectReleaseDependencies(dependency);
+            }
+        });
+    };
+    collectReleaseDependencies(dataView);
+    releaseDataViews([dataView, ...releaseDependencies]);
+};
+
 class BaseMarker extends BaseComponent {
     constructor() {
         super(...arguments);
         this.layoutType = 'none';
+        this._markerDataChangeHandler = null;
+        this._markerDataOwned = false;
         this._layoutOffsetX = 0;
         this._layoutOffsetY = 0;
     }
@@ -105888,6 +107595,33 @@ class BaseMarker extends BaseComponent {
         }
         return this._relativeSeries.getViewData();
     }
+    _setMarkerData(data, owned = false) {
+        this._releaseMarkerData();
+        this._markerData = data;
+        this._markerDataOwned = owned;
+    }
+    _bindMarkerDataChange() {
+        var _a;
+        if (!((_a = this._markerData) === null || _a === void 0 ? void 0 : _a.target)) {
+            return;
+        }
+        this._markerDataChangeHandler = () => {
+            this._markerLayout();
+        };
+        this._markerData.target.on('change', this._markerDataChangeHandler);
+    }
+    _releaseMarkerData() {
+        const markerData = this._markerData;
+        if ((markerData === null || markerData === void 0 ? void 0 : markerData.target) && this._markerDataChangeHandler) {
+            markerData.target.removeListener('change', this._markerDataChangeHandler);
+        }
+        this._markerDataChangeHandler = null;
+        if (this._markerDataOwned) {
+            releaseDataViewWithDependencies(markerData, dataView => dataView.name === `${this.type}_${this.id}_data`);
+        }
+        this._markerData = null;
+        this._markerDataOwned = false;
+    }
     updateLayoutAttribute() {
         var _a, _b, _c;
         const markerVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
@@ -105939,8 +107673,13 @@ class BaseMarker extends BaseComponent {
     }
     clear() {
         super.clear();
+        this._markerComponent = null;
         this._firstSeries = null;
     }
+    release() {
+        this._releaseMarkerData();
+        super.release();
+    }
     _getFirstSeries() {
         var _a;
         if (this._firstSeries) {
@@ -105992,10 +107731,8 @@ class BaseMarker extends BaseComponent {
             type: 'markerFilter',
             options: this._getAllRelativeSeries()
         });
-        data.target.on('change', () => {
-            this._markerLayout();
-        });
-        this._markerData = data;
+        this._setMarkerData(data, true);
+        this._bindMarkerDataChange();
     }
 }
 
@@ -106126,7 +107863,7 @@ class BaseMarkLine extends BaseMarker {
         const spec = this._spec;
         const isCoordinateProcess = 'coordinates' in spec;
         const { doXProcess, doYProcess, doXYY1Process, doYXX1Process, doXYProcess, doAngleProcess, doRadiusProcess, doAngRadRad1Process, doRadAngAng1Process, doRadAngProcess } = getMarkLineProcessInfo(spec);
-        this._markerData = this._getRelativeDataView();
+        this._setMarkerData(this._getRelativeDataView());
         if (!doXProcess &&
             !doYProcess &&
             !doXYY1Process &&
@@ -106164,10 +107901,8 @@ class BaseMarkLine extends BaseMarker {
             type: 'markerFilter',
             options: this._getAllRelativeSeries()
         });
-        data.target.on('change', () => {
-            this._markerLayout();
-        });
-        this._markerData = data;
+        this._setMarkerData(data, true);
+        this._bindMarkerDataChange();
     }
 }
 BaseMarkLine.specKey = 'markLine';
@@ -106617,11 +108352,15 @@ class Title extends BaseComponent {
     }
     _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
+        const specChanged = !isEqual(prevSpec, spec);
         if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.orient) !== (spec === null || spec === void 0 ? void 0 : spec.orient) || (prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.visible) !== spec.visible) {
             result.reMake = true;
         }
         result.change = true;
         result.reRender = true;
+        if (specChanged && !result.reMake) {
+            result.effects = Object.assign(Object.assign({}, result.effects), { component: true, layout: true, render: true });
+        }
         return result;
     }
     afterSetLayoutStartPoint(pos) {
@@ -107786,7 +109525,9 @@ class Label extends BaseLabelComponent {
         Object.keys(removedComponents).forEach(name => {
             const comp = removedComponents[name];
             if (comp) {
-                comp.release();
+                if (!comp.releaseWithExitAnimation()) {
+                    comp.release();
+                }
                 this._labelComponentMap.delete(comp);
             }
         });
@@ -108471,6 +110212,10 @@ class Brush extends BaseComponent {
             });
         });
     }
+    reInit(spec) {
+        super.reInit(spec);
+        this.init();
+    }
     _initNeedOperatedItem() {
         const seriesUserId = this._spec.seriesId;
         const seriesIndex = this._spec.seriesIndex;