feat: 增加树状模式下行头宽度配置 rowCell.treeWidth

antvis · Nov 28, 2024 · 0df05ed · 0df05ed
1 parent 4fb1ce9
commit 0df05ed
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 25 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap
@@ -235,6 +235,26 @@ Array [
 ]
 `;
 
+exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #RowCell should get custom tree row cell style 1`] = `
+Array [
+  Object {
+    "height": 30,
+    "id": "root[&]浙江",
+    "width": 150,
+  },
+  Object {
+    "height": 30,
+    "id": "root[&]浙江[&]义乌",
+    "width": 150,
+  },
+  Object {
+    "height": 30,
+    "id": "root[&]浙江[&]杭州",
+    "width": 150,
+  },
+]
+`;
+
 exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests should render default cell style 1`] = `
 Array [
   Object {

diff --git a/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts
@@ -91,7 +91,21 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
             },
           },
         });
-        await s2.render();
+        await s2.render(false);
+
+        expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
+      });
+
+      test('should get custom tree row cell style', async () => {
+        s2.setOptions({
+          hierarchyType: 'tree',
+          style: {
+            rowCell: {
+              treeWidth: 150,
+            },
+          },
+        });
+        await s2.render(false);
 
         expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
       });
@@ -113,7 +127,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
             },
           },
         });
-        await s2.render();
+        await s2.render(false);
 
         expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
       });
@@ -131,7 +145,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
             },
           },
         });
-        await s2.render();
+        await s2.render(false);
 
         expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
       });
@@ -151,7 +165,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
             },
           },
         });
-        await s2.render();
+        await s2.render(false);
 
         expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
       });
@@ -200,7 +214,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
             },
           },
         });
-        await s2.render();
+        await s2.render(false);
 
         const rootRowNodes = s2.facet
           .getRowNodes()

diff --git a/packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts
@@ -18,7 +18,7 @@ const s2Options: S2Options = {
   hierarchyType: 'tree',
   style: {
     rowCell: {
-      width: 400,
+      treeWidth: 400,
     },
   },
 };
