From 8160df72016c09582750f0f6e5579cc61729e2bd Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Thu, 4 Jul 2024 16:18:06 +0800
Subject: [PATCH] fix(animation): fix preprocessKeyframes (#5981)

* fix(animation): fix preprocessKeyframes

* chore: update workflow
---
 .github/workflows/build.yml                   |  4 +--
 .github/workflows/deploy.yml                  |  4 +--
 .../bugs/behaviors-collapse-expand.spec.ts    | 25 +++++++++++++++++++
 .../demos/layout-antv-dagre-flow-combo.ts     |  2 +-
 packages/g6/src/utils/animation.ts            |  8 +++++-
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 packages/g6/__tests__/bugs/behaviors-collapse-expand.spec.ts

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 3edb3d125d..9d36542e0d 100644
--- a/.github/workflows/build.yml
+++ b/.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
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 2c5f9357e8..6d1ecd3941 100644
--- a/.github/workflows/deploy.yml
+++ b/.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
diff --git a/packages/g6/__tests__/bugs/behaviors-collapse-expand.spec.ts b/packages/g6/__tests__/bugs/behaviors-collapse-expand.spec.ts
new file mode 100644
index 0000000000..60b655c3a9
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/g6/__tests__/demos/layout-antv-dagre-flow-combo.ts b/packages/g6/__tests__/demos/layout-antv-dagre-flow-combo.ts
index 30251f1c21..84af8bed1b 100644
--- a/packages/g6/__tests__/demos/layout-antv-dagre-flow-combo.ts
+++ b/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();
diff --git a/packages/g6/src/utils/animation.ts b/packages/g6/src/utils/animation.ts
index 002294fcec..e592305f52 100644
--- a/packages/g6/src/utils/animation.ts
+++ b/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;
 }
 
 /**