@visactor/vrender-core 1.0.47-alpha.0 → 1.1.0-alpha.1

package/cjs/graphic/graphic.js

@@ -2,16 +2,55 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.Graphic = exports.NOWORK_ANIMATE_ATTR = exports.GRAPHIC_UPDATE_TAG_KEY = exports.PURE_STYLE_KEY = void 0;
+}), exports.Graphic = exports.NOWORK_ANIMATE_ATTR = exports.shouldUseSimpleAttributeFastPath = exports.GRAPHIC_UPDATE_TAG_KEY = exports.PURE_STYLE_KEY = void 0;
 
-const vutils_1 = require("@visactor/vutils"), vutils_2 = 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"), _tempBounds = new vutils_2.AABBBounds, tempMatrix = new vutils_2.Matrix, tempBounds = new vutils_2.AABBBounds;
+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", "pathProxy", "scaleX", "scaleY", "angle", "anchor", "visible" ];
+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_2.Point;
+const tempConstantXYKey = [ "x", "y" ], tempConstantScaleXYKey = [ "scaleX", "scaleY" ], tempConstantAngleKey = [ "angle" ], builtinTextureTypes = new Set([ "circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave" ]), point = new vutils_1.Point;
 
-exports.NOWORK_ANIMATE_ATTR = {
+function isPlainObjectValue(value) {
+    return "object" == typeof value && null != value && !(0, vutils_1.isArray)(value);
+}
+
+function cloneAttributeValue(value) {
+    if (!isPlainObjectValue(value)) return value;
+    const source = value, clone = {};
+    return Object.keys(source).forEach((key => {
+        const nextValue = source[key];
+        clone[key] = isPlainObjectValue(nextValue) ? cloneAttributeValue(nextValue) : nextValue;
+    })), clone;
+}
+
+function cloneSimpleAttributeRecord(value) {
+    return isPlainObjectValue(value) ? Object.assign({}, value) : value;
+}
+
+function shouldUseSimpleAttributeFastPath(value) {
+    return !!isPlainObjectValue(value) && !Object.keys(value).some((key => isPlainObjectValue(value[key])));
+}
+
+function cloneAttributeSurface(value) {
+    if (!isPlainObjectValue(value)) return value;
+    const source = value, clone = {};
+    return Object.keys(source).forEach((key => {
+        const nextValue = source[key];
+        clone[key] = isPlainObjectValue(nextValue) ? Object.assign({}, nextValue) : nextValue;
+    })), clone;
+}
+
+function deepMergeAttributeValue(base, value) {
+    var _a;
+    const result = null !== (_a = cloneAttributeValue(base)) && void 0 !== _a ? _a : {};
+    return Object.keys(value).forEach((key => {
+        const nextValue = value[key], previousValue = result[key];
+        isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? result[key] = deepMergeAttributeValue(previousValue, nextValue) : result[key] = cloneAttributeValue(nextValue);
+    })), result;
+}
+
+exports.shouldUseSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath, exports.NOWORK_ANIMATE_ATTR = {
     strokeSeg: 1,
     boundsPadding: 2,
     pickMode: 1,
@@ -67,11 +106,18 @@ class Graphic extends node_tree_1.Node {
     }
     constructor(params = {}) {
         var _a;
-        super(), this._AABBBounds = new vutils_2.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), 
+        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);
     }
+    get normalAttrs() {
+        return this.baseAttributes;
+    }
+    set normalAttrs(value) {
+        this._deprecatedNormalAttrsView = null != value ? value : void 0;
+    }
     getGraphicService() {
         var _a, _b;
         return null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.graphicService) && void 0 !== _b ? _b : application_1.application.graphicService;
