@visactor/vrender-core 1.1.0-alpha.2 → 1.1.0-alpha.21

package/cjs/graphic/graphic.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.Graphic = exports.NOWORK_ANIMATE_ATTR = exports.shouldUseSimpleAttributeFastPath = exports.GRAPHIC_UPDATE_TAG_KEY = exports.PURE_STYLE_KEY = void 0;
+}), exports.Graphic = exports.NOWORK_ANIMATE_ATTR = exports.GRAPHIC_UPDATE_TAG_KEY = exports.PURE_STYLE_KEY = void 0;
 
 const vutils_1 = require("@visactor/vutils"), node_tree_1 = require("./node-tree"), event_1 = require("../event"), config_1 = require("./config"), application_1 = require("../application"), custom_path2d_1 = require("../common/custom-path2d"), loader_1 = require("../resource-loader/loader"), enums_1 = require("../common/enums"), bounds_context_1 = require("../common/bounds-context"), render_command_list_1 = require("../common/render-command-list"), utils_1 = require("../common/utils"), builtin_symbol_1 = require("./builtin-symbol"), xml_1 = require("../common/xml"), constants_1 = require("./constants"), config_2 = require("../animate/config"), canvas_1 = require("../canvas"), state_definition_compiler_1 = require("./state/state-definition-compiler"), state_engine_1 = require("./state/state-engine"), state_model_1 = require("./state/state-model"), attribute_update_classifier_1 = require("./state/attribute-update-classifier"), state_style_resolver_1 = require("./state/state-style-resolver"), state_transition_orchestrator_1 = require("./state/state-transition-orchestrator"), shared_state_scope_1 = require("./state/shared-state-scope"), shared_state_refresh_1 = require("./state/shared-state-refresh"), state_perf_monitor_1 = require("./state/state-perf-monitor"), _tempBounds = new vutils_1.AABBBounds, loadShadowRootFactory = () => require("./shadow-root"), tempMatrix = new vutils_1.Matrix;
 
 exports.PURE_STYLE_KEY = [ "stroke", "opacity", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "fill", "fillOpacity" ], 
 exports.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 vutils_1.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" ]), FULL_STATE_DEFINITION_KEYS = new Set([ "name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys" ]), point = new vutils_1.Point, EMPTY_STATE_NAMES = [], BROAD_UPDATE_CATEGORY = attribute_update_classifier_1.UpdateCategory.PAINT | attribute_update_classifier_1.UpdateCategory.SHAPE | attribute_update_classifier_1.UpdateCategory.BOUNDS | attribute_update_classifier_1.UpdateCategory.TRANSFORM | attribute_update_classifier_1.UpdateCategory.LAYOUT;
 
 function isPlainObjectValue(value) {
-    return "object" == typeof value && null != value && !(0, vutils_1.isArray)(value);
+    return "object" == typeof value && null != value && !Array.isArray(value);
 }
 
 function cloneAttributeValue(value) {
@@ -24,14 +24,6 @@ function cloneAttributeValue(value) {
     })), 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, clone = {};
@@ -41,6 +33,11 @@ function cloneAttributeSurface(value) {
     })), clone;
 }
 
+function areAttributeValuesEqual(left, right) {
+    return left === right || !!(isPlainObjectValue(left) || isPlainObjectValue(right) || Array.isArray(left) || Array.isArray(right)) && (0, 
+    vutils_1.isEqual)(left, right);
+}
+
 function deepMergeAttributeValue(base, value) {
     var _a;
     const result = null !== (_a = cloneAttributeValue(base)) && void 0 !== _a ? _a : {};
@@ -50,7 +47,7 @@ function deepMergeAttributeValue(base, value) {
     })), result;
 }
 
