@visactor/vrender-core 1.1.0-alpha.8 → 1.1.0

package/es/graphic/graphic.js

@@ -34,11 +34,7 @@ import { StateDefinitionCompiler } from "./state/state-definition-compiler";
 
 import { StateEngine } from "./state/state-engine";
 
-import { StateModel } from "./state/state-model";
-
-import { UpdateCategory, classifyAttributeDelta } from "./state/attribute-update-classifier";
-
-import { StateStyleResolver } from "./state/state-style-resolver";
+import { ATTRIBUTE_CATEGORY, UpdateCategory, classifyAttributeDelta } from "./state/attribute-update-classifier";
 
 import { StateTransitionOrchestrator } from "./state/state-transition-orchestrator";
 
@@ -46,18 +42,16 @@ import { collectSharedStateScopeChain, ensureSharedStateScopeFresh } from "./sta
 
 import { enqueueGraphicSharedStateRefresh, scheduleStageSharedStateRefresh } from "./state/shared-state-refresh";
 
-import { getStageStatePerfMonitor } from "./state/state-perf-monitor";
-
 const _tempBounds = new AABBBounds, loadShadowRootFactory = () => require("./shadow-root"), tempMatrix = new Matrix;
 
 export const PURE_STYLE_KEY = [ "stroke", "opacity", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "fill", "fillOpacity" ];
 
 export const GRAPHIC_UPDATE_TAG_KEY = [ "lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible" ];
 
-const tempConstantXYKey = [ "x", "y" ], tempConstantScaleXYKey = [ "scaleX", "scaleY" ], tempConstantAngleKey = [ "angle" ], builtinTextureTypes = new Set([ "circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave" ]), point = new Point;
+const tempConstantXYKey = [ "x", "y" ], tempConstantScaleXYKey = [ "scaleX", "scaleY" ], tempConstantAngleKey = [ "angle" ], builtinTextureTypes = new Set([ "circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave" ]), point = new Point, 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(value);
+    return "object" == typeof value && null != value && !Array.isArray(value);
 }
 
 function cloneAttributeValue(value) {
@@ -69,14 +63,6 @@ function cloneAttributeValue(value) {
     })), clone;
 }
 
-function cloneSimpleAttributeRecord(value) {
-    return isPlainObjectValue(value) ? Object.assign({}, value) : value;
-}
-
-export 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, clone = {};
@@ -86,6 +72,10 @@ function cloneAttributeSurface(value) {
     })), 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 : {};