@@ -79,6 +125,208 @@ class Graphic extends node_tree_1.Node {
     getAttributes() {
         return this.attribute;
     }
+    getStateStyleResolver(mergeMode) {
+        return "deep" === mergeMode ? (this.deepStateStyleResolver || (this.deepStateStyleResolver = new state_style_resolver_1.StateStyleResolver({
+            mergeMode: "deep"
+        })), this.deepStateStyleResolver) : (this.stateStyleResolver || (this.stateStyleResolver = new state_style_resolver_1.StateStyleResolver), 
+        this.stateStyleResolver);
+    }
+    getStateTransitionOrchestrator() {
+        return this.stateTransitionOrchestrator || (this.stateTransitionOrchestrator = new state_transition_orchestrator_1.StateTransitionOrchestrator), 
+        this.stateTransitionOrchestrator;
+    }
+    resolveBoundSharedStateScope() {
+        var _a;
+        let parent = this.parent;
+        for (;parent; ) {
+            if (parent.sharedStateScope) return parent.sharedStateScope;
+            parent = parent.parent;
+        }
+        return null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope;
+    }
+    syncSharedStateScopeBindingFromTree(markDirty = !0) {
+        var _a;
+        const nextScope = this.resolveBoundSharedStateScope();
+        return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), 
+        !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, 
+        this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, 
+        this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, 
+        this.stateEngineStateProxyModeKey = void 0, this.syncSharedStateActiveRegistrations(), 
+        markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), 
+        !0);
+    }
+    syncSharedStateActiveRegistrations() {
+        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 => {
+            nextScopes.has(scope) || scope.subtreeActiveDescendants.delete(this);
+        })), nextScopes.forEach((scope => {
+            scope.subtreeActiveDescendants.add(this);
+        })), this.registeredActiveScopes = nextScopes;
+    }
+    clearSharedStateActiveRegistrations() {
+        const previousScopes = this.registeredActiveScopes;
+        previousScopes && (previousScopes.forEach((scope => {
+            scope.subtreeActiveDescendants.delete(this);
+        })), previousScopes.clear()), this.registeredActiveScopes = void 0;
+    }
+    markSharedStateDirty() {
+        this.sharedStateDirty = !0, (0, shared_state_refresh_1.enqueueGraphicSharedStateRefresh)(this.stage, this), 
+        (0, shared_state_refresh_1.scheduleStageSharedStateRefresh)(this.stage);
+    }
+    onParentSharedStateTreeChanged(stage, layer) {
+        this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingFromTree() : this.setStage(stage, layer);
+    }
+    refreshSharedStateBeforeRender() {
+        var _a;
+        (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? (this.syncSharedStateScopeBindingFromTree(!1), 
+        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;
+    }
+    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;
+    }
+    resolveEffectiveCompiledDefinitions() {
+        this.syncSharedStateScopeBindingFromTree(!1);
+        const boundScope = this.boundSharedStateScope;
+        boundScope && ((0, shared_state_scope_1.ensureSharedStateScopeFresh)(boundScope), 
+        this.boundSharedStateRevision = boundScope.revision);
+        const hasStates = !!this.states && Object.keys(this.states).length > 0;
+        if (!boundScope) {
+            if (!hasStates) return {
+                compiledDefinitions: void 0,
+                stateProxyModeKey: "none"
+            };
+            const cacheKey = `local:${this.getLocalStatesVersion()}`;
+            return this.compiledStateDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.compiledStateDefinitions = (new state_definition_compiler_1.StateDefinitionCompiler).compile(this.states), 
+            this.compiledStateDefinitionsCacheKey = cacheKey), {
+                compiledDefinitions: this.compiledStateDefinitions,
+                stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
+            };
+        }
+        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions;
+        if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
+            compiledDefinitions: sharedCompiledDefinitions,
+            stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
+            stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+        };
+        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: this.stateProxy ? "shared-disabled" : "none",
+            stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+        };
+        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 state_definition_compiler_1.StateDefinitionCompiler).compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions)), 
+        this.compiledStateDefinitionsCacheKey = cacheKey), {
+            compiledDefinitions: this.localFallbackCompiledDefinitions,
+            stateProxyModeKey: stateProxyModeKey,
+            stateProxyEligibility: this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0
+        };
+    }
+    recomputeCurrentStatePatch() {
+        var _a, _b, _c, _d;
+        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);
+        this.currentStates = transition.states, this.effectiveStates = [ ...effectiveStates ], 
+        this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.syncSharedStateActiveRegistrations();
+    }
+    buildStaticAttributeSnapshot() {
+        var _a;
+        const snapshot = cloneAttributeValue(null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : {}), resolvedPatch = this.resolvedStatePatch;
+        return resolvedPatch ? (Object.keys(resolvedPatch).forEach((key => {
+            const nextValue = resolvedPatch[key], previousValue = snapshot[key];
+            "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
+        })), snapshot) : snapshot;
+    }
+    syncObjectToSnapshot(target, snapshot) {
+        const delta = new Map;
+        return new Set([ ...Object.keys(target), ...Object.keys(snapshot) ]).forEach((key => {
+            const hasNext = Object.prototype.hasOwnProperty.call(snapshot, key), previousValue = target[key];
+            if (!hasNext) return void (Object.prototype.hasOwnProperty.call(target, key) && (delta.set(key, {
+                prev: previousValue,
+                next: void 0
+            }), delete target[key]));
+            const nextValue = snapshot[key];
+            (0, vutils_1.isEqual)(previousValue, nextValue) || (delta.set(key, {
+                prev: previousValue,
+                next: nextValue
+            }), target[key] = cloneAttributeValue(nextValue));
+        })), delta;
+    }
+    _syncAttribute() {
+        const snapshot = this.buildStaticAttributeSnapshot(), delta = this.syncObjectToSnapshot(this.attribute, snapshot);
+        return this.valid = this.isValid(), delta;
+    }
+    _syncFinalAttributeFromStaticTruth() {
+        const target = this.finalAttribute;
+        if (!target) return;
+        const snapshot = this.buildStaticAttributeSnapshot();
+        this.syncObjectToSnapshot(target, snapshot);
+    }
+    submitUpdateByDelta(delta, 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(), 
+        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();
+    }
+    commitBaseAttributeMutation(forceUpdateTag = !1, context) {
+        var _a, _b;
+        (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && (this.resolverEpoch += 1, 
+        null === (_b = this.stateEngine) || void 0 === _b || _b.invalidateResolverCache(), 
+        this.recomputeCurrentStatePatch());
+        const delta = this._syncAttribute();
+        this.submitUpdateByDelta(delta, forceUpdateTag), 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]);
+        }
+    }
+    applyTransientAttributes(params, forceUpdateTag = !1, context) {
+        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, {
+                prev: previousValue,
+                next: nextValue
+            }), this.attribute[key] = cloneAttributeValue(nextValue));
+        }
+        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);
+    }
     setMode(mode) {
         "3d" === mode ? this.set3dMode() : this.set2dMode();
     }
