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

package/build/index.js

@@ -13467,6 +13467,12 @@
     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);
@@ -13562,7 +13568,7 @@
       }
       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));
@@ -13609,7 +13615,7 @@
       }
       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(","),
@@ -13857,32 +13863,6 @@
           }
         }), 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) {
@@ -14017,7 +13997,7 @@
     }
     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 = [];
@@ -14028,7 +14008,7 @@
 
     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;
@@ -14036,7 +14016,7 @@
       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");
       }
     }
@@ -14051,12 +14031,13 @@
     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", {
@@ -14073,9 +14054,12 @@
       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;
@@ -14086,12 +14070,6 @@
         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,
@@ -14101,6 +14079,9 @@
         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 : {};
@@ -14163,18 +14144,24 @@
       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;
@@ -14205,10 +14192,18 @@
         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);
@@ -14224,15 +14219,13 @@
         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;
@@ -14290,7 +14283,7 @@
         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;
@@ -14329,16 +14322,17 @@
             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;
@@ -14346,47 +14340,146 @@
         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();
       }
@@ -14409,7 +14502,7 @@
         return point;
       }
       onAnimateBind(animate) {
-        this._emitCustomEvent("animate-bind", animate);
+        this.detachAttributeFromBaseAttributes(), this._emitCustomEvent("animate-bind", animate);
       }
       visitTrackedAnimates(cb) {
         const hook = this.forEachTrackedAnimate;
@@ -14422,8 +14515,22 @@
         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);
@@ -14496,14 +14603,14 @@
         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;
@@ -14571,25 +14678,63 @@
         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++) {
@@ -14608,7 +14753,7 @@
         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;
@@ -14620,10 +14765,15 @@
             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;
@@ -14635,7 +14785,10 @@
             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;
@@ -14648,15 +14801,16 @@
             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;
@@ -14668,7 +14822,10 @@
             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;
@@ -14680,24 +14837,26 @@
             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;
@@ -14736,6 +14895,131 @@
           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;
@@ -14756,9 +15040,7 @@
         });
         this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
       }
-      updateNormalAttrs(stateAttrs) {
-        this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
-      }
+      updateNormalAttrs(_stateAttrs) {}
       getStateTransitionDefaultAttribute(key, targetAttrs) {
         return this.getDefaultAttribute(key);
       }
@@ -14768,6 +15050,7 @@
       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);
@@ -14780,19 +15063,25 @@
       }
       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);
@@ -14806,39 +15095,59 @@
         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({
+        this.effectiveStates = [...transition.effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
           type: AttributeUpdateType.STATE
-        }), this._emitCustomEvent("afterStateUpdate", {
-          type: AttributeUpdateType.STATE
-        });
+        }), this.emitStateUpdateEvent();
       }
       sameStateNames(left, right) {
         const normalizedLeft = null != left ? left : [],
@@ -14859,6 +15168,9 @@
       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;
       }
@@ -14946,13 +15258,13 @@
         }
       }
       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)));
@@ -14965,9 +15277,13 @@
               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);
@@ -15034,6 +15350,7 @@
         res && (res.state = "fail", cb && cb());
       }
       _stopAnimates() {
+        if (!this.mayHaveTrackedAnimates()) return;
         const animates = [];
         this.visitTrackedAnimates(animate => {
           animates.push(animate);
@@ -15047,14 +15364,17 @@
         });
       }
       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;
@@ -15063,7 +15383,7 @@
         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(),
@@ -15072,6 +15392,11 @@
           isClear: !!isClear
         });
       }
+      emitStateUpdateEvent() {
+        this.hasCustomEvent("afterStateUpdate") && this._emitCustomEvent("afterStateUpdate", {
+          type: AttributeUpdateType.STATE
+        });
+      }
       _emitCustomEvent(type, context) {
         this._dispatchCustomEvent(type, context);
       }
@@ -18078,13 +18403,15 @@
     }(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();
@@ -18209,9 +18536,10 @@
       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();
@@ -18223,11 +18551,13 @@
       }
       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);
         });
       }
@@ -18274,15 +18604,29 @@
           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;
@@ -18630,7 +18974,10 @@
           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);
@@ -18730,10 +19077,7 @@
       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;
       }
     }
 
@@ -20075,7 +20419,7 @@
     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;
@@ -20095,12 +20439,13 @@
         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));
@@ -20108,12 +20453,21 @@
           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));
       }
     }
 
@@ -20469,7 +20823,7 @@
         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) {
@@ -20479,7 +20833,8 @@
             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 => {
@@ -20504,14 +20859,17 @@
           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;
@@ -20771,8 +21129,14 @@
           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();
@@ -23273,7 +23637,11 @@
     };
     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);
@@ -28322,8 +28690,8 @@
           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) {
@@ -28886,7 +29254,6 @@
         segments: segments,
         shouldClipImageByLayout: shouldClipImageByLayout,
         shouldUseMat4: shouldUseMat4,
-        shouldUseSimpleAttributeFastPath: shouldUseSimpleAttributeFastPath,
         snapLength: snapLength,
         splitArc: splitArc,
         splitArea: splitArea,
@@ -34439,15 +34806,38 @@
       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,
@@ -34479,12 +34869,65 @@
         });
         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);
@@ -34816,8 +35259,8 @@
           });
         }
       }
-      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);
       }
     }
 
@@ -35329,20 +35772,67 @@
       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;
@@ -35398,6 +35888,17 @@
       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) {
@@ -35412,23 +35913,49 @@
       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 => {
@@ -35438,11 +35965,7 @@
       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) {
@@ -35646,19 +36169,34 @@
         }), 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;
@@ -35681,7 +36219,7 @@
       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;
       }
@@ -35746,12 +36284,14 @@
         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);
@@ -36123,6 +36663,33 @@
           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--;
@@ -36245,7 +36812,8 @@
         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;
@@ -36308,7 +36876,8 @@
           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);
@@ -36322,11 +36891,14 @@
           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;
@@ -36335,7 +36907,7 @@
           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] = {
@@ -36344,7 +36916,7 @@
           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);
@@ -36423,8 +36995,22 @@
       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) => {
@@ -36432,14 +37018,14 @@
             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) => {
@@ -36451,12 +37037,18 @@
         }), 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);
@@ -36699,8 +37291,11 @@
         }), 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) {
@@ -37264,6 +37859,25 @@
       }
     }
 
+    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;
@@ -37282,21 +37896,9 @@
       }
       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] : [];
@@ -37332,31 +37934,42 @@
         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();
+        }
       }
     }
 
@@ -37377,10 +37990,10 @@
         }), 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 {
@@ -37395,16 +38008,16 @@
         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();
       }
     }
 
@@ -37434,8 +38047,7 @@
       onEnd() {}
       onUpdate(end, ratio, out) {
         if (null == this.phi || null == this.theta) return;
-        const target = this.target,
-          {
+        const {
             center: center,
             r: r,
             cb: cb
@@ -37446,8 +38058,15 @@
           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);
       }
     }
 
@@ -37589,15 +38208,23 @@
         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);
@@ -37771,10 +38398,10 @@
         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 {
@@ -37793,10 +38420,10 @@
         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();
       }
     }
 
@@ -37876,10 +38503,7 @@
         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) {
@@ -37937,10 +38561,7 @@
         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();
       }
     }
 
@@ -37973,7 +38594,9 @@
         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 {
@@ -38205,10 +38828,10 @@
         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 {
@@ -38348,10 +38971,7 @@
         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 {
@@ -38371,10 +38991,7 @@
         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();
       }
     }
 
@@ -39147,18 +39764,26 @@
         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());
@@ -39203,10 +39828,10 @@
         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();
       }
     }
 
@@ -39217,14 +39842,19 @@
       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);
@@ -39247,10 +39877,7 @@
         "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 {
@@ -39275,10 +39902,7 @@
         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 {
@@ -39309,10 +39933,7 @@
         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 {
@@ -39357,8 +39978,10 @@
       }
       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;
@@ -39409,8 +40032,10 @@
       }
       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 {
@@ -39507,10 +40132,7 @@
         "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 {
@@ -39535,10 +40157,7 @@
         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 {
@@ -39569,10 +40188,7 @@
         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 {
@@ -39657,20 +40273,20 @@
       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);
@@ -39685,52 +40301,51 @@
       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,
@@ -39741,7 +40356,7 @@
         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;
@@ -39885,10 +40500,10 @@
         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 {
@@ -39944,10 +40559,10 @@
         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 {
@@ -39990,7 +40605,7 @@
             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());
       }
     }
 
@@ -41509,7 +42124,10 @@
         }), 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() {}
     }
@@ -42055,8 +42673,8 @@
         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);
@@ -44429,6 +45047,14 @@
       }
       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) {
@@ -44493,11 +45119,56 @@
           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,
@@ -45063,6 +45734,10 @@
       _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);
       }
@@ -45832,6 +46507,7 @@
       }
       render() {
         var _a;
+        if (this._exitReleaseState) return;
         const {
           dataLabels: dataLabels,
           size: size
@@ -45866,6 +46542,47 @@
           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);
       }
@@ -47499,14 +48216,51 @@
           y: clipInRange ? -(null !== (_b = limitRect.y) && void 0 !== _b ? _b : 0) : 0
         });
       }
+      _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;
+        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);
       }
     }
 
@@ -49769,7 +50523,10 @@
         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;
@@ -51406,7 +52163,11 @@
           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;
@@ -55293,12 +56054,12 @@
           rootGroup = this._rootGroup,
           shouldReleaseStage = !!stage && !this._isExternalStage,
           releaseVRenderAppRef = this._releaseVRenderAppRef;
-        this.clearNextRender(), this.releaseEvent(), this.releaseGrammar(!0), stage && (shouldReleaseStage ? stage.release() : rootGroup && (stage.defaultLayer.removeChild(rootGroup), rootGroup.release())), null == releaseVRenderAppRef || releaseVRenderAppRef(), this._stage = null, this._rootGroup = null, this._isExternalStage = !1, this._releaseVRenderAppRef = void 0, this._option = this._container = null, this.isInited = !1, this._compileChart = null, this._released = !0;
+        this.clearNextRender(), this.releaseEvent(), this.releaseGrammar(!0), stage && (shouldReleaseStage ? stage.release() : rootGroup && (stage.defaultLayer.removeChild(rootGroup, !0), rootGroup.release())), null == releaseVRenderAppRef || releaseVRenderAppRef(), this._stage = null, this._rootGroup = null, this._isExternalStage = !1, this._releaseVRenderAppRef = void 0, this._option = this._container = null, this.isInited = !1, this._compileChart = null, this._released = !0;
       }
       releaseGrammar(removeGraphicItems = !1) {
         removeGraphicItems ? this._rootMarks.forEach(g => {
           traverseGroupMark(g, m => {
-            m.removeProduct();
+            m.removeProduct(!0);
           }, null, !0);
         }) : this._cachedMarks = findSimpleMarks(this._rootMarks), this._rootMarks = [];
       }
@@ -55447,6 +56208,26 @@
         height: 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 = null == source ? void 0 : source.effects;
