@visactor/vrender-core 1.1.0-alpha.1 → 1.1.0-alpha.11

package/cjs/canvas/constants.js

@@ -3,5 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Context2dFactory = exports.CanvasFactory = void 0, exports.CanvasFactory = Symbol.for("CanvasFactory"), 
-exports.Context2dFactory = Symbol.for("Context2dFactory");
-//# sourceMappingURL=constants.js.map
+exports.Context2dFactory = Symbol.for("Context2dFactory");

package/cjs/canvas/empty-context.js

@@ -204,4 +204,5 @@ class EmptyContext2d {
     }
 }
 
-exports.EmptyContext2d = EmptyContext2d;
+exports.EmptyContext2d = EmptyContext2d;
+//# sourceMappingURL=empty-context.js.map

package/cjs/common/canvas-utils.js

@@ -57,5 +57,4 @@ function createConicGradient(context, color, x, y, w, h) {
     })), canvasGradient.GetPattern ? canvasGradient.GetPattern(w + x, h + y, undefined) : canvasGradient;
 }
 
-//# sourceMappingURL=canvas-utils.js.map
 exports.getScaledStroke = getScaledStroke, exports.createColor = createColor;

package/cjs/common/diff.js

@@ -16,4 +16,5 @@ function diff(oldAttrs, newAttrs, getAttr) {
     return diffObj;
 }
 
-exports.diff = diff;
+exports.diff = diff;
+//# sourceMappingURL=diff.js.map

package/cjs/common/explicit-binding.js

@@ -13,4 +13,4 @@ function resolveContainerBinding(container, serviceIdentifier) {
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.resolveContainerBinding = void 0, exports.resolveContainerBinding = resolveContainerBinding;
-//# sourceMappingURL=explicit-binding.js.map
+//# sourceMappingURL=explicit-binding.js.map

package/cjs/common/generator.js

@@ -11,4 +11,4 @@ class Generator {
 }
 
 exports.Generator = Generator, Generator.auto_increment_id = 0;
-//# sourceMappingURL=generator.js.map
+//# sourceMappingURL=generator.js.map

package/cjs/common/matrix.js

@@ -129,4 +129,4 @@ exports.identityMat4 = identityMat4, exports.rotateX = rotateX, exports.rotateY
 exports.rotateZ = rotateZ, exports.translate = translate, exports.mat3Tomat4 = mat3Tomat4, 
 exports.multiplyMat4Mat3 = multiplyMat4Mat3, exports.scaleMat4 = scaleMat4, exports.multiplyMat4Mat4 = multiplyMat4Mat4, 
 exports.lookAt = lookAt, exports.ortho = ortho, exports.transformMat4 = transformMat4;
-//# sourceMappingURL=matrix.js.map
+//# sourceMappingURL=matrix.js.map

package/cjs/common/morphing-utils.js

@@ -200,4 +200,4 @@ exports.cubicSubdivide = cubicSubdivide, exports.alignSubpath = alignSubpath, ex
 exports.findBestMorphingRotation = findBestMorphingRotation, exports.alignBezierCurves = alignBezierCurves, 
 exports.pathToBezierCurves = pathToBezierCurves, exports.applyTransformOnBezierCurves = applyTransformOnBezierCurves, 
 exports.bezierCurversToPath = bezierCurversToPath;
-//# sourceMappingURL=morphing-utils.js.map
+//# sourceMappingURL=morphing-utils.js.map

package/cjs/common/path-svg.js

@@ -61,4 +61,4 @@ exports.enumCommandMap = {
     Q: 7,
     R: 8
 }, exports.parseSvgPath = parseSvgPath;
-//# sourceMappingURL=path-svg.js.map
+//# sourceMappingURL=path-svg.js.map

package/cjs/common/performance-raf.js

@@ -34,4 +34,4 @@ class PerformanceRAF {
 }
 
 exports.PerformanceRAF = PerformanceRAF;
-//# sourceMappingURL=performance-raf.js.map
+//# sourceMappingURL=performance-raf.js.map

package/cjs/common/polygon.js

@@ -41,8 +41,8 @@ function getProportionPoint(point, segment, length, dx, dy) {
     };
 }
 