@@ -100,6 +348,17 @@ class Graphic extends node_tree_1.Node {
     onAnimateBind(animate) {
         this._emitCustomEvent("animate-bind", animate);
     }
+    visitTrackedAnimates(cb) {
+        const hook = this.forEachTrackedAnimate;
+        "function" != typeof hook ? this.animates && this.animates.forEach(cb) : hook.call(this, cb);
+    }
+    hasAnyTrackedAnimate() {
+        var _a;
+        const hook = this.hasTrackedAnimate;
+        if ("function" == typeof hook) return hook.call(this);
+        const getTrackedAnimates = this.getTrackedAnimates;
+        return "function" == typeof getTrackedAnimates ? getTrackedAnimates.call(this).size > 0 : !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size);
+    }
     tryUpdateAABBBounds() {
         const full = "imprecise" === this.attribute.boundsMode;
         if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
@@ -177,7 +436,7 @@ class Graphic extends node_tree_1.Node {
         bounds;
     }
     updatePathProxyAABBBounds(aabbBounds) {
-        const path = this.getPathProxy();
+        const path = "function" == typeof this.pathProxy ? this.pathProxy(this.attribute) : this.pathProxy;
         if (!path) return !1;
         const boundsContext = new bounds_context_1.BoundsContext(aabbBounds);
         return (0, render_command_list_1.renderCommandList)(path.commandList, boundsContext, 0, 0), 
@@ -202,7 +461,7 @@ class Graphic extends node_tree_1.Node {
         return !0;
     }
     tryUpdateLocalTransMatrix(clearTag = !0) {
-        return this._transMatrix || (this._transMatrix = new vutils_2.Matrix), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), 
+        return this._transMatrix || (this._transMatrix = new vutils_1.Matrix), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), 
         clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
     }
     shouldUpdateAABBBounds() {
@@ -231,7 +490,7 @@ class Graphic extends node_tree_1.Node {
     containsPoint(x, y, mode, picker) {
         if (!picker) return !1;
         if (mode === enums_1.IContainPointMode.GLOBAL) {
-            const point = new vutils_2.Point(x, y);
+            const point = new vutils_1.Point(x, y);
             this.parent && this.parent.globalTransMatrix.transformPoint(point, point), x = point.x, 
             y = point.y;
         }
@@ -244,11 +503,11 @@ 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) {
-        this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach((animate => {
+        this.visitTrackedAnimates((animate => {
             (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach((key => {
                 animate.preventAttr(key);
             }));
-        }));
+        })), this.applyTransientAttributes(params, forceUpdateTag, context);
     }
     setAttributes(params, forceUpdateTag = !1, context) {
         params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), 
@@ -256,23 +515,15 @@ class Graphic extends node_tree_1.Node {
         this._setAttributes(params, forceUpdateTag, context));
     }
     _setAttributes(params, forceUpdateTag = !1, context) {
-        const keys = Object.keys(params);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            this.attribute[key] = params[key];
-        }
-        this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTags(keys) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), 
-        this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context);
+        this.applyBaseAttributes(params), this.commitBaseAttributeMutation(forceUpdateTag, context);
     }
     setAttribute(key, value, forceUpdateTag, context) {
-        var _a;
         const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
             [key]: value
         }, this.attribute, key, context);