+        if (!sourceEffects) return;
+        target.effects || (target.effects = {});
+        const targetEffects = target.effects;
+        UPDATE_SPEC_EFFECT_KEYS.forEach(key => {
+          sourceEffects[key] && (targetEffects[key] = targetEffects[key] || sourceEffects[key]);
+        });
+      });
+    }
+    function isUpdateSpecResultLocalOnly(result) {
+      const effects = result.effects;
+      return !(!(null == effects ? 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 !(!(null == effects ? 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 || (null == cur ? void 0 : cur[key]), target[key]);
       return Object.assign(target, {
@@ -55458,7 +56239,7 @@
         reTransformSpec: merge("reTransformSpec"),
         changeTheme: merge("changeTheme"),
         changeBackground: merge("changeBackground")
-      }), target;
+      }), mergeUpdateSpecEffects(target, ...sources), target;
     }
     function getTrimPaddingConfig(chartType, spec) {
       return "line" === chartType || "area" === chartType || "common" === chartType && spec.series.every(item => "area" === item.type || "line" === item.type) ? {
@@ -57073,7 +57854,7 @@
       constructor(option, dataView) {
         super(option), this._data = null, this._data = dataView;
       }
-      removeProduct() {
+      removeProduct(_releaseDetach) {
         this._product = null, this._prevProduct = null, this._compiledProductId = null;
       }
       release() {
@@ -57200,20 +57981,33 @@
       }), 0 === morphCount && onMorphEnd(), !0;
     };
 
-    const normalizeStates = states => Array.isArray(states) ? states : states ? [states] : [];
+    const normalizeStates = states => Array.isArray(states) ? states : states ? [states] : [],
+      isSameStates = (currentStates, nextStates) => {
+        const current = null != currentStates ? currentStates : [];
+        return current.length === nextStates.length && current.every((stateName, index) => stateName === nextStates[index]);
+      };
+    const setGraphicStates = (graphic, nextStates, hasAnimation) => {
+      var _a;
+      if (graphic.setStates) return void graphic.setStates(nextStates, {
+        animate: hasAnimation,
+        animateSameStatePatchChange: !0
+      });
+      const normalizedNextStates = null != nextStates ? nextStates : [];
+      isSameStates(graphic.currentStates, normalizedNextStates) ? null === (_a = graphic.invalidateResolver) || void 0 === _a || _a.call(graphic) : normalizedNextStates.length ? graphic.useStates(normalizedNextStates, hasAnimation) : graphic.clearStates(hasAnimation);
+    };
     const addGraphicState = (graphic, state, keepCurrentStates = !0, hasAnimation) => {
       var _a;
       if (!state) return;
       const currentStates = keepCurrentStates && null !== (_a = graphic.currentStates) && void 0 !== _a ? _a : [],
         nextStates = keepCurrentStates ? Array.from(new Set([...currentStates, state])) : [state];
-      graphic.useStates(nextStates, hasAnimation);
+      setGraphicStates(graphic, nextStates, hasAnimation);
     };
     const removeGraphicState = (graphic, state, hasAnimation) => {
       var _a;
       const states = normalizeStates(state);
       if (!states.length) return;
       const nextStates = (null !== (_a = graphic.currentStates) && void 0 !== _a ? _a : []).filter(stateName => !states.includes(stateName));
-      graphic.useStates(nextStates, hasAnimation);
+      setGraphicStates(graphic, nextStates, hasAnimation);
     };
 
     var __rest$h = undefined && undefined.__rest || function (s, e) {
@@ -57225,6 +58019,7 @@
       }
       return t;
     };
+    const statesClearedBeforeReInitKey = Symbol("statesClearedBeforeReInit");
     class BaseMark extends GrammarItem {
       commit(render, recursion) {
         recursion && this.getMarks().length > 0 && this.getMarks().forEach(m => m.commit(!1, recursion)), this._isCommited = !0, render && this.getCompiler().renderNextTick();
@@ -57377,8 +58172,8 @@
       stopAnimationByState(state) {}
       pauseAnimationByState(state) {}
       resumeAnimationByState(state) {}
-      removeProduct() {
-        this._product && this._product.parent && this._product.parent.removeChild(this._product), this._product = null, this._compiledProductId = null;
+      removeProduct(releaseDetach) {
+        this._product && this._product.parent && this._product.parent.removeChild(this._product, releaseDetach), this._product = null, this._compiledProductId = null;
       }
       release() {
         this.state.release(), super.release(), this._lastMark = null;
@@ -57394,7 +58189,7 @@
         super(option), this.type = void 0, this.name = "mark", this._markConfig = {
           zIndex: LayoutZIndex.Mark,
           morph: !1
-        }, this._visible = !0, this.stateStyle = {}, this._unCompileChannel = {}, this._disabledAnimationStates = [], this._skipBeforeLayouted = !1, this._extensionChannel = {}, this._computeExChannel = {}, this._graphicMap = new Map(), this._graphics = [], this._getEncoderOfStyle = (stateName, style) => {
+        }, this._visible = !0, this.stateStyle = {}, this._unCompileChannel = {}, this._disabledAnimationStates = [], this._skipBeforeLayouted = !1, this._sharedStateDefinitionRefIds = new WeakMap(), this._sharedStateDefinitionRefId = 0, this._dynamicSharedStateNames = new Set(), this._extensionChannel = {}, this._computeExChannel = {}, this._graphicMap = new Map(), this._graphics = [], this._getEncoderOfStyle = (stateName, style) => {
           if (style && stateName) {
             const validEncoder = {};
             return Object.keys(style).forEach(key => {
@@ -57409,7 +58204,11 @@
           } = this._markConfig;
           setCustomizedShape && (g.pathProxy = attrs => setCustomizedShape(g.context.data, attrs, new CustomPath2D())), graphicName && (isFunction$1(graphicName) ? g.name = graphicName(g) : g.name = graphicName);
         }, this._setStateOfGraphic = (g, hasAnimation) => {
-          g.clearStates(), g.stateProxy = null, g.context.diffState !== DiffState.enter && g.context.diffState !== DiffState.update || g.context.states && g.useStates(g.context.states, hasAnimation);
+          var _a, _b, _c;
+          g.stateProxy = null;
+          const targetStates = g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update ? g.context.states : void 0,
+            hasCurrentState = !!((null === (_a = g.currentStates) || void 0 === _a ? void 0 : _a.length) || (null === (_b = g.effectiveStates) || void 0 === _b ? void 0 : _b.length) || g.resolvedStatePatch || (null === (_c = g.registeredActiveScopes) || void 0 === _c ? void 0 : _c.size));
+          ((null == targetStates ? void 0 : targetStates.length) || hasCurrentState) && setGraphicStates(g, targetStates, hasAnimation);
         }, this.name = name, this.model = option.model, this.key = option.key, this.state = new MarkStateManager(option, this), this._attributeContext = option.attributeContext, null === (_a = option.map) || void 0 === _a || _a.set(this.id, this);
       }
       created() {
@@ -57756,6 +58555,7 @@
         if (graphics.forEach(g => {
           const state = g.context.animationState;
           if ("appear" === state) return;
+          if ("update" === state && !this._hasDiffAttrs(g)) return;
           const config = animationConfig[state];
           if (config && config.length > 0) {
             const configList = config.map((item, index) => ({
@@ -57855,28 +58655,63 @@
           groupStyles: groupStyles
         };
       }
+      _getSharedStateDefinitionRefId(value) {
+        if ("object" != typeof value && "function" != typeof value || null === value) return `${value}`;
+        const objectValue = value;
+        let id = this._sharedStateDefinitionRefIds.get(objectValue);
+        return id || (id = ++this._sharedStateDefinitionRefId, this._sharedStateDefinitionRefIds.set(objectValue, id)), `ref:${id}`;
+      }
+      _getSharedStateDefinitionValueKey(value) {
+        try {
+          const jsonValue = JSON.stringify(value);
+          return null != jsonValue ? jsonValue : `${value}`;
+        } catch (_error) {
+          return this._getSharedStateDefinitionRefId(value);
+        }
+      }
+      _isStaticSharedStateAttribute(stateName, key) {
+        var _a, _b;
+        const stateStyle = null === (_a = this.stateStyle[stateName]) || void 0 === _a ? void 0 : _a[key];
+        if (!stateStyle || stateStyle.referer || isFunction$1(stateStyle.postProcess) || key in this._computeExChannel) return !1;
+        const style = stateStyle.style;
+        return !isFunction$1(style) && !GradientType.includes(null == style ? void 0 : style.gradient) && !["outerBorder", "innerBorder"].includes(key) && !isValidScaleType(null === (_b = null == style ? void 0 : style.scale) || void 0 === _b ? void 0 : _b.type);
+      }
       _applySharedStateDefinitions() {
         var _a;
         if (!this._product) return;
         const stateNames = Object.keys(null !== (_a = this._encoderOfState) && void 0 !== _a ? _a : {}).filter(stateName => "group" !== stateName && "update" !== stateName);
-        if (!stateNames.length) return void (this._product.sharedStateDefinitions = void 0);
+        if (!stateNames.length) return this._dynamicSharedStateNames.clear(), void (void 0 !== this._product.sharedStateDefinitions && (this._product.sharedStateDefinitions = void 0));
         const sortedStateNames = this._stateSort ? stateNames.slice().sort(this._stateSort) : stateNames,
           statePriority = new Map();
         sortedStateNames.forEach((stateName, index) => {
           statePriority.set(stateName, index);
         });
-        const sharedStateDefinitions = {};
-        stateNames.forEach(stateName => {
+        const sharedStateDefinitions = {},
+          cacheKeys = [],
+          dynamicSharedStateNames = new Set();
+        if (stateNames.forEach(stateName => {
           var _a;
-          const encoder = this._encoderOfState[stateName];
-          sharedStateDefinitions[stateName] = {
-            priority: null !== (_a = statePriority.get(stateName)) && void 0 !== _a ? _a : 0,
-            declaredAffectedKeys: Object.keys(null != encoder ? encoder : {}),
-            resolver: ({
-              graphic: graphic
-            }) => this._runEncoderOfGraphic(encoder, graphic)
+          const encoder = this._encoderOfState[stateName],
+            patch = {},
+            dynamicEncoder = {},
+            patchKeys = [],
+            dynamicKeys = [];
+          if (Object.keys(null != encoder ? encoder : {}).forEach(key => {
+            this._isStaticSharedStateAttribute(stateName, key) ? (patch[key] = this._computeAttribute(key, stateName)(void 0), patchKeys.push(key)) : (dynamicEncoder[key] = encoder[key], dynamicKeys.push(key));
+          }), !patchKeys.length && !dynamicKeys.length) return;
+          const definition = {
+            priority: null !== (_a = statePriority.get(stateName)) && void 0 !== _a ? _a : 0
           };
-        }), this._product.sharedStateDefinitions = sharedStateDefinitions;
+          patchKeys.length && (definition.patch = patch), dynamicKeys.length && (dynamicSharedStateNames.add(stateName), definition.declaredAffectedKeys = dynamicKeys, definition.resolver = ({
+            graphic: 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 = null === (_a = this.stateStyle[stateName]) || void 0 === _a ? void 0 : _a[key];
+            return `${key}:${this._getSharedStateDefinitionRefId(null == stateStyle ? void 0 : stateStyle.style)}:${this._getSharedStateDefinitionRefId(null == stateStyle ? void 0 : stateStyle.postProcess)}:${this._getSharedStateDefinitionRefId(null == stateStyle ? void 0 : stateStyle.referer)}`;
+          })].join("|"));
+        }), !cacheKeys.length) return this._dynamicSharedStateNames.clear(), void (void 0 !== this._product.sharedStateDefinitions && (this._product.sharedStateDefinitions = void 0));
+        const cacheKey = cacheKeys.sort().join("||");
+        this._dynamicSharedStateNames = dynamicSharedStateNames, cacheKey === this._sharedStateDefinitionsCacheKey && this._sharedStateDefinitionsCache ? this._product.sharedStateDefinitions !== this._sharedStateDefinitionsCache && (this._product.sharedStateDefinitions = this._sharedStateDefinitionsCache) : (this._sharedStateDefinitionsCacheKey = cacheKey, this._sharedStateDefinitionsCache = sharedStateDefinitions, this._product.sharedStateDefinitions = sharedStateDefinitions);
       }
       _addProgressiveGraphic(parent, g) {
         parent.incrementalAppendChild(g);
@@ -57892,6 +58727,22 @@
           g.context.finalAttrs = finalAttrs;
         });
       }
+      _excludeStateControlledDiffAttrs(g, diffAttrs) {
+        var _a;
+        if (!diffAttrs || !Object.keys(diffAttrs).length) return diffAttrs;
+        let nextDiffAttrs;
+        const excludeKey = key => {
+          key in diffAttrs && (nextDiffAttrs || (nextDiffAttrs = Object.assign({}, diffAttrs)), delete nextDiffAttrs[key]);
+        };
+        return g.resolvedStatePatch && Object.keys(g.resolvedStatePatch).forEach(excludeKey), null === (_a = g.context.states) || void 0 === _a || _a.forEach(stateName => {
+          var _a;
+          const encoder = null === (_a = this._encoderOfState) || void 0 === _a ? void 0 : _a[stateName];
+          encoder && Object.keys(encoder).forEach(excludeKey);
+        }), null != nextDiffAttrs ? 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) => {
@@ -57899,8 +58750,8 @@
           const finalAttrs = g.context.finalAttrs,
             hasStateAnimation = this.hasAnimationByState(g.context.animationState);
           if (g.setAttributes) {
-            const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
-            g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, g.initAttributes({}), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), !(null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) && this._product && g.parent !== this._product && this._product.appendChild(g), hasAnimation && g.setFinalAttributes(finalAttrs);
+            const diffAttrs = this._excludeStateControlledDiffAttrs(g, getDiffAttributesOfGraphic(g, finalAttrs));
+            g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, g.initAttributes(finalAttrs), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), !(null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) && this._product && g.parent !== this._product && this._product.appendChild(g), hasAnimation && g.setFinalAttributes(finalAttrs);
           } else {
             const mockGraphic = g;
             g = this._createGraphic(finalAttrs), hasAnimation && (null === (_a = g.setFinalAttributes) || void 0 === _a || _a.call(g, finalAttrs)), g.context = mockGraphic.context, g.context.diffAttrs = finalAttrs, g.stateSort = this._stateSort;
@@ -57996,7 +58847,14 @@
         if (!this._product) return;
         const stateInfo = this.state.getStateInfo(key);
         this._graphics.forEach(g => {
-          "in" === this.state.checkOneState(g, g.context.data, stateInfo) ? addGraphicState(g, key, !0, this.hasAnimationByState("state")) : removeGraphicState(g, key, this.hasAnimationByState("state"));
+          const reinitStateGraphic = g,
+            statesClearedBeforeReInit = reinitStateGraphic[statesClearedBeforeReInitKey],
+            wasStateClearedBeforeReInit = null == statesClearedBeforeReInit ? void 0 : statesClearedBeforeReInit.includes(key),
+            hasStateAnimation = !wasStateClearedBeforeReInit && this.hasAnimationByState("state");
+          if ("in" === this.state.checkOneState(g, g.context.data, stateInfo) ? addGraphicState(g, key, !0, hasStateAnimation) : removeGraphicState(g, key, hasStateAnimation), wasStateClearedBeforeReInit) {
+            const nextStates = statesClearedBeforeReInit.filter(stateName => stateName !== key);
+            nextStates.length ? reinitStateGraphic[statesClearedBeforeReInitKey] = nextStates : delete reinitStateGraphic[statesClearedBeforeReInitKey];
+          }
         });
       }
       clearExitGraphics() {
@@ -58016,7 +58874,7 @@
                 })
               }));
               g.applyAnimationState(["exit"], [1 === exitConfigList.length ? exitConfigList[0] : exitConfigList], () => {
-                doRemove(g, key);
+                g.context.diffState === DiffState.exit && g.isExiting && this._graphicMap.get(key) === g && doRemove(g, key);
               });
             }
           } else doRemove(g, key);
@@ -58133,7 +58991,8 @@
       }
       clearBeforeReInit() {
         this.state.clearAllStateInfo(), this.uncommit(), this.stateStyle = {}, this.getGraphics().forEach(g => {
-          g.clearStates();
+          var _a;
+          (null === (_a = g.currentStates) || void 0 === _a ? void 0 : _a.length) && (g[statesClearedBeforeReInitKey] = g.currentStates.slice());
         });
       }
     }
@@ -58208,7 +59067,7 @@
         });
       }
       release() {
-        super.release(), this.removeProduct();
+        super.release(), this.removeProduct(!0);
       }
     }
     GroupMark.type = "group";
