feat: fix bug of stackCornerRadius

Author: xuefei1313

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

@@ -882,6 +882,82 @@ describe('D3 pre-handoff animation runtime', () => {
     expect(rect.getFinalAttribute().width).toBe(resized.width);
   });
 
+  test('superseded executor update cannot commit stale layout when it ends late', () => {
+    const { group, ticker, graphicService } = createStageHarness('executor-update-stale-end');
+    const threeItemLayout = {
+      x: 76.61875,
+      y: 0,
+      y1: 320,
+      width: 41.5125,
+      visible: true
+    };
+    const fourItemLayout = {
+      x: 73.54375,
+      y: 0,
+      y1: 320,
+      width: 32.2875,
+      visible: true
+    };
+    const rect = createRect(threeItemLayout);
+    bindGraphicService(rect as any, graphicService);
+    rect.setFinalAttributes(threeItemLayout);
+    group.appendChild(rect);
+
+    (rect as any).context = {
+      animationState: 'update',
+      data: [{ value: 10 }],
+      diffAttrs: {
+        x: fourItemLayout.x,
+        width: fourItemLayout.width
+      },
+      finalAttrs: fourItemLayout
+    };
+    rect.setFinalAttributes(fourItemLayout);
+    new AnimateExecutor(rect).execute({
+      type: 'update',
+      duration: 200,
+      easing: 'linear'
+    });
+
+    tick(ticker, 50);
+    expect(rect.attribute.x).toBeLessThan(threeItemLayout.x);
+    expect(rect.attribute.x).toBeGreaterThan(fourItemLayout.x);
+    expect(rect.attribute.width).toBeLessThan(threeItemLayout.width);
+    expect(rect.attribute.width).toBeGreaterThan(fourItemLayout.width);
+
+    (rect as any).context = {
+      animationState: 'update',
+      data: [{ value: 10 }],
+      diffAttrs: {
+        x: threeItemLayout.x,
+        width: threeItemLayout.width
+      },
+      finalAttrs: threeItemLayout
+    };
+    rect.setFinalAttributes(threeItemLayout);
+    new AnimateExecutor(rect).execute({
+      type: 'update',
+      duration: 100,
+      easing: 'linear'
+    });
+
+    tick(ticker, 100);
+    expect(rect.attribute.x).toBeCloseTo(threeItemLayout.x, 5);
+    expect(rect.attribute.width).toBeCloseTo(threeItemLayout.width, 5);
+    expect((rect as any).baseAttributes.x).toBeCloseTo(threeItemLayout.x, 5);
+    expect((rect as any).baseAttributes.width).toBeCloseTo(threeItemLayout.width, 5);
+    expect(rect.getFinalAttribute().x).toBeCloseTo(threeItemLayout.x, 5);
+    expect(rect.getFinalAttribute().width).toBeCloseTo(threeItemLayout.width, 5);
+
+    tick(ticker, 50);
+    expect(rect.attribute.x).toBeCloseTo(threeItemLayout.x, 5);
+    expect(rect.attribute.width).toBeCloseTo(threeItemLayout.width, 5);
+    expect((rect as any).baseAttributes.x).toBeCloseTo(threeItemLayout.x, 5);
+    expect((rect as any).baseAttributes.width).toBeCloseTo(threeItemLayout.width, 5);
+    expect(rect.getFinalAttribute().x).toBeCloseTo(threeItemLayout.x, 5);
+    expect(rect.getFinalAttribute().width).toBeCloseTo(threeItemLayout.width, 5);
+  });
+
   test('switching states mid-animation restores to the new static truth and blocks late writes', () => {
     const { group, ticker, graphicService } = createStageHarness('state-conflict');
     const rect = createAnimatedRect(graphicService);

packages/vrender-animate/src/custom/update.ts

@@ -37,14 +37,46 @@ export class Update extends ACustomAnimate<Record<string, number>> {
     this.props = diffAttrs;
   }
 
+  private getStaticCommitAttrs(): Record<string, any> | null {
+    if (!this.props) {
+      return null;
+    }
+
+    const target = this.target as any;
+    const contextFinalAttrs = target.context?.finalAttrs as Record<string, any> | undefined;
+    const finalAttribute = (
+      typeof target.getFinalAttribute === 'function' ? target.getFinalAttribute() : target.finalAttribute
+    ) as Record<string, any> | undefined;
+    const commitAttrs: Record<string, any> = {};
+
+    Object.keys(this.props).forEach(key => {
+      if (contextFinalAttrs && Object.prototype.hasOwnProperty.call(contextFinalAttrs, key)) {
+        commitAttrs[key] = contextFinalAttrs[key];
+        return;
+      }
+
+      if (finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, key)) {
+        commitAttrs[key] = finalAttribute[key];
+        return;
+      }
+
+      if (this.animate.validAttr(key)) {
+        commitAttrs[key] = (this.props as Record<string, any>)[key];
+      }
+    });
+
+    return Object.keys(commitAttrs).length ? commitAttrs : null;
+  }
+
   onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {
     if (cb) {
       super.onEnd(cb);
       return;
     }
 
-    if (this.props && Object.keys(this.props).length) {
-      this.target.setAttributes(this.props, false, { type: AttributeUpdateType.ANIMATE_END });
+    const commitAttrs = this.getStaticCommitAttrs();
+    if (commitAttrs) {
+      this.target.setAttributes(commitAttrs, false, { type: AttributeUpdateType.ANIMATE_END });
     }
     super.onEnd();
   }