fix: 修复角头和行头折叠展开 icon 的状态未同步以及展开异常的问题 close #2607

packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-collapse-spec.ts.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpreadSheet Collapse/Expand Tests Tree Mode should only expand current group row nodes 1`] = `
+Array [
+  "root[&]浙江省",
+  "root[&]浙江省[&]杭州市",
+  "root[&]浙江省[&]绍兴市",
+  "root[&]浙江省[&]宁波市",
+  "root[&]浙江省[&]舟山市",
+  "root[&]四川省",
+]
+`;
+
+exports[`SpreadSheet Collapse/Expand Tests Tree Mode should only expand current group row nodes for custom tree 1`] = `
+Array [
+  "root[&]a-1",
+  "root[&]a-1[&]a-1-1",
+  "root[&]a-1[&]a-1-2",
+  "root[&]a-2",
+  "root[&]a-3",
+]
+`;
+
+exports[`SpreadSheet Collapse/Expand Tests Tree Mode should sync corner cell collapse all icon status 1`] = `
+Array [
+  "root[&]浙江省",
+  "root[&]四川省",
+]
+`;
+
+exports[`SpreadSheet Collapse/Expand Tests should only expand current group row nodes for custom tree 1`] = `
+Array [
+  "root[&]a-1",
+  "root[&]a-1[&]a-1-1",
+  "root[&]a-1[&]a-1-2",
+  "root[&]a-2",
+  "root[&]a-3",
+]
+`;
+
+exports[`SpreadSheet Collapse/Expand Tests should sync corner cell collapse all icon status 1`] = `
+Array [
+  "root[&]浙江省",
+  "root[&]四川省",
+]
+`;

packages/s2-core/__tests__/spreadsheet/spread-sheet-collapse-spec.ts

@@ -1,6 +1,13 @@
 import * as mockDataConfig from 'tests/data/simple-data.json';
-import { getContainer } from 'tests/util/helpers';
-import type { RowCellCollapsedParams } from '../../src/common/interface';
+import { createPivotSheet, getContainer, sleep } from 'tests/util/helpers';
+import {
+  CornerNodeType,
+  type RowCellCollapsedParams,
+  type S2DataConfig,
+  type S2Options,
+} from '../../src/common/interface';
+import { customRowGridFields } from '../data/custom-grid-fields';
+import { CustomGridData } from '../data/data-custom-grid';
 import { S2Event } from './../../src/common/constant/events/basic';
 import { PivotSheet, SpreadSheet } from '@/sheet-type';
 import type { Node } from '@/facet/layout/node';
@@ -9,9 +16,30 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
   let container: HTMLElement;
   let s2: SpreadSheet;
 
+  const s2Options: S2Options = {
+    width: 600,
+    height: 400,
+    hierarchyType: 'tree',
+    style: {
+      rowCell: {
+        expandDepth: undefined,
+      },
+    },
+  };
+
   const mapNodes = (spreadsheet: SpreadSheet) =>
     spreadsheet.facet.getRowLeafNodes().map((node) => node.id);
 
+  const expectCornerIconName = (spreadsheet: SpreadSheet, iconName: string) => {
+    const cornerCell = spreadsheet.facet
+      .getCornerCells()
+      .find((cell) => cell.getMeta().cornerType === CornerNodeType.Row)!;
+
+    const cornerIcon = cornerCell.getTreeIcon();
+
+    expect(cornerIcon?.name).toEqual(iconName);
+  };
+
   beforeEach(async () => {
     container = getContainer();
     s2 = new PivotSheet(
@@ -25,22 +53,13 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
           valueInCols: true,
         },
       },
-      {
-        width: 600,
-        height: 200,
-        hierarchyType: 'tree',
-        style: {
-          rowCell: {
-            expandDepth: undefined,
-          },
-        },
-      },
+      s2Options,
     );
     await s2.render();
   });
 
   afterEach(() => {
-    s2.destroy();
+    // s2.destroy();
   });
 
   describe('Tree Mode', () => {
@@ -101,6 +120,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
                 "root[&]浙江",
               ]
           `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should collapse by field', async () => {