@@ -208,7 +208,8 @@ describe('SpreadSheet Custom Tree Tests', () => {
     s2.setOptions({
       style: {
         rowCell: {
-          width: 50,
+          treeWidth: 50,
+          width: 30,
         },
       },
     });

diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
@@ -4,8 +4,8 @@
 import { CornerCell, DataCell } from '@/cell';
 import {
   DEFAULT_OPTIONS,
+  DEFAULT_ROW_CELL_TREE_WIDTH,
   DEFAULT_STYLE,
-  DEFAULT_TREE_ROW_CELL_WIDTH,
 } from '@/common/constant/options';
 import type { ViewMeta } from '@/common/interface/basic';
 import { Store } from '@/common/store';
@@ -261,11 +261,11 @@ describe('Pivot Mode Facet Test', () => {
 
       expect(rowsHierarchy.getLeaves()).toHaveLength(8);
       expect(rowsHierarchy.getNodes()).toHaveLength(10);
-      expect(rowsHierarchy.width).toBe(DEFAULT_TREE_ROW_CELL_WIDTH);
+      expect(rowsHierarchy.width).toBe(DEFAULT_ROW_CELL_TREE_WIDTH);
       expect(rowCell?.width).toBeUndefined();
 
       rowsHierarchy.getNodes().forEach((node, index) => {
-        expect(node.width).toBe(DEFAULT_TREE_ROW_CELL_WIDTH);
+        expect(node.width).toBe(DEFAULT_ROW_CELL_TREE_WIDTH);
         expect(node.height).toBe(dataCell!.height!);
         expect(node.x).toBe(0);
         expect(node.y).toBe(node.height * index);

diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
@@ -28,7 +28,7 @@ export enum LayoutWidthType {
 
 export const SPLIT_LINE_WIDTH = 1;
 
-export const DEFAULT_TREE_ROW_CELL_WIDTH = 120;
+export const DEFAULT_ROW_CELL_TREE_WIDTH = 120;
 
 export const DEFAULT_CELL_TEXT_WORD_WRAP_STYLE: CellTextWordWrapStyle = {
   wordWrap: true,

diff --git a/packages/s2-core/src/common/interface/style.ts b/packages/s2-core/src/common/interface/style.ts
@@ -80,6 +80,11 @@ export interface DataCellStyle extends CellTextWordWrapStyle {
 }
 
 export interface RowCellStyle extends BaseCellStyle, CellTextWordWrapStyle {
+  /**
+   * 树状结构的行头宽度
+   */
+  treeWidth?: number;
+
   /**
    * 是否展示树状分层下的层级占位点
    */

diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -17,7 +17,7 @@ import {
 } from 'lodash';
 import { ColCell, RowCell, SeriesNumberCell } from '../cell';
 import {
-  DEFAULT_TREE_ROW_CELL_WIDTH,
+  DEFAULT_ROW_CELL_TREE_WIDTH,
   LAYOUT_SAMPLE_COUNT,
   type IconTheme,
   type MultiData,
@@ -804,6 +804,10 @@ export class PivotFacet extends FrozenFacet {
     const { rowCell } = this.spreadsheet.options.style!;
 
     // 1. 用户拖拽或手动指定的行头宽度优先级最高
+    if (isNumber(rowCell?.treeWidth)) {
+      return rowCell.treeWidth;
+    }
+
     const customRowCellWidth = this.getCellCustomSize(null, rowCell?.width!);
 
     if (isNumber(customRowCellWidth)) {
@@ -829,11 +833,11 @@ export class PivotFacet extends FrozenFacet {
       this.rowCellTheme.padding?.right;
 
     const width = Math.max(
-      customRowCellWidth ?? DEFAULT_TREE_ROW_CELL_WIDTH,
+      customRowCellWidth ?? DEFAULT_ROW_CELL_TREE_WIDTH,
       maxLabelWidth,
     );
 
-    return Number.isNaN(width) ? DEFAULT_TREE_ROW_CELL_WIDTH : width;
+    return Number.isNaN(width) ? DEFAULT_ROW_CELL_TREE_WIDTH : width;
   }
 
   /**

diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts
@@ -351,7 +351,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
           eventType: S2Event.LAYOUT_RESIZE_TREE_WIDTH,
           style: {
             rowCell: {
-              width: displayWidth,
+              treeWidth: displayWidth,
             },
           },
         };

diff --git a/s2-site/docs/common/style.zh.md b/s2-site/docs/common/style.zh.md
@@ -47,7 +47,8 @@ order: 3
 
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | ---  |
-| width | 行单元格宽度，可根据当前行头节点动态设置，树状结构同样适用 | `number \| (rowNode: Node) => number` | 平铺：`96`, 树状：`120` |  |
+| width | 行单元格宽度，可根据当前行头节点动态设置，树状结构同样适用 | `number \| (rowNode: Node) => number` |  |  |
+| treeWidth | 树状模式下行单元格宽度，优先级高于 `width`, 值为空时则默认使用 `width` | `number` |  |  |
 | height | 行单元格高度，可根据当前行头节点动态设置 | `number \| (rowNode: Node) => number` | 30 |  |
 | collapseFields | 树状模式下行头自定义折叠节点。<br> 支持 id (`'root[&] 行头维度值'`) 和 维度 field (`'city'`) 两种格式，优先级大于 `collapseAll` 和 `expandDepth`, 设置为 `null` 时优先级最低。 [查看 demo](/examples/basic/pivot#tree) | `Record<string, boolean>` |  | |
 | collapseAll | 在树状结构模式下行头是否默认收起全部。 | `boolean` |   `false` | |

diff --git a/s2-site/docs/manual/migration-v2.en.md b/s2-site/docs/manual/migration-v2.en.md
@@ -364,21 +364,21 @@ const s2Options = {
 
 2. Row Header Width Configuration Changes in Tree Structure
 
-Deprecated `treeRowsWidth`, replaced with `rowCell.width`.
+`treeRowsWidth`, replaced with `rowCell.treeWidth`.
 
 ```diff
 const s2Options = {
   hierarchyType: 'tree',
   style: {
 -   treeRowsWidth: 200
 +   rowCell: {
-+     width: 200,
++     treeWidth: 200,
 +   }
   },
 }
 ```
 
-3. `customTree` and `customTreeItems` have been deprecated.
+1. `customTree` and `customTreeItems` have been deprecated.
 
 The original way of customizing tree structures has been deprecated. Now custom structures support both `flat` and `tree` modes.
 

diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
@@ -364,21 +364,21 @@ const s2Options = {
 
 2. 树状结构下行头宽度配置调整
 
-废弃 `treeRowsWidth`, 使用 `rowCell.width` 代替。
+原 `treeRowsWidth` 重命名为 `rowCell.treeWidth`。
 
 ```diff
 const s2Options = {
   hierarchyType: 'tree',
   style: {
 -   treeRowsWidth: 200
 +   rowCell: {
-+     width: 200,
++     treeWidth: 200,
 +   }
   },
 }
 ```
 
-3. `customTree` 和 `customTreeItems` 已废弃。
+1. `customTree` 和 `customTreeItems` 已废弃。
 
 原本自定义树状结构的方式已废弃，现在自定义结构同时支持 `平铺` 和 `树状` 两种模式。
 

diff --git a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
@@ -19,9 +19,8 @@ fetch(
         rowHeader: 0.5,
       },
       style: {
-        // 和平铺模式配置一致
         rowCell: {
-          width: 200,
+          treeWidth: 200,
         },
       },
     };

diff --git a/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts b/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
@@ -20,7 +20,7 @@ fetch(
       },
       style: {
         rowCell: {
-          width: 400,
+          treeWidth: 400,
         },
         colCell: {
           width: 200,