-//# sourceMappingURL=polygon.js.map
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.drawRoundedPolygon = exports.drawPolygon = void 0, exports.drawPolygon = drawPolygon, 
-exports.drawRoundedPolygon = drawRoundedPolygon;
+exports.drawRoundedPolygon = drawRoundedPolygon;
+//# sourceMappingURL=polygon.js.map

package/cjs/common/rect-utils.js

@@ -24,4 +24,4 @@ const vutils_1 = require("@visactor/vutils"), normalizeRectAttributes = attribut
 };
 
 exports.normalizeRectAttributes = normalizeRectAttributes;
-//# sourceMappingURL=rect-utils.js.map
+//# sourceMappingURL=rect-utils.js.map

package/cjs/common/render-area.js

@@ -61,5 +61,5 @@ function drawAreaBlock(path, topList, bottomList, params) {
     path.closePath();
 }
 
+exports.drawAreaSegments = drawAreaSegments;
 //# sourceMappingURL=render-area.js.map
-exports.drawAreaSegments = drawAreaSegments;

package/cjs/common/render-command-list.js

@@ -14,4 +14,4 @@ function renderCommandList(commandList, context, x = 0, y = 0, sx = 1, sy = 1, z
 }
 
 exports.renderCommandList = renderCommandList;
-//# sourceMappingURL=render-command-list.js.map
+//# sourceMappingURL=render-command-list.js.map

package/cjs/common/render-curve.js

@@ -99,4 +99,4 @@ function drawIncrementalAreaSegments(path, lastSeg, segments, params) {
 
 exports.drawSegments = drawSegments, exports.drawIncrementalSegments = drawIncrementalSegments, 
 exports.drawIncrementalAreaSegments = drawIncrementalAreaSegments;
-//# sourceMappingURL=render-curve.js.map
+//# sourceMappingURL=render-curve.js.map

package/cjs/common/render-utils.js

@@ -19,4 +19,4 @@ function drawSegItem(ctx, curve, endPercent, params) {
 }
 
 exports.drawSegItem = drawSegItem;
-//# sourceMappingURL=render-utils.js.map
+//# sourceMappingURL=render-utils.js.map

package/cjs/common/seg-context.js

@@ -94,4 +94,5 @@ class ReflectSegContext extends SegContext {
     }
 }
 
-exports.ReflectSegContext = ReflectSegContext;
+exports.ReflectSegContext = ReflectSegContext;
+//# sourceMappingURL=seg-context.js.map

package/cjs/common/simplify.js

