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

package/es/graphic/graphic.js

@@ -1,6 +1,4 @@
-import { isArray, max, OBBBounds } from "@visactor/vutils";
-
-import { AABBBounds, Matrix, normalTransform, Point, isNil, isString, isValidUrl, isBase64, isObject } from "@visactor/vutils";
+import { AABBBounds, isArray, isEqual, max, Matrix, OBBBounds, normalTransform, Point, isNil, isString, isValidUrl, isBase64, isObject } from "@visactor/vutils";
 
 import { Node } from "./node-tree";
 
@@ -32,14 +30,71 @@ import { DefaultStateAnimateConfig } from "../animate/config";
 
 import { EmptyContext2d } from "../canvas";
 
-const _tempBounds = new AABBBounds, tempMatrix = new Matrix, tempBounds = new AABBBounds;
+import { StateDefinitionCompiler } from "./state/state-definition-compiler";
+
+import { StateEngine } from "./state/state-engine";
+
+import { StateModel } from "./state/state-model";
+
+import { UpdateCategory, classifyAttributeDelta } from "./state/attribute-update-classifier";
+
+import { StateStyleResolver } from "./state/state-style-resolver";
+
+import { StateTransitionOrchestrator } from "./state/state-transition-orchestrator";
+
+import { collectSharedStateScopeChain, ensureSharedStateScopeFresh } from "./state/shared-state-scope";
+
+import { enqueueGraphicSharedStateRefresh, scheduleStageSharedStateRefresh } from "./state/shared-state-refresh";
+
+import { getStageStatePerfMonitor } from "./state/state-perf-monitor";
+
+const _tempBounds = new AABBBounds, loadShadowRootFactory = () => require("./shadow-root"), tempMatrix = new Matrix;
 
 export const PURE_STYLE_KEY = [ "stroke", "opacity", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "fill", "fillOpacity" ];
 
-export const GRAPHIC_UPDATE_TAG_KEY = [ "lineWidth", "pathProxy", "scaleX", "scaleY", "angle", "anchor", "visible" ];
+export const GRAPHIC_UPDATE_TAG_KEY = [ "lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible" ];
 
 const tempConstantXYKey = [ "x", "y" ], tempConstantScaleXYKey = [ "scaleX", "scaleY" ], tempConstantAngleKey = [ "angle" ], builtinTextureTypes = new Set([ "circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave" ]), point = new Point;
 
+function isPlainObjectValue(value) {
+    return "object" == typeof value && null != value && !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;
+}
+
+export function shouldUseSimpleAttributeFastPath(value) {
+    return !!isPlainObjectValue(value) && !Object.keys(value).some((key => isPlainObjectValue(value[key])));
+}
+
+function cloneAttributeSurface(value) {
+    if (!isPlainObjectValue(value)) return value;
+    const source = value, clone = {};
+    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;
+}
+
 export const NOWORK_ANIMATE_ATTR = {
     strokeSeg: 1,
     boundsPadding: 2,
@@ -96,10 +151,18 @@ export class Graphic extends Node {
     }
     constructor(params = {}) {
         var _a;
-        super(), this._AABBBounds = new AABBBounds, this._updateTag = UpdateTag.INIT, this.attribute = params, 
+        super(), this.resolverEpoch = 0, this._AABBBounds = new AABBBounds, this._updateTag = UpdateTag.INIT;
+        const useSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath(params), initialBaseAttributes = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(params) : cloneAttributeValue(params);
+        this.baseAttributes = initialBaseAttributes, this.attribute = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(initialBaseAttributes) : cloneAttributeSurface(initialBaseAttributes), 
         this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), 
         isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
     }
