fix(animate): prevent clear-state layout collapse

Clear-state transitions may animate removed state keys back to visual defaults.

Those values remain transient animation targets, not static truth.

Optional rect geometry aliases stay absent when base/final layout omits them.

Natural animation closeout now avoids a second cleanup restore over newer state changes.

Constraint: D3 static truth remains baseAttributes plus resolvedStatePatch.

Rejected: Restore normalAttrs snapshots | would regress the D3 state model.

Rejected: Commit removed state defaults | would pollute finalAttribute.

Confidence: high

Scope-risk: moderate

Directive: Do not default missing optional geometry aliases in clear-state targets.

Tested: packages/vrender-core rushx test --runInBand

Tested: packages/vrender-animate rushx test --runInBand

Tested: rush compile -t @visactor/vrender-core -t @visactor/vrender-animate

Tested: eslint on changed files; git diff --check

Tested: rush build -t @visactor/vrender-core -t @visactor/vrender-animate

Not-tested: VChart npm consumer smoke; requires alpha.7 package publish.

Author: xuefei1313

packages/vrender-animate/__tests__/unit/animation-runtime-attribute.test.ts

@@ -1,4 +1,4 @@
-import { createGroup, createRect } from '@visactor/vrender-core';
+import { application, createGroup, createRect, DefaultGraphicService } from '@visactor/vrender-core';
 import { registerAnimate } from '../../src/register';
 import { registerCustomAnimate } from '../../src/custom/register';
 import { AnimateExecutor } from '../../src/executor/animate-executor';
@@ -13,6 +13,9 @@ function ensureAnimationRuntime() {
   }
   registerAnimate();
   registerCustomAnimate();
+  if (!application.graphicService) {
+    application.graphicService = new DefaultGraphicService();
+  }
   animationRuntimeRegistered = true;
 }
 
@@ -23,6 +26,9 @@ function createGraphicServiceStub() {
     onRemove: jest.fn(),
     onAddIncremental: jest.fn(),
     onClearIncremental: jest.fn(),
+    beforeUpdateAABBBounds: jest.fn(),
+    afterUpdateAABBBounds: jest.fn(),
+    clearAABBBounds: jest.fn(),
     validCheck: jest.fn(() => true)
   };
 }
@@ -83,6 +89,14 @@ function tick(ticker: ManualTicker, delta: number) {
   ticker.tick(delta);
 }
 
