fix: keep rect alias fallbacks transient

Removed attr fallback targets must be transient.

Generic state planning cannot derive rect geometry aliases from key names.

Rect now computes width/height/x1/y1 fallbacks from the full static target snapshot.

Those fallback values remain in extraAnimateAttrs and never enter static truth.

Constraint: D3 static truth remains baseAttributes plus resolvedStatePatch.

Constraint: Animation fallback values must stay transient.

Rejected: Keep global alias suppression | leaks rect semantics into generic planning.

Rejected: Write computed aliases into target attrs | would pollute static truth.

Confidence: high

Scope-risk: moderate

Directive: Geometry defaults do not belong in StateTransitionOrchestrator.

Directive: Shape aliases must use full static target context.

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 targeted changed files

Tested: git diff --check

Author: xuefei1313

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

@@ -426,6 +426,204 @@ describe('D3 pre-handoff animation runtime', () => {
     expect(rect.getFinalAttribute().fillOpacity).toBeUndefined();
   });
 
+  test('clearing explicit height state on y/y1 rect animates to computed layout height', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-clear-explicit-height-alias');
+    const rect = createRect({
+      x: 0,
+      y: 0,
+      y1: 100,
+      width: 20,
+      height: undefined,
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        height: 60
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.height).toBe(60);
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+
+    rect.useStates([], true);
+    tick(ticker, 50);
+
+    expect(rect.attribute.height).toBeGreaterThan(60);
+    expect(rect.attribute.height).toBeLessThan(100);
+    expect(boundsSize(rect).height).toBeGreaterThan(60);
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+    expect(rect.getFinalAttribute().height).toBeUndefined();
+
+    tick(ticker, 100);
+    expect(rect.attribute.height).toBeUndefined();
+    expect(rect.attribute.y).toBe(0);
+    expect(rect.attribute.y1).toBe(100);
+    expect(boundsSize(rect).height).toBeGreaterThan(90);
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+    expect(rect.getFinalAttribute().height).toBeUndefined();
+  });
+
+  test('clearing explicit width state on x/x1 rect animates to computed layout width', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-clear-explicit-width-alias');
+    const rect = createRect({
+      x: 0,
+      x1: 100,
+      y: 0,
+      height: 20,
+      width: undefined,
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        width: 60
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.width).toBe(60);
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+
+    rect.useStates([], true);
+    tick(ticker, 50);
+
+    expect(rect.attribute.width).toBeGreaterThan(60);
+    expect(rect.attribute.width).toBeLessThan(100);
+    expect(boundsSize(rect).width).toBeGreaterThan(60);
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+    expect(rect.getFinalAttribute().width).toBeUndefined();
+
+    tick(ticker, 100);
+    expect(rect.attribute.width).toBeUndefined();
+    expect(rect.attribute.x).toBe(0);
+    expect(rect.attribute.x1).toBe(100);
+    expect(boundsSize(rect).width).toBeGreaterThan(90);
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+    expect(rect.getFinalAttribute().width).toBeUndefined();
+  });
+
+  test('switching from explicit height state to another state animates to computed layout height', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-switch-explicit-height-alias');
+    const rect = createRect({
+      x: 0,
+      y: 0,
+      y1: 100,
+      width: 20,
+      height: undefined,
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        height: 60
+      },
+      selected: {
+        fillOpacity: 0.5
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.height).toBe(60);
+
+    rect.useStates(['selected'], true);
+    tick(ticker, 50);
+
+    expect(rect.attribute.height).toBeGreaterThan(60);
+    expect(rect.attribute.height).toBeLessThan(100);
+    expect(rect.attribute.fillOpacity).toBeGreaterThan(0.5);
+    expect(rect.attribute.fillOpacity).toBeLessThan(1);
+    expect(boundsSize(rect).height).toBeGreaterThan(60);
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+    expect(rect.getFinalAttribute().height).toBeUndefined();
+
+    tick(ticker, 100);
+    expect(rect.attribute.height).toBeUndefined();
+    expect(rect.attribute.y).toBe(0);
+    expect(rect.attribute.y1).toBe(100);
+    expect(rect.attribute.fillOpacity).toBe(0.5);
+    expect(boundsSize(rect).height).toBeGreaterThan(90);
+    expect((rect as any).baseAttributes.height).toBeUndefined();
+    expect(rect.getFinalAttribute().height).toBeUndefined();
+  });
+
+  test('switching from explicit width state to another state animates to computed layout width', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-switch-explicit-width-alias');
+    const rect = createRect({
+      x: 0,
+      x1: 100,
+      y: 0,
+      height: 20,
+      width: undefined,
+      visible: true
+    } as any);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      hover: {
+        width: 60
+      },
+      selected: {
+        fillOpacity: 0.5
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['hover'], true);
+    tick(ticker, 100);
+    expect(rect.attribute.width).toBe(60);
+
+    rect.useStates(['selected'], true);
+    tick(ticker, 50);
+
+    expect(rect.attribute.width).toBeGreaterThan(60);
+    expect(rect.attribute.width).toBeLessThan(100);
+    expect(rect.attribute.fillOpacity).toBeGreaterThan(0.5);
+    expect(rect.attribute.fillOpacity).toBeLessThan(1);
+    expect(boundsSize(rect).width).toBeGreaterThan(60);
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+    expect(rect.getFinalAttribute().width).toBeUndefined();
+
+    tick(ticker, 100);
+    expect(rect.attribute.width).toBeUndefined();
+    expect(rect.attribute.x).toBe(0);
+    expect(rect.attribute.x1).toBe(100);
+    expect(rect.attribute.fillOpacity).toBe(0.5);
+    expect(boundsSize(rect).width).toBeGreaterThan(90);
+    expect((rect as any).baseAttributes.width).toBeUndefined();
+    expect(rect.getFinalAttribute().width).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-core/__tests__/unit/graphic/state-transition-orchestrator.test.ts

@@ -204,6 +204,27 @@ describe('StateTransitionOrchestrator', () => {
     });
   });
 