@@ -58786,6 +59645,31 @@
       }
     }
 
+    const releaseVRenderComponentSync = (component, removeFromParent = !0) => {
+      var _a, _b, _c, _d, _e;
+      const parent = component.parent;
+      null === (_a = component.release) || void 0 === _a || _a.call(component, !0), null === (_c = (_b = component).removeAllChild) || void 0 === _c || _c.call(_b, !0), removeFromParent && (null === (_e = null !== (_d = component.parent) && void 0 !== _d ? _d : parent) || void 0 === _e || _e.removeChild(component, !0));
+    };
+    const collectVRenderComponents = component => {
+      var _a, _b;
+      const components = [component];
+      return null === (_b = (_a = component).forEachChildren) || void 0 === _b || _b.call(_a, child => {
+        components.push(...collectVRenderComponents(child));
+      }), components;
+    };
+    const releaseVRenderComponent = (component, options = {}) => {
+      var _a, _b;
+      const {
+        enableExitAnimation = !0,
+        removeFromParent = !0,
+        onComplete: onComplete
+      } = options;
+      return !(!enableExitAnimation || !(null === (_b = (_a = component).releaseWithExitAnimation) || void 0 === _b ? void 0 : _b.call(_a, {
+        removeFromParent: removeFromParent,
+        onComplete: onComplete
+      }))) || (releaseVRenderComponentSync(component, removeFromParent), !1);
+    };
+
     var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
         return new (P || (P = Promise))(function (resolve, reject) {
           function fulfilled(value) {
@@ -59057,14 +59941,14 @@
         for (const key in Factory.dataParser) registerDataSetInstanceParser(this._dataSet, key, Factory.dataParser[key]);
       }
       updateCustomConfigAndRerender(updateSpecResult, sync, option = {}) {
-        if (!this._isReleased && updateSpecResult) return isFunction$1(updateSpecResult) && (updateSpecResult = updateSpecResult()), updateSpecResult.reAnimate && (this.stopAnimation(), this._updateAnimateState(!0)), this._reCompile(updateSpecResult), sync ? this._renderSync(option) : this._renderAsync(option);
+        if (!this._isReleased && updateSpecResult) return isFunction$1(updateSpecResult) && (updateSpecResult = updateSpecResult()), updateSpecResult.reAnimate && (this.stopAnimation(), this._updateAnimateState(!0)), this._reCompile(updateSpecResult), isUpdateSpecResultLocalOnly(updateSpecResult) ? this : sync ? this._renderSync(option) : this._renderAsync(option);
       }
       _updateCustomConfigAndRecompile(updateSpecResult, option = {}) {
         return !!updateSpecResult && (this._reCompile(updateSpecResult), this._beforeRender(option));
       }
       _reCompile(updateResult, morphConfig) {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (updateResult.reMake && (this._releaseData(), this._initDataSet(), null === (_a = this._chart) || void 0 === _a || _a.release(), this._chart = null), updateResult.reTransformSpec && (this._chartSpecTransformer = null), updateResult.changeTheme ? (this._setCurrentTheme(), this._setFontFamilyTheme(this.getTheme("fontFamily"))) : updateResult.changeBackground && (null === (_b = this._compiler) || void 0 === _b || _b.setBackground(this._getBackground())), updateResult.reMake ? (null === (_c = this._compiler) || void 0 === _c || _c.releaseGrammar(!0), this._userEvents.forEach(e => {
+        if (updateResult.reMake && (this._releaseData(), this._initDataSet(), null === (_a = this._chart) || void 0 === _a || _a.release(!1), this._chart = null), updateResult.reTransformSpec && (this._chartSpecTransformer = null), updateResult.changeTheme ? (this._setCurrentTheme(), this._setFontFamilyTheme(this.getTheme("fontFamily"))) : updateResult.changeBackground && (null === (_b = this._compiler) || void 0 === _b || _b.setBackground(this._getBackground())), updateResult.reMake ? (null === (_c = this._compiler) || void 0 === _c || _c.releaseGrammar(!0), this._userEvents.forEach(e => {
           var _a;
           return null === (_a = this._event) || void 0 === _a ? void 0 : _a.on(e.eType, e.query, e.handler);
         })) : updateResult.reCompile && (null === (_d = this._compiler) || void 0 === _d || _d.clear({
@@ -59141,7 +60025,21 @@
       }
       release() {
         var _a, _b, _c, _d;
-        (null === (_a = this._onResize) || void 0 === _a ? void 0 : _a.cancel) && this._onResize.cancel(), this._chartPluginApply("releaseAll"), this._chartPlugin = null, this._chartSpecTransformer = null, null === (_b = this._chart) || void 0 === _b || _b.release(), null === (_c = this._eventDispatcher) || void 0 === _c || _c.release(), null === (_d = this._compiler) || void 0 === _d || _d.release(), this._unBindResizeEvent(), this._releaseData(), this._onError = null, this._onResize = null, this._container = null, this._currentTheme = null, this._cachedProcessedTheme = null, this._option = null, this._chart = null, this._compiler = null, this._spec = null, this._specInfo = null, this._originalSpec = null, this._userEvents = null, this._event = null, this._eventDispatcher = null, this._isReleased = !0, InstanceManager.unregisterInstance(this);
+        (null === (_a = this._onResize) || void 0 === _a ? void 0 : _a.cancel) && this._onResize.cancel(), this._chartPluginApply("releaseAll"), this._chartPlugin = null, this._chartSpecTransformer = null, this._forceReleaseExitingVRenderComponents(), null === (_b = this._chart) || void 0 === _b || _b.release(), null === (_c = this._eventDispatcher) || void 0 === _c || _c.release(), null === (_d = this._compiler) || void 0 === _d || _d.release(), this._unBindResizeEvent(), this._releaseData(), this._onError = null, this._onResize = null, this._container = null, this._currentTheme = null, this._cachedProcessedTheme = null, this._option = null, this._chart = null, this._compiler = null, this._spec = null, this._specInfo = null, this._originalSpec = null, this._userEvents = null, this._event = null, this._eventDispatcher = null, this._isReleased = !0, InstanceManager.unregisterInstance(this);
+      }
+      _registerExitingVRenderComponent(component) {
+        var _a;
+        this._exitingVRenderComponents = null !== (_a = this._exitingVRenderComponents) && void 0 !== _a ? _a : new Set(), this._exitingVRenderComponents.add(component);
+      }
+      _unregisterExitingVRenderComponent(component) {
+        var _a;
+        null === (_a = this._exitingVRenderComponents) || void 0 === _a || _a.delete(component);
+      }
+      _forceReleaseExitingVRenderComponents() {
+        var _a;
+        (null === (_a = this._exitingVRenderComponents) || void 0 === _a ? void 0 : _a.size) && (this._exitingVRenderComponents.forEach(component => {
+          releaseVRenderComponentSync(component);
+        }), this._exitingVRenderComponents.clear());
       }
       updateData(id, data, parserOptions, userUpdateOptions) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -59238,8 +60136,10 @@
       }
       _updateModelSpec(model, spec, sync = !1, forceMerge = !1, morphConfig) {
         forceMerge && (spec = mergeSpec({}, model.getSpec(), spec));
-        const result = model.updateSpec(spec);
-        return model.reInit(spec), (result.change || result.reCompile || result.reMake || result.reSize || result.reRender) && this._chart.reDataFlow(), this.updateCustomConfigAndRerender(result, sync, {
+        const result = model.updateSpec(spec),
+          localOnly = isUpdateSpecResultLocalOnly(result),
+          componentOnly = isUpdateSpecResultComponentOnly(result);
+        return localOnly || (model.reInit(spec), !componentOnly && (result.change || result.reCompile || result.reMake || result.reSize || result.reRender) && this._chart.reDataFlow()), this.updateCustomConfigAndRerender(result, sync, {
           morphConfig: morphConfig,
           transformSpec: !1,
           actionSource: "updateModelSpec"
@@ -60111,6 +61011,8 @@
       data: !0
     };
     const defaultSeriesCompileCheckKeys = {
+      xField: !0,
+      yField: !0,
       invalidType: !0,
       animation: !0,
       animationAppear: !0,
@@ -60119,6 +61021,13 @@
       animationExit: !0,
       animationNormal: !0
     };
+    const defaultSeriesCompileOnlyCheckKeys = {
+      animationAppear: !0,
+      animationEnter: !0,
+      animationUpdate: !0,
+      animationExit: !0,
+      animationNormal: !0
+    };
 
     const AnimationStates = [...Object.keys(DEFAULT_ANIMATION_CONFIG), "normal"];
     function animationConfig(defaultConfig = {}, userConfig, params) {
@@ -60349,6 +61258,30 @@
       } : null;
     }
 
+    const defaultSeriesDataRelatedCheckKeys = Object.keys(defaultSeriesCompileCheckKeys).reduce((keys, key) => (defaultSeriesCompileOnlyCheckKeys[key] || (keys[key] = !0), keys), {}),
+      defaultSeriesSpecUpdatePolicy = {
+        compileOnlyKeys: defaultSeriesCompileOnlyCheckKeys,
+        dataRelatedKeys: defaultSeriesDataRelatedCheckKeys
+      },
+      isSpecObject = value => isObject$2(value) && !isArray$1(value) && !isFunction$1(value),
+      hasOnlyAllowedSubKeyChanges = (specValue, prevSpecValue, allowedSubKeys) => {
+        if (!isSpecObject(specValue) || !isSpecObject(prevSpecValue)) return !1;
+        let changed = !1;
+        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 !1;
+          changed = !0;
+        }
+        return changed;
+      };
+    function markSeriesCompileEffect(compareResult, dataRelated = !1) {
+      compareResult.effects = Object.assign(Object.assign({}, compareResult.effects), {
+        series: !0,
+        compile: !0,
+        layout: !0,
+        render: !0
+      }), dataRelated && (compareResult.effects.data = !0, compareResult.effects.scaleDomain = !0);
+    }
     class BaseSeries extends BaseModel {
       getRegion() {
         return this._region;
@@ -60843,22 +61776,37 @@
         newMarks.length !== prevMarks.length || prevMarks.some((prev, index) => prev.type !== newMarks[index].type || prev.id !== newMarks[index].id || prev.name !== newMarks[index].name) ? compareResult.reMake = !0 : prevMarks.some((prev, index) => prev.visible !== newMarks[index].visible) && (compareResult.reCompile = !0);
       }
       _compareLabelSpec(newLabels, prevLabels, compareResult) {
-        newLabels.length !== prevLabels.length || prevLabels.some((prev, index) => prev.labelLayout !== newLabels[index].labelLayout || prev.visible !== newLabels[index].visible) ? compareResult.reMake = !0 : !compareResult.reCompile && prevLabels.some((prev, index) => !isEqual(prev, newLabels[index])) && (compareResult.reCompile = !0);
+        newLabels.length !== prevLabels.length || prevLabels.some((prev, index) => prev.labelLayout !== newLabels[index].labelLayout || prev.visible !== newLabels[index].visible) ? compareResult.reMake = !0 : !compareResult.reCompile && prevLabels.some((prev, index) => !isEqual(prev, newLabels[index])) && (compareResult.reCompile = !0, markSeriesCompileEffect(compareResult));
+      }
+      _getSpecUpdatePolicy() {
+        return defaultSeriesSpecUpdatePolicy;
       }
       _compareSpec(spec, prevSpec, ignoreCheckKeys) {
+        var _a, _b, _c, _d;
         const result = super._compareSpec(spec, prevSpec),
           currentKeys = Object.keys(prevSpec || {}).sort(),
           nextKeys = Object.keys(spec || {}).sort();
         if (!isEqual(currentKeys, nextKeys)) return result.reMake = !0, result;
-        const ignores = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys), {
-          extensionMark: !0,
-          label: !0,
-          totalLabel: !0
-        });
-        return this._compareExtensionMarksSpec(array(spec.extensionMark), array(prevSpec.extensionMark), result), !result.reMake && this._compareLabelSpec(array(spec.label), array(prevSpec.label), result), !result.reMake && this._compareLabelSpec(array(spec.totalLabel), array(prevSpec.totalLabel), result), result.reMake ? result : (!result.reCompile && this._marks.getMarks().some(m => {
+        const specUpdatePolicy = this._getSpecUpdatePolicy(),
+          compileOnlyKeys = null !== (_a = specUpdatePolicy.compileOnlyKeys) && void 0 !== _a ? _a : {},
+          dataRelatedKeys = null !== (_b = specUpdatePolicy.dataRelatedKeys) && void 0 !== _b ? _b : {},
+          compileOnlySubKeys = null !== (_c = specUpdatePolicy.compileOnlySubKeys) && void 0 !== _c ? _c : {},
+          compileCheckKeys = Object.assign(Object.assign({}, compileOnlyKeys), dataRelatedKeys),
+          ignores = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), compileCheckKeys), ignoreCheckKeys), {
+            extensionMark: !0,
+            label: !0,
+            totalLabel: !0
+          });
+        if (this._compareExtensionMarksSpec(array(spec.extensionMark), array(prevSpec.extensionMark), result), !result.reMake && this._compareLabelSpec(array(spec.label), array(prevSpec.label), result), !result.reMake && this._compareLabelSpec(array(spec.totalLabel), array(prevSpec.totalLabel), result), result.reMake) return result;
+        !result.reCompile && this._marks.getMarks().some(m => {
           var _a, _b;
           return ignores[m.name] = !0, (null === (_a = prevSpec[m.name]) || void 0 === _a ? void 0 : _a.visible) !== (null === (_b = spec[m.name]) || void 0 === _b ? void 0 : _b.visible);
-        }) && (result.reCompile = !0), !result.reCompile && currentKeys.some(k => defaultSeriesCompileCheckKeys[k] && !isEqual(spec[k], prevSpec[k])) && (result.reCompile = !0), currentKeys.some(k => !ignores[k] && !isEqual(spec[k], prevSpec[k])) ? (result.reMake = !0, result) : result);
+        }) && (result.reCompile = !0);
+        const changedCompileKeys = currentKeys.filter(k => compileCheckKeys[k] && !isEqual(spec[k], prevSpec[k])),
+          changedCompileOnlySubKeys = currentKeys.filter(k => compileOnlySubKeys[k] && hasOnlyAllowedSubKeyChanges(spec[k], prevSpec[k], compileOnlySubKeys[k]));
+        return changedCompileOnlySubKeys.forEach(k => {
+          ignores[k] = !0;
+        }), result.reCompile || !changedCompileKeys.length && !changedCompileOnlySubKeys.length || (result.reCompile = !0), changedCompileKeys.some(k => dataRelatedKeys[k]) ? markSeriesCompileEffect(result, !0) : result.reCompile && !(null === (_d = result.effects) || void 0 === _d ? void 0 : _d.series) && (changedCompileKeys.length || changedCompileOnlySubKeys.length) && markSeriesCompileEffect(result), currentKeys.some(k => !ignores[k] && !isEqual(spec[k], prevSpec[k])) ? (result.reMake = !0, result) : result;
       }
       _updateSpecData() {
         !this._rawData || !this._spec.data || this._spec.data instanceof DataView || updateDataViewInData(this._rawData, this._spec.data, !0);
@@ -60998,10 +61946,17 @@
       _getSeriesDataKey(datum) {
         let key = "";
         if (!datum) return key;
-        const dimensionFields = this.getDimensionField();
-        key = dimensionFields.map(field => datum[field]).join("_");
-        const seriesField = this.getSeriesField();
-        return seriesField && !dimensionFields.includes(seriesField) && (key += `_${datum[seriesField]}`), key;
+        const seriesField = this.getSeriesField(),
+          dimensionFields = this.getDimensionField(),
+          seriesFieldValue = seriesField ? datum[seriesField] : void 0;
+        let lastDimensionValue,
+          hasSeriesFieldInDimension = !1;
+        for (let i = 0; i < dimensionFields.length; i++) {
+          const field = dimensionFields[i],
+            dimensionValue = datum[field];
+          key += `${i > 0 ? "_" : ""}${isNil$1(dimensionValue) ? "" : dimensionValue}`, hasSeriesFieldInDimension || (hasSeriesFieldInDimension = field === seriesField), lastDimensionValue = dimensionValue;
+        }
+        return !seriesField || hasSeriesFieldInDimension || dimensionFields.length > 1 && lastDimensionValue === seriesFieldValue || (key += `_${seriesFieldValue}`), key;
       }
       addViewDataFilter(option) {
         var _a, _b;
@@ -61645,6 +62600,10 @@
       }
     };
 
+    const LINE_LIKE_SERIES_DATA_RELATED_KEYS = {
+      sampling: !0,
+      samplingFactor: !0
+    };
     class LineLikeSeriesMixin {
       addSamplingCompile() {
         if (this._spec.sampling) {
@@ -62575,7 +63534,7 @@
     };
     class BaseComponent extends LayoutModel {
       constructor() {
-        super(...arguments), this.name = "component", this.modelType = "component", this.transformerConstructor = BaseComponentSpecTransformer, this._delegateEvent = (component, event, type, item = null, datum = null) => {
+        super(...arguments), this.name = "component", this.modelType = "component", this.transformerConstructor = BaseComponentSpecTransformer, this._forceReleaseVRenderComponents = !1, this._delegateEvent = (component, event, type, item = null, datum = null) => {
           var _a, _b;
           event instanceof CustomEvent || this.event.emit(type, {
             model: this,
@@ -62622,16 +63581,49 @@
         const result = super._compareSpec(spec, prevSpec);
         return result.reMake || (result.reMake = ["seriesId", "seriesIndex", "regionId", "regionIndex"].some(k => !isEqual(null == prevSpec ? void 0 : prevSpec[k], spec[k]))), (null == prevSpec ? void 0 : prevSpec.visible) !== spec.visible && (result.reCompile = !0), result;
       }
+      beforeRelease() {
+        super.beforeRelease(), this._forceReleaseVRenderComponents = !0, this._forceReleaseExitingVRenderComponents();
+      }
       release() {
         var _a;
-        super.release(), this.clear(), null === (_a = this.pluginService) || void 0 === _a || _a.releaseAll(), this.pluginService = null;
+        this._shouldReleaseVRenderComponentsImmediately() && this._forceReleaseExitingVRenderComponents(), this.clear(), super.release(), null === (_a = this.pluginService) || void 0 === _a || _a.releaseAll(), this.pluginService = null;
+      }
+      _shouldReleaseVRenderComponentsImmediately() {
+        return this._forceReleaseVRenderComponents;
+      }
+      _forceReleaseExitingVRenderComponents() {
+        var _a;
+        (null === (_a = this._exitingVRenderComponents) || void 0 === _a ? void 0 : _a.size) && (this._exitingVRenderComponents.forEach(component => {
+          var _a, _b, _c;
+          releaseVRenderComponentSync(component), null === (_c = null === (_b = null === (_a = this._option) || void 0 === _a ? void 0 : _a.globalInstance) || void 0 === _b ? void 0 : _b._unregisterExitingVRenderComponent) || void 0 === _c || _c.call(_b, component);
+        }), this._exitingVRenderComponents.clear());
+      }
+      _releaseVRenderComponent(component) {
+        var _a;
+        if (!this._shouldReleaseVRenderComponentsImmediately()) {
+          const exitingComponents = collectVRenderComponents(component),
+            releasedWithExit = releaseVRenderComponent(component, {
+              enableExitAnimation: !0,
+              removeFromParent: !0,
+              onComplete: () => {
+                exitingComponents.forEach(exitingComponent => {
+                  var _a, _b, _c, _d;
+                  null === (_a = this._exitingVRenderComponents) || void 0 === _a || _a.delete(exitingComponent), null === (_d = null === (_c = null === (_b = this._option) || void 0 === _b ? void 0 : _b.globalInstance) || void 0 === _c ? void 0 : _c._unregisterExitingVRenderComponent) || void 0 === _d || _d.call(_c, exitingComponent);
+                });
+              }
+            });
+          return releasedWithExit ? (this._exitingVRenderComponents = null !== (_a = this._exitingVRenderComponents) && void 0 !== _a ? _a : new Set(), void exitingComponents.forEach(exitingComponent => {
+            var _a, _b, _c;
+            this._exitingVRenderComponents.add(exitingComponent), null === (_c = null === (_b = null === (_a = this._option) || void 0 === _a ? void 0 : _a.globalInstance) || void 0 === _b ? void 0 : _b._registerExitingVRenderComponent) || void 0 === _c || _c.call(_b, exitingComponent);
+          })) : void 0;
+        }
+        releaseVRenderComponentSync(component);
       }
       clear() {
         var _a;
         const components = this._getNeedClearVRenderComponents();
         components && components.length && components.forEach(c => {
-          var _a;
-          c && (c.release(!0), null === (_a = this.getContainer()) || void 0 === _a || _a.removeChild(c), c = null);
+          c && this._releaseVRenderComponent(c);
         }), this._container = null, null === (_a = this.pluginService) || void 0 === _a || _a.clearAll();
       }
       compile() {
@@ -62685,8 +63677,45 @@
       getComponent() {
         return this._component;
       }
+      _clearExitingComponent(component) {
+        this._exitingComponent === component && (this._unregisterExitingComponent(component), this._exitingComponent = void 0, this._exitingProduct = void 0);
+      }
+      _removeProductAfterExit(component, product) {
+        product.parent && product.parent.removeChild(product, !0), this._product === product && (this._product = null, this._compiledProductId = null), this._clearExitingComponent(component);
+      }
+      _registerExitingComponent(component) {
+        var _a, _b, _c, _d, _e;
+        null === (_e = null === (_d = null === (_c = null === (_b = null === (_a = this.model) || void 0 === _a ? void 0 : _a.getOption) || void 0 === _b ? void 0 : _b.call(_a)) || void 0 === _c ? void 0 : _c.globalInstance) || void 0 === _d ? void 0 : _d._registerExitingVRenderComponent) || void 0 === _e || _e.call(_d, component);
+      }
+      _unregisterExitingComponent(component) {
+        var _a, _b, _c, _d, _e;
+        null === (_e = null === (_d = null === (_c = null === (_b = null === (_a = this.model) || void 0 === _a ? void 0 : _a.getOption) || void 0 === _b ? void 0 : _b.call(_a)) || void 0 === _c ? void 0 : _c.globalInstance) || void 0 === _d ? void 0 : _d._unregisterExitingVRenderComponent) || void 0 === _e || _e.call(_d, component);
+      }
+      _releaseComponentWithExitAnimation(component, releaseProduct) {
+        var _a, _b;
+        const product = this._product;
+        if (!component || (null === (_b = null === (_a = this.model) || void 0 === _a ? void 0 : _a._shouldReleaseVRenderComponentsImmediately) || void 0 === _b ? void 0 : _b.call(_a))) return !1;
+        const releasedWithExit = releaseVRenderComponent(component, {
+          enableExitAnimation: !0,
+          removeFromParent: !0,
+          onComplete: () => {
+            releaseProduct && product ? this._removeProductAfterExit(component, product) : this._clearExitingComponent(component);
+          }
+        });
+        return releasedWithExit && (this._exitingComponent = component, this._exitingProduct = releaseProduct ? product : void 0, this._registerExitingComponent(component)), releasedWithExit;
+      }
       clearComponent() {
-        this._component && (this._component.parent && this._component.parent.removeChild(this._component), this._component = null);
+        var _a, _b;
+        const component = this._component;
+        component && ((null === (_b = null === (_a = this.model) || void 0 === _a ? void 0 : _a._shouldReleaseVRenderComponentsImmediately) || void 0 === _b ? void 0 : _b.call(_a)) ? releaseVRenderComponentSync(component) : this._releaseComponentWithExitAnimation(component, !1), this._component = null);
+      }
+      releaseWithExitAnimation() {
+        const component = this._component;
+        return !!this._releaseComponentWithExitAnimation(component, !0) && (this._component = null, this._exitingComponent = component, !0);
+      }
+      forceReleaseExitAnimation() {
+        var _a;
+        this._exitingComponent && (releaseVRenderComponentSync(this._exitingComponent), this._unregisterExitingComponent(this._exitingComponent), (null === (_a = this._exitingProduct) || void 0 === _a ? void 0 : _a.parent) && this._exitingProduct.parent.removeChild(this._exitingProduct, !0), this._exitingComponent = void 0, this._exitingProduct = void 0);
       }
       _getAttrsFromConfig(attrs = {}) {
         const configAttrs = super._getAttrsFromConfig(attrs);
@@ -62714,7 +63743,8 @@
         }), this.needClear = !0;
       }
       release() {
-        super.release(), this.removeProduct();
+        var _a, _b;
+        return (null === (_b = null === (_a = this.model) || void 0 === _a ? void 0 : _a._shouldReleaseVRenderComponentsImmediately) || void 0 === _b ? void 0 : _b.call(_a)) ? (this.forceReleaseExitAnimation(), super.release(), void this.removeProduct(!0)) : this._exitingComponent ? (this._releaseComponentWithExitAnimation(this._exitingComponent, !0) || this.removeProduct(!0), void super.release()) : void (this.releaseWithExitAnimation() ? super.release() : (super.release(), this.removeProduct(!0)));
       }
     }
     ComponentMark.type = "component";
@@ -62733,6 +63763,19 @@
       }
       return t;
     };
+    const AXIS_COMPONENT_ONLY_CHANGE_KEYS = {
+      grid: !0,
+      subGrid: !0,
+      tick: !0,
+      subTick: !0,
+      label: !0,
+      domainLine: !0,
+      title: !0,
+      maxWidth: !0,
+      minWidth: !0,
+      maxHeight: !0,
+      minHeight: !0
+    };
     class AxisComponent extends BaseComponent {
       getOrient() {
         return this._orient;
@@ -62966,10 +64009,19 @@
       }
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return result.reMake ? result : (result.reRender = !0, (null == prevSpec ? void 0 : prevSpec.type) !== (null == spec ? void 0 : spec.type) || (null == prevSpec ? void 0 : prevSpec.visible) !== (null == spec ? void 0 : spec.visible) ? (result.reMake = !0, result) : (result.reMake = ["grid", "subGrid", "tick", "subTick", "label", "domainLine", "title"].some(k => {
+        if (result.reMake) return result;
+        const specChanged = !isEqual(prevSpec, spec);
+        return result.reRender = !0, (null == prevSpec ? void 0 : prevSpec.type) !== (null == spec ? void 0 : spec.type) || (null == prevSpec ? void 0 : prevSpec.visible) !== (null == spec ? void 0 : spec.visible) ? (result.reMake = !0, result) : (result.reMake = ["grid", "subGrid", "tick", "subTick", "label", "domainLine", "title"].some(k => {
           var _a, _b;
           return (null === (_a = null == prevSpec ? void 0 : prevSpec[k]) || void 0 === _a ? void 0 : _a.visible) !== (null === (_b = null == spec ? void 0 : spec[k]) || void 0 === _b ? void 0 : _b.visible);
-        }), result));
+        }), specChanged && !result.reMake && this._isComponentOnlySpecChange(spec, prevSpec) && (result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result);
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpec ? void 0 : prevSpec[key], null == spec ? void 0 : spec[key]) || AXIS_COMPONENT_ONLY_CHANGE_KEYS[key]);
       }
       _getAxisAttributes() {
         const spec = this._spec,
@@ -64872,6 +65924,12 @@
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.line, this.transformerConstructor = LineLikeSeriesSpecTransformer, this._sortDataByAxis = !1;
       }
+      _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(), this.addOverlapCompile();
       }
@@ -65254,6 +66312,11 @@
       }
       return t;
     };
+    const MARKER_COMPONENT_SPEC_KEYS = {
+      [ComponentTypeEnum.markPoint]: !0,
+      [ComponentTypeEnum.markLine]: !0,
+      [ComponentTypeEnum.markArea]: !0
+    };
     let BaseChart$1 = class BaseChart extends CompilableBase {
       getSpec() {
         return this._spec;
@@ -65296,7 +66359,7 @@
       _setModelOption() {}
       constructor(spec, option) {
         var _a, _b, _c, _d;
-        super(option), this.type = "chart", this.id = createID(), this._regions = [], this._series = [], this._components = [], this._layoutRect = {
+        super(option), this.type = "chart", this.id = createID(), this._regions = [], this._series = [], this._components = [], this._specTransformer = null, this._layoutRect = {
           x: 0,
           y: 0,
           width: DEFAULT_CHART_WIDTH,
@@ -65344,7 +66407,7 @@
         }), this._setModelOption && this._setModelOption(), this._spec = spec;
       }
       created(transformer) {
-        this._chartData.parseData(this._spec.data), this._createGlobalScale(), this._createBackground(), this._createLayout(), transformer.forEachRegionInSpec(this._spec, this._createRegion.bind(this)), transformer.forEachSeriesInSpec(this._spec, this._createSeries.bind(this)), transformer.forEachComponentInSpec(this._spec, this._createComponent.bind(this), this._option.getSpecInfo());
+        this._specTransformer = transformer, this._chartData.parseData(this._spec.data), this._createGlobalScale(), this._createBackground(), this._createLayout(), transformer.forEachRegionInSpec(this._spec, this._createRegion.bind(this)), transformer.forEachSeriesInSpec(this._spec, this._createSeries.bind(this)), transformer.forEachComponentInSpec(this._spec, this._createComponent.bind(this), this._option.getSpecInfo());
       }
       _initInteractions() {
         if (this._option.disableTriggerEvent) return;
@@ -65636,11 +66699,14 @@
       _getSpecKeys(spec) {
         const ignoreKeys = {
           width: !0,
-          height: !0
+          height: !0,
+          xField: !0,
+          yField: !0
         };
         return Object.keys(spec).filter(key => !ignoreKeys[key]).sort();
       }
       updateSpec(spec) {
+        var _a;
         const result = {
           change: !1,
           reMake: !1,
@@ -65648,16 +66714,28 @@
           reSize: !1,
           reCompile: !1
         };
-        if (this.setLayoutTag(!0, null, !1), spec.type !== this.type) return result.reMake = !0, result;
+        if (spec.type !== this.type) return result.reMake = !0, this.setLayoutTag(!0, null, !1), result;
         const currentKeys = this._getSpecKeys(this._spec),
           nextKeys = this._getSpecKeys(spec);
-        if (!isEqual(currentKeys, nextKeys)) return result.reMake = !0, result;
+        if (!isEqual(currentKeys, nextKeys)) return result.reMake = !0, this.setLayoutTag(!0, null, !1), 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) return result.reMake = !0, result;
-        }
-        const oldSpec = this._spec;
-        return this._spec = spec, this.updateChartConfig(result, oldSpec), result.reMake ? result : (this.updateGlobalScale(result), result.reMake ? result : (this.updateRegionSpec(result), result.reMake ? result : (this.updateComponentSpec(result), result.reMake ? result : (this.updateSeriesSpec(result), result.reMake || (this.reInit(), this.updateDataSpec(), this.updateGlobalScaleDomain()), result))));
+          const key = currentKeys[i],
+            currentSpec = this._spec[key],
+            nextSpec = spec[key];
+          if (isArray$1(currentSpec) && currentSpec.length !== array(nextSpec).length && !this._canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec)) return result.reMake = !0, this.setLayoutTag(!0, null, !1), result;
+        }
+        const oldSpec = this._spec,
+          onlyMarkerComponentsRemoved = this._isOnlyMarkerComponentsRemoved(this._spec, spec, currentKeys),
+          onlyComponentSpecsChanged = this._isOnlyComponentSpecsChanged(this._spec, spec, currentKeys),
+          onlySeriesSpecsChanged = this._isOnlySeriesSpecsChanged(this._spec, spec, currentKeys);
+        if (this._spec = spec, onlyMarkerComponentsRemoved) return this._removeMarkerComponentsForEmptySpecs(result), result;
+        if (this.updateChartConfig(result, oldSpec), result.reMake) return this.setLayoutTag(!0, null, !1), result;
+        if (this.updateGlobalScale(result), result.reMake) return this.setLayoutTag(!0, null, !1), result;
+        if (this.updateRegionSpec(result), result.reMake) return this.setLayoutTag(!0, null, !1), result;
+        const componentUpdateResult = this.updateComponentSpec(result);
+        return result.reMake ? (this.setLayoutTag(!0, null, !1), result) : isUpdateSpecResultLocalOnly(result) ? result : onlyComponentSpecsChanged && !componentUpdateResult.hasNonComponentOnlyUpdate && isUpdateSpecResultComponentOnly(result) ? (componentUpdateResult.componentOnlyUpdatedComponents.forEach(component => {
+          component.reInit(component.getSpec());
+        }), (null === (_a = result.effects) || void 0 === _a ? void 0 : _a.layout) && this.setLayoutTag(!0, null, !1), result) : (this.setLayoutTag(!0, null, !1), this.updateSeriesSpec(result), result.reMake || (this.reInit(), onlySeriesSpecsChanged && this._canSkipChartDataStages(result) || (this.updateDataSpec(), this.updateGlobalScaleDomain())), result);
       }
       updateChartConfig(result, oldSpec) {
         var _a, _b;
@@ -65673,34 +66751,105 @@
         }) : result.reMake = !0);
       }
       updateComponentSpec(result) {
+        const componentOnlyUpdatedComponents = [];
+        let hasNonComponentOnlyUpdate = !1;
         const componentCache = {},
           checkVisibleComponents = {
             [ComponentTypeEnum.title]: !0,
             [ComponentTypeEnum.brush]: !0,
             [ComponentTypeEnum.indicator]: !0
-          };
+          },
+          removedComponents = [];
         this._components.forEach(c => {
           var _a, _b;
           if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) return;
           checkVisibleComponents[c.type] && (checkVisibleComponents[c.type] = !1);
           const compSpecKey = c.specKey || c.type,
             cmpSpec = null !== (_a = this._spec[compSpecKey]) && void 0 !== _a ? _a : {};
-          isArray$1(cmpSpec) ? (componentCache[compSpecKey] = componentCache[compSpecKey] || {
-            specCount: cmpSpec.length,
-            componentCount: 0
-          }, componentCache[compSpecKey].componentCount++, mergeUpdateResult(result, c.updateSpec(null !== (_b = cmpSpec[c.getSpecIndex()]) && void 0 !== _b ? _b : {}, cmpSpec))) : mergeUpdateResult(result, c.updateSpec(cmpSpec));
+          if (isArray$1(cmpSpec)) {
+            if (componentCache[compSpecKey] = componentCache[compSpecKey] || {
+              specCount: cmpSpec.length,
+              componentCount: 0
+            }, this._canRemoveMarkerComponentsWithoutRemake(compSpecKey, [c.getSpec()], cmpSpec)) return void removedComponents.push(c);
+            componentCache[compSpecKey].componentCount++;
+            const componentSpec = null !== (_b = cmpSpec[c.getSpecIndex()]) && void 0 !== _b ? _b : {},
+              previousComponentSpec = c.getSpec(),
+              componentResult = c.updateSpec(componentSpec, cmpSpec);
+            isUpdateSpecResultComponentOnly(componentResult) ? componentOnlyUpdatedComponents.push(c) : isEqual(previousComponentSpec, componentSpec) || (hasNonComponentOnlyUpdate = !0), mergeUpdateResult(result, componentResult);
+          } else {
+            const previousComponentSpec = c.getSpec(),
+              componentResult = c.updateSpec(cmpSpec);
+            isUpdateSpecResultComponentOnly(componentResult) ? componentOnlyUpdatedComponents.push(c) : isEqual(previousComponentSpec, cmpSpec) || (hasNonComponentOnlyUpdate = !0), mergeUpdateResult(result, componentResult);
+          }
         });
         for (const key in componentCache) if (Object.prototype.hasOwnProperty.call(componentCache, key)) {
           const element = componentCache[key];
           element.componentCount !== element.specCount && (result.reMake = !0);
         }
