fix(animation): fix preprocessKeyframes (#5981)

* fix(animation): fix preprocessKeyframes

* chore: update workflow

.github/workflows/build.yml

@@ -18,10 +18,10 @@ jobs:
         with:
           node-version: 18
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Install Dependencies

.github/workflows/deploy.yml

@@ -14,9 +14,9 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9
       - uses: actions/checkout@v2
       - run: pnpm install
       - run: pnpm build

packages/g6/__tests__/bugs/behaviors-collapse-expand.spec.ts

@@ -0,0 +1,25 @@
+import { ComboEvent, GraphEvent } from '@/src';
+import { layoutAntVDagreFlowCombo } from '@@/demos';
+import { createDemoGraph } from '@@/utils';
+
+describe('behavior collapse expand', () => {
+  it('collapse expand with no change element', async () => {
+    // https://github.com/antvis/G6/issues/5951
+    const graph = await createDemoGraph(layoutAntVDagreFlowCombo, { animation: true });
+
+    // @ts-expect-error private method
+    const comboA = graph.context.element.getElement('A');
+
+    const click = jest.fn(async () => {
+      await new Promise<void>((resolve) => {
+        graph.on(GraphEvent.AFTER_ANIMATE, () => {
+          resolve();
+        });
+
+        graph.emit(ComboEvent.DBLCLICK, { target: comboA, targetType: 'combo' });
+      });
+    });
+
+    expect(click).not.toThrow();
+  });
+});

packages/g6/__tests__/demos/layout-antv-dagre-flow-combo.ts

@@ -40,7 +40,7 @@ export const layoutAntVDagreFlowCombo: TestCase = async (context) => {
       nodesep: 5,
       sortByCombo: true,
     },
-    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
+    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'collapse-expand'],
   });
 
   await graph.render();

packages/g6/src/utils/animation.ts

@@ -86,13 +86,19 @@ export function preprocessKeyframes(keyframes: Keyframe[]): Keyframe[] {
 
   // 将 PropertyIndexedKeyframes 转化为 Keyframe 格式
   // convert PropertyIndexedKeyframes to Keyframe format
-  return Object.entries(propertyIndexedKeyframes).reduce((acc, [key, values]) => {
+  const output = Object.entries(propertyIndexedKeyframes).reduce((acc, [key, values]) => {
     values.forEach((value, index) => {
       if (!acc[index]) acc[index] = { [key]: value };
       else acc[index][key] = value;
     });
     return acc;
   }, [] as Keyframe[]);
+
+  // 如果处理后所有的属性都被过滤掉，则添加一个没有实际作用的属性用于触发动画
+  // If all properties are filtered out after processing, add a property that has no actual effect to trigger the animation
+  if (keyframes.length !== 0 && output.length === 0) output.push(...[{ _: 0 }, { _: 0 }]);
+
+  return output;
 }
 
 /**