-        params ? this._setAttributes(params, forceUpdateTag, context) : (0, vutils_2.isNil)(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, 
-        this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), 
-        this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, 
-        "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
+        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);
     }
     needUpdateTags(keys, k = exports.GRAPHIC_UPDATE_TAG_KEY) {
         for (let i = 0; i < k.length; i++) {
@@ -292,7 +543,8 @@ class Graphic extends node_tree_1.Node {
             type: enums_1.AttributeUpdateType.INIT
         };
         params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, 
-        this.attribute = params, params.background && this.loadImage(params.background, !0), 
+        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);
     }
@@ -305,15 +557,14 @@ 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._setAttributes(params));
-        const attribute = this.attribute, postMatrix = attribute.postMatrix;
+        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.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
-        this.onAttributeUpdate(context), this;
+        this.commitBaseAttributeMutation(!1, context), this;
     }
     translateTo(x, y) {
-        const attribute = this.attribute;
+        const attribute = this.baseAttributes;
         if (attribute.x === x && attribute.y === y) return this;
         const context = {
             type: enums_1.AttributeUpdateType.TRANSLATE_TO
@@ -321,9 +572,9 @@ class Graphic extends node_tree_1.Node {
             x: x,
             y: y
         }, this.attribute, tempConstantXYKey, context);
-        return params ? (this._setAttributes(params, !1, context), this) : (attribute.x = x, 
-        attribute.y = y, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
-        this.onAttributeUpdate(context), this);
+        return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), 
+        this) : (attribute.x = x, attribute.y = y, this.commitBaseAttributeMutation(!1, context), 
+        this);
     }
     scale(scaleX, scaleY, scaleCenter) {
         var _a, _b;
@@ -336,19 +587,18 @@ 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._setAttributes(params));
-        const attribute = this.attribute;
+        delete params.scaleY, this.applyBaseAttributes(params));
+        const attribute = this.baseAttributes;
         if (scaleCenter) {
             let {postMatrix: postMatrix} = this.attribute;
-            postMatrix || (postMatrix = new vutils_2.Matrix, attribute.postMatrix = postMatrix), 
+            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.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
-        this.onAttributeUpdate(context), this;
+        return this.commitBaseAttributeMutation(!1, context), this;
     }
     scaleTo(scaleX, scaleY) {
-        const attribute = this.attribute;
+        const attribute = this.baseAttributes;
         if (attribute.scaleX === scaleX && attribute.scaleY === scaleY) return this;
         const context = {
             type: enums_1.AttributeUpdateType.SCALE_TO
@@ -356,9 +606,9 @@ class Graphic extends node_tree_1.Node {
             scaleX: scaleX,
             scaleY: scaleY
         }, this.attribute, tempConstantScaleXYKey, context);
-        return params ? (this._setAttributes(params, !1, context), this) : (attribute.scaleX = scaleX, 
-        attribute.scaleY = scaleY, this.addUpdatePositionTag(), this.addUpdateBoundTag(), 
-        this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+        return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), 
+        this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.commitBaseAttributeMutation(!1, context), 
+        this);
     }
     rotate(angle, rotateCenter) {
         var _a;
@@ -369,25 +619,24 @@ class Graphic extends node_tree_1.Node {
             angle: angle,
             rotateCenter: rotateCenter
         }, this.attribute, tempConstantAngleKey, context);