+        removedComponents.length && (removedComponents.forEach(component => {
+          this._removeComponent(component);
+        }), result.change = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          localOnly: !0
+        }));
         const isVisible = compSpec => compSpec && !1 !== compSpec.visible;
-        Object.keys(checkVisibleComponents).forEach(type => {
+        return Object.keys(checkVisibleComponents).forEach(type => {
           if (checkVisibleComponents[type]) {
             const compSpec = this._spec[type];
             (isArray$1(compSpec) ? compSpec.some(isVisible) : isVisible(compSpec)) && (result.reMake = !0);
           }
+        }), {
+          componentOnlyUpdatedComponents: componentOnlyUpdatedComponents,
+          hasNonComponentOnlyUpdate: hasNonComponentOnlyUpdate
+        };
+      }
+      _canRemoveMarkerComponentsWithoutRemake(key, currentSpec, nextSpec) {
+        return MARKER_COMPONENT_SPEC_KEYS[key] && isArray$1(currentSpec) && currentSpec.length > 0 && isArray$1(nextSpec) && 0 === nextSpec.length;
+      }
+      _isOnlyMarkerComponentsRemoved(currentSpec, nextSpec, specKeys) {
+        let hasMarkerRemoval = !1;
+        const onlyMarkerRemoval = specKeys.every(key => this._canRemoveMarkerComponentsWithoutRemake(key, currentSpec[key], nextSpec[key]) ? (hasMarkerRemoval = !0, !0) : isEqual(currentSpec[key], nextSpec[key]));
+        return hasMarkerRemoval && onlyMarkerRemoval;
+      }
+      _isComponentSpecKey(key) {
+        return this._components.some(component => (component.specKey || component.type) === key);
+      }
+      _isOnlyComponentSpecsChanged(currentSpec, nextSpec, specKeys) {
+        let hasComponentSpecChange = !1;
+        const currentSpecRecord = currentSpec,
+          nextSpecRecord = nextSpec,
+          onlyComponentSpecChange = specKeys.every(key => !!isEqual(currentSpecRecord[key], nextSpecRecord[key]) || !!this._isComponentSpecKey(key) && (hasComponentSpecChange = !0, !0));
+        return hasComponentSpecChange && onlyComponentSpecChange;
+      }
+      _isOnlySeriesSpecsChanged(currentSpec, nextSpec, specKeys) {
+        var _a, _b;
+        let hasSeriesSpecChange = !1;
+        const currentSpecRecord = currentSpec,
+          nextSpecRecord = nextSpec,
+          seriesRelatedSpecKeys = null !== (_b = null === (_a = this._specTransformer) || void 0 === _a ? void 0 : _a.getSeriesRelatedSpecKeys()) && void 0 !== _b ? _b : {},
+          onlySeriesSpecChange = specKeys.every(key => !!isEqual(currentSpecRecord[key], nextSpecRecord[key]) || !!seriesRelatedSpecKeys[key] && (hasSeriesSpecChange = !0, !0));
+        return hasSeriesSpecChange && onlySeriesSpecChange;
+      }
+      _canSkipChartDataStages(result) {
+        const effects = result.effects;
+        return !(!(null == effects ? 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,
+            cmpSpec = null !== (_a = this._spec[compSpecKey]) && void 0 !== _a ? _a : {};
+          return this._canRemoveMarkerComponentsWithoutRemake(compSpecKey, [component.getSpec()], cmpSpec);
         });
+        removedComponents.length && (removedComponents.forEach(component => {
+          this._removeComponent(component);
+        }), result.change = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          localOnly: !0
+        }));
+      }
+      _removeComponent(component) {
+        this._components = this._components.filter(c => c !== component), this._idMap.delete(component.id), component.release();
       }
       updateSeriesSpec(result) {
         this._spec.series.length === this._series.length ? this._series.forEach(s => {
@@ -65797,8 +66946,8 @@
           c.compile();
         }), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterComponentCompile) || void 0 === _d || _d.call(_c, this._option.globalInstance);
       }