+    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.graphicService;
@@ -107,6 +170,203 @@ 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;
+    }
+    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(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, enqueueGraphicSharedStateRefresh(this.stage, this), 
+        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 && ensureSharedStateScopeFresh(this.boundSharedStateScope), 
+        this.recomputeCurrentStatePatch(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
+            type: AttributeUpdateType.STATE
+        }), this._emitCustomEvent("afterStateUpdate", {
+            type: 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 && (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 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 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];
+            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 = UpdateCategory.NONE;
+        delta.forEach(((entry, key) => {
+            let nextCategory = classifyAttributeDelta(key, entry.prev, entry.next);
+            nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), 
+            category |= nextCategory;
+        })), category !== UpdateCategory.NONE && (null === (_a = getStageStatePerfMonitor(this.stage)) || void 0 === _a || _a.recordCategory(category)), 
+        category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), 
+        category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), 
+        category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag();
+    }
+    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];
+            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();
     }
@@ -128,6 +388,17 @@ export class Graphic extends 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;
@@ -202,7 +473,7 @@ export class Graphic extends 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 BoundsContext(aabbBounds);
         return renderCommandList(path.commandList, boundsContext, 0, 0), !0;
@@ -268,11 +539,11 @@ export class Graphic extends 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), 
@@ -280,23 +551,15 @@ export class Graphic extends 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) : 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 = GRAPHIC_UPDATE_TAG_KEY) {
         for (let i = 0; i < k.length; i++) {
@@ -316,7 +579,8 @@ export class Graphic extends Node {
             type: 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 = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
     }
@@ -329,15 +593,14 @@ export class Graphic extends Node {
             x: x,
             y: y
         }, this.attribute, tempConstantXYKey, context);
-        params && (x = params.x, y = params.y, delete params.x, delete params.y, this._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.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, 
         attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y), 
-        this.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: AttributeUpdateType.TRANSLATE_TO
@@ -345,9 +608,9 @@ export class Graphic extends 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;
@@ -360,18 +623,17 @@ export class Graphic extends Node {
             scaleCenter: scaleCenter
         }, this.attribute, tempConstantScaleXYKey, context);
         params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, 
-        delete params.scaleY, this._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 Matrix, attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
         } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, 
         attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
-        return this.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: AttributeUpdateType.SCALE_TO
@@ -379,9 +641,9 @@ export class Graphic extends 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;
@@ -392,24 +654,24 @@ export class Graphic extends 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 Matrix, attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
+            let {postMatrix: postMatrix} = this.baseAttributes;
+            postMatrix || (postMatrix = new Matrix, this.baseAttributes.postMatrix = postMatrix), 
+            application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
         } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