-exports.shouldUseSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath, exports.NOWORK_ANIMATE_ATTR = {
+exports.NOWORK_ANIMATE_ATTR = {
     strokeSeg: 1,
     boundsPadding: 2,
     pickMode: 1,
@@ -104,19 +101,28 @@ class Graphic extends node_tree_1.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 vutils_1.AABBBounds, this._updateTag = enums_1.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 vutils_1.AABBBounds, this._updateTag = enums_1.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;
@@ -155,11 +161,18 @@ class Graphic extends node_tree_1.Node {
         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((0, 
-        shared_state_scope_1.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((0, shared_state_scope_1.collectSharedStateScopeChain)(this.boundSharedStateScope));
+        null == previousScopes || previousScopes.forEach((scope => {
             nextScopes.has(scope) || scope.subtreeActiveDescendants.delete(this);
         })), nextScopes.forEach((scope => {
             scope.subtreeActiveDescendants.add(this);
@@ -176,7 +189,7 @@ class Graphic extends node_tree_1.Node {
         (0, shared_state_refresh_1.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;
@@ -184,9 +197,7 @@ class Graphic extends node_tree_1.Node {
         this.boundSharedStateScope && (0, shared_state_scope_1.ensureSharedStateScopeFresh)(this.boundSharedStateScope), 
         this.recomputeCurrentStatePatch(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
             type: enums_1.AttributeUpdateType.STATE
-        }), this._emitCustomEvent("afterStateUpdate", {
-            type: enums_1.AttributeUpdateType.STATE
-        }), this.sharedStateDirty = !1) : this.sharedStateDirty = !1;
+        }), this.emitStateUpdateEvent(), this.sharedStateDirty = !1) : this.sharedStateDirty = !1;
     }
     getLocalStatesVersion() {
         var _a, _b;
@@ -237,14 +248,12 @@ class Graphic extends node_tree_1.Node {
         };
     }
     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.createStateModel(stateResolveBaseAttrs).useStates(this.currentStates), effectiveStates = null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : 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.resolvedStatePatch = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
     }
     buildStaticAttributeSnapshot() {
         var _a;
@@ -254,6 +263,22 @@ class Graphic extends node_tree_1.Node {
             "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
         })), snapshot) : snapshot;
     }
+    buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+        const extraAttrs = {};
+        if (!previousResolvedStatePatch) return extraAttrs;
+        const snapshot = this.buildStaticAttributeSnapshot(), staticTargetAttrs = snapshot;
+        return Object.keys(previousResolvedStatePatch).forEach((key => {
+            const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
+            if (hasTargetAttr && void 0 !== targetStateAttrs[key]) return;
+            const assignFallbackAttr = value => {
+                void 0 === value && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs) || (extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value));
+            };
+            if (hasTargetAttr) assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs)); else if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
+                const snapshotValue = snapshot[key];
+                assignFallbackAttr(void 0 === snapshotValue ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
+            } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+        })), extraAttrs;
+    }
     syncObjectToSnapshot(target, snapshot) {
         const delta = new Map;
         return new Set([ ...Object.keys(target), ...Object.keys(snapshot) ]).forEach((key => {
@@ -263,15 +288,17 @@ class Graphic extends node_tree_1.Node {
                 next: void 0
             }), delete target[key]));
             const nextValue = snapshot[key];
-            (0, vutils_1.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;
@@ -279,54 +306,155 @@ class Graphic extends node_tree_1.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 ? (0, attribute_update_classifier_1.classifyAttributeDelta)(key, prev, next) : null !== (_a = attribute_update_classifier_1.ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : attribute_update_classifier_1.UpdateCategory.PAINT;
+        return nextCategory & attribute_update_classifier_1.UpdateCategory.PICK && (nextCategory |= attribute_update_classifier_1.UpdateCategory.BOUNDS), 
+        nextCategory === attribute_update_classifier_1.UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = attribute_update_classifier_1.UpdateCategory.SHAPE | attribute_update_classifier_1.UpdateCategory.BOUNDS), 
+        category | nextCategory;
+    }
+    submitUpdateByCategory(category, forceUpdateTag = !1) {
         var _a;
         if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), 
         void this.addUpdateLayoutTag();
-        let category = attribute_update_classifier_1.UpdateCategory.NONE;
-        delta.forEach(((entry, key) => {
-            let nextCategory = (0, attribute_update_classifier_1.classifyAttributeDelta)(key, entry.prev, entry.next);
-            nextCategory & attribute_update_classifier_1.UpdateCategory.PICK && (nextCategory |= attribute_update_classifier_1.UpdateCategory.BOUNDS), 
-            nextCategory === attribute_update_classifier_1.UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = attribute_update_classifier_1.UpdateCategory.SHAPE | attribute_update_classifier_1.UpdateCategory.BOUNDS), 
-            category |= nextCategory;
-        })), category !== attribute_update_classifier_1.UpdateCategory.NONE && (null === (_a = (0, 
-        state_perf_monitor_1.getStageStatePerfMonitor)(this.stage)) || void 0 === _a || _a.recordCategory(category)), 
-        category & attribute_update_classifier_1.UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & attribute_update_classifier_1.UpdateCategory.BOUNDS && this.addUpdateBoundTag(), 
+        if (category !== attribute_update_classifier_1.UpdateCategory.NONE) {
+            const stage = this.stage;
+            stage && (null === (_a = (0, state_perf_monitor_1.getActiveStageStatePerfMonitor)(stage)) || void 0 === _a || _a.recordCategory(category));
+        }
+        (category & BROAD_UPDATE_CATEGORY) !== BROAD_UPDATE_CATEGORY ? (category & attribute_update_classifier_1.UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & attribute_update_classifier_1.UpdateCategory.BOUNDS && this.addUpdateBoundTag(), 
         category & attribute_update_classifier_1.UpdateCategory.PAINT && this.addUpdatePaintTag(), 
         category & attribute_update_classifier_1.UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), 