-        params && (delete params.angle, this._setAttributes(params, !1, context));
-        const attribute = this.attribute;
+        params && (delete params.angle, this.applyBaseAttributes(params));
+        const attribute = this.baseAttributes;
         if (rotateCenter) {
-            let {postMatrix: postMatrix} = this.attribute;
-            postMatrix || (postMatrix = new vutils_2.Matrix, attribute.postMatrix = postMatrix), 
+            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.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
-        this.onAttributeUpdate(context), this;
+        return this.commitBaseAttributeMutation(!1, context), this;
     }
     rotateTo(angle) {
-        const attribute = this.attribute;
+        const attribute = this.baseAttributes;
         if (attribute.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._setAttributes(params, !1, context), this) : (attribute.angle = angle, 
-        this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), 
-        this.onAttributeUpdate(context), this);
+        return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), 
+        this) : (attribute.angle = angle, this.commitBaseAttributeMutation(!1, context), 
+        this);
     }
     skewTo(b, c) {
         return this;
@@ -401,99 +650,146 @@ class Graphic extends node_tree_1.Node {
         this.tryUpdateLocalTransMatrix());
     }
     hasState(stateName) {
-        return !(!this.currentStates || !this.currentStates.length) && (!!(0, vutils_2.isNil)(stateName) || this.currentStates.includes(stateName));
+        return !(!this.currentStates || !this.currentStates.length) && (!!(0, vutils_1.isNil)(stateName) || this.currentStates.includes(stateName));
     }
     getState(stateName) {
         var _a;
         return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
     }
-    applyStateAttrs(attrs, stateNames, hasAnimation, isClear) {
-        var _a, _b;
-        if (hasAnimation) {
-            const keys = Object.keys(attrs), noWorkAttrs = this.getNoWorkAnimateAttr(), animateAttrs = {};
-            let noAnimateAttrs;
-            keys.forEach((key => {
-                noWorkAttrs[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = isClear && void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
-            }));
-            const stateAnimateConfig = null !== (_b = null !== (_a = this.context && this.context.stateAnimateConfig) && void 0 !== _a ? _a : this.stateAnimateConfig) && void 0 !== _b ? _b : config_2.DefaultStateAnimateConfig;
-            this.applyAnimationState([ "state" ], [ {
-                name: "state",
-                animation: {
-                    type: "state",
-                    to: animateAttrs,
-                    duration: stateAnimateConfig.duration,
-                    easing: stateAnimateConfig.easing
-                }
-            } ]), noAnimateAttrs && this.setAttributesAndPreventAnimate(noAnimateAttrs, !1, {
-                type: enums_1.AttributeUpdateType.STATE
-            }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
-        } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
-            type: enums_1.AttributeUpdateType.STATE
-        }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
-        this._emitCustomEvent("afterStateUpdate", {
-            type: enums_1.AttributeUpdateType.STATE
+    createStateModel() {
+        const {compiledDefinitions: compiledDefinitions, stateProxyEligibility: stateProxyEligibility, stateProxyModeKey: stateProxyModeKey} = this.resolveEffectiveCompiledDefinitions();
+        return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateProxy === this.stateProxy && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode && this.stateEngineStateProxyModeKey === stateProxyModeKey || (this.stateEngine = new state_engine_1.StateEngine({
+            compiledDefinitions: compiledDefinitions,
+            stateSort: this.stateSort,
+            stateProxy: this.stateProxy,
+            stateProxyEligibility: stateProxyEligibility,
+            states: this.states,
+            mergeMode: this.stateMergeMode
+        }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateProxy = this.stateProxy, 
+        this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, 
+        this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, 
+        this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), 
+        new state_model_1.StateModel({
+            states: this.states,
+            currentStates: this.currentStates,
+            stateSort: this.stateSort,
+            stateProxy: this.stateProxy,
+            stateEngine: this.stateEngine
+        });
+    }
+    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) {
+        const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0, transitionOptions = resolvedAnimateConfig ? {
+            animateConfig: resolvedAnimateConfig
+        } : 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
         });
+        this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
     }
     updateNormalAttrs(stateAttrs) {
-        const newNormalAttrs = {};
-        this.normalAttrs ? (Object.keys(stateAttrs).forEach((key => {
-            key in this.normalAttrs ? (newNormalAttrs[key] = this.normalAttrs[key], delete this.normalAttrs[key]) : newNormalAttrs[key] = this.getNormalAttribute(key);
-        })), Object.keys(this.normalAttrs).forEach((key => {
-            stateAttrs[key] = this.normalAttrs[key];
-        }))) : Object.keys(stateAttrs).forEach((key => {
-            newNormalAttrs[key] = this.getNormalAttribute(key);
-        })), this.normalAttrs = newNormalAttrs;
+        this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
     }
     stopStateAnimates(type = "end") {
-        this.animates && this.animates.forEach((animate => {
-            animate.stateNames && (animate.stop(type), this.animates.delete(animate.id));
-        }));
+        const stopAnimationState = this.stopAnimationState;
+        if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
+        const stateAnimates = [];
+        this.visitTrackedAnimates((animate => {
+            animate.stateNames && stateAnimates.push(animate);
+        })), stateAnimates.forEach((animate => animate.stop(type)));
     }
     getNormalAttribute(key) {
         var _a, _b;
         const value = this.attribute[key];
-        return this.animates && this.animates.size ? 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];
+        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) {
-        this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], 
-        this.normalAttrs = null;
+        var _a, _b, _c;
+        const previousStates = this.currentStates ? this.currentStates.slice() : [], 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
+        })));
     }
     removeState(stateName, hasAnimation) {
-        if (this.currentStates) {
-            const filter = (0, vutils_1.isArray)(stateName) ? s => !stateName.includes(s) : s => s !== stateName, newStates = this.currentStates.filter(filter);
-            newStates.length !== this.currentStates.length && this.useStates(newStates, hasAnimation);
-        }
+        const transition = this.createStateModel().removeState(stateName);
+        transition.changed && this.useStates(transition.states, hasAnimation);
     }
     toggleState(stateName, hasAnimation) {
-        if (this.hasState(stateName)) this.removeState(stateName, hasAnimation); else {
-            if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) < 0) {
-                const nextStates = this.currentStates ? this.currentStates.slice() : [];
-                nextStates.push(stateName), this.useStates(nextStates, hasAnimation);
-            }
-        }
+        const transition = this.createStateModel().toggleState(stateName);
+        transition.changed && this.useStates(transition.states, hasAnimation);
     }
     addState(stateName, keepCurrentStates, hasAnimation) {
-        var _a;
-        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return;
-        const newStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([ stateName ]) : [ stateName ];
-        this.useStates(newStates, hasAnimation);
+        const transition = this.createStateModel().addState(stateName, keepCurrentStates);
+        transition.changed && this.useStates(transition.states, hasAnimation);
     }
     useStates(states, hasAnimation) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (!states.length) return void this.clearStates(hasAnimation);