-        return this.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: 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;
@@ -429,93 +691,139 @@ export class Graphic extends Node {
         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 : DefaultStateAnimateConfig;
-            this.applyAnimationState([ "state" ], [ {
-                name: "state",
-                animation: {
-                    type: "state",
-                    to: animateAttrs,
-                    duration: stateAnimateConfig.duration,
-                    easing: stateAnimateConfig.easing
-                }
-            } ]), noAnimateAttrs && this.setAttributesAndPreventAnimate(noAnimateAttrs, !1, {
-                type: AttributeUpdateType.STATE
-            }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
-        } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
-            type: AttributeUpdateType.STATE
-        }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
-        this._emitCustomEvent("afterStateUpdate", {
-            type: 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 StateEngine({
+            compiledDefinitions: compiledDefinitions,
+            stateSort: this.stateSort,
+            stateProxy: this.stateProxy,
+            stateProxyEligibility: stateProxyEligibility,
+            states: this.states,
+            mergeMode: this.stateMergeMode
+        }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateProxy = this.stateProxy, 
+        this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, 
+        this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, 
+        this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), 
+        new StateModel({
+            states: this.states,
+            currentStates: this.currentStates,
+            stateSort: this.stateSort,
+            stateProxy: this.stateProxy,
+            stateEngine: this.stateEngine
         });
     }
+    resolveStateAnimateConfig(animateConfig) {
+        var _a, _b, _c;
+        return null !== (_c = null !== (_a = null != animateConfig ? animateConfig : this.stateAnimateConfig) && void 0 !== _a ? _a : null === (_b = this.context) || void 0 === _b ? void 0 : _b.stateAnimateConfig) && void 0 !== _c ? _c : DefaultStateAnimateConfig;
+    }
+    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 = getStageStatePerfMonitor(this.stage)) || void 0 === _b || _b.incrementCounter("stateCommits"), 
+        null === (_c = getStageStatePerfMonitor(this.stage)) || void 0 === _c || _c.recordEvent("state-commit", {
+            graphicId: this._uid,
+            targetStates: []
+        }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0)) : (this.stopStateAnimates(), 
+        this._restoreAttributeFromStaticTruth({
+            type: AttributeUpdateType.STATE
+        }), this._emitCustomEvent("afterStateUpdate", {
+            type: AttributeUpdateType.STATE
+        })));
     }
     removeState(stateName, hasAnimation) {
-        if (this.currentStates) {
-            const filter = 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 = getStageStatePerfMonitor(this.stage)) || void 0 === _d || _d.incrementCounter("stateCommits"), 
+        null === (_e = getStageStatePerfMonitor(this.stage)) || void 0 === _e || _e.recordEvent("state-commit", {
+            graphicId: this._uid,
+            targetStates: [ ...transition.states ]
+        }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation)) : (this.stopStateAnimates(), 
+        this._restoreAttributeFromStaticTruth({
+            type: AttributeUpdateType.STATE
+        }), this._emitCustomEvent("afterStateUpdate", {
+            type: 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: AttributeUpdateType.STATE
+        }), this._emitCustomEvent("afterStateUpdate", {
+            type: 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 |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), 
         this.glyphHost && this.glyphHost.addUpdateBoundTag();
     }
+    addUpdatePaintTag() {
+        this._updateTag |= UpdateTag.UPDATE_PAINT;
+    }
     addUpdateShapeTag() {
         this._updateTag |= UpdateTag.UPDATE_SHAPE;
     }
@@ -529,6 +837,9 @@ export class Graphic extends Node {
     clearUpdateBoundTag() {
         this._updateTag &= UpdateTag.CLEAR_BOUNDS;
     }
+    clearUpdatePaintTag() {
+        this._updateTag &= UpdateTag.CLEAR_PAINT;
+    }
     addUpdatePositionTag() {
         this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX;
     }
@@ -593,23 +904,35 @@ export class Graphic extends 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.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: 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: AttributeUpdateType.ANIMATE_END
         });
     }
@@ -624,7 +947,8 @@ export class Graphic extends Node {
         this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
     }
     attachShadow(shadowRoot) {
-        return shadowRoot && (shadowRoot.shadowHost = this), this.shadowRoot = null != shadowRoot ? shadowRoot : 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.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() {
@@ -640,16 +964,8 @@ export class Graphic extends Node {
         };
     }
     createPathProxy(path) {
-        const proxy = isString(path, !0) ? (new CustomPath2D).fromString(path) : new 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 ? isString(resolvedPathProxy, !0) ? (new CustomPath2D).fromString(resolvedPathProxy) : resolvedPathProxy : null;
+        return isString(path, !0) ? this.pathProxy = (new CustomPath2D).fromString(path) : this.pathProxy = new CustomPath2D, 
+        this.pathProxy;
     }
     loadImage(image, background = !1) {
         if (background && (null == image ? void 0 : image.background) && (image = image.background), 
@@ -682,33 +998,51 @@ export class Graphic extends 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.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.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 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.prototype.dispatchEvent.call(this, changeEvent);
         }
+        return !0;
+    }
+    beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
+        return this._dispatchCustomEvent("beforeStateUpdate", {
+            type: 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.renderService) || void 0 === _b ? void 0 : _b.drawContribution) || void 0 === _c ? void 0 : _c.getRenderContribution(this);
         if (renderer) {
             const context = new EmptyContext2d(null, 1);