-        category & attribute_update_classifier_1.UpdateCategory.LAYOUT && this.addUpdateLayoutTag();
+        category & attribute_update_classifier_1.UpdateCategory.LAYOUT && this.addUpdateLayoutTag()) : this.addBroadUpdateTag();
+    }
+    submitUpdateByDelta(delta, forceUpdateTag = !1) {
+        let category = attribute_update_classifier_1.UpdateCategory.NONE;
+        delta.forEach(((entry, key) => {
+            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];
-            (0, vutils_1.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 = attribute_update_classifier_1.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();
     }
@@ -346,7 +474,7 @@ class Graphic extends node_tree_1.Node {
         return point;
     }
     onAnimateBind(animate) {
-        this._emitCustomEvent("animate-bind", animate);
+        this.detachAttributeFromBaseAttributes(), this._emitCustomEvent("animate-bind", animate);
     }
     visitTrackedAnimates(cb) {
         const hook = this.forEachTrackedAnimate;
@@ -359,8 +487,22 @@ class Graphic extends node_tree_1.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 & enums_1.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);
@@ -426,11 +568,11 @@ class Graphic extends node_tree_1.Node {
         const _parsedPath = new builtin_symbol_1.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 = (0, 
+        const attribute = this.attribute, bounds = this.updateAABBBounds(attribute, resolvedGraphicTheme, this._AABBBounds, full), {boundsPadding: boundsPadding = resolvedGraphicTheme.boundsPadding} = attribute, paddingArray = (0, 
         utils_1.parsePadding)(boundsPadding);
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), 
         bounds;
@@ -503,27 +645,72 @@ class Graphic extends node_tree_1.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 === enums_1.AttributeUpdateType.STATE || null != updateType && updateType >= enums_1.AttributeUpdateType.ANIMATE_BIND && updateType <= enums_1.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 === enums_1.AttributeUpdateType.STATE || null != updateType && updateType >= enums_1.AttributeUpdateType.ANIMATE_BIND && updateType <= enums_1.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];
+            (0, vutils_1.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) || !(0, 
+        vutils_1.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 = exports.GRAPHIC_UPDATE_TAG_KEY) {
         for (let i = 0; i < k.length; i++) {
@@ -543,10 +730,11 @@ class Graphic extends node_tree_1.Node {
             type: enums_1.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 = enums_1.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 = enums_1.UpdateTag.INIT, 
+        this.valid = this.isValid(), this.onAttributeUpdate(context);
     }
     translate(x, y) {
         var _a, _b;
@@ -557,11 +745,15 @@ class Graphic extends node_tree_1.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_1.application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : config_1.DefaultTransform.x) + x, 
-        attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : config_1.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_1.application.transformUtil.fromMatrix(nextPostMatrix, nextPostMatrix).translate(x, y), 
+            nextAttrs.postMatrix = nextPostMatrix;
+        } else nextAttrs.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : config_1.DefaultTransform.x) + x, 
+        nextAttrs.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : config_1.DefaultTransform.y) + y;
+        return this.commitInternalBaseAttributes(nextAttrs, context), this;
     }
     translateTo(x, y) {
         const attribute = this.baseAttributes;
@@ -572,9 +764,10 @@ class Graphic extends node_tree_1.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;
@@ -587,15 +780,15 @@ class Graphic extends node_tree_1.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 vutils_1.Matrix, attribute.postMatrix = postMatrix), 
-            application_1.application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
-        } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : config_1.DefaultTransform.scaleX) * scaleX, 
-        attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : config_1.DefaultTransform.scaleY) * scaleY;
-        return this.commitBaseAttributeMutation(!1, context), this;
+            let {postMatrix: postMatrix} = this.baseAttributes;
+            postMatrix = postMatrix ? postMatrix.clone() : new vutils_1.Matrix, application_1.application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter), 
+            nextAttrs.postMatrix = postMatrix;
+        } else nextAttrs.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : config_1.DefaultTransform.scaleX) * scaleX, 
+        nextAttrs.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : config_1.DefaultTransform.scaleY) * scaleY;
+        return this.commitInternalBaseAttributes(nextAttrs, context), this;
     }
     scaleTo(scaleX, scaleY) {
         const attribute = this.baseAttributes;
@@ -606,9 +799,10 @@ class Graphic extends node_tree_1.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;
@@ -619,24 +813,23 @@ class Graphic extends node_tree_1.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 vutils_1.Matrix, this.baseAttributes.postMatrix = postMatrix), 
-            application_1.application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
-        } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : config_1.DefaultTransform.angle) + angle;
-        return this.commitBaseAttributeMutation(!1, context), this;
+            postMatrix = postMatrix ? postMatrix.clone() : new vutils_1.Matrix, application_1.application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter), 
+            nextAttrs.postMatrix = postMatrix;
+        } else nextAttrs.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : config_1.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: enums_1.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;
@@ -656,7 +849,16 @@ class Graphic extends node_tree_1.Node {
         var _a;
         return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
     }
