feat: fix bug with parent clip

xuefei1313 · xuefei1313 · commit a42cee0fea1c · 2026-05-06T19:07:10.000+08:00
diff --git a/packages/vrender-animate/__tests__/unit/animation-runtime-attribute.test.ts b/packages/vrender-animate/__tests__/unit/animation-runtime-attribute.test.ts
@@ -958,6 +958,138 @@ describe('D3 pre-handoff animation runtime', () => {
     expect(rect.getFinalAttribute().width).toBeCloseTo(threeItemLayout.width, 5);
   });
 
+  test('executor update keeps parent clip path in sync with child transient layout', () => {
+    const { group, ticker, graphicService } = createStageHarness('executor-update-clip-path-sync');
+    const currentLayout = {
+      x: 266.8696428571429,
+      y: 404,
+      y1: 808,
+      width: 142.39017857142858,
+      visible: true
+    };
+    const finalLayout = {
+      x: 257.01875,
+      y: 404,
+      y1: 808,
+      width: 112.8375,
+      visible: true
+    };
+    const rect = createRect(currentLayout);
+    const clipRect = createRect(finalLayout);
+    bindGraphicService(rect as any, graphicService);
+    bindGraphicService(clipRect as any, graphicService);
+    rect.setFinalAttributes(currentLayout);
+    clipRect.setFinalAttributes(finalLayout);
+    group.appendChild(rect);
+    group.setAttributes({
+      clip: true,
+      path: [clipRect]
+    });
+
+    (rect as any).context = {
+      animationState: 'update',
+      data: [{ value: 10 }],
+      diffAttrs: {
+        x: finalLayout.x,
+        width: finalLayout.width
+      },
+      finalAttrs: finalLayout
+    };
+    rect.setFinalAttributes(finalLayout);
+
+    new AnimateExecutor(group).execute({
+      type: 'update',
+      duration: 300,
+      easing: 'linear'
+    });
+
+    expect(clipRect.attribute.x).toBeCloseTo(currentLayout.x, 5);
+    expect(clipRect.attribute.width).toBeCloseTo(currentLayout.width, 5);
+    expect((clipRect as any).baseAttributes.x).toBeCloseTo(finalLayout.x, 5);
+    expect((clipRect as any).baseAttributes.width).toBeCloseTo(finalLayout.width, 5);
+
+    tick(ticker, 20);
+    expect(rect.attribute.x).toBeLessThan(currentLayout.x);
+    expect(rect.attribute.x).toBeGreaterThan(finalLayout.x);
+    expect(rect.attribute.width).toBeLessThan(currentLayout.width);
+    expect(rect.attribute.width).toBeGreaterThan(finalLayout.width);
+    expect(clipRect.attribute.x).toBeCloseTo(rect.attribute.x, 5);
+    expect(clipRect.attribute.width).toBeCloseTo(rect.attribute.width, 5);
+    expect((clipRect as any).baseAttributes.x).toBeCloseTo(finalLayout.x, 5);
+    expect((clipRect as any).baseAttributes.width).toBeCloseTo(finalLayout.width, 5);
+
+    tick(ticker, 280);
+    expect(rect.attribute.x).toBeCloseTo(finalLayout.x, 5);
+    expect(rect.attribute.width).toBeCloseTo(finalLayout.width, 5);
+    expect(clipRect.attribute.x).toBeCloseTo(finalLayout.x, 5);
+    expect(clipRect.attribute.width).toBeCloseTo(finalLayout.width, 5);
+    expect((clipRect as any).baseAttributes.x).toBeCloseTo(finalLayout.x, 5);
+    expect((clipRect as any).baseAttributes.width).toBeCloseTo(finalLayout.width, 5);
+    expect(clipRect.getFinalAttribute().x).toBeCloseTo(finalLayout.x, 5);
+    expect(clipRect.getFinalAttribute().width).toBeCloseTo(finalLayout.width, 5);
+  });
+
+  test('executor update does not sync unrelated parent clip paths', () => {
+    const { group, ticker, graphicService } = createStageHarness('executor-update-unrelated-clip-path');
+    const currentLayout = {
+      x: 100,
+      y: 0,
+      y1: 100,
+      width: 80,
+      visible: true
+    };
+    const finalLayout = {
+      x: 120,
+      y: 0,
+      y1: 100,
+      width: 40,
+      visible: true
+    };
+    const unrelatedClipLayout = {
+      x: 0,
+      y: 0,
+      y1: 100,
+      width: 300,
+      visible: true
+    };
+    const rect = createRect(currentLayout);
+    const clipRect = createRect(unrelatedClipLayout);
+    bindGraphicService(rect as any, graphicService);
+    bindGraphicService(clipRect as any, graphicService);
+    rect.setFinalAttributes(currentLayout);
+    clipRect.setFinalAttributes(unrelatedClipLayout);
+    group.appendChild(rect);
+    group.setAttributes({
+      clip: true,
+      path: [clipRect]
+    });
+
+    (rect as any).context = {
+      animationState: 'update',
+      data: [{ value: 10 }],
+      diffAttrs: {
+        x: finalLayout.x,
+        width: finalLayout.width
+      },
+      finalAttrs: finalLayout
+    };
+    rect.setFinalAttributes(finalLayout);
+
+    new AnimateExecutor(group).execute({
+      type: 'update',
+      duration: 100,
+      easing: 'linear'
+    });
+
+    tick(ticker, 50);
+    expect(rect.attribute.x).toBeCloseTo(110, 5);
+    expect(rect.attribute.width).toBeCloseTo(60, 5);
+    expect(clipRect.attribute.x).toBeCloseTo(unrelatedClipLayout.x, 5);
+    expect(clipRect.attribute.width).toBeCloseTo(unrelatedClipLayout.width, 5);
+    expect((clipRect as any).baseAttributes.x).toBeCloseTo(unrelatedClipLayout.x, 5);
+    expect((clipRect as any).baseAttributes.width).toBeCloseTo(unrelatedClipLayout.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);
diff --git a/packages/vrender-animate/src/custom/update.ts b/packages/vrender-animate/src/custom/update.ts
@@ -1,5 +1,15 @@
 import { AttributeUpdateType, type EasingType, type IAnimate, type IStep } from '@visactor/vrender-core';
 import { ACustomAnimate } from './custom-animate';
+import { applyAnimationTransientAttributes } from './transient';
+
+const clipPathGeometryAttrs: Record<string, true> = {
+  x: true,
+  y: true,
+  x1: true,
+  y1: true,
+  width: true,
+  height: true
+};
 
 export interface IUpdateAnimationOptions {
   diffAttrs: Record<string, any>;
@@ -16,6 +26,10 @@ export interface IUpdateAnimationOptions {
 export class Update extends ACustomAnimate<Record<string, number>> {
   declare valid: boolean;
   // params: IUpdateAnimationOptions;
+  private clipPathSyncKeys: string[] | null = null;
+  private clipPathSyncParent: any = null;
+  private clipPathSyncChildIndex: number = -1;
+  private clipPathSyncDisabled: boolean = false;
 
   constructor(from: null, to: null, duration: number, easing: EasingType, params?: IUpdateAnimationOptions) {
     super(from, to, duration, easing, params);
@@ -35,6 +49,9 @@ export class Update extends ACustomAnimate<Record<string, number>> {
     }
 
     this.props = diffAttrs;
+    this.clipPathSyncKeys = Object.keys(diffAttrs).filter(key => clipPathGeometryAttrs[key]);
+    this.clipPathSyncDisabled = !this.clipPathSyncKeys.length;
+    this.syncParentClipPathToTarget();
   }
 
   private getStaticCommitAttrs(): Record<string, any> | null {
@@ -78,6 +95,7 @@ export class Update extends ACustomAnimate<Record<string, number>> {
     if (commitAttrs) {
       this.target.setAttributes(commitAttrs, false, { type: AttributeUpdateType.ANIMATE_END });
     }
+    this.syncParentClipPathToTarget();
     super.onEnd();
   }
 
@@ -100,6 +118,106 @@ export class Update extends ACustomAnimate<Record<string, number>> {
           const toValue = this.props[key];
           func(key, fromValue, toValue, easedRatio, this, this.target);
         });
+    this.syncParentClipPathToTarget();
     this.onUpdate(end, easedRatio, out);
   }
+
+  private syncParentClipPathToTarget(): void {
+    if (this.clipPathSyncDisabled) {
+      return;
+    }
+
+    const target = this.target as any;
+    const parent = target.parent as any;
+    const path = parent?.attribute?.path;
+    if (!parent?.attribute?.clip || !Array.isArray(path) || !path.length) {
+      return;
+    }
+
+    const childIndex = this.getClipPathSyncChildIndex(parent);
+    if (childIndex < 0 || childIndex >= path.length) {
+      return;
+    }
+
+    const clipGraphic = path[childIndex] as any;
+    if (!clipGraphic?.attribute || clipGraphic.type !== target.type || !this.isClipPathStaticTarget(clipGraphic)) {
+      this.clipPathSyncDisabled = true;
+      return;
+    }
+
+    const syncAttrs = this.buildClipPathTransientAttrs(clipGraphic);
+    if (syncAttrs) {
+      applyAnimationTransientAttributes(clipGraphic, syncAttrs, AttributeUpdateType.ANIMATE_UPDATE);
+    }
+  }
+
+  private getClipPathSyncChildIndex(parent: any): number {
+    if (this.clipPathSyncParent === parent && this.clipPathSyncChildIndex >= 0) {
+      return this.clipPathSyncChildIndex;
+    }
+
+    const target = this.target as any;
+    let childIndex = -1;
+    parent.forEachChildren?.((child: unknown, index: number) => {
+      if (child === target) {
+        childIndex = index;
+        return true;
+      }
+      return false;
+    });
+
+    this.clipPathSyncParent = parent;
+    this.clipPathSyncChildIndex = childIndex;
+    return childIndex;
+  }
+
+  private isClipPathStaticTarget(clipGraphic: any): boolean {
+    const target = this.target as any;
+    const targetFinalAttrs = this.getTargetFinalAttrs();
+    const clipGraphicFinalAttrs =
+      typeof clipGraphic.getFinalAttribute === 'function'
+        ? clipGraphic.getFinalAttribute()
+        : clipGraphic.finalAttribute;
+    const clipFinalAttrs = clipGraphicFinalAttrs ?? clipGraphic.baseAttributes ?? clipGraphic.attribute;
+    const keys = this.clipPathSyncKeys ?? [];
+    if (!keys.length || !targetFinalAttrs || !clipFinalAttrs) {
+      return false;
+    }
+
+    return keys.every(key =>
+      this.isSameClipPathValue(clipFinalAttrs[key], targetFinalAttrs[key] ?? target.attribute?.[key])
+    );
+  }
+
+  private getTargetFinalAttrs(): Record<string, any> | null {
+    const target = this.target as any;
+    return (
+      target.context?.finalAttrs ??
+      (typeof target.getFinalAttribute === 'function' ? target.getFinalAttribute() : target.finalAttribute) ??
+      null
+    );
+  }
+
+  private isSameClipPathValue(a: any, b: any): boolean {
+    if (typeof a === 'number' && typeof b === 'number') {
+      return Math.abs(a - b) < 1e-8;
+    }
+    return a === b;
+  }
+
+  private buildClipPathTransientAttrs(clipGraphic: any): Record<string, any> | null {
+    const target = this.target as any;
+    const attrs: Record<string, any> = {};
+    (this.clipPathSyncKeys ?? []).forEach(key => {
+      const nextValue = target.attribute?.[key];
+      if (
+        Object.prototype.hasOwnProperty.call(clipGraphic.attribute, key) &&
+        nextValue !== undefined &&
+        !this.isSameClipPathValue(clipGraphic.attribute[key], nextValue)
+      ) {
+        attrs[key] = nextValue;
+      }
+    });
+    return Object.keys(attrs).length ? attrs : null;
+  }
 }