@@ -121,6 +141,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
                 "root[&]浙江",
               ]
           `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should collapse by field id', async () => {
@@ -144,6 +165,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
                 "root[&]浙江[&]杭州[&]笔",
               ]
           `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should collapse use collapseFields first', async () => {
@@ -167,6 +189,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
                 "root[&]浙江[&]杭州",
               ]
           `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should collapse use expandDepth first', async () => {
@@ -189,6 +212,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
                 "root[&]浙江[&]杭州[&]笔",
               ]
           `);
+      expectCornerIconName(s2, 'Minus');
     });
 
     test('should collapse use collapseFields first when contain collapseAll and expandDepth config', async () => {
@@ -213,6 +237,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
                 "root[&]浙江[&]杭州",
               ]
           `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should collapse use collapseFields by node id first', async () => {
@@ -233,6 +258,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
           "root[&]浙江",
         ]
       `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should collapse all nodes if collapseAll is true and collapseFields is undefined', async () => {
@@ -251,6 +277,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
           "root[&]浙江",
         ]
       `);
+      expectCornerIconName(s2, 'Plus');
     });
 
     test('should emit collapse event', () => {
@@ -275,6 +302,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
       s2.emit(S2Event.ROW_CELL_COLLAPSED__PRIVATE, treeRowType);
 
       expect(onCollapsed).toHaveBeenCalledWith(params);
+      expectCornerIconName(s2, 'Minus');
     });
 
     test('should emit collapse all event', () => {
@@ -285,6 +313,90 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
       s2.emit(S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE, false);
 
       expect(onCollapsed).toHaveBeenCalledWith(true);
+      expectCornerIconName(s2, 'Minus');
+    });
+
+    // https://github.com/antvis/S2/issues/2607
+    test('should only expand current group row nodes', async () => {
+      s2 = createPivotSheet(
+        {
+          ...s2Options,
+          style: {
+            rowCell: {
+              collapseAll: true,
+            },
+          },
+        },
+        { useSimpleData: false },
+      );
+
+      await s2.render();
+
+      const rowNodes = s2.facet.getRowNodes(0);
+
+      s2.emit(S2Event.ROW_CELL_COLLAPSED__PRIVATE, {
+        isCollapsed: false,
+        node: rowNodes[0],
+      });
+
+      await sleep(500);
+
+      expectCornerIconName(s2, 'Minus');
+      expect(s2.facet.getRowNodes().map(({ id }) => id)).toMatchSnapshot();
+    });
+
+    test('should sync corner cell collapse all icon status', async () => {
+      s2 = createPivotSheet(
+        {
+          ...s2Options,
+          style: {
+            rowCell: {
+              collapseAll: false,
+              collapseFields: {
+                'root[&]浙江省': true,
+                'root[&]四川省': true,
+              },
+            },
+          },
+        },
+        { useSimpleData: false },
+      );
+
+      await s2.render();
+
+      expectCornerIconName(s2, 'Plus');
+      expect(s2.facet.getRowNodes().map(({ id }) => id)).toMatchSnapshot();
+    });
+
+    test('should only expand current group row nodes for custom tree', async () => {
+      const customRowDataCfg: S2DataConfig = {
+        data: CustomGridData,
+        fields: customRowGridFields,
+      };
+
+      s2 = createPivotSheet({
+        ...s2Options,
+        style: {
+          rowCell: {
+            collapseAll: true,
+          },
+        },
+      });
+
+      s2.setDataCfg(customRowDataCfg);
+      await s2.render();
+
+      const rowNodes = s2.facet.getRowNodes(0);
+
+      s2.emit(S2Event.ROW_CELL_COLLAPSED__PRIVATE, {
+        isCollapsed: false,
+        node: rowNodes[0],
+      });
+
+      await sleep(500);
+
+      expectCornerIconName(s2, 'Minus');
+      expect(s2.facet.getRowNodes().map(({ id }) => id)).toMatchSnapshot();
     });
   });
 });

packages/s2-core/src/cell/corner-cell.ts

@@ -1,5 +1,5 @@
 import type { PointLike } from '@antv/g';
-import { last } from 'lodash';
+import { last, values } from 'lodash';
 import {
   CellType,
   KEY_GROUP_CORNER_RESIZE_AREA,
@@ -61,10 +61,16 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
       return;
     }
 
-    const { collapseAll } = this.spreadsheet.options.style?.rowCell!;
+    const { collapseFields = {} } = this.spreadsheet.options.style?.rowCell!;
     const { size = 0 } = this.getStyle()!.icon!;
     const { fill } = this.getTextStyle();
     const area = this.getBBoxByType(CellClipBox.CONTENT_BOX);
+    const rootRowNodes = this.spreadsheet.facet.getRowNodes(0);
+    // 任意一级节点的 icon 展开/收起, 同步更新角头 icon 的状态
+    const isAllCollapsed =
+      values(collapseFields!).filter(Boolean).length === rootRowNodes.length ||
+      rootRowNodes.every((node) => node.isCollapsed);
+    const isCollapsed = isAllCollapsed;
 
     this.treeIcon = renderTreeIcon({
       group: this,
@@ -75,12 +81,12 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
         height: size,
         fill,
       },
-      isCollapsed: collapseAll,
+      isCollapsed,
       onClick: () => {
         this.spreadsheet.facet.resetScrollY();
         this.spreadsheet.emit(
           S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE,
-          collapseAll!,
+          isCollapsed,
         );
       },
     });

packages/s2-core/src/facet/layout/build-row-custom-tree-hierarchy.ts

@@ -40,7 +40,7 @@ export const buildCustomTreeHierarchy = (params: CustomTreeHeaderParams) => {
 
     const defaultCollapsed = collapsed ?? false;
     const isDefaultCollapsed =
-      collapseFields?.[nodeId] || collapseFields?.[field];
+      collapseFields?.[nodeId] ?? collapseFields?.[field];
     const isCollapsed = isDefaultCollapsed ?? (collapseAll || defaultCollapsed);
 
     // TODO: 平铺模式支持 折叠/展开

packages/s2-core/src/sheet-type/pivot-sheet.ts

@@ -114,7 +114,6 @@ export class PivotSheet extends SpreadSheet {
     this.setOptions({
       style: {
         rowCell: {
-          collapseAll: false,
           collapseFields,
         },
       },

packages/s2-react/playground/components/CustomTree.tsx

@@ -41,6 +41,11 @@ export const CustomTreeOptions: SheetComponentOptions = {
       withFormat: true,
     },
   },
+  style: {
+    rowCell: {
+      collapseAll: true,
+    },
+  },
   // cornerText: '指标',
 };
 

packages/s2-react/playground/config.tsx

@@ -315,7 +315,7 @@ export const s2Options: SheetComponentOptions = {
   debug: true,
   width: 800,
   height: 600,
-  hierarchyType: 'grid',
+  hierarchyType: 'tree',
   seriesNumber: {
     enable: true,
   },

s2-site/docs/manual/migration-v2.zh.md

@@ -357,7 +357,11 @@ const s2DataConfig = {
 
 具体请查看 [自定义行列头分组](/manual/advanced/custom/custom-header) 相关文档。
 
-#### 行列冻结配置调整
+#### 树状结构 icon 折叠展开状态同步
+
+现在行头节点的 icon 展开/收起，会同步更新角头 icon（全部展开/收起）的状态。
+
+#### 行列冻结配置
 
 透视表和明细表的行列冻结配置统一收拢到 `frozen`.