@@ -36,4 +36,4 @@ function flatten_simplify(points, tolerance, highestQuality) {
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.flatten_simplify = void 0, exports.flatten_simplify = flatten_simplify;
-//# sourceMappingURL=simplify.js.map
+//# sourceMappingURL=simplify.js.map

package/cjs/common/sort.js

@@ -101,4 +101,4 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.findNextGraphic = exports.foreachAsync = exports.foreach = void 0, exports.foreach = foreach, 
 exports.foreachAsync = foreachAsync, exports.findNextGraphic = findNextGraphic;
-//# sourceMappingURL=sort.js.map
+//# sourceMappingURL=sort.js.map

package/cjs/common/split-path.js

@@ -269,4 +269,4 @@ const splitPath = (path, count) => {
 };
 
 exports.splitPath = splitPath;
-//# sourceMappingURL=split-path.js.map
+//# sourceMappingURL=split-path.js.map

package/cjs/common/store.js

@@ -1,2 +1,2 @@
 class StageStore {}
-//# sourceMappingURL=store.js.map
+//# sourceMappingURL=store.js.map

package/cjs/common/text.js

@@ -34,4 +34,4 @@ function textAttributesToStyle(attrs) {
 
 exports.textDrawOffsetY = textDrawOffsetY, exports.textDrawOffsetX = textDrawOffsetX, 
 exports.textLayoutOffsetY = textLayoutOffsetY, exports.textAttributesToStyle = textAttributesToStyle;
-//# sourceMappingURL=text.js.map
+//# sourceMappingURL=text.js.map

package/cjs/common/utils.js

@@ -163,4 +163,4 @@ const calculateLineHeight = (lineHeight, fontSize) => {
 };
 
 exports.calculateLineHeight = calculateLineHeight;
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/cjs/core/application.js

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.ApplicationContribution = void 0, exports.ApplicationContribution = Symbol("ApplicationContribution");
-//# sourceMappingURL=application.js.map
+//# sourceMappingURL=application.js.map

package/cjs/core/camera.js

@@ -71,4 +71,4 @@ const registerOrthoCamera = () => {
 };
 
 exports.registerOrthoCamera = registerOrthoCamera;
-//# sourceMappingURL=camera.js.map
+//# sourceMappingURL=camera.js.map

package/cjs/core/constants.js

@@ -7,4 +7,4 @@ exports.TransformUtil = Symbol.for("TransformUtil"), exports.GraphicUtil = Symbo
 exports.LayerService = Symbol.for("LayerService"), exports.StaticLayerHandlerContribution = Symbol.for("StaticLayerHandlerContribution"), 
 exports.DynamicLayerHandlerContribution = Symbol.for("DynamicLayerHandlerContribution"), 
 exports.VirtualLayerHandlerContribution = Symbol.for("VirtualLayerHandlerContribution");
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.js.map

package/cjs/core/core-modules.js

@@ -16,4 +16,4 @@ function bindCoreModules({bind: bind}) {
 }
 
 exports.bindCoreModules = bindCoreModules, exports.default = bindCoreModules;
-//# sourceMappingURL=core-modules.js.map
+//# sourceMappingURL=core-modules.js.map

package/cjs/core/global-module.js

@@ -1,3 +1 @@
-
-
 //# sourceMappingURL=global-module.js.map

package/cjs/core/global.js

@@ -222,4 +222,4 @@ class DefaultGlobal extends event_listener_manager_1.EventListenerManager {
 }
 
 exports.DefaultGlobal = DefaultGlobal;
-//# sourceMappingURL=global.js.map
+//# sourceMappingURL=global.js.map

package/cjs/core/graphic-utils.js

@@ -162,4 +162,4 @@ class DefaultTransformUtil {
 }
 
 exports.DefaultTransformUtil = DefaultTransformUtil;
-//# sourceMappingURL=graphic-utils.js.map
+//# sourceMappingURL=graphic-utils.js.map

package/cjs/core/index.js

@@ -22,4 +22,4 @@ __exportStar(require("./layer"), exports), __exportStar(require("./stage"), expo
 __exportStar(require("./graphic-utils"), exports), __exportStar(require("./contributions"), exports), 
 __exportStar(require("./layer-service"), exports), __exportStar(require("./constants"), exports), 
 __exportStar(require("../interface/core"), exports);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/cjs/core/layer-service.js

@@ -80,5 +80,4 @@ class DefaultLayerService {
 }
 
 exports.DefaultLayerService = DefaultLayerService, DefaultLayerService.idprefix = "visactor_layer", 
-DefaultLayerService.prefix_count = 0;
-//# sourceMappingURL=layer-service.js.map
+DefaultLayerService.prefix_count = 0;

package/cjs/core/layer.js

@@ -116,4 +116,4 @@ class Layer extends group_1.Group {
 }
 
 exports.Layer = Layer;
-//# sourceMappingURL=layer.js.map
+//# sourceMappingURL=layer.js.map

package/cjs/core/light.js

@@ -29,4 +29,4 @@ const registerDirectionalLight = () => {
 };
 
 exports.registerDirectionalLight = registerDirectionalLight;
-//# sourceMappingURL=light.js.map
+//# sourceMappingURL=light.js.map

package/cjs/core/stage.js

@@ -571,4 +571,4 @@ class Stage extends group_1.Group {
 }
 
 exports.Stage = Stage;
-//# sourceMappingURL=stage.js.map
+//# sourceMappingURL=stage.js.map

package/cjs/core/window.js

@@ -150,4 +150,4 @@ class DefaultWindow extends event_listener_manager_1.EventListenerManager {
 }
 
 exports.DefaultWindow = DefaultWindow;
-//# sourceMappingURL=window.js.map
+//# sourceMappingURL=window.js.map

package/cjs/entries/browser.js

@@ -41,4 +41,4 @@ function createBrowserApp(options = {}) {
 }
 
 exports.BrowserEntry = BrowserEntry, exports.createBrowserApp = createBrowserApp;
-//# sourceMappingURL=browser.js.map
+//# sourceMappingURL=browser.js.map

package/cjs/entries/index.js

@@ -29,4 +29,4 @@ Object.defineProperty(exports, "createApp", {
         return browser_1.createBrowserApp;
     }
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/cjs/entries/miniapp.js

@@ -17,4 +17,4 @@ function createMiniappApp(options = {}) {
 }
 
 exports.MiniappEntry = MiniappEntry, exports.createMiniappApp = createMiniappApp;
-//# sourceMappingURL=miniapp.js.map
+//# sourceMappingURL=miniapp.js.map

package/cjs/entries/node.js

@@ -17,4 +17,4 @@ function createNodeApp(options = {}) {
 }
 
 exports.NodeEntry = NodeEntry, exports.createNodeApp = createNodeApp;
-//# sourceMappingURL=node.js.map
+//# sourceMappingURL=node.js.map

package/cjs/entries/runtime-installer.js

@@ -108,4 +108,4 @@ exports.getRuntimeInstallerGlobal = getRuntimeInstallerGlobal, exports.configure
 exports.installRuntimeGraphicRenderersToApp = installRuntimeGraphicRenderersToApp, 
 exports.installRuntimeDrawContributionsToApp = installRuntimeDrawContributionsToApp, 
 exports.installRuntimePickersToApp = installRuntimePickersToApp;
-//# sourceMappingURL=runtime-installer.js.map
+//# sourceMappingURL=runtime-installer.js.map

package/cjs/entries/types.js

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/cjs/graphic/graphic.d.ts

@@ -149,6 +149,7 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     };
     protected recomputeCurrentStatePatch(): void;
     protected buildStaticAttributeSnapshot(): Partial<T>;
+    protected buildRemovedStateAnimationAttrs(targetStateAttrs: Partial<T>, previousResolvedStatePatch?: Partial<T>): Partial<T>;
     protected syncObjectToSnapshot(target: Record<string, any>, snapshot: Record<string, any>): AttributeDelta;
     protected _syncAttribute(): AttributeDelta;
     protected _syncFinalAttributeFromStaticTruth(): void;
@@ -210,8 +211,10 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     getState(stateName: string): Partial<T> | StateDefinition<T> | undefined;
     protected createStateModel(): StateModel<T>;
     protected resolveStateAnimateConfig(animateConfig?: IAnimateConfig): any;
-    applyStateAttrs(attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean, animateConfig?: IAnimateConfig): void;
+    applyStateAttrs(attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean, animateConfig?: IAnimateConfig, extraAnimateAttrs?: Partial<T>): void;
     updateNormalAttrs(stateAttrs: Partial<T>): void;
+    protected getStateTransitionDefaultAttribute(key: string, targetAttrs?: Partial<T>): any;
+    protected shouldSkipStateTransitionDefaultAttribute(_key: string, _targetAttrs?: Partial<T>): boolean;
     protected stopStateAnimates(type?: 'start' | 'end'): void;
     private getNormalAttribute;
     clearStates(hasAnimation?: boolean): void;

package/cjs/graphic/graphic.js

@@ -212,11 +212,11 @@ class Graphic extends node_tree_1.Node {
                 stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
             };
         }
-        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions;
+        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions, sharedStateProxyModeKey = this.stateProxy ? "shared-missing-only" : "none", sharedStateProxyEligibility = this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0;
         if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
             compiledDefinitions: sharedCompiledDefinitions,
-            stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
-            stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+            stateProxyModeKey: sharedStateProxyModeKey,
+            stateProxyEligibility: sharedStateProxyEligibility
         };
         const localStates = this.states, missingLocalStateDefinitions = {}, missingStateNames = [];
         if (Object.keys(localStates).forEach((stateName => {
@@ -225,15 +225,15 @@ class Graphic extends node_tree_1.Node {
         })), !missingStateNames.length) return this.localFallbackCompiledDefinitions = void 0, 
         {
             compiledDefinitions: sharedCompiledDefinitions,
-            stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
-            stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+            stateProxyModeKey: sharedStateProxyModeKey,
+            stateProxyEligibility: sharedStateProxyEligibility
         };
         const localStatesVersion = this.getLocalStatesVersion(), stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join("|")}` : "none", cacheKey = `shared:${boundScope.revision}:fallback:${localStatesVersion}:${stateProxyModeKey}`;
         return this.localFallbackCompiledDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.localFallbackCompiledDefinitions = (new 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
+            stateProxyEligibility: sharedStateProxyEligibility
         };
     }
     recomputeCurrentStatePatch() {
@@ -254,6 +254,22 @@ class Graphic extends node_tree_1.Node {
             "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
         })), snapshot) : snapshot;
     }
+    buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+        const extraAttrs = {};
+        if (!previousResolvedStatePatch) return extraAttrs;
+        const snapshot = this.buildStaticAttributeSnapshot(), staticTargetAttrs = snapshot;
+        return Object.keys(previousResolvedStatePatch).forEach((key => {
+            const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
+            if (hasTargetAttr && void 0 !== targetStateAttrs[key]) return;
+            const assignFallbackAttr = value => {
+                void 0 === value && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs) || (extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value));
+            };
+            if (hasTargetAttr) assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs)); else if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
+                const snapshotValue = snapshot[key];
+                assignFallbackAttr(void 0 === snapshotValue ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
+            } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+        })), extraAttrs;
+    }
     syncObjectToSnapshot(target, snapshot) {
         const delta = new Map;
         return new Set([ ...Object.keys(target), ...Object.keys(snapshot) ]).forEach((key => {
@@ -681,20 +697,30 @@ class Graphic extends node_tree_1.Node {
         var _a, _b, _c;
         return null !== (_c = null !== (_a = null != animateConfig ? animateConfig : this.stateAnimateConfig) && void 0 !== _a ? _a : null === (_b = this.context) || void 0 === _b ? void 0 : _b.stateAnimateConfig) && void 0 !== _c ? _c : config_2.DefaultStateAnimateConfig;
     }
-    applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig) {
+    applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
         const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0, transitionOptions = resolvedAnimateConfig ? {
-            animateConfig: resolvedAnimateConfig
+            animateConfig: resolvedAnimateConfig,
+            extraAnimateAttrs: extraAnimateAttrs,
+            shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
         } : void 0;
         if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
         const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
             noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
-            animateConfig: resolvedAnimateConfig
+            animateConfig: resolvedAnimateConfig,
+            extraAnimateAttrs: extraAnimateAttrs,
+            shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
         });
         this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
     }
     updateNormalAttrs(stateAttrs) {
         this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
     }
+    getStateTransitionDefaultAttribute(key, targetAttrs) {
+        return this.getDefaultAttribute(key);
+    }
+    shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
+        return !1;
+    }
     stopStateAnimates(type = "end") {
         const stopAnimationState = this.stopAnimationState;
         if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
@@ -710,7 +736,7 @@ class Graphic extends node_tree_1.Node {
     }
     clearStates(hasAnimation) {
         var _a, _b, _c;
-        const previousStates = this.currentStates ? this.currentStates.slice() : [], transition = this.createStateModel().clearStates();
+        const previousStates = this.currentStates ? this.currentStates.slice() : [], previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0, 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();
@@ -721,7 +747,7 @@ class Graphic extends node_tree_1.Node {
         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(), 
+        }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), 
         this._restoreAttributeFromStaticTruth({
             type: enums_1.AttributeUpdateType.STATE
         }), this._emitCustomEvent("afterStateUpdate", {
@@ -743,7 +769,7 @@ class Graphic extends node_tree_1.Node {
     useStates(states, hasAnimation) {
         var _a, _b, _c, _d, _e;
         if (!states.length) return void this.clearStates(hasAnimation);
-        const previousStates = this.currentStates ? this.currentStates.slice() : [], stateResolveBaseAttrs = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute, stateModel = this.createStateModel();
+        const previousStates = this.currentStates ? this.currentStates.slice() : [], previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0, stateResolveBaseAttrs = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute, stateModel = this.createStateModel();
         null === (_b = this.stateEngine) || void 0 === _b || _b.setResolveContext(this, stateResolveBaseAttrs);
         const transition = stateModel.useStates(states);
         if (!transition.changed && this.sameStateNames(previousStates, transition.states)) return;
@@ -755,7 +781,7 @@ class Graphic extends node_tree_1.Node {
         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(), 
+        }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), 
         this._restoreAttributeFromStaticTruth({
             type: enums_1.AttributeUpdateType.STATE
         }), this._emitCustomEvent("afterStateUpdate", {