@visactor/vrender-core 1.1.0-alpha.24 → 1.1.0-alpha.25

package/es/graphic/graphic.js

@@ -34,27 +34,21 @@ import { StateDefinitionCompiler } from "./state/state-definition-compiler";
 
 import { StateEngine } from "./state/state-engine";
 
-import { StateModel } from "./state/state-model";
-
 import { ATTRIBUTE_CATEGORY, UpdateCategory, classifyAttributeDelta } from "./state/attribute-update-classifier";
 
-import { StateStyleResolver } from "./state/state-style-resolver";
-
 import { StateTransitionOrchestrator } from "./state/state-transition-orchestrator";
 
 import { collectSharedStateScopeChain, ensureSharedStateScopeFresh } from "./state/shared-state-scope";
 
 import { enqueueGraphicSharedStateRefresh, scheduleStageSharedStateRefresh } from "./state/shared-state-refresh";
 
-import { getActiveStageStatePerfMonitor } 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" ]), FULL_STATE_DEFINITION_KEYS = new Set([ "name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys" ]), point = new Point, EMPTY_STATE_NAMES = [], deprecatedLocalStateFallbackWarningStateNames = new Set, BROAD_UPDATE_CATEGORY = UpdateCategory.PAINT | UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.TRANSFORM | UpdateCategory.LAYOUT;
+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 && !Array.isArray(value);
@@ -174,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;
@@ -198,9 +186,8 @@ 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);
     }
@@ -245,15 +232,8 @@ export class Graphic extends Node {
     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;
-    }
-    warnDeprecatedLocalStatesFallback(stateNames) {
-        for (let index = 0; index < stateNames.length; index++) {
-            const stateName = stateNames[index];
-            deprecatedLocalStateFallbackWarningStateNames.has(stateName) || (deprecatedLocalStateFallbackWarningStateNames.add(stateName), 
-            console.warn(`[VRender] graphic.states fallback for missing shared state definition "${stateName}" is deprecated. Move the state definition to sharedStateDefinitions or use stateProxy for dynamic per-graphic styles.`));
-        }
+        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);
@@ -262,46 +242,23 @@ 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
-        };
-        this.warnDeprecatedLocalStatesFallback(missingStateNames);
-        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;
         if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)) return this.effectiveStates = [], 
         this.resolvedStatePatch = void 0, void this.syncSharedStateActiveRegistrations();
-        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);
+        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 = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
     }
@@ -364,13 +321,8 @@ export class Graphic extends Node {
         category | nextCategory;
     }
     submitUpdateByCategory(category, forceUpdateTag = !1) {
-        var _a;
         if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), 
         void this.addUpdateLayoutTag();
-        if (category !== UpdateCategory.NONE) {
-            const stage = this.stage;
-            stage && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordCategory(category));
-        }
         (category & BROAD_UPDATE_CATEGORY) !== BROAD_UPDATE_CATEGORY ? (category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), 
         category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), 
         category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag()) : this.addBroadUpdateTag();
@@ -902,95 +854,90 @@ export class Graphic extends Node {
         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 StateEngine({
+    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), 
-        this.syncStateResolveContext(stateResolveBaseAttrs), 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;
     }
-    resolveSimpleLocalStateTransition(states, previousStates) {
+    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 (!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;
-            }
-        }
+        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: nextStates,
-            effectiveStates: nextStates,
-            resolvedStateAttrs: resolvedStateAttrs
+            states: changed ? nextStates : [ ...previousStates ]
         };
     }
-    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);
-        }
+    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 !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
-            resolvedStateAttrs: resolvedStateAttrs,
-            isSimpleLocalTransition: isSimpleLocalTransition
+            effectiveStates: null !== (_a = transition.effectiveStates) && void 0 !== _a ? _a : transition.states,
+            resolvedStateAttrs: resolvedStateAttrs
         };
     }
     normalizeSetStatesOptions(options) {
@@ -1014,26 +961,16 @@ export class Graphic extends Node {
     }
     commitSameStatePatchRefresh(states, hasAnimation, animateSameStatePatchChange = !1) {
         var _a;
-        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES, previousResolvedStatePatch = this.resolvedStatePatch, {transition: transition, effectiveStates: effectiveStates, resolvedStateAttrs: resolvedStateAttrs, isSimpleLocalTransition: isSimpleLocalTransition} = this.resolveGraphicStateTransition(states, previousStates, !0), patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
-        if ((!patchChanged || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) && (this.currentStates = transition.states, 
-        this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [ ...effectiveStates ], 
-        this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), 
-        patchChanged)) {
-            if (this.stage) {
-                const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-                null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-                    graphicId: this._uid,
-                    targetStates: [ ...transition.states ]
-                });
-            }
-            hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), 
-            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), 
-            this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-                type: AttributeUpdateType.STATE
-            }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
-                type: AttributeUpdateType.STATE
-            }), this.emitStateUpdateEvent());
-        }
+        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;
@@ -1045,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,
@@ -1070,45 +1007,33 @@ export class Graphic extends Node {
             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 = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES, previousResolvedStatePatch = this.resolvedStatePatch, 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 = hasAnimation || this.hasCustomEvent("beforeStateUpdate") ? cloneAttributeValue(null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : {}) : null !== (_c = this.baseAttributes) && void 0 !== _c ? _c : {};
-        if (!transition.changed || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0)) {
-            if (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, 
-            this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), this.stage) {
-                const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-                null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-                    graphicId: this._uid,
-                    targetStates: []
-                });
-            }
-            hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), 
-            this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-                type: AttributeUpdateType.STATE
-            }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
-                type: AttributeUpdateType.STATE
-            }), this.emitStateUpdateEvent());
-        }
+        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(), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), 
+        this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), 
+        this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+            type: AttributeUpdateType.STATE
+        }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
+            type: AttributeUpdateType.STATE
+        }), this.emitStateUpdateEvent()));
     }
     removeState(stateName, hasAnimation) {
-        const transition = this.createStateModel().removeState(stateName);
+        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) {
@@ -1125,24 +1050,16 @@ export class Graphic extends Node {
     useStates(states, hasAnimation) {
         var _a;
         if (!states.length) return void this.clearStates(hasAnimation);
-        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES, previousResolvedStatePatch = this.resolvedStatePatch, {transition: transition, effectiveStates: effectiveStates, resolvedStateAttrs: resolvedStateAttrs, isSimpleLocalTransition: isSimpleLocalTransition} = this.resolveGraphicStateTransition(states, previousStates);
-        if ((transition.changed || !this.sameStateNames(previousStates, transition.states)) && this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) {
-            if (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [ ...effectiveStates ], 
-            this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), 
-            this.stage) {
-                const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-                null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-                    graphicId: this._uid,
-                    targetStates: [ ...transition.states ]
-                });
-            }
-            hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), 
-            this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-                type: AttributeUpdateType.STATE
-            }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
-                type: AttributeUpdateType.STATE
-            }), this.emitStateUpdateEvent());
-        }
+        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.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+            type: AttributeUpdateType.STATE
+        }), this.emitStateUpdateEvent()));
     }
     invalidateResolver() {
         var _a, _b;
@@ -1280,9 +1197,8 @@ export class Graphic extends Node {
         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.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) {