-        if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some(((stateName, index) => this.currentStates[index] !== stateName)))) return;
-        this.stateSort && (states = states.sort(this.stateSort));
-        const stateAttrs = {};
-        states.forEach((stateName => {
-            var _a;
-            const attrs = this.stateProxy ? this.stateProxy(stateName, states) : null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
-            attrs && Object.assign(stateAttrs, attrs);
-        })), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, 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
+        })));
+    }
+    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.stateEngine.invalidateResolverCache();
+        const transition = this.stateEngine.applyStates(this.currentStates), resolvedStateAttrs = Object.assign({}, this.stateEngine.resolvedPatch);
+        this.effectiveStates = [ ...transition.effectiveStates ], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), 
+        this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), 
+        this._restoreAttributeFromStaticTruth({
+            type: enums_1.AttributeUpdateType.STATE
+        }), this._emitCustomEvent("afterStateUpdate", {
+            type: enums_1.AttributeUpdateType.STATE
+        });
+    }
+    sameStateNames(left, right) {
+        const normalizedLeft = null != left ? left : [], normalizedRight = null != right ? right : [];
+        if (normalizedLeft.length !== normalizedRight.length) return !1;
+        for (let index = 0; index < normalizedLeft.length; index++) if (normalizedLeft[index] !== normalizedRight[index]) return !1;
+        return !0;
     }
     addUpdateBoundTag() {
         this._updateTag |= enums_1.UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), 
         this.glyphHost && this.glyphHost.addUpdateBoundTag();
     }
+    addUpdatePaintTag() {
+        this._updateTag |= enums_1.UpdateTag.UPDATE_PAINT;
+    }
     addUpdateShapeTag() {
         this._updateTag |= enums_1.UpdateTag.UPDATE_SHAPE;
     }
