fix(layout): 修复 treeRowsWidth 配置不生效 close #1622

packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts

@@ -314,4 +314,30 @@ describe('Pivot Mode Facet Test', () => {
       }
     },
   );
+
+  // https://github.com/antvis/S2/issues/1622
+  test('should render custom column leaf node width and use treeRowsWidth first for tree mode', () => {
+    const mockDataSet = new MockPivotDataSet(s2);
+    const customWidthFacet = new PivotFacet({
+      spreadsheet: s2,
+      dataSet: mockDataSet,
+      ...assembleDataCfg().fields,
+      ...assembleOptions(),
+      hierarchyType: 'tree',
+      cellCfg: {},
+      colCfg: {},
+      rowCfg: {
+        // 行头宽度
+        width: 200,
+        // 已废弃
+        treeRowsWidth: 300,
+      },
+      // 树状结构下行头宽度 (优先级最高)
+      treeRowsWidth: 400,
+    });
+
+    customWidthFacet.layoutResult.rowNodes.forEach((node) => {
+      expect(node.width).toStrictEqual(400);
+    });
+  });
 });

packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts

@@ -414,6 +414,7 @@ describe('Interaction Row Column Resize Tests', () => {
       ResizeAreaEffect.Tree,
     );
 
+    expect(s2.options.style.treeRowsWidth).toEqual(resizeInfo.width);
     expect(s2.options.style.rowCfg.treeRowsWidth).toEqual(resizeInfo.width);
   });
 

packages/s2-core/src/common/constant/options.ts

@@ -15,10 +15,11 @@ export enum LayoutWidthTypes {
   Compact = 'compact',
 }
 