+function boundsSize(graphic: any) {
+  const bounds = graphic.AABBBounds;
+  return {
+    width: bounds.x2 - bounds.x1,
+    height: bounds.y2 - bounds.y1
+  };
+}
+
 describe('D3 pre-handoff animation runtime', () => {
   beforeAll(() => {
     ensureAnimationRuntime();
@@ -249,6 +263,169 @@ describe('D3 pre-handoff animation runtime', () => {
     expect(rect.resolvedStatePatch).toBeUndefined();
   });
 
+  test('clearing hover state keeps y/y1 rect layout from collapsing through undefined height aliases', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-clear-vertical-alias');
+    const rect = createRect({
+      x: 150,
+      y: 0,
+      y1: 320,
+      width: 140,
+      x1: undefined,
+      height: undefined,
+      lineWidth: 0,
+      fill: '#1664FF',
+      stroke: '#1664FF',
+      fillOpacity: undefined,
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        lineWidth: 4,
+        fillOpacity: 0.6
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.lineWidth).toBe(4);
+    expect(rect.attribute.fillOpacity).toBe(0.6);
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+    expect((rect as any).baseAttributes.x1).toBeUndefined();
+
+    rect.useStates([], true);
+    tick(ticker, 16);
+
+    expect(rect.attribute.height).toBeUndefined();
+    expect(rect.attribute.x1).toBeUndefined();
+    expect(rect.attribute.y).toBe(0);
+    expect(rect.attribute.y1).toBe(320);
+    expect(boundsSize(rect).height).toBeGreaterThan(100);
+
+    tick(ticker, 100);
+    expect(rect.attribute.height).toBeUndefined();
+    expect(rect.attribute.x1).toBeUndefined();
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+    expect((rect as any).baseAttributes.x1).toBeUndefined();
+    expect(rect.getFinalAttribute().height).toBeUndefined();
+    expect(rect.getFinalAttribute().x1).toBeUndefined();
+    expect(rect.attribute.y).toBe(0);
+    expect(rect.attribute.y1).toBe(320);
+    expect(rect.attribute.lineWidth).toBe(0);
+    expect(boundsSize(rect).height).toBeGreaterThan(100);
+  });
+
+  test('clearing hover state keeps x/x1 rect layout from collapsing through undefined width aliases', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-clear-horizontal-alias');
+    const rect = createRect({
+      x: 10,
+      x1: 210,
+      y: 5,
+      height: 40,
+      width: undefined,
+      y1: undefined,
+      lineWidth: 0,
+      fill: '#1664FF',
+      stroke: '#1664FF',
+      fillOpacity: undefined,
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        lineWidth: 4,
+        fillOpacity: 0.6
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.lineWidth).toBe(4);
+    expect(rect.attribute.fillOpacity).toBe(0.6);
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+    expect((rect as any).baseAttributes.y1).toBeUndefined();
+
+    rect.useStates([], true);
+    tick(ticker, 16);
+
+    expect(rect.attribute.width).toBeUndefined();
+    expect(rect.attribute.y1).toBeUndefined();
+    expect(rect.attribute.x).toBe(10);
+    expect(rect.attribute.x1).toBe(210);
+    expect(boundsSize(rect).width).toBeGreaterThan(100);
+
+    tick(ticker, 100);
+    expect(rect.attribute.width).toBeUndefined();
+    expect(rect.attribute.y1).toBeUndefined();
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+    expect((rect as any).baseAttributes.y1).toBeUndefined();
+    expect(rect.getFinalAttribute().width).toBeUndefined();
+    expect(rect.getFinalAttribute().y1).toBeUndefined();
+    expect(rect.attribute.x).toBe(10);
+    expect(rect.attribute.x1).toBe(210);
+    expect(rect.attribute.lineWidth).toBe(0);
+    expect(boundsSize(rect).width).toBeGreaterThan(100);
+  });
+
+  test('clearing hover state animates removed style keys to defaults when base lacks those keys', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-clear-missing-style-key');
+    const rect = createRect({
+      x: 0,
+      y: 0,
+      y1: 100,
+      width: 20,
+      lineWidth: 0,
+      fill: '#1664FF',
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        lineWidth: 4,
+        fillOpacity: 0.6
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.fillOpacity).toBe(0.6);
+    expect((rect as any).baseAttributes.fillOpacity).toBeUndefined();
+
+    rect.useStates([], true);
+    tick(ticker, 16);
+
+    expect(rect.attribute.fillOpacity).toBeGreaterThan(0.6);
+    expect(rect.attribute.fillOpacity).toBeLessThan(1);
+    expect((rect as any).baseAttributes.fillOpacity).toBeUndefined();
+    expect(rect.getFinalAttribute().fillOpacity).toBeUndefined();
+
+    tick(ticker, 100);
+    expect(rect.attribute.fillOpacity).toBeUndefined();
+    expect((rect as any).baseAttributes.fillOpacity).toBeUndefined();
+    expect(rect.getFinalAttribute().fillOpacity).toBeUndefined();
+  });
+
   test('animate.to restores static truth after completion and keeps baseAttributes untouched', () => {
     const { group, ticker, graphicService } = createStageHarness('self-to');
     const rect = createAnimatedRect(graphicService);

packages/vrender-animate/src/animate.ts

@@ -624,6 +624,7 @@ export class Animate implements IAnimate {
       if (typeof trackerTarget?.restoreStaticAttribute === 'function') {
         trackerTarget.restoreStaticAttribute();
       }
+      (this as any).__skipRestoreStaticAttributeOnRemove = true;
       return;
     }
 

packages/vrender-core/__tests__/unit/graphic/state-animation.test.ts

@@ -243,6 +243,42 @@ describe('Graphic state animation integration', () => {
     });
   });
 
+  test('should animate removed clear-state style keys back to defaults when base lacks the key', () => {
+    const graphic = createGraphic();
+    delete (graphic as any).baseAttributes.fillOpacity;
+    delete (graphic.attribute as any).fillOpacity;
+    graphic.setFinalAttributes?.({ ...(graphic.attribute as any) });
+    graphic.states = {
+      hover: {
+        lineWidth: 4,
+        fillOpacity: 0.6
+      }
+    } as any;
+    const applyAnimationState = jest.fn();
+    (graphic as any).applyAnimationState = applyAnimationState;
+
+    graphic.useStates(['hover'], true);
+    graphic.clearStates(true);
+
+    expect(applyAnimationState).toHaveBeenLastCalledWith(
+      ['state'],
+      [
+        {
+          name: 'state',
+          animation: {
+            type: 'state',
+            to: expect.objectContaining({
+              lineWidth: 1,
+              fillOpacity: graphic.getDefaultAttribute('fillOpacity')
+            }),
+            duration: DefaultStateAnimateConfig.duration,
+            easing: DefaultStateAnimateConfig.easing
+          }
+        }
+      ]
+    );
+  });
+
   test('should allow explicit animateConfig to override graphic and context defaults in applyStateAttrs', () => {
     const graphic = createGraphic();
     graphic.stateAnimateConfig = {

packages/vrender-core/__tests__/unit/graphic/state-transition-orchestrator.test.ts

@@ -204,6 +204,88 @@ describe('StateTransitionOrchestrator', () => {
     });
   });
 
+  test('should not materialize undefined rect geometry aliases to theme defaults during clear transitions', () => {
+    const orchestrator = new StateTransitionOrchestrator<any>();
+
+    const verticalPlan = orchestrator.analyzeTransition(
+      {},
+      {
+        lineWidth: 0,
+        fillOpacity: undefined,
+        x: 150,
+        y: 0,
+        y1: 320,
+        width: 140,
+        x1: undefined,
+        height: undefined
+      },
+      [],
+      true,
+      {
+        isClear: true,
+        getDefaultAttribute: (key: string) => {
+          if (key === 'lineWidth' || key === 'height' || key === 'x1') {
+            return 0;
+          }
+          if (key === 'fillOpacity') {
+            return 1;
+          }
+          return undefined;
+        }
+      }
+    );
+
+    expect(verticalPlan.animateAttrs).toEqual({
+      lineWidth: 0,
+      fillOpacity: 1,
+      x: 150,
+      y: 0,
+      y1: 320,
+      width: 140
+    });
+    expect(verticalPlan.animateAttrs).not.toHaveProperty('height');
+    expect(verticalPlan.animateAttrs).not.toHaveProperty('x1');
+
+    const horizontalPlan = orchestrator.analyzeTransition(
+      {},
+      {
+        lineWidth: 0,
+        fillOpacity: undefined,
+        x: 10,
+        x1: 210,
+        y: 5,
+        height: 40,
+        width: undefined,
+        y1: undefined
+      },
+      [],
+      true,
+      {
+        isClear: true,
+        getDefaultAttribute: (key: string) => {
+          if (key === 'lineWidth' || key === 'width' || key === 'y1') {
+            return 0;
+          }
+          if (key === 'fillOpacity') {
+            return 1;
+          }
+          return undefined;
+        }
+      }
+    );
+
+    expect(horizontalPlan.animateAttrs).toEqual({
+      lineWidth: 0,
+      fillOpacity: 1,
+      x: 10,
+      x1: 210,
+      y: 5,
+      height: 40
+    });
+    expect(horizontalPlan.animateAttrs).not.toHaveProperty('width');
+    expect(horizontalPlan.animateAttrs).not.toHaveProperty('y1');
+  });
+
   test('should allow animateConfig to append additional no-animate attrs', () => {
     const orchestrator = new StateTransitionOrchestrator<any>();
 
@@ -238,4 +320,32 @@ describe('StateTransitionOrchestrator', () => {
       visible: false
     });
   });
+
+  test('should keep extra animation attrs out of the static final target', () => {
+    const orchestrator = new StateTransitionOrchestrator<any>();
+
+    const plan = orchestrator.analyzeTransition(
+      {},
+      {
+        lineWidth: 0
+      },
+      [],
+      true,
+      {
+        isClear: true,
+        extraAnimateAttrs: {
+          fillOpacity: 1
+        }
+      }
+    );
+
+    expect(plan.targetAttrs).toEqual({
+      lineWidth: 0
+    });
+    expect(plan.animateAttrs).toEqual({
+      lineWidth: 0,
+      fillOpacity: 1
+    });
+    expect(plan.targetAttrs).not.toHaveProperty('fillOpacity');
+  });
 });