-      release() {
-        [...this._components, ...this._regions, ...this._series].forEach(m => {
+      release(forceReleaseVRenderComponents = !0) {
+        forceReleaseVRenderComponents && [...this._components, ...this._regions, ...this._series].forEach(m => {
           m.beforeRelease();
         }), super.release(), this.clear(), [...this._components, ...this._regions, ...this._series].forEach(m => {
           m.release();
@@ -65998,9 +67147,18 @@
       }).filter(isValid$1);
     };
 
+    const DEFAULT_SERIES_RELATED_CHART_SPEC_KEYS = {
+      series: !0,
+      label: !0,
+      animationAppear: !0,
+      animationEnter: !0,
+      animationUpdate: !0,
+      animationExit: !0,
+      animationNormal: !0
+    };
     class BaseChartSpecTransformer {
       constructor(option) {
-        this._option = option, this.type = option.type, this.seriesType = option.seriesType;
+        this._seriesRelatedSpecKeys = Object.assign({}, DEFAULT_SERIES_RELATED_CHART_SPEC_KEYS), this._option = option, this.type = option.type, this.seriesType = option.seriesType;
       }
       initChartSpec(chartSpec) {
         return this.transformSpec(chartSpec), this.transformModelSpec(chartSpec);
@@ -66065,8 +67223,19 @@
       _isValidSeries(seriesType) {
         return !0;
       }
+      getSeriesRelatedSpecKeys() {
+        return this._seriesRelatedSpecKeys;
+      }
+      _addSeriesRelatedSpecKeys(...keysList) {
+        keysList.forEach(keys => {
+          null == keys || keys.forEach(key => {
+            this._seriesRelatedSpecKeys[key] = !0;
+          });
+        });
+      }
       _getDefaultSeriesSpec(chartSpec, pickKeys, pickKeys2) {
         var _a, _b, _c, _d, _e;
+        this._addSeriesRelatedSpecKeys(pickKeys, pickKeys2);
         const series = {
             dataKey: chartSpec.dataKey,
             hover: chartSpec.hover,
@@ -67143,6 +68312,12 @@
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.area, this.transformerConstructor = AreaSeriesSpecTransformer, this._sortDataByAxis = !1;
       }
+      _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 = null !== (_a = this._spec.seriesMark) && void 0 !== _a ? _a : "area",
@@ -67419,6 +68594,14 @@
       }
     };
 
+    const BAR_SERIES_COMPILE_ONLY_KEYS = {
+      barWidth: !0,
+      barMinWidth: !0,
+      barMaxWidth: !0,
+      barGapInGroup: !0,
+      barMinHeight: !0,
+      stackCornerRadius: !0
+    };
     class BarSeries extends CartesianSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.bar, this._barMarkName = "bar", this._barMarkType = "rect", this.transformerConstructor = BarSeriesSpecTransformer, this._bandPosition = 0, this._getLinearBarRange = (start, end) => {
@@ -67467,6 +68650,12 @@
           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,
@@ -67488,7 +68677,14 @@
       initMarkStyle() {
         this._barMark && this.setMarkStyle(this._barMark, {
           fill: this.getColorAttribute()
-        }, "normal", AttributeLevel.Series);
+        }, "normal", AttributeLevel.Series), this.initRectMarkStyle();
+      }
+      initRectMarkStyle() {
+        var _a;
+        if (!this._barMark) return;
+        const bandAxisHelper = "vertical" === this.direction ? this._xAxisHelper : this._yAxisHelper,
+          scale = null === (_a = null == bandAxisHelper ? void 0 : bandAxisHelper.getScale) || void 0 === _a ? void 0 : _a.call(bandAxisHelper, 0);
+        scale && ("band" === scale.type ? this.initBandRectMarkStyle() : this.initLinearRectMarkStyle());
       }
       initLabelMarkStyle(textMark) {
         textMark && this.setMarkStyle(textMark, {
@@ -67578,8 +68774,7 @@
         this._barBackgroundViewData = new CompilableData(this._option, barBackgroundData);
       }
       init(option) {
-        var _a, _b;
-        super.init(option), "vertical" === this.direction ? "band" === (null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale(0).type) ? this.initBandRectMarkStyle() : this.initLinearRectMarkStyle() : "band" === (null === (_b = this._yAxisHelper) || void 0 === _b ? void 0 : _b.getScale(0).type) ? this.initBandRectMarkStyle() : this.initLinearRectMarkStyle();
+        super.init(option), this.initRectMarkStyle();
       }
       _shouldDoPreCalculate() {
         const region = this.getRegion();
@@ -67648,7 +68843,13 @@
       }
       _initStackBarMarkStyle() {
         var _a, _b, _c, _d;
-        if (!this._spec.stackCornerRadius) return;
+        if (!this._spec.stackCornerRadius) {
+          const markConfig = this._barMark.getMarkConfig();
+          return void (!markConfig.clip && isNil$1(markConfig.clipPath) || this._barMark.setMarkConfig({
+            clip: !1,
+            clipPath: []
+          }));
+        }
         const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0),
           yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0),
           isVertical = "vertical" === this.direction;
@@ -67981,10 +69182,19 @@
       }
     };
 
+    const SCATTER_SERIES_DATA_RELATED_KEYS = {
+      sizeField: !0
+    };
     class ScatterSeries extends CartesianSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.scatter, 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, this._sizeField = this._spec.sizeField, this._shape = this._spec.shape, this._shapeField = this._spec.shapeField;
       }
@@ -69882,6 +71092,9 @@
       }
     };
 