-    createStateModel() {
+    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;
+    }
+    createStateModel(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
         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 state_engine_1.StateEngine({
             compiledDefinitions: compiledDefinitions,
@@ -669,7 +871,7 @@ class Graphic extends node_tree_1.Node {
         this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, 
         this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, 
         this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), 
-        new state_model_1.StateModel({
+        this.syncStateResolveContext(stateResolveBaseAttrs), new state_model_1.StateModel({
             states: this.states,
             currentStates: this.currentStates,
             stateSort: this.stateSort,
@@ -677,27 +879,148 @@ class Graphic extends node_tree_1.Node {
             stateEngine: this.stateEngine
         });
     }
+    resolveSimpleLocalStateTransition(states, previousStates) {
+        var _a;
+        if (!this.states || this.stateProxy || this.stateSort || "deep" === this.stateMergeMode || this.parent || (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope) || this.boundSharedStateScope) return null;
+        if (1 === states.length) {
+            const stateName = states[0], hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName), nextStates = [ stateName ], changed = !this.sameStateNames(previousStates, nextStates), resolvedStateAttrs = {};
+            if (hasDefinition) {
+                const attrs = this.states[stateName];
+                if (null != attrs) {
+                    if (!isPlainObjectValue(attrs)) return null;
+                    const keys = Object.keys(attrs);
+                    for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+                        const key = keys[keyIndex];
+                        if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
+                        const attrValue = attrs[key];
+                        resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
+                    }
+                }
+            }
+            return {
+                changed: changed,
+                states: nextStates,
+                effectiveStates: nextStates,
+                resolvedStateAttrs: resolvedStateAttrs
+            };
+        }
+        const uniqueStates = Array.from(new Set(states)), withDefinition = [], withoutDefinition = [];
+        for (let i = 0; i < uniqueStates.length; i++) {
+            const stateName = uniqueStates[i];
+            Object.prototype.hasOwnProperty.call(this.states, stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
+        }
+        withDefinition.sort(((left, right) => left.localeCompare(right)));
+        const nextStates = withDefinition.concat(withoutDefinition), changed = !this.sameStateNames(previousStates, nextStates), resolvedStateAttrs = {};
+        for (let i = 0; i < nextStates.length; i++) {
+            const stateName = nextStates[i];
+            if (!Object.prototype.hasOwnProperty.call(this.states, stateName)) continue;
+            const attrs = this.states[stateName];
+            if (null == attrs) continue;
+            if (!isPlainObjectValue(attrs)) return null;
+            const keys = Object.keys(attrs);
+            for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+                const key = keys[keyIndex];
+                if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
+                const attrValue = attrs[key];
+                resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
+            }
+        }
+        return {
+            changed: changed,
+            states: nextStates,
+            effectiveStates: nextStates,
+            resolvedStateAttrs: resolvedStateAttrs
+        };
+    }
+    resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = !1) {
+        var _a, _b;
+        let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
+        const isSimpleLocalTransition = !!transition;
+        let resolvedStateAttrs;
+        if (transition) resolvedStateAttrs = transition.resolvedStateAttrs; else {
+            const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(), stateModel = this.createStateModel(stateResolveBaseAttrs);
+            forceResolverRefresh && (null === (_a = this.stateEngine) || void 0 === _a || _a.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 !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : 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 = (0, state_perf_monitor_1.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: enums_1.AttributeUpdateType.STATE
+            }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+                type: enums_1.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 : config_2.DefaultStateAnimateConfig;
     }
-    applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig) {
+    applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
         const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0, transitionOptions = resolvedAnimateConfig ? {
-            animateConfig: resolvedAnimateConfig
+            animateConfig: resolvedAnimateConfig,
+            extraAnimateAttrs: extraAnimateAttrs,
+            shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
         } : void 0;
         if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
         const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
             noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
-            animateConfig: resolvedAnimateConfig
+            animateConfig: resolvedAnimateConfig,
+            extraAnimateAttrs: extraAnimateAttrs,
+            shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
         });
         this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
     }
-    updateNormalAttrs(stateAttrs) {
-        this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
+    updateNormalAttrs(_stateAttrs) {}
+    getStateTransitionDefaultAttribute(key, targetAttrs) {
+        return this.getDefaultAttribute(key);
+    }
+    shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
+        return !1;
     }
     stopStateAnimates(type = "end") {
         const stopAnimationState = this.stopAnimationState;
         if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
+        if (!this.mayHaveTrackedAnimates()) return;
         const stateAnimates = [];
         this.visitTrackedAnimates((animate => {
             animate.stateNames && stateAnimates.push(animate);
@@ -710,23 +1033,27 @@ class Graphic extends node_tree_1.Node {
     }
     clearStates(hasAnimation) {
         var _a, _b, _c;
-        const previousStates = this.currentStates ? this.currentStates.slice() : [], transition = this.createStateModel().clearStates();
+        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 = (0, state_perf_monitor_1.getStageStatePerfMonitor)(this.stage)) || void 0 === _b || _b.incrementCounter("stateCommits"), 
-        null === (_c = (0, state_perf_monitor_1.getStageStatePerfMonitor)(this.stage)) || void 0 === _c || _c.recordEvent("state-commit", {
-            graphicId: this._uid,
-            targetStates: []
-        }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0)) : (this.stopStateAnimates(), 
-        this._restoreAttributeFromStaticTruth({
-            type: enums_1.AttributeUpdateType.STATE
-        }), this._emitCustomEvent("afterStateUpdate", {
-            type: enums_1.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 = (0, state_perf_monitor_1.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: enums_1.AttributeUpdateType.STATE
+            }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
+                type: enums_1.AttributeUpdateType.STATE
+            }), this.emitStateUpdateEvent());
+        }
     }
     removeState(stateName, hasAnimation) {
         const transition = this.createStateModel().removeState(stateName);
@@ -740,42 +1067,51 @@ class Graphic extends node_tree_1.Node {
         const transition = this.createStateModel().addState(stateName, keepCurrentStates);
         transition.changed && this.useStates(transition.states, hasAnimation);
     }
+    setStates(states, options) {
+        var _a, _b, _c;
+        const {hasAnimation: hasAnimation, animateSameStatePatchChange: animateSameStatePatchChange, shouldRefreshSameStatePatch: shouldRefreshSameStatePatch} = this.normalizeSetStatesOptions(options), nextStates = (null == states ? void 0 : states.length) ? states : EMPTY_STATE_NAMES, hasCurrentState = !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || (null === (_b = this.effectiveStates) || void 0 === _b ? void 0 : _b.length) || this.resolvedStatePatch || (null === (_c = this.registeredActiveScopes) || void 0 === _c ? void 0 : _c.size));
+        if (nextStates.length) {
+            if (this.sameStateNames(this.currentStates, nextStates)) return shouldRefreshSameStatePatch ? void this.commitSameStatePatchRefresh(nextStates, hasAnimation, animateSameStatePatchChange) : void (this.sharedStateDirty && this.refreshSharedStateBeforeRender());
+            this.useStates(nextStates, hasAnimation);
+        } else {
+            if (!hasCurrentState && !this.sharedStateDirty) return;
+            this.clearStates(hasAnimation);
+        }
+    }
     useStates(states, hasAnimation) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         if (!states.length) return void this.clearStates(hasAnimation);
-        const previousStates = this.currentStates ? this.currentStates.slice() : [], 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 = (0, 
-        state_perf_monitor_1.getStageStatePerfMonitor)(this.stage)) || void 0 === _d || _d.incrementCounter("stateCommits"), 
-        null === (_e = (0, state_perf_monitor_1.getStageStatePerfMonitor)(this.stage)) || void 0 === _e || _e.recordEvent("state-commit", {
-            graphicId: this._uid,
-            targetStates: [ ...transition.states ]
-        }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation)) : (this.stopStateAnimates(), 
-        this._restoreAttributeFromStaticTruth({
-            type: enums_1.AttributeUpdateType.STATE
-        }), this._emitCustomEvent("afterStateUpdate", {
-            type: enums_1.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 = (0, state_perf_monitor_1.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: enums_1.AttributeUpdateType.STATE
+            }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+                type: enums_1.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: enums_1.AttributeUpdateType.STATE
-        }), this._emitCustomEvent("afterStateUpdate", {
-            type: enums_1.AttributeUpdateType.STATE
-        });
+        }), this.emitStateUpdateEvent();
     }
     sameStateNames(left, right) {
         const normalizedLeft = null != left ? left : [], normalizedRight = null != right ? right : [];
@@ -797,6 +1133,10 @@ class Graphic extends node_tree_1.Node {
         this._updateTag |= enums_1.UpdateTag.UPDATE_SHAPE_AND_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), 
         this.glyphHost && this.glyphHost.addUpdateBoundTag();
     }