+export const DEFAULT_TREE_ROW_WIDTH = 120;
+
 export const DEFAULT_STYLE: Readonly<Style> = {
   layoutWidthType: LayoutWidthTypes.Adaptive,
   showTreeLeafNodeAlignDot: false,
-  treeRowsWidth: 120,
   collapsedRows: {},
   collapsedCols: {},
   cellCfg: {

packages/s2-core/src/common/interface/basic.ts

@@ -190,7 +190,7 @@ export interface Style {
   layoutWidthType?: LayoutWidthType;
   // 是否展示树状分层下的层级占位点
   showTreeLeafNodeAlignDot?: boolean;
-  // row cell's height in tree mode
+  // 树状结构下行头宽度
   treeRowsWidth?: number;
   // 树状分层模式下的全局收起展开属性，对应角头收起展开按钮
   hierarchyCollapse?: boolean;
@@ -307,7 +307,9 @@ export interface RowCfg {
   // specific some row field's width
   widthByField?: Record<string, number>;
   heightByField?: Record<string, number>;
-  // tree row width(拖拽产生的，无需主动设置)
+  /**
+   * @deprecated (已废弃, 请使用 style.treeRowsWidth 代替) tree row width(拖拽产生的，无需主动设置)
+   */
   treeRowsWidth?: number;
 }
 

packages/s2-core/src/facet/pivot-facet.ts

@@ -14,6 +14,8 @@ import {
   size,
 } from 'lodash';
 import {
+  DEFAULT_STYLE,
+  DEFAULT_TREE_ROW_WIDTH,
   LAYOUT_SAMPLE_COUNT,
   type CellCustomWidth,
   type ColCfg,
@@ -729,8 +731,10 @@ export class PivotFacet extends BaseFacet {
     const { rows, dataSet, rowCfg, treeRowsWidth } = this.cfg;
 
     // 1. 用户拖拽或手动指定的行头宽度优先级最高
-    if (rowCfg?.treeRowsWidth) {
-      return rowCfg?.treeRowsWidth;
+    // TODO: 由于历史原因, 存在两个行头宽度, (1. style.rowCfg.treeRowsWidth  2.style.treeRowsWidth) 暂时保持兼容
+    const currentTreeRowsWidth = treeRowsWidth ?? rowCfg?.treeRowsWidth;
+    if (currentTreeRowsWidth) {
+      return currentTreeRowsWidth;
     }
 
     // 2. 其次是自定义
@@ -754,7 +758,10 @@ export class PivotFacet extends BaseFacet {
       this.rowCellTheme.padding?.left +
       this.rowCellTheme.padding?.right;
 
-    return Math.max(treeRowsWidth, maxLabelWidth);
+    return Math.max(
+      currentTreeRowsWidth ?? DEFAULT_TREE_ROW_WIDTH,
+      maxLabelWidth,
+    );
   }
 
   /**

packages/s2-core/src/interaction/row-column-resize.ts

@@ -248,7 +248,11 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
         return {
           eventType: S2Event.LAYOUT_RESIZE_TREE_WIDTH,
           style: {
+            treeRowsWidth: displayWidth,
             rowCfg: {
+              /**
+               * @deprecated 已废弃, 以 style.treeRowsWidth 为准, 保持兼容, 暂时保留
+               */
               treeRowsWidth: displayWidth,
             },
           },

packages/s2-react/playground/config.ts

@@ -40,10 +40,15 @@ export const s2Options: S2Options = {
       trend: true,
     },
   },
+  hierarchyType: 'tree',
   style: {
     cellCfg: {
       height: 50,
     },
+    rowCfg: {
+      width: 300,
+    },
+    treeRowsWidth: 500,
     hierarchyCollapse: false,
   },
 };

s2-site/docs/common/style.zh.md

@@ -11,7 +11,7 @@ object **必选**,_default：null_ 功能描述：样式设置
 | --- | --- | :-:  | --- | --- | --- |
 | layoutWidthType | `adaptive` \| `colAdaptive`  \| `compact` |    |  | 单元格宽度布局类型<br> `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 <br> `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度<br> `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布 |
 | showTreeLeafNodeAlignDot | `boolean` |  |  false  | 树状模式下叶子节点是否显示层级占位点 |
-| treeRowsWidth | `number` |  |  120  | 树状模式行单元格宽度 （优先级大于 `rowCfg.width`) |
+| treeRowsWidth | `number` |  |  120  | 树状模式行单元格宽度 （优先级大于 `rowCfg.width` 和 `rowCfg.treeRowsWidth （已废弃）`) |
 | hierarchyCollapse | `boolean` |  |   `false` | 在树状结构模式下行头是否默认展开。 |
 | collapsedRows | `Record<string, boolean>` |  |  | 树状模式下行头自定义折叠、收起状态（透视表使用）。<br> key 值的生成需遵守指定的规则：'root[&] 行头维度值'。 [查看 demo](/zh/examples/basic/pivot#tree) |
 | cellCfg | [CellCfg](#cellcfg) |  |  |   单元格配置 |
@@ -48,6 +48,6 @@ object **必选**,_default：null_ 功能描述： 行样式配置
 | 参数 | 说明 | 类型 | 默认值 | 必选  |
 | --- | --- | --- | --- | :-:  |
 | width | 行单元格宽度，可根据当前行头节点动态设置宽度，如果是树状结构，请使用 `styles.treeRowsWidth` | `number | (rowNode: Node) => number` | 96 |  |
-| treeRowsWidth | 树状结构下，行单元格宽度 | `number` | 120 |  |
+| treeRowsWidth | 树状结构下，行单元格宽度 (**已废弃，请使用 `style.treeRowsWidth` 代替**) | `number` | 120 |  |
 | withByField | 根据 `field` 设置每行的宽度。`field` 是行的 id, [查看详情](/zh/docs/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E8%A1%8C%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) | `Record<string, number>` | - |  |
 | heightByField | 根据 `field` 设置每行的高度。`field` 是行的 id, [查看详情](/zh/docs/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E8%A1%8C%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) | `Record<string, number>` | - |  |