+    const WATERFALL_SERIES_DATA_RELATED_KEYS = {
+      calculationMode: !0
+    };
     class WaterfallSeries extends BarSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.waterfall, this.transformerConstructor = WaterfallSeriesSpecTransformer, this._leaderLineMark = null, this._stackLabelMark = null, this._labelMark = null, this._reStackTotal = () => {
@@ -69894,6 +71107,12 @@
         var _a;
         return null === (_a = this._totalData) || void 0 === _a ? 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();
         groupFields && groupFields.length && (this._groups = new Group(groupFields), this._data && this._groups.initData(this._data.getDataView(), this._dataSet));
@@ -70686,6 +71905,12 @@
       }
     }
 
+    const BOX_PLOT_SERIES_COMPILE_ONLY_KEYS = {
+        boxWidth: !0,
+        boxMinWidth: !0,
+        boxMaxWidth: !0,
+        boxGapInGroup: !0
+      };
     class BoxPlotSeries extends CartesianSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.boxPlot, this.transformerConstructor = BoxPlotSeriesSpecTransformer, this._bandPosition = 0;
@@ -70720,6 +71945,12 @@
       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();
@@ -70793,7 +72024,7 @@
           fill: null !== (_e = null !== (_d = null === (_c = this._outliersStyle) || void 0 === _c ? void 0 : _c.fill) && void 0 !== _d ? _d : this._boxFillColor) && void 0 !== _e ? _e : this.getColorAttribute(),
           stroke: this.getColorAttribute(),
           size: isNumber$2(null === (_f = this._outliersStyle) || void 0 === _f ? void 0 : _f.size) ? this._outliersStyle.size : 10