@@ -149,19 +139,27 @@ export class Graphic extends Node {
     get globalTransMatrix() {
         return this.tryUpdateGlobalTransMatrix(!0);
     }
+    get baseAttributes() {
+        var _a;
+        return null !== (_a = this._baseAttributes) && void 0 !== _a ? _a : this.attribute;
+    }
+    set baseAttributes(value) {
+        value !== this.attribute ? this._baseAttributes = value : this._baseAttributes = void 0;
+    }
     constructor(params = {}) {
         var _a;
-        super(), this.resolverEpoch = 0, this._AABBBounds = new AABBBounds, this._updateTag = UpdateTag.INIT;
-        const useSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath(params), initialBaseAttributes = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(params) : cloneAttributeValue(params);
-        this.baseAttributes = initialBaseAttributes, this.attribute = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(initialBaseAttributes) : cloneAttributeSurface(initialBaseAttributes), 
+        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), 
-        isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+        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;
@@ -170,12 +168,6 @@ export class Graphic extends Node {
     getAttributes() {
         return this.attribute;
     }
-    getStateStyleResolver(mergeMode) {
-        return "deep" === mergeMode ? (this.deepStateStyleResolver || (this.deepStateStyleResolver = new StateStyleResolver({
-            mergeMode: "deep"
-        })), this.deepStateStyleResolver) : (this.stateStyleResolver || (this.stateStyleResolver = new StateStyleResolver), 
-        this.stateStyleResolver);
-    }
     getStateTransitionOrchestrator() {
         return this.stateTransitionOrchestrator || (this.stateTransitionOrchestrator = new StateTransitionOrchestrator), 
         this.stateTransitionOrchestrator;
@@ -194,16 +186,23 @@ export class Graphic extends Node {
         const nextScope = this.resolveBoundSharedStateScope();
         return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), 
         !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, 
-        this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, 
-        this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, 
-        this.stateEngineStateProxyModeKey = void 0, this.syncSharedStateActiveRegistrations(), 
+        this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, 
+        this.stateEngine = void 0, this.stateEngineCompiledDefinitions = 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);
@@ -220,7 +219,7 @@ export class Graphic extends Node {
         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;
@@ -228,15 +227,13 @@ export class Graphic extends Node {
         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;
         return this.localStateDefinitionsSource !== this.states && (this.localStateDefinitionsSource = this.states, 
-        this.localFallbackVersion = (null !== (_a = this.localFallbackVersion) && void 0 !== _a ? _a : 0) + 1), 
-        null !== (_b = this.localFallbackVersion) && void 0 !== _b ? _b : 0;
+        this.localStateDefinitionsVersion = (null !== (_a = this.localStateDefinitionsVersion) && void 0 !== _a ? _a : 0) + 1), 
+        null !== (_b = this.localStateDefinitionsVersion) && void 0 !== _b ? _b : 0;
     }
     resolveEffectiveCompiledDefinitions() {
         this.syncSharedStateScopeBindingFromTree(!1);
@@ -245,49 +242,25 @@ export class Graphic extends Node {
         const hasStates = !!this.states && Object.keys(this.states).length > 0;
         if (!boundScope) {
             if (!hasStates) return {
-                compiledDefinitions: void 0,
-                stateProxyModeKey: "none"
+                compiledDefinitions: void 0
             };
             const cacheKey = `local:${this.getLocalStatesVersion()}`;
             return this.compiledStateDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.compiledStateDefinitions = (new StateDefinitionCompiler).compile(this.states), 
             this.compiledStateDefinitionsCacheKey = cacheKey), {
-                compiledDefinitions: this.compiledStateDefinitions,
-                stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
+                compiledDefinitions: this.compiledStateDefinitions
             };
         }
-        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions, sharedStateProxyModeKey = this.stateProxy ? "shared-missing-only" : "none", sharedStateProxyEligibility = this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0;
-        if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
-            compiledDefinitions: sharedCompiledDefinitions,
-            stateProxyModeKey: sharedStateProxyModeKey,
-            stateProxyEligibility: sharedStateProxyEligibility
-        };
-        const localStates = this.states, missingLocalStateDefinitions = {}, missingStateNames = [];
-        if (Object.keys(localStates).forEach((stateName => {
-            sharedCompiledDefinitions.has(stateName) || (missingLocalStateDefinitions[stateName] = localStates[stateName], 
-            missingStateNames.push(stateName));
-        })), !missingStateNames.length) return this.localFallbackCompiledDefinitions = void 0, 
-        {
-            compiledDefinitions: sharedCompiledDefinitions,
-            stateProxyModeKey: sharedStateProxyModeKey,
-            stateProxyEligibility: sharedStateProxyEligibility
-        };
-        const localStatesVersion = this.getLocalStatesVersion(), stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join("|")}` : "none", cacheKey = `shared:${boundScope.revision}:fallback:${localStatesVersion}:${stateProxyModeKey}`;
-        return this.localFallbackCompiledDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.localFallbackCompiledDefinitions = (new StateDefinitionCompiler).compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions)), 
-        this.compiledStateDefinitionsCacheKey = cacheKey), {
-            compiledDefinitions: this.localFallbackCompiledDefinitions,
-            stateProxyModeKey: stateProxyModeKey,
-            stateProxyEligibility: sharedStateProxyEligibility
+        return {
+            compiledDefinitions: boundScope.effectiveCompiledDefinitions
         };
     }
     recomputeCurrentStatePatch() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)) return this.effectiveStates = [], 
         this.resolvedStatePatch = void 0, void this.syncSharedStateActiveRegistrations();
-        const stateResolveBaseAttrs = null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : this.attribute, stateModel = this.createStateModel();
-        null === (_c = this.stateEngine) || void 0 === _c || _c.setResolveContext(this, stateResolveBaseAttrs);
-        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);
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(), transition = this.resolveUseStatesTransition(this.currentStates, stateResolveBaseAttrs), effectiveStates = null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states, resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
         this.currentStates = transition.states, this.effectiveStates = [ ...effectiveStates ], 
-        this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.syncSharedStateActiveRegistrations();
+        this.resolvedStatePatch = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
     }
     buildStaticAttributeSnapshot() {
         var _a;
@@ -322,15 +295,17 @@ export class Graphic extends Node {
                 next: void 0
             }), delete target[key]));
             const nextValue = snapshot[key];
-            isEqual(previousValue, nextValue) || (delta.set(key, {
+            areAttributeValuesEqual(previousValue, nextValue) || (delta.set(key, {
                 prev: previousValue,
                 next: nextValue
             }), target[key] = cloneAttributeValue(nextValue));
         })), delta;
     }
     _syncAttribute() {
+        this.attribute === this.baseAttributes && this.resolvedStatePatch && this.detachAttributeFromBaseAttributes();
         const snapshot = this.buildStaticAttributeSnapshot(), delta = this.syncObjectToSnapshot(this.attribute, snapshot);
-        return this.valid = this.isValid(), delta;
+        return this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, 
+        delta;
     }
     _syncFinalAttributeFromStaticTruth() {
         const target = this.finalAttribute;
@@ -338,51 +313,149 @@ export class Graphic extends Node {
         const snapshot = this.buildStaticAttributeSnapshot();
         this.syncObjectToSnapshot(target, snapshot);
     }
-    submitUpdateByDelta(delta, forceUpdateTag = !1) {
+    mergeAttributeDeltaCategory(category, key, prev, next) {
         var _a;
+        let nextCategory = "stroke" === key || "shadowBlur" === key ? classifyAttributeDelta(key, prev, next) : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
+        return nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), 
+        nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), 
+        category | nextCategory;
+    }
+    submitUpdateByCategory(category, forceUpdateTag = !1) {
         if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), 
         void this.addUpdateLayoutTag();
+        (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(), 
+        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();
     }
@@ -402,7 +475,7 @@ export class Graphic extends Node {
         return point;
     }
     onAnimateBind(animate) {
-        this._emitCustomEvent("animate-bind", animate);
+        this.detachAttributeFromBaseAttributes(), this._emitCustomEvent("animate-bind", animate);
     }
     visitTrackedAnimates(cb) {
         const hook = this.forEachTrackedAnimate;
@@ -415,8 +488,22 @@ export class Graphic extends Node {
         const getTrackedAnimates = this.getTrackedAnimates;
         return "function" == typeof getTrackedAnimates ? getTrackedAnimates.call(this).size > 0 : !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size);
     }
+    mayHaveTrackedAnimates() {
+        var _a;
+        return !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size) || !!this._animationStateManager;
+    }
     tryUpdateAABBBounds() {
+        if (!(this.shadowRoot || this._updateTag & UpdateTag.UPDATE_BOUNDS)) return this._AABBBounds;
         const full = "imprecise" === this.attribute.boundsMode;
+        if (!this.shadowRoot) {
+            const graphicService = this.getGraphicService(), graphicTheme = this.getGraphicTheme();
+            if (!graphicService.validCheck(this.attribute, graphicTheme, this._AABBBounds, this)) return this._AABBBounds;
+            if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
+            graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+            const bounds = this.doUpdateAABBBounds(full, graphicTheme);
+            return graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), 
+            "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+        }
         if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
         this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
@@ -480,11 +567,11 @@ export class Graphic extends Node {
         const _parsedPath = new CustomSymbolClass(symbolType, cache);
         return Graphic.userSymbolMap[symbolType] = _parsedPath, _parsedPath;
     }
-    doUpdateAABBBounds(full) {
+    doUpdateAABBBounds(full, graphicTheme) {
         this.updateAABBBoundsStamp++;
-        const graphicTheme = this.getGraphicTheme();
+        const resolvedGraphicTheme = null != graphicTheme ? graphicTheme : this.getGraphicTheme();
         this._AABBBounds.clear();
-        const attribute = this.attribute, bounds = this.updateAABBBounds(attribute, graphicTheme, this._AABBBounds, full), {boundsPadding: boundsPadding = graphicTheme.boundsPadding} = attribute, paddingArray = parsePadding(boundsPadding);
+        const attribute = this.attribute, bounds = this.updateAABBBounds(attribute, resolvedGraphicTheme, this._AABBBounds, full), {boundsPadding: boundsPadding = resolvedGraphicTheme.boundsPadding} = attribute, paddingArray = parsePadding(boundsPadding);
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), 
         bounds;
     }
@@ -555,27 +642,71 @@ export class Graphic extends Node {
         this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     }
     setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
+        if (!params) return;
+        const keys = Object.keys(params);
+        this.captureTransientFromAttrsBeforePreventAnimate(params, keys, context), this.syncFinalAttributesFromUpdateContext(context), 
         this.visitTrackedAnimates((animate => {
-            (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach((key => {
-                animate.preventAttr(key);
-            }));
+            (animate.priority !== 1 / 0 || ignorePriority) && animate.preventAttrs(keys);
         })), this.applyTransientAttributes(params, forceUpdateTag, context);
     }
+    syncFinalAttributesFromUpdateContext(context) {
+        var _a;
+        const updateType = null == context ? void 0 : context.type;
+        if (updateType === AttributeUpdateType.STATE || null != updateType && updateType >= AttributeUpdateType.ANIMATE_BIND && updateType <= AttributeUpdateType.ANIMATE_END) return;
+        const finalAttrs = null === (_a = this.context) || void 0 === _a ? void 0 : _a.finalAttrs, setFinalAttributes = this.setFinalAttributes;
+        finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(this, finalAttrs);
+    }
+    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.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++) {
@@ -595,10 +726,11 @@ export class Graphic extends Node {
             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);
+        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;
@@ -609,11 +741,15 @@ export class Graphic extends Node {
             x: x,
             y: y
         }, this.attribute, tempConstantXYKey, context);
-        params && (x = params.x, y = params.y, delete params.x, delete params.y, this.applyBaseAttributes(params));
-        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;
+        params && (x = params.x, y = params.y, delete params.x, delete params.y);
+        const attribute = this.baseAttributes, 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;
@@ -624,9 +760,10 @@ export class Graphic extends Node {
             x: x,
             y: y
         }, this.attribute, tempConstantXYKey, context);
-        return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), 
-        this) : (attribute.x = x, attribute.y = y, this.commitBaseAttributeMutation(!1, context), 
-        this);
+        return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+            x: x,
+            y: y
+        }, context), this);
     }
     scale(scaleX, scaleY, scaleCenter) {
         var _a, _b;
@@ -639,14 +776,15 @@ export class Graphic extends Node {
             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;
+        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;
+            let {postMatrix: postMatrix} = 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;
@@ -657,9 +795,10 @@ export class Graphic extends Node {
             scaleX: scaleX,
             scaleY: scaleY
         }, this.attribute, tempConstantScaleXYKey, context);
-        return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), 
-        this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.commitBaseAttributeMutation(!1, context), 
-        this);
+        return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+            scaleX: scaleX,
+            scaleY: scaleY
+        }, context), this);
     }
     rotate(angle, rotateCenter) {
         var _a;
@@ -670,24 +809,23 @@ export class Graphic extends Node {
             angle: angle,
             rotateCenter: rotateCenter
         }, this.attribute, tempConstantAngleKey, context);
-        params && (delete params.angle, this.applyBaseAttributes(params));
-        const attribute = this.baseAttributes;
+        params && delete params.angle;
+        const attribute = this.baseAttributes, nextAttrs = params || {};
         if (rotateCenter) {
             let {postMatrix: postMatrix} = this.baseAttributes;
-            postMatrix || (postMatrix = new Matrix, this.baseAttributes.postMatrix = postMatrix), 
-            application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
-        } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
-        return this.commitBaseAttributeMutation(!1, context), this;
+            postMatrix = postMatrix ? postMatrix.clone() : new Matrix, application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter), 
+            nextAttrs.postMatrix = postMatrix;
+        } else nextAttrs.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
+        return this.commitInternalBaseAttributes(nextAttrs, context), this;
     }
     rotateTo(angle) {
-        const attribute = this.baseAttributes;
-        if (attribute.angle === angle) return this;
+        if (this.baseAttributes.angle === angle) return this;
         const context = {
             type: AttributeUpdateType.ROTATE_TO
         }, params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
-        return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), 
-        this) : (attribute.angle = angle, this.commitBaseAttributeMutation(!1, context), 
-        this);
+        return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+            angle: angle
+        }, context), this);
     }
     skewTo(b, c) {
         return this;
@@ -707,26 +845,132 @@ export class Graphic extends Node {
         var _a;
         return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
     }
-    createStateModel() {
-        const {compiledDefinitions: compiledDefinitions, stateProxyEligibility: stateProxyEligibility, stateProxyModeKey: stateProxyModeKey} = this.resolveEffectiveCompiledDefinitions();
-        return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateProxy === this.stateProxy && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode && this.stateEngineStateProxyModeKey === stateProxyModeKey || (this.stateEngine = new StateEngine({
+    getStateResolveBaseAttrs() {
+        var _a;
+        return null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute;
+    }
+    syncStateResolveContext(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        var _a;
+        return null === (_a = this.stateEngine) || void 0 === _a || _a.setResolveContext(this, stateResolveBaseAttrs), 
+        stateResolveBaseAttrs;
+    }
+    ensureStateEngine(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        const {compiledDefinitions: compiledDefinitions} = this.resolveEffectiveCompiledDefinitions();
+        return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode || (this.stateEngine = new StateEngine({
             compiledDefinitions: compiledDefinitions,
             stateSort: this.stateSort,
-            stateProxy: this.stateProxy,
-            stateProxyEligibility: stateProxyEligibility,
-            states: this.states,
             mergeMode: this.stateMergeMode
-        }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateProxy = this.stateProxy, 
-        this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, 
-        this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, 
-        this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), 
-        new StateModel({
-            states: this.states,
-            currentStates: this.currentStates,
-            stateSort: this.stateSort,
-            stateProxy: this.stateProxy,
-            stateEngine: this.stateEngine
-        });
+        }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateSort = this.stateSort, 
+        this.stateEngineMergeMode = this.stateMergeMode) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0), 
+        this.syncStateResolveContext(stateResolveBaseAttrs), this.stateEngine && this.currentStates && !this.sameStateNames(this.stateEngine.activeStates, this.currentStates) && this.stateEngine.applyStates(this.currentStates), 
+        this.stateEngine;
+    }
+    toGraphicStateTransition(result) {
+        return {
+            changed: result.changed,
+            states: [ ...result.activeStates ],
+            effectiveStates: [ ...result.effectiveStates ]
+        };
+    }
+    sortLocalStates(states) {
+        return this.stateSort ? [ ...states ].sort(this.stateSort) : [ ...states ];
+    }
+    resolveLocalUseStatesTransition(states) {
+        var _a;
+        if (!states.length) return this.resolveLocalClearStatesTransition();
+        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES, changed = previousStates.length !== states.length || states.some(((stateName, index) => previousStates[index] !== stateName)), nextStates = this.sortLocalStates(states);
+        return {
+            changed: changed,
+            states: changed ? nextStates : [ ...previousStates ]
+        };
+    }
+    resolveLocalClearStatesTransition() {
+        return {
+            changed: this.hasState(),
+            states: []
+        };
+    }
+    resolveUseStatesTransition(states, stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        return stateEngine ? this.toGraphicStateTransition(stateEngine.applyStates(states)) : this.resolveLocalUseStatesTransition(states);
+    }
+    resolveClearStatesTransition() {
+        const stateEngine = this.ensureStateEngine();
+        return stateEngine ? this.toGraphicStateTransition(stateEngine.clearStates()) : this.resolveLocalClearStatesTransition();
+    }
+    resolveAddStateTransition(stateName, keepCurrentStates) {
+        var _a;
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) return this.toGraphicStateTransition(stateEngine.addState(stateName, keepCurrentStates));
+        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return {
+            changed: !1,
+            states: [ ...this.currentStates ]
+        };
+        const nextStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([ stateName ]) : [ stateName ];
+        return this.resolveLocalUseStatesTransition(nextStates);
+    }
+    resolveRemoveStateTransition(stateName) {
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) return this.toGraphicStateTransition(stateEngine.removeState(stateName));
+        if (!this.currentStates) return {
+            changed: !1,
+            states: []
+        };
+        const filter = Array.isArray(stateName) ? s => !stateName.includes(s) : s => s !== stateName, nextStates = this.currentStates.filter(filter);
+        return nextStates.length === this.currentStates.length ? {
+            changed: !1,
+            states: [ ...this.currentStates ]
+        } : this.resolveLocalUseStatesTransition(nextStates);
+    }
+    resolveToggleStateTransition(stateName) {
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) return this.toGraphicStateTransition(stateEngine.toggleState(stateName));
+        if (this.hasState(stateName)) return this.resolveRemoveStateTransition(stateName);
+        const nextStates = this.currentStates ? this.currentStates.slice() : [];
+        return nextStates.push(stateName), this.resolveLocalUseStatesTransition(nextStates);
+    }
+    resolveGraphicStateTransition(states, forceResolverRefresh = !1) {
+        var _a;
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(), stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        forceResolverRefresh && (null == stateEngine || stateEngine.invalidateResolverCache());
+        const transition = stateEngine ? this.toGraphicStateTransition(stateEngine.applyStates(states)) : this.resolveLocalUseStatesTransition(states), resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
+        return {
+            transition: transition,
+            effectiveStates: null !== (_a = transition.effectiveStates) && void 0 !== _a ? _a : transition.states,
+            resolvedStateAttrs: resolvedStateAttrs
+        };
+    }
+    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} = this.resolveGraphicStateTransition(states, !0), patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
+        patchChanged && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) || (this.currentStates = transition.states, 
+        this.effectiveStates = [ ...effectiveStates ], this.resolvedStatePatch = resolvedStateAttrs, 
+        this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged && (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;
@@ -738,8 +982,8 @@ export class Graphic extends Node {
             extraAnimateAttrs: extraAnimateAttrs,
             shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
         } : void 0;
-        if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
-        const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
+        if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, transitionOptions);
+        const plan = this.getStateTransitionOrchestrator().analyzeTransition(attrs, hasAnimation, {
             noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
             animateConfig: resolvedAnimateConfig,
             extraAnimateAttrs: extraAnimateAttrs,
@@ -747,9 +991,7 @@ export class Graphic extends Node {
         });
         this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
     }
-    updateNormalAttrs(stateAttrs) {
-        this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
-    }
+    updateNormalAttrs(_stateAttrs) {}
     getStateTransitionDefaultAttribute(key, targetAttrs) {
         return this.getDefaultAttribute(key);
     }
@@ -759,83 +1001,77 @@ export class Graphic extends Node {
     stopStateAnimates(type = "end") {
         const stopAnimationState = this.stopAnimationState;
         if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
+        if (!this.mayHaveTrackedAnimates()) return;
         const stateAnimates = [];
         this.visitTrackedAnimates((animate => {
             animate.stateNames && stateAnimates.push(animate);
         })), stateAnimates.forEach((animate => animate.stop(type)));
     }
-    getNormalAttribute(key) {
-        var _a, _b;
-        const value = this.attribute[key];
-        return this.hasAnyTrackedAnimate() ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
-    }
     clearStates(hasAnimation) {
         var _a, _b, _c;
-        const previousStates = this.currentStates ? this.currentStates.slice() : [], previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0, transition = this.createStateModel().clearStates();
+        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES, previousResolvedStatePatch = this.resolvedStatePatch, transition = this.resolveClearStatesTransition();
         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 : {});
+        const resolvedStateAttrs = hasAnimation || this.hasCustomEvent("beforeStateUpdate") ? cloneAttributeValue(null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : {}) : null !== (_c = this.baseAttributes) && void 0 !== _c ? _c : {};
         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({
+        this.clearSharedStateActiveRegistrations(), 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._emitCustomEvent("afterStateUpdate", {
+        }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
             type: AttributeUpdateType.STATE
-        })));
+        }), this.emitStateUpdateEvent()));
     }
     removeState(stateName, hasAnimation) {
-        const transition = this.createStateModel().removeState(stateName);
+        const transition = this.resolveRemoveStateTransition(stateName);
         transition.changed && this.useStates(transition.states, hasAnimation);
     }
     toggleState(stateName, hasAnimation) {
-        const transition = this.createStateModel().toggleState(stateName);
+        const transition = this.resolveToggleStateTransition(stateName);
         transition.changed && this.useStates(transition.states, hasAnimation);
     }
     addState(stateName, keepCurrentStates, hasAnimation) {
-        const transition = this.createStateModel().addState(stateName, keepCurrentStates);
+        const transition = this.resolveAddStateTransition(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({
+        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES, previousResolvedStatePatch = this.resolvedStatePatch, {transition: transition, effectiveStates: effectiveStates, resolvedStateAttrs: resolvedStateAttrs} = this.resolveGraphicStateTransition(states);
+        !transition.changed && this.sameStateNames(previousStates, transition.states) || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) && (this.currentStates = transition.states, 
+        this.effectiveStates = [ ...effectiveStates ], this.resolvedStatePatch = resolvedStateAttrs, 
+        this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), 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._emitCustomEvent("afterStateUpdate", {
+        }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
             type: AttributeUpdateType.STATE
-        })));
+        }), this.emitStateUpdateEvent()));
     }
     invalidateResolver() {
         var _a, _b;
         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.syncStateResolveContext(), this.resolverEpoch = (null !== (_b = this.resolverEpoch) && void 0 !== _b ? _b : 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.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 : [], normalizedRight = null != right ? right : [];
@@ -857,6 +1093,10 @@ export class Graphic extends Node {
         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;
     }
@@ -930,12 +1170,12 @@ export class Graphic extends Node {
         }
     }
     setStage(stage, layer) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService, previousStage = this.stage;
         if (this.stage !== stage || this.layer !== layer) {
-            if (this.stage = stage, this.layer = layer, this.syncSharedStateScopeBindingFromTree(!!(null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length)), 
-            this.setStageToShadowRoot(stage, layer), this.hasAnyTrackedAnimate()) {
-                const previousTimeline = null === (_e = null == previousStage ? void 0 : previousStage.getTimeline) || void 0 === _e ? void 0 : _e.call(previousStage), nextTimeline = null === (_f = null == stage ? void 0 : stage.getTimeline) || void 0 === _f ? void 0 : _f.call(stage), detachedStageAnimates = [];
+            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), 
@@ -949,9 +1189,17 @@ export class Graphic extends Node {
                     type: AttributeUpdateType.ANIMATE_END
                 }));
             }
-            return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_g = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _g || _g.call(graphicService, this, stage));
+            return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_h = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _h || _h.call(graphicService, this, stage));
         }
-        this.syncSharedStateScopeBindingFromTree(!!(null === (_h = this.currentStates) || void 0 === _h ? void 0 : _h.length));
+        ((null === (_j = this.currentStates) || void 0 === _j ? void 0 : _j.length) || this.boundSharedStateScope || (null === (_k = this.registeredActiveScopes) || void 0 === _k ? void 0 : _k.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0);
+    }
+    detachStageForRelease() {
+        var _a, _b, _c;
+        (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), 
+        (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, 
+        this.boundSharedStateRevision = void 0, this.compiledStateDefinitions = void 0, 
+        this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = 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);
@@ -1025,6 +1273,7 @@ export class Graphic extends Node {
         res && (res.state = "fail", cb && cb());
     }
     _stopAnimates() {
+        if (!this.mayHaveTrackedAnimates()) return;
         const animates = [];
         this.visitTrackedAnimates((animate => {
             animates.push(animate);
@@ -1038,15 +1287,19 @@ export class Graphic extends Node {
         }));
     }
     release() {
-        var _a, _b, _c;
-        this.releaseStatus = "released", this.clearSharedStateActiveRegistrations(), this.stopAnimates();
-        const graphicService = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.graphicService) && void 0 !== _b ? _b : application.graphicService;
-        null === (_c = null == graphicService ? void 0 : graphicService.onRelease) || void 0 === _c || _c.call(graphicService, this), 
+        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;
@@ -1055,7 +1308,7 @@ export class Graphic extends Node {
         return !0;
     }
     beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
-        return this._dispatchCustomEvent("beforeStateUpdate", {
+        return !this.hasCustomEvent("beforeStateUpdate") || this._dispatchCustomEvent("beforeStateUpdate", {
             type: AttributeUpdateType.STATE,
             attrs: Object.assign({}, attrs),
             prevStates: prevStates.slice(),
@@ -1064,6 +1317,11 @@ export class Graphic extends Node {
             isClear: !!isClear
         });
     }
+    emitStateUpdateEvent() {
+        this.hasCustomEvent("afterStateUpdate") && this._emitCustomEvent("afterStateUpdate", {
+            type: AttributeUpdateType.STATE
+        });
+    }
     _emitCustomEvent(type, context) {
         this._dispatchCustomEvent(type, context);
     }