fix: fix update animation of group-mark

Author: xile611

packages/vchart/src/mark/base/base-mark.ts

@@ -51,7 +51,7 @@ import type {
   IMarkStateManager,
   StateValueType
 } from '../../compile/mark/interface';
-import { array, degreeToRadian, has, isArray, isBoolean, isFunction, isNil, isObject, isValid } from '@visactor/vutils';
+import { array, degreeToRadian, isArray, isBoolean, isFunction, isNil, isObject, isValid } from '@visactor/vutils';
 import { curveTypeTransform, groupData, runEncoder } from '../utils/common';
 import type { ICompilableInitOption } from '../../compile/interface';
 import { LayoutState } from '../../compile/interface';
@@ -67,7 +67,8 @@ import type { ICompilableData } from '../../compile/data/interface';
 import type { IAnimationConfig } from '../../animation/interface';
 import { AnimationStateEnum, type MarkAnimationSpec } from '../../animation/interface';
 import { CompilableData } from '../../compile/data/compilable-data';
-import { log } from '../../util';
+import { getDiffAttributesOfGraphic } from '../../util/mark';
+import { log } from '../../util/debug';
 import { morph as runMorph } from '../../compile/morph';
 
 export type ExChannelCall = (
@@ -1263,7 +1264,7 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
     }
   }
 
-  private _setAnimationState(g: IMarkGraphic) {
+  protected _setAnimationState(g: IMarkGraphic) {
     const customizedState = this._aniamtionStateCallback ? this._aniamtionStateCallback(g) : undefined;
 
     g.context.animationState = customizedState ?? g.context.diffState;
@@ -1552,14 +1553,7 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
           this._graphicMap.set(g.context.uniqueKey, g);
         }
       } else {
-        // diff一下，获取差异的属性
-        const prevAttrs: Record<string, any> = g.getAttributes(true);
-        const diffAttrs: Record<string, any> = {};
-        Object.keys(finalAttrs).forEach(key => {
-          if (prevAttrs[key] !== finalAttrs[key]) {
-            diffAttrs[key] = finalAttrs[key];
-          }
-        });
+        const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
         g.context.diffAttrs = diffAttrs;
         if (g.context.reusing) {
           // 表示正在被复用，需要重设属性的
@@ -1982,11 +1976,11 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
     this._aniamtionStateCallback = callback;
   }
 
-  hasAnimationByState(state: keyof MarkAnimationSpec) {
-    if (!state || !this._animationConfig || !this._animationConfig[state]) {
+  hasAnimationByState(state: AnimationStateValues) {
+    if (!state || !this._animationConfig || !(this._animationConfig as any)[state]) {
       return false;
     }
-    const stateAnimationConfig = this._animationConfig[state];
+    const stateAnimationConfig = (this._animationConfig as any)[state];
     return (stateAnimationConfig as IAnimationConfig[]).length > 0 || isObject(stateAnimationConfig);
   }
 

packages/vchart/src/mark/group.ts

@@ -4,15 +4,22 @@ import type { Maybe } from '../typings';
 import { log, warn } from '../util/debug';
 import type { IGroupMarkSpec } from '../typings/visual';
 import { BaseMark } from './base/base-mark';
-import type { AnimationStateValues, IGroupMark, IMark, IMarkGraphic, MarkType } from './interface';
+import {
+  DiffState,
+  type AnimationStateValues,
+  type IGroupMark,
+  type IMark,
+  type IMarkGraphic,
+  type MarkType
+} from './interface';
 // eslint-disable-next-line no-duplicate-imports
 import { MarkTypeEnum } from './interface/type';
 import { type IMarkCompileOption } from '../compile/mark';
 import type { IGroup, IGroupGraphicAttribute } from '@visactor/vrender-core';
 import { registerGroup, registerShadowRoot } from '@visactor/vrender-kits';
 import { isNil } from '@visactor/vutils';
 import { traverseGroupMark } from '../compile/util';
-import { LayoutState } from '../compile/interface';
+import { getDiffAttributesOfGraphic } from '../util/mark';
 
 export class GroupMark extends BaseMark<IGroupMarkSpec> implements IGroupMark {
   static readonly type = MarkTypeEnum.group;
@@ -110,9 +117,33 @@ export class GroupMark extends BaseMark<IGroupMarkSpec> implements IGroupMark {
     }
 
     const style = this._simpleStyle ?? this.getAttributesOfState({});
+    const prevState = this._product.context?.diffState;
+
+    this._product.context = {
+      ...this._product.context,
+      ...this._getCommonContext(),
+      diffState: prevState ? DiffState.update : DiffState.enter
+    };
+    this._setAnimationState(this._product as unknown as IMarkGraphic);
+    const newAttrs = this._getAttrsFromConfig(style);
+
+    // TODO: 需要优化，现在group mark 走了一些特殊逻辑
+    if (this._product.context.diffState === DiffState.update) {
+      const hasAnimation = this.hasAnimation();
+      const diffAttrs = getDiffAttributesOfGraphic(this._product as unknown as IMarkGraphic, newAttrs);
+      this._product.context.diffAttrs = diffAttrs;
+
+      if (!this.hasAnimationByState(this._product.context.animationState)) {
+        hasAnimation ? this._product.setAttributesAndPreventAnimate(diffAttrs) : this._product.setAttributes(diffAttrs);
+      }
+
+      if (hasAnimation) {
+        this._product.setFinalAttributes(newAttrs);
+      }
+    } else {
+      this._product.setAttributes(newAttrs);
+    }
 
-    this._product.context = { ...this._product.context, ...this._getCommonContext() };
-    this._product.setAttributes(this._getAttrsFromConfig(style));
     this.needClear = true;
   }
 

packages/vchart/src/mark/interface/common.ts

@@ -59,7 +59,7 @@ export type IMarkStyle<T extends ICommonSpec> = {
 
 export type DiffStateValues = 'update' | 'enter' | 'exit';
 
-export type AnimationStateValues = 'appear' | 'enter' | 'update' | 'exit' | 'disappear' | 'none';
+export type AnimationStateValues = 'appear' | 'enter' | 'update' | 'exit' | 'disappear' | 'none' | 'state';
 
 export interface IGraphicContext {
   markType: MarkTypeEnum;

packages/vchart/src/util/mark.ts

@@ -32,3 +32,16 @@ export const findMarkGraphic = (rootGroup: IGraphic, target: IGraphic) => {
 
   return null;
 };
+
+export const getDiffAttributesOfGraphic = (g: IMarkGraphic, newAttrs: any) => {
+  // diff一下，获取差异的属性
+  const prevAttrs: Record<string, any> = g.getAttributes(true);
+  const diffAttrs: Record<string, any> = {};
+  Object.keys(newAttrs).forEach(key => {
+    if (prevAttrs[key] !== newAttrs[key]) {
+      diffAttrs[key] = newAttrs[key];
+    }
+  });
+
+  return diffAttrs;
+};