@@ -507,6 +803,9 @@ class Graphic extends node_tree_1.Node {
     clearUpdateBoundTag() {
         this._updateTag &= enums_1.UpdateTag.CLEAR_BOUNDS;
     }
+    clearUpdatePaintTag() {
+        this._updateTag &= enums_1.UpdateTag.CLEAR_PAINT;
+    }
     addUpdatePositionTag() {
         this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= enums_1.UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX;
     }
@@ -550,7 +849,7 @@ class Graphic extends node_tree_1.Node {
         let _anchor = [ 0, 0 ];
         const params = {};
         if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) (0, 
-        vutils_2.normalTransform)(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor); else {
+        vutils_1.normalTransform)(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor); else {
             const m = this._transMatrix;
             m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), 
             m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application_1.application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
@@ -572,23 +871,35 @@ class Graphic extends node_tree_1.Node {
         }
     }
     setStage(stage, layer) {
-        if (this.stage !== stage) {
-            if (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), 
-            this.animates && this.animates.size) {
-                const timeline = stage.getTimeline();
-                this.animates.forEach((a => {
-                    a.timeline.isGlobal && (a.setTimeline(timeline), timeline.addAnimate(a));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        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 = [];
+                this.visitTrackedAnimates((a => {
+                    (!!previousTimeline && a.timeline === previousTimeline || a.timeline.isGlobal) && (nextTimeline ? a.timeline !== nextTimeline && (previousTimeline && a.timeline === previousTimeline && previousTimeline.removeAnimate(a, !1), 
+                    a.setTimeline(nextTimeline), nextTimeline.addAnimate(a)) : previousTimeline && a.timeline === previousTimeline && (previousTimeline.removeAnimate(a, !1), 
+                    detachedStageAnimates.push(a)));
+                })), detachedStageAnimates.length && (detachedStageAnimates.forEach((animate => {
+                    var _a;
+                    animate.stop();
+                    const untrackAnimate = this.untrackAnimate;
+                    "function" == typeof untrackAnimate ? untrackAnimate.call(this, animate.id) : null === (_a = this.animates) || void 0 === _a || _a.delete(animate.id);
+                })), this._restoreAttributeFromStaticTruth({
+                    type: enums_1.AttributeUpdateType.ANIMATE_END
                 }));
             }
-            this._onSetStage && this._onSetStage(this, stage, layer), this.getGraphicService().onSetStage(this, stage);
+            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));
         }
+        this.syncSharedStateScopeBindingFromTree(!!(null === (_h = this.currentStates) || void 0 === _h ? void 0 : _h.length));
     }
     setStageToShadowRoot(stage, layer) {
         this.shadowRoot && this.shadowRoot.setStage(stage, layer);
     }
     onAddStep(step) {}
     onStop(props) {
-        props && this.setAttributes(props, !1, {
+        this._restoreAttributeFromStaticTruth({
             type: enums_1.AttributeUpdateType.ANIMATE_END
         });
     }
@@ -603,7 +914,8 @@ class Graphic extends node_tree_1.Node {
         this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
     }
     attachShadow(shadowRoot) {
-        return shadowRoot && (shadowRoot.shadowHost = this), this.shadowRoot = null != shadowRoot ? shadowRoot : application_1.application.graphicService.creator.shadowRoot(this), 
+        var _a, _b, _c;
+        return shadowRoot && (shadowRoot.shadowHost = this), this.shadowRoot = null !== (_c = null != shadowRoot ? shadowRoot : null === (_b = (_a = application_1.application.graphicService.creator).shadowRoot) || void 0 === _b ? void 0 : _b.call(_a, this)) && void 0 !== _c ? _c : require("./shadow-root").createShadowRoot(this), 
         this.addUpdateBoundTag(), this.shadowRoot.setStage(this.stage, this.layer), this.shadowRoot;
     }
     detachShadow() {
@@ -619,16 +931,8 @@ class Graphic extends node_tree_1.Node {
         };
     }
     createPathProxy(path) {
-        const proxy = (0, vutils_2.isString)(path, !0) ? (new custom_path2d_1.CustomPath2D).fromString(path) : new custom_path2d_1.CustomPath2D;
-        return this.pathProxy = proxy, this.attribute.pathProxy = proxy, this.addUpdateShapeAndBoundsTag(), 
-        this.onAttributeUpdate(), proxy;
-    }
-    getPathProxy() {
-        var _a;
-        const attributePathProxy = null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.pathProxy, rawPathProxy = null != attributePathProxy ? attributePathProxy : this.pathProxy;
-        if (!rawPathProxy) return null;
-        const resolvedPathProxy = "function" == typeof rawPathProxy ? rawPathProxy(this.attribute) : rawPathProxy;
-        return resolvedPathProxy ? (0, vutils_2.isString)(resolvedPathProxy, !0) ? (new custom_path2d_1.CustomPath2D).fromString(resolvedPathProxy) : resolvedPathProxy : null;
+        return (0, vutils_1.isString)(path, !0) ? this.pathProxy = (new custom_path2d_1.CustomPath2D).fromString(path) : this.pathProxy = new custom_path2d_1.CustomPath2D, 
+        this.pathProxy;
     }
     loadImage(image, background = !1) {
         if (background && (null == image ? void 0 : image.background) && (image = image.background), 
@@ -642,8 +946,8 @@ class Graphic extends node_tree_1.Node {
         };
         this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", 
         image.startsWith("<svg") ? (loader_1.ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : ((0, 
-        vutils_2.isValidUrl)(image) || image.includes("/") || (0, vutils_2.isBase64)(image)) && (loader_1.ResourceLoader.GetImage(image, this), 
-        this.backgroundImg = this.backgroundImg || background)) : (0, vutils_2.isObject)(image) ? (cache.state = "success", 
+        vutils_1.isValidUrl)(image) || image.includes("/") || (0, vutils_1.isBase64)(image)) && (loader_1.ResourceLoader.GetImage(image, this), 
+        this.backgroundImg = this.backgroundImg || background)) : (0, vutils_1.isObject)(image) ? (cache.state = "success", 
         cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
     }
     setShadowGraphic(graphic) {
@@ -662,33 +966,51 @@ class Graphic extends node_tree_1.Node {
         const res = this.resources.get(url);
         res && (res.state = "fail", cb && cb());
     }
-    _stopAnimates(animates) {
-        animates && animates.forEach((animate => {
+    _stopAnimates() {
+        const animates = [];
+        this.visitTrackedAnimates((animate => {
+            animates.push(animate);
+        })), animates.forEach((animate => {
             animate.stop();
         }));
     }
     stopAnimates(stopChildren = !1) {
-        this._stopAnimates(this.animates), this.shadowRoot && this.shadowRoot.stopAnimates(!0), 
-        this.isContainer && stopChildren && this.forEachChildren((c => {
+        this._stopAnimates(), this.shadowRoot && this.shadowRoot.stopAnimates(!0), this.isContainer && stopChildren && this.forEachChildren((c => {
             c.stopAnimates(stopChildren);
         }));
     }
     release() {
-        this.releaseStatus = "released", this.stopAnimates(), application_1.application.graphicService.onRelease(this), 
+        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), 
         super.release();
     }
-    _emitCustomEvent(type, context) {
+    _dispatchCustomEvent(type, context) {
         var _a, _b;
         if (this._events && type in this._events) {
             const changeEvent = new event_1.CustomEvent(type, context);
-            changeEvent.bubbles = !1, changeEvent.manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager, 
-            this.dispatchEvent(changeEvent);
+            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;
+            return manager ? (changeEvent.manager = manager, this.dispatchEvent(changeEvent)) : node_tree_1.Node.prototype.dispatchEvent.call(this, changeEvent);
         }
+        return !0;
+    }
+    beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
+        return this._dispatchCustomEvent("beforeStateUpdate", {
+            type: enums_1.AttributeUpdateType.STATE,
+            attrs: Object.assign({}, attrs),
+            prevStates: prevStates.slice(),
+            nextStates: nextStates.slice(),
+            hasAnimation: !!hasAnimation,
+            isClear: !!isClear
+        });
+    }
+    _emitCustomEvent(type, context) {
+        this._dispatchCustomEvent(type, context);
     }
     toCustomPath() {
         var _a, _b, _c;
-        const pathProxy = this.getPathProxy();
-        if (pathProxy) return pathProxy;
         const renderer = null === (_c = null === (_b = (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.renderService) || application_1.application.renderService) || void 0 === _b ? void 0 : _b.drawContribution) || void 0 === _c ? void 0 : _c.getRenderContribution(this);
         if (renderer) {
             const context = new canvas_1.EmptyContext2d(null, 1);
@@ -699,14 +1021,14 @@ class Graphic extends node_tree_1.Node {
 }
 
 function backgroundNotImage(image) {
-    return "string" == typeof image ? !(image.startsWith("<svg") || (0, vutils_2.isValidUrl)(image) || image.includes("/") || (0, 
-    vutils_2.isBase64)(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
+    return "string" == typeof image ? !(image.startsWith("<svg") || (0, vutils_1.isValidUrl)(image) || image.includes("/") || (0, 
+    vutils_1.isBase64)(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
 }
 
 function isExternalTexture(texture) {
     return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || (0, 
-    vutils_2.isValidUrl)(texture) || texture.includes("/") || (0, vutils_2.isBase64)(texture)) : (0, 
-    vutils_2.isObject)(texture));
+    vutils_1.isValidUrl)(texture) || texture.includes("/") || (0, vutils_1.isBase64)(texture)) : (0, 
+    vutils_1.isObject)(texture));
 }
 
 exports.Graphic = Graphic, Graphic.userSymbolMap = {}, Graphic.mixin(event_1.EventTarget);