-        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series), this.initBoxPlotMarkStyle();
       }
       initBoxPlotMarkStyle() {
         var _a, _b;
@@ -71758,6 +72989,16 @@
       }
     };
 
+    const PIE_SERIES_DATA_RELATED_KEYS = {
+        valueField: !0,
+        angleField: !0,
+        startAngle: !0,
+        endAngle: !0,
+        minAngle: !0
+      },
+      PIE_SERIES_COMPILE_ONLY_KEYS = {
+        outerRadius: !0
+      };
     class BasePieSeries extends PolarSeries {
       constructor() {
         super(...arguments), this.transformerConstructor = PieSeriesSpecTransformer, this._pieMarkName = "pie", this._pieMarkType = "arc", this.getCenter = () => {
@@ -71945,6 +73186,13 @@
       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 = null != ignoreCheckKeys ? ignoreCheckKeys : {
           data: !0
@@ -73929,6 +75177,9 @@
       }
     };
 
+    const CIRCULAR_PROGRESS_SERIES_COMPILE_ONLY_KEYS = {
+      cornerRadius: !0
+    };
     class CircularProgressSeries extends ProgressLikeSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.circularProgress, this.transformerConstructor = CircularProgressSeriesSpecTransformer, this._progressMark = null, this._trackMark = null, this._getRadiusValueStart = datum => {
@@ -73946,6 +75197,12 @@
           return this.radiusAxisHelper.dataToPosition([datum[this._radiusField[0]]]) + 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();
       }
@@ -74116,6 +75373,17 @@
       }
     };
 
+    const LINEAR_PROGRESS_SERIES_COMPILE_ONLY_KEYS = {
+        bandWidth: !0
+      },
+      LINEAR_PROGRESS_SERIES_COMPILE_ONLY_SUB_KEYS = {
+        progress: {
+          topPadding: !0,
+          bottomPadding: !0,
+          leftPadding: !0,
+          rightPadding: !0
+        }
+      };
     class LinearProgressSeries extends CartesianSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.linearProgress, this._progressMark = null, this._trackMark = null, this._defaultProgressCustomShape = (datum, attrs, path) => {
@@ -74143,6 +75411,13 @@
           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();
       }
@@ -81979,6 +83254,9 @@
       }
     };
 
+    const HEATMAP_SERIES_DATA_RELATED_KEYS = {
+      valueField: !0
+    };
     class HeatmapSeries extends CartesianSeries {
       constructor() {
         super(...arguments), this.type = SeriesTypeEnum.heatmap, this.transformerConstructor = HeatmapSeriesSpecTransformer;
@@ -81989,6 +83267,12 @@
       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);
       }
@@ -83518,7 +84802,7 @@
       _getDefaultSeriesSpec(spec) {
         var _a;
         const seriesSpec = super._getDefaultSeriesSpec(spec, ["center", "centerOffset", "cornerRadius", "padAngle", "minAngle", "emptyPlaceholder", "showAllZero", "supportNegative", "useSequentialAnimation", "layoutRadius"]);
-        return seriesSpec.categoryField = spec.categoryField || spec.seriesField, seriesSpec.valueField = spec.valueField || spec.angleField, seriesSpec.emptyCircle = null === (_a = spec.emptyPlaceholder) || void 0 === _a ? void 0 : _a.emptyCircle, seriesSpec;
+        return this._addSeriesRelatedSpecKeys(["valueField", "angleField"]), seriesSpec.categoryField = spec.categoryField || spec.seriesField, seriesSpec.valueField = spec.valueField || spec.angleField, seriesSpec.emptyCircle = null === (_a = spec.emptyPlaceholder) || void 0 === _a ? void 0 : _a.emptyCircle, seriesSpec;
       }
     }
 
