feat: 增加自定义行头最大固定宽度的功能

packages/s2-core/__tests__/spreadsheet/corner-spec.ts

@@ -108,4 +108,24 @@ describe('PivotSheet Corner Tests', () => {
     expect(colsHierarchy.sampleNodeForLastLevel).toBeNull();
     expect(cornerNodes).toHaveLength(0);
   });
+
+  test('should customize cornerBbox width and max width when freeze row header', () => {
+    // 默认占据一半宽度
+    let cornerBBox = s2.facet.cornerBBox;
+
+    expect(cornerBBox.originalWidth).toEqual(192);
+    expect(cornerBBox.width).toEqual(150);
+
+    // 自定义冻结宽度
+    s2.setOptions({
+      frozen: {
+        rowHeader: 0.4,
+      },
+    });
+    s2.render();
+
+    cornerBBox = s2.facet.cornerBBox;
+    expect(cornerBBox.originalWidth).toEqual(192);
+    expect(cornerBBox.width).toEqual(120);
+  });
 });

packages/s2-core/__tests__/unit/cell/col-cell-spec.ts

@@ -17,7 +17,7 @@ describe('Col Cell Tests', () => {
 
   beforeEach(() => {
     s2 = new MockPivotSheet(getContainer());
-    s2.isScrollContainsRowHeader = () => true;
+    s2.isFrozenRowHeader = () => false;
     s2.dataSet = new MockPivotDataSet(s2);
   });
 

packages/s2-core/__tests__/unit/facet/bbox/cornerBBox-spec.ts

@@ -21,11 +21,14 @@ describe('cornerBBox test', () => {
         return 80;
       },
       spreadsheet: {
-        isScrollContainsRowHeader() {
-          return false;
+        isFrozenRowHeader() {
+          return true;
         },
         options: {
           width: 400,
+          frozen: {
+            rowHeader: true,
+          },
           style: {
             colCell: {
               hideMeasureColumn: false,
@@ -37,7 +40,7 @@ describe('cornerBBox test', () => {
   });
 
   test('should return original width when scroll contains row header', () => {
-    mockFacet.spreadsheet.isScrollContainsRowHeader = () => true;
+    mockFacet.spreadsheet.isFrozenRowHeader = () => false;
 
     const bbox = new CornerBBox(mockFacet, true);
 

packages/s2-core/__tests__/unit/facet/bbox/panelBBox-spec.ts

@@ -37,8 +37,8 @@ describe('PanelBBox test', () => {
       },
 
       spreadsheet: {
-        isScrollContainsRowHeader() {
-          return false;
+        isFrozenRowHeader() {
+          return true;
         },
         enableFrozenHeaders() {
           return shouldEnableFrozenHeaders;

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

@@ -65,7 +65,6 @@ jest.mock('@/sheet-type', () => {
         getLayoutWidthType: jest.fn().mockReturnValue('adaptive'),
         emit: jest.fn(),
         getColumnLeafNodes: jest.fn().mockReturnValue([]),
-        isScrollContainsRowHeader: jest.fn(),
         isHierarchyTreeType: jest.fn(),
         facet: {
           getFreezeCornerDiffWidth: jest.fn(),

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

@@ -48,7 +48,6 @@ jest.mock('@/sheet-type', () => {
         getTotalsConfig: jest.fn(),
         getLayoutWidthType: jest.fn().mockRejectedValue('adaptive'),
         emit: jest.fn(),
-        isScrollContainsRowHeader: jest.fn(),
         getColumnLeafNodes: jest.fn().mockReturnValue([]),
         isHierarchyTreeType: jest.fn(),
         getCanvasElement: () =>
@@ -60,6 +59,9 @@ jest.mock('@/sheet-type', () => {
         enableFrozenHeaders() {
           return false;
         },
+        isFrozenRowHeader() {
+          return false;
+        },
         isValueInCols: jest.fn(),
         isCustomHeaderFields: jest.fn(),
         measureTextWidthRoughly: jest.fn(),

packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts

@@ -643,7 +643,6 @@ describe('PivotSheet Tests', () => {
 
   test('should default frozen row header', () => {
     expect(s2.isFrozenRowHeader()).toBeTruthy();
-    expect(s2.isScrollContainsRowHeader()).toBeFalsy();
   });
 
   test('should get value is in columns', () => {

packages/s2-core/__tests__/util/helpers.ts

@@ -127,7 +127,6 @@ export const createFakeSpreadSheet = () => {
   s2.isCustomHeaderFields = jest.fn(() => false);
   s2.isCustomRowFields = jest.fn(() => false);
   s2.isCustomColumnFields = jest.fn(() => false);
-  s2.isScrollContainsRowHeader = jest.fn(() => true);
 
   const interaction = new RootInteraction(s2 as unknown as SpreadSheet);
 

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

@@ -146,8 +146,7 @@ export class ColCell extends HeaderCell {
     const { isLeaf } = this.meta;
     const { width, cornerWidth = 0, scrollX = 0 } = this.headerConfig;
 
-    const scrollContainsRowHeader =
-      this.spreadsheet.isScrollContainsRowHeader();
+    const scrollContainsRowHeader = !this.spreadsheet.isFrozenRowHeader();
     const textStyle = this.getTextStyle();
     const contentBox = this.getBBoxByType(CellClipBox.CONTENT_BOX);
     const iconStyle = this.getIconStyle();
@@ -330,7 +329,7 @@ export class ColCell extends HeaderCell {
       spreadsheet,
     } = this.headerConfig;
 
-    const scrollContainsRowHeader = spreadsheet.isScrollContainsRowHeader();
+    const scrollContainsRowHeader = !spreadsheet.isFrozenRowHeader();
     const resizeStyle = this.getResizeAreaStyle();
 
     const resizeAreaBBox: SimpleBBox = {

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

@@ -76,10 +76,8 @@ export const MIN_CELL_HEIGHT = 16;
 // data precision
 export const PRECISION = 16;
 
-export const IMAGE = 'image';
-
 // 角头最大占整个容器的比例 (0-1)
-export const CORNER_MAX_WIDTH_RATIO = 0.5;
+export const DEFAULT_CORNER_MAX_WIDTH_RATIO = 0.5;
 
 /** 布局采样数 */
 export const LAYOUT_SAMPLE_COUNT = 50;

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

@@ -201,9 +201,11 @@ export enum DeviceType {
 
 export interface S2PivotSheetFrozenOptions {
   /**
-   * 是否冻结行头 (含角头区域, 透视表有效)
+   * 是否冻结行头 (含角头区域, 透视表有效),
+   * 当值为 number 时，标识行头冻结的最大区域，取值范围： (0, 1)，0 表示不固定行头
+   * 当值为 boolean 时，true 对应冻结最大区域为 0.5, false 对应 0
    */
-  rowHeader?: boolean;
+  rowHeader?: boolean | number;
 }
 
 export interface S2TableSheetFrozenOptions {

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

@@ -534,7 +534,7 @@ export abstract class BaseFacet {
   }
 
   getRealScrollX = (scrollX: number, hRowScroll = 0) =>
-    this.spreadsheet.isScrollContainsRowHeader() ? scrollX : hRowScroll;
+    this.spreadsheet.isFrozenRowHeader() ? hRowScroll : scrollX;
 
   protected calculateCornerBBox() {
     this.cornerBBox = new CornerBBox(this, true);
@@ -675,7 +675,7 @@ export abstract class BaseFacet {
 
   renderRowScrollBar = (rowScrollX: number) => {
     if (
-      !this.spreadsheet.isScrollContainsRowHeader() &&
+      this.spreadsheet.isFrozenRowHeader() &&
       this.cornerBBox.width < this.cornerBBox.originalWidth
     ) {
       const maxOffset = this.cornerBBox.originalWidth - this.cornerBBox.width;
@@ -749,8 +749,7 @@ export abstract class BaseFacet {
     if (Math.floor(width) < Math.floor(realWidth)) {
       const halfScrollSize = this.scrollBarSize / 2;
       const { maxY } = this.getScrollbarPosition();
-      const isScrollContainsRowHeader =
-        this.spreadsheet.isScrollContainsRowHeader();
+      const isScrollContainsRowHeader = !this.spreadsheet.isFrozenRowHeader();
       const finalWidth =
         width + (isScrollContainsRowHeader ? this.cornerBBox.width : 0);
       const finalPosition = {

packages/s2-core/src/facet/bbox/cornerBBox.ts

@@ -1,4 +1,5 @@
-import { CORNER_MAX_WIDTH_RATIO } from '../../common/constant';
+import { clamp, isBoolean } from 'lodash';
+import { DEFAULT_CORNER_MAX_WIDTH_RATIO } from '../../common/constant';
 import { BaseBBox } from './baseBBox';
 
 export class CornerBBox extends BaseBBox {
@@ -41,19 +42,24 @@ export class CornerBBox extends BaseBBox {
       rowsHierarchy.width + this.facet.getSeriesNumberWidth(),
     );
 
-    // 在行头不固定时，无需对角头 BBox 进行裁剪
-    if (this.spreadsheet.isScrollContainsRowHeader()) {
-      return this.originalWidth;
+    // 在行头固定时，需对角头 BBox 进行裁剪
+    if (this.spreadsheet.isFrozenRowHeader()) {
+      return this.adjustCornerBBoxWidth();
     }
 
-    return this.adjustCornerBBoxWidth();
+    return this.originalWidth;
   }
 
   private adjustCornerBBoxWidth() {
     const { colsHierarchy } = this.layoutResult;
-    const { width: canvasWidth } = this.spreadsheet.options;
+    const { width: canvasWidth, frozen } = this.spreadsheet.options;
+
+    const rowHeader = frozen?.rowHeader!;
+    const ratio = isBoolean(rowHeader)
+      ? DEFAULT_CORNER_MAX_WIDTH_RATIO
+      : clamp(rowHeader, 0, 1);
 
-    const maxCornerBBoxWidth = canvasWidth! * CORNER_MAX_WIDTH_RATIO;
+    const maxCornerBBoxWidth = canvasWidth! * ratio;
     const colsHierarchyWidth = colsHierarchy?.width;
     const panelWidthWidthUnClippedCorner = canvasWidth! - this.originalWidth;
 

packages/s2-core/src/facet/header/frame.ts

@@ -168,7 +168,7 @@ export class Frame extends Group {
       cornerWidth +
       Frame.getVerticalBorderWidth(spreadsheet)! +
       viewportWidth +
-      (spreadsheet.isScrollContainsRowHeader() ? scrollX : 0);
+      (spreadsheet.isFrozenRowHeader() ? 0 : scrollX);
     const y = position.y + cornerHeight + horizontalBorderWidth! / 2;
 
     renderLine(

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

@@ -79,19 +79,11 @@ export class PivotSheet extends SpreadSheet {
     return this.options.hierarchyType === 'tree';
   }
 
-  /**
-   * Check whether scroll contains row header
-   * For now contains row header in ListSheet mode by default
-   */
-  public isScrollContainsRowHeader(): boolean {
-    return !this.isFrozenRowHeader();
-  }
-
   /**
    * Scroll Freeze Row Header
    */
   public isFrozenRowHeader(): boolean {
-    return this.options?.frozen?.rowHeader!;
+    return !!this.options?.frozen?.rowHeader!;
   }
 
   /**

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

@@ -228,12 +228,6 @@ export abstract class SpreadSheet extends EE {
    */
   public abstract isHierarchyTreeType(): boolean;
 
-  /**
-   * Check whether scroll contains row header
-   * For now contains row header in ListSheet mode by default
-   */
-  public abstract isScrollContainsRowHeader(): boolean;
-
   /**
    * Scroll Freeze Row Header
    */

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

@@ -76,14 +76,6 @@ export class TableSheet extends SpreadSheet {
     return false;
   }
 
-  /**
-   * Check whether scroll contains row header
-   * For now contains row header in ListSheet mode by default
-   */
-  public isScrollContainsRowHeader(): boolean {
-    return false;
-  }
-
   /**
    * Scroll Freeze Row Header
    */

packages/s2-react/playground/index.tsx

@@ -484,7 +484,7 @@ function MainLayout() {
                   <Switch
                     checkedChildren="冻结行头开"
                     unCheckedChildren="冻结行头关"
-                    defaultChecked={mergedOptions.frozen?.rowHeader}
+                    defaultChecked={!!mergedOptions.frozen?.rowHeader}
                     onChange={(checked) => {
                       updateOptions({
                         frozen: {

s2-site/docs/api/basic-class/spreadsheet.en.md

@@ -29,7 +29,6 @@ s2.isPivotMode()
 | getDataSet                 | get dataset                                                                                                                                                                                      | (options: [S2Options](/docs/api/general/S2Options) ) => [BaseDataSet](/docs/api/basic-class/base-data-set)                                                             |                                                                      |
 | isPivotMode                | Is it a pivot table                                                                                                                                                                              | `() => boolean`                                                                                                                                                        |                                                                      |
 | isHierarchyTreeType        | Is it a tree structure                                                                                                                                                                           | `() => boolean`                                                                                                                                                        |                                                                      |
-| isScrollContainsRowHeader  | Whether it is a scroll that includes the line header                                                                                                                                             | `() => boolean`                                                                                                                                                        |                                                                      |
 | isFrozenRowHeader          | Whether it is the state of freezing line header                                                                                                                                                  | `() => boolean`                                                                                                                                                        |                                                                      |
 | isTableMode                | Is it a schedule                                                                                                                                                                                 | `() => boolean`                                                                                                                                                        |                                                                      |
 | isValueInCols              | Is the value placed at the beginning of the line                                                                                                                                                 | `() => boolean`                                                                                                                                                        |                                                                      |

s2-site/docs/api/basic-class/spreadsheet.zh.md

@@ -29,7 +29,6 @@ s2.isPivotMode()
 | getDataSet | 获取数据集                                                                                                                  | (options: [S2Options](/docs/api/general/S2Options)) => [BaseDataSet](/docs/api/basic-class/base-data-set) |    |
 | isPivotMode | 是否是透视表                                                                                                                 | `() => boolean` |    |
 | isHierarchyTreeType | 是否是树状结构                                                                                                                | `() => boolean` |    |
-| isScrollContainsRowHeader | 是否是包含行头的滚动                                                                                                             | `() => boolean` |    |
 | isFrozenRowHeader | 是否是冻结行头状态                                                                                                              | `() => boolean` |    |
 | isTableMode | 是否是明细表                                                                                                                 | `() => boolean` |    |
 | isValueInCols | 是否是数值置于行头                                                                                                              | `() => boolean` |    |

s2-site/docs/common/frozen.en.md

@@ -9,7 +9,7 @@ Function description: Row and column header freeze configuration
 
 | parameter        | type      | required | Defaults | Functional description                                                     |
 | ---------------- | --------- | -------- | -------- | -------------------------------------------------------------------------- |
-| rowHeader        | `boolean` |          | `true`   | Freeze row headers (pivot tables work)                                     |
+| rowHeader        | `boolean` |          | `true`   | When the value is number, it identifies the maximum area where the line header is frozen, and the range of values ​​is (0, 1). 0 means that the line header is not frozen. <br/>When the value is boolean, true corresponds to freezing the maximum area is 0.5, false corresponds to 0. <br/> (only pivot mode works)                                     |
 | rowCount         | `number`  |          | `0`      | The number of frozen rows, counting from the top (schedules are valid)     |
 | colCount         | `number`  |          | `0`      | The number of frozen columns, counting from the left (schedules are valid) |
 | trailingRowCount | `number`  |          | `0`      | Number of frozen rows, counting from the bottom (valid for schedules)      |

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

@@ -9,7 +9,7 @@ order: 1
 
 | 参数 | 类型 | 必选  | 默认值 | 功能描述 |
 | -- | --- | --  | -- | --- |
-| rowHeader | `boolean` |  |   `true` | 冻结行头 （透视表有效） |
+| rowHeader | `boolean`\|`number` |  |   `true` | 冻结行头<br/>当值为 number 时，标识行头冻结的最大区域，取值范围： (0, 1)，0 表示不固定行头。<br/>当值为 boolean 时，true 对应冻结最大区域为 0.5, false 对应 0。<br/> （透视表有效） |
 | rowCount | `number` |  |  `0`  | 冻结行的数量，从顶部开始计数 （明细表有效） |
 | colCount | `number` |  |  `0`  | 冻结列的数量，从左侧开始计数 （明细表有效） |
 | trailingRowCount | `number` |    | `0` | 冻结行数量，从底部开始计数 （明细表有效） |

s2-site/examples/case/comparison/demo/time-spend.tsx

@@ -105,7 +105,7 @@ class CustomFrame extends Frame {
       scrollX = 0,
       spreadsheet,
     } = cfg;
-    const scrollContainsRowHeader = spreadsheet.isScrollContainsRowHeader();
+    const scrollContainsRowHeader = !spreadsheet.isFrozenRowHeader();
     const splitLine = spreadsheet.theme?.splitLine;
     const { rowsHierarchy } = spreadsheet.facet.layoutResult;
     const rootNodes = rowsHierarchy.getNodesLessThanLevel(0);