+    addBroadUpdateTag() {
+        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= enums_1.UpdateTag.UPDATE_SHAPE_AND_BOUNDS | enums_1.UpdateTag.UPDATE_PAINT | enums_1.UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX | enums_1.UpdateTag.UPDATE_LAYOUT, 
+        this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+    }
     updateShapeAndBoundsTagSetted() {
         return (this._updateTag & enums_1.UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === enums_1.UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
     }
@@ -871,12 +1211,12 @@ class Graphic extends node_tree_1.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_1.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), 
@@ -890,9 +1230,18 @@ class Graphic extends node_tree_1.Node {
                     type: enums_1.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);
@@ -967,6 +1316,7 @@ class Graphic extends node_tree_1.Node {
         res && (res.state = "fail", cb && cb());
     }
     _stopAnimates() {
+        if (!this.mayHaveTrackedAnimates()) return;
         const animates = [];
         this.visitTrackedAnimates((animate => {
             animates.push(animate);
@@ -980,15 +1330,19 @@ class Graphic extends node_tree_1.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_1.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_1.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 event_1.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;
@@ -997,7 +1351,7 @@ class Graphic extends node_tree_1.Node {
         return !0;
     }
     beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
-        return this._dispatchCustomEvent("beforeStateUpdate", {
+        return !this.hasCustomEvent("beforeStateUpdate") || this._dispatchCustomEvent("beforeStateUpdate", {
             type: enums_1.AttributeUpdateType.STATE,
             attrs: Object.assign({}, attrs),
             prevStates: prevStates.slice(),
@@ -1006,6 +1360,11 @@ class Graphic extends node_tree_1.Node {
             isClear: !!isClear
         });
     }
+    emitStateUpdateEvent() {
+        this.hasCustomEvent("afterStateUpdate") && this._emitCustomEvent("afterStateUpdate", {
+            type: enums_1.AttributeUpdateType.STATE
+        });
+    }
     _emitCustomEvent(type, context) {
         this._dispatchCustomEvent(type, context);
     }