@@ -84017,7 +85301,7 @@
       _getDefaultSeriesSpec(spec) {
         var _a, _b;
         const series = super._getDefaultSeriesSpec(spec);
-        return series.progress = spec.progress, series.track = spec.track, series.tickMask = spec.tickMask, series.cornerRadius = null !== (_a = spec.cornerRadius) && void 0 !== _a ? _a : 0, series.roundCap = null !== (_b = spec.roundCap) && void 0 !== _b && _b, series;
+        return this._addSeriesRelatedSpecKeys(["cornerRadius"]), series.progress = spec.progress, series.track = spec.track, series.tickMask = spec.tickMask, series.cornerRadius = null !== (_a = spec.cornerRadius) && void 0 !== _a ? _a : 0, series.roundCap = null !== (_b = spec.roundCap) && void 0 !== _b && _b, series;
       }
       transformSpec(spec) {
         super.transformSpec(spec), this._transformProgressAxisSpec(spec, {
@@ -84322,7 +85606,7 @@
       }
       _getDefaultSeriesSpec(spec) {
         const series = super._getDefaultSeriesSpec(spec);
-        return series.bar = spec.bar, series.stackLabel = spec.stackLabel, series.leaderLine = spec.leaderLine, series.total = spec.total, series.calculationMode = spec.calculationMode, series;
+        return this._addSeriesRelatedSpecKeys(["bar", "stackLabel", "leaderLine", "total", "calculationMode"]), series.bar = spec.bar, series.stackLabel = spec.stackLabel, series.leaderLine = spec.leaderLine, series.total = spec.total, series.calculationMode = spec.calculationMode, series;
       }
     }
 
@@ -84537,6 +85821,13 @@
       return customFilter ? customFilter(data, selectedData, datumField) : (isArray$1(data) && (null === (_b = data[0]) || void 0 === _b ? void 0 : _b.nodes) ? (data[0].nodes = data[0].nodes.filter(d => !0 === selectedFilter[d.key]), (null === (_c = data[0]) || void 0 === _c ? void 0 : _c.links) && (data[0].links = data[0].links.filter(d => !0 === selectedFilter[d.source] && !0 === selectedFilter[d.target]))) : isValid$1(datumField) && (data = data.filter(d => !0 === selectedFilter[series.getSeriesFieldValue(d, datumField)])), data);
     };
 
+    const LEGEND_COMPONENT_ONLY_CHANGE_KEYS = {
+      position: !0,
+      item: !0,
+      title: !0,
+      pager: !0,
+      background: !0
+    };
     class BaseLegend extends BaseComponent {
       constructor() {
         super(...arguments), this.layoutType = "normal", this.layoutZIndex = LayoutZIndex.Legend, this.layoutLevel = LayoutLevel.Legend, this.specKey = "legends", this._orient = "left", this._visible = !0, this._position = "middle", this._preSelectedData = [], this._selectedData = [], this.effect = {
@@ -84587,7 +85878,18 @@
       }
       _compareSpec(spec, prevSpec) {
         const result = super._compareSpec(spec, prevSpec);
-        return result.reRender = !0, (null == spec ? void 0 : spec.orient) !== (null == prevSpec ? void 0 : prevSpec.orient) ? (result.reMake = !0, result) : (isEqual(prevSpec, spec) || (result.reCompile = !0), result);
+        result.reRender = !0;
+        const specChanged = !isEqual(prevSpec, spec);
+        return result.reMake ? result : (null == spec ? void 0 : spec.orient) !== (null == prevSpec ? void 0 : prevSpec.orient) ? (result.reMake = !0, result) : specChanged && !result.reCompile && this._isComponentOnlySpecChange(spec, prevSpec) ? (result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        }), result) : (specChanged && (result.reCompile = !0), result);
+      }
+      _isComponentOnlySpecChange(spec, prevSpec) {
+        const prevSpecRecord = prevSpec,
+          specRecord = spec;
+        return Object.keys(Object.assign(Object.assign({}, prevSpec), spec)).every(key => isEqual(null == prevSpecRecord ? void 0 : prevSpecRecord[key], null == specRecord ? void 0 : specRecord[key]) || LEGEND_COMPONENT_ONLY_CHANGE_KEYS[key]);
       }
       _bindLegendDataChange() {
         this._preSelectedData = this._selectedData.slice(), this._initSelectedData(), this._forceLayout();
@@ -89233,9 +90535,48 @@
       return data;
     }
 
+    const getDataViewsInDataSet = dataView => {
+        var _a;
+        const dataViewMap = null === (_a = null == dataView ? void 0 : dataView.dataSet) || void 0 === _a ? void 0 : _a.dataViewMap;
+        return dataViewMap ? Object.values(dataViewMap).filter(Boolean) : [];
+      },
+      detachDataViewListener = (source, target) => {
+        var _a, _b;
+        null === (_a = null == source ? void 0 : source.target) || void 0 === _a || _a.removeListener("change", target.reRunAllTransform), null === (_b = null == source ? void 0 : source.target) || void 0 === _b || _b.removeListener("markRunning", target.markRunning);
+      };
+    const detachDataViewDependencies = dataView => {
+      if (!dataView) return;
+      getDataViewsInDataSet(dataView).forEach(source => {
+        detachDataViewListener(source, dataView);
+      });
+      const dependencies = null == dataView ? void 0 : dataView.rawData;
+      Array.isArray(dependencies) && dependencies.forEach(dependency => {
+        detachDataViewListener(dependency, dataView);
+      });
+    };
+    const releaseDataViews = dataViews => {
+      const releaseDataViews = Array.from(new Set(dataViews.filter(Boolean)));
+      releaseDataViews.length && (releaseDataViews.forEach(detachDataViewDependencies), releaseDataViews.forEach(dataView => {
+        var _a;
+        null === (_a = dataView.destroy) || void 0 === _a || _a.call(dataView);
+      }));
+    };
+    const releaseDataViewWithDependencies = (dataView, shouldReleaseDependency) => {
+      if (!dataView) return;
+      const dataViewsInDataSet = new Set(getDataViewsInDataSet(dataView)),
+        releaseDependencies = [],
+        collectReleaseDependencies = currentDataView => {
+          const dependencies = null == currentDataView ? void 0 : currentDataView.rawData;
+          Array.isArray(dependencies) && dependencies.forEach(dependency => {
+            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._layoutOffsetX = 0, this._layoutOffsetY = 0;
+        super(...arguments), this.layoutType = "none", this._markerDataChangeHandler = null, this._markerDataOwned = !1, this._layoutOffsetX = 0, this._layoutOffsetY = 0;
       }
       getRelativeSeries() {
         return this._relativeSeries;
@@ -89309,6 +90650,19 @@
         }
         return this._relativeSeries.getViewData();
       }
+      _setMarkerData(data, owned = !1) {
+        this._releaseMarkerData(), this._markerData = data, this._markerDataOwned = owned;
+      }
+      _bindMarkerDataChange() {
+        var _a;
+        (null === (_a = this._markerData) || void 0 === _a ? void 0 : _a.target) && (this._markerDataChangeHandler = () => {
+          this._markerLayout();
+        }, this._markerData.target.on("change", this._markerDataChangeHandler));
+      }
+      _releaseMarkerData() {
+        const markerData = this._markerData;
+        (null == markerData ? void 0 : markerData.target) && this._markerDataChangeHandler && markerData.target.removeListener("change", this._markerDataChangeHandler), this._markerDataChangeHandler = null, this._markerDataOwned && releaseDataViewWithDependencies(markerData, dataView => dataView.name === `${this.type}_${this.id}_data`), this._markerData = null, this._markerDataOwned = !1;
+      }
       updateLayoutAttribute() {
         var _a, _b, _c;
         if (null === (_a = this._spec.visible) || void 0 === _a || _a) {
@@ -89335,7 +90689,10 @@
         "cartesian" !== this._relativeSeries.coordinate && (this._relativeSeries.event.on("zoom", this._markerLayout.bind(this)), this._relativeSeries.event.on("panmove", this._markerLayout.bind(this)), this._relativeSeries.event.on("scroll", this._markerLayout.bind(this)));
       }
       clear() {
-        super.clear(), this._firstSeries = null;
+        super.clear(), this._markerComponent = null, this._firstSeries = null;
+      }
+      release() {
+        this._releaseMarkerData(), super.release();
       }
       _getFirstSeries() {
         var _a;
@@ -89370,9 +90727,7 @@
         }), data.transform({
           type: "markerFilter",
           options: this._getAllRelativeSeries()
-        }), data.target.on("change", () => {
-          this._markerLayout();
-        }), this._markerData = data;
+        }), this._setMarkerData(data, !0), this._bindMarkerDataChange();
       }
     }
 
@@ -89516,7 +90871,7 @@
             doRadAngAng1Process: doRadAngAng1Process,
             doRadAngProcess: doRadAngProcess
           } = getMarkLineProcessInfo(spec);
-        if (this._markerData = this._getRelativeDataView(), !(doXProcess || doYProcess || doXYY1Process || doYXX1Process || doXYProcess || doAngleProcess || doRadiusProcess || doAngRadRad1Process || doRadAngAng1Process || doRadAngProcess || isCoordinateProcess)) return;
+        if (this._setMarkerData(this._getRelativeDataView()), !(doXProcess || doYProcess || doXYY1Process || doYXX1Process || doXYProcess || doAngleProcess || doRadiusProcess || doAngRadRad1Process || doRadAngAng1Process || doRadAngProcess || isCoordinateProcess)) return;
         registerDataSetInstanceTransform(this._option.dataSet, "markerAggregation", markerAggregation), registerDataSetInstanceTransform(this._option.dataSet, "markerRegression", markerRegression), registerDataSetInstanceTransform(this._option.dataSet, "markerFilter", markerFilter);
         const {
             options: options,
@@ -89536,9 +90891,7 @@
         }), data.transform({
           type: "markerFilter",
           options: this._getAllRelativeSeries()
-        }), data.target.on("change", () => {
-          this._markerLayout();
-        }), this._markerData = data;
+        }), this._setMarkerData(data, !0), this._bindMarkerDataChange();
       }
     }
     BaseMarkLine.specKey = "markLine";
@@ -89977,8 +91330,13 @@
         return getSpecInfo(chartSpec, this.specKey, ComponentTypeEnum.title, s => !1 !== s.visible);
       }
       _compareSpec(spec, prevSpec) {
-        const result = super._compareSpec(spec, prevSpec);
-        return (null == prevSpec ? void 0 : prevSpec.orient) === (null == spec ? void 0 : spec.orient) && (null == prevSpec ? void 0 : prevSpec.visible) === spec.visible || (result.reMake = !0), result.change = !0, result.reRender = !0, result;
+        const result = super._compareSpec(spec, prevSpec),
+          specChanged = !isEqual(prevSpec, spec);
+        return (null == prevSpec ? void 0 : prevSpec.orient) === (null == spec ? void 0 : spec.orient) && (null == prevSpec ? void 0 : prevSpec.visible) === spec.visible || (result.reMake = !0), result.change = !0, result.reRender = !0, specChanged && !result.reMake && (result.effects = Object.assign(Object.assign({}, result.effects), {
+          component: !0,
+          layout: !0,
+          render: !0
+        })), result;
       }
       afterSetLayoutStartPoint(pos) {
         isValidNumber$1(pos.x) && this._titleComponent && this._titleComponent.setAttribute("x", pos.x), isValidNumber$1(pos.y) && this._titleComponent && this._titleComponent.setAttribute("y", pos.y), super.afterSetLayoutStartPoint(pos);
@@ -90975,7 +92333,7 @@
           });
         }), Object.keys(removedComponents).forEach(name => {
           const comp = removedComponents[name];
-          comp && (comp.release(), this._labelComponentMap.delete(comp));
+          comp && (comp.releaseWithExitAnimation() || comp.release(), this._labelComponentMap.delete(comp));
         });
       }
       _initTextMarkStyle() {
@@ -91624,6 +92982,9 @@
           });
         });
       }
+      reInit(spec) {
+        super.reInit(spec), this.init();
+      }
       _initNeedOperatedItem() {
         const seriesUserId = this._spec.seriesId,
           seriesIndex = this._spec.seriesIndex;