+  test('should not globally treat geometry names as optional aliases', () => {
+    const orchestrator = new StateTransitionOrchestrator<any>();
+
+    const plan = orchestrator.analyzeTransition(
+      {},
+      {
+        height: undefined
+      },
+      [],
+      true,
+      {
+        isClear: true,
+        getDefaultAttribute: (key: string) => (key === 'height' ? 0 : undefined)
+      }
+    );
+
+    expect(plan.animateAttrs).toEqual({
+      height: 0
+    });
+  });
+
   test('should not materialize undefined rect geometry aliases to theme defaults during clear transitions', () => {
     const orchestrator = new StateTransitionOrchestrator<any>();
 
@@ -235,16 +256,59 @@ describe('StateTransitionOrchestrator', () => {
       }
     );
 
-    expect(verticalPlan.animateAttrs).toEqual({
+    expect(verticalPlan.animateAttrs).toHaveProperty('height', 0);
+    expect(verticalPlan.animateAttrs).toHaveProperty('x1', 0);
+
+    const verticalRectPlan = 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;
+        },
+        shouldSkipDefaultAttribute: (key: string) => key === 'height' || key === 'x1'
+      }
+    );
+
+    expect(verticalRectPlan.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');
+    expect(verticalRectPlan.animateAttrs).not.toHaveProperty('height');
+    expect(verticalRectPlan.animateAttrs).not.toHaveProperty('x1');
+
+    expect(verticalPlan.animateAttrs).toEqual({
+      lineWidth: 0,
+      fillOpacity: 1,
+      x: 150,
+      y: 0,
+      y1: 320,
+      width: 140,
+      x1: 0,
+      height: 0
+    });
 
     const horizontalPlan = orchestrator.analyzeTransition(
       {},
@@ -274,16 +338,59 @@ describe('StateTransitionOrchestrator', () => {
       }
     );
 
-    expect(horizontalPlan.animateAttrs).toEqual({
+    expect(horizontalPlan.animateAttrs).toHaveProperty('width', 0);
+    expect(horizontalPlan.animateAttrs).toHaveProperty('y1', 0);
+
+    const horizontalRectPlan = 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;
+        },
+        shouldSkipDefaultAttribute: (key: string) => key === 'width' || key === 'y1'
+      }
+    );
+
+    expect(horizontalRectPlan.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');
+    expect(horizontalRectPlan.animateAttrs).not.toHaveProperty('width');
+    expect(horizontalRectPlan.animateAttrs).not.toHaveProperty('y1');
+
+    expect(horizontalPlan.animateAttrs).toEqual({
+      lineWidth: 0,
+      fillOpacity: 1,
+      x: 10,
+      x1: 210,
+      y: 5,
+      height: 40,
+      width: 0,
+      y1: 0
+    });
   });
 
   test('should allow animateConfig to append additional no-animate attrs', () => {
@@ -348,4 +455,32 @@ describe('StateTransitionOrchestrator', () => {
     });
     expect(plan.targetAttrs).not.toHaveProperty('fillOpacity');
   });
+
+  test('should allow extra animation attrs to replace an undefined clear target transiently', () => {
+    const orchestrator = new StateTransitionOrchestrator<any>();
+
+    const plan = orchestrator.analyzeTransition(
+      {},
+      {
+        height: undefined
+      },
+      [],
+      true,
+      {
+        isClear: true,
+        getDefaultAttribute: (key: string) => (key === 'height' ? 0 : undefined),
+        shouldSkipDefaultAttribute: (key: string) => key === 'height',
+        extraAnimateAttrs: {
+          height: 100
+        }
+      }
+    );
+
+    expect(plan.targetAttrs).toEqual({
+      height: undefined
+    });
+    expect(plan.animateAttrs).toEqual({
+      height: 100
+    });
+  });
 });