feat: 单元格行高拖拽支持多行文本自适应

antvis · Nov 18, 2024 · f74c65b · f74c65b
1 parent a515d27
commit f74c65b
Show file tree

Hide file tree

Showing 24 changed files with 11,026 additions and 8,380 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -548,6 +548,13 @@ describe('SpreadSheet Multi Line Text Tests', () => {
       },
     );
 
+    test('should render by infinity maxLines', async () => {
+      updateStyle(Infinity);
+      await s2.render(false);
+
+      matchCellStyleSnapshot();
+    });
+
     test('should render by maxLines if actual text contains "\\n"', async () => {
       updateStyle(1);
       s2.changeSheetSize(800, 600);
@@ -1063,5 +1070,33 @@ describe('SpreadSheet Multi Line Text Tests', () => {
 
       matchCellStyleSnapshot();
     });
+
+    test('should render by infinity maxLines', async () => {
+      updateStyle(Infinity);
+      await s2.render(false);
+
+      matchCellStyleSnapshot();
+    });
+
+    test('should render by infinity maxLines if actual text contains "\\n"', async () => {
+      updateStyle(Infinity);
+
+      s2.setDataCfg({
+        data: [
+          {
+            province: '浙江\n浙江',
+            city: '杭州\n杭州\n杭州',
+            type: '纸张\n纸张',
+            price: 12,
+            cost: 20,
+          },
+          ...s2.dataCfg.data,
+        ],
+      });
+
+      await s2.render();
+
+      matchCellStyleSnapshot();
+    });
   });
 });
diff --git a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap
@@ -122,6 +122,33 @@ Object {
 }
 `;
 
+exports[`Interaction Row Column Resize Tests should get vertical custom filed resize style 1`] = `
+Object {
+  "height": 30,
+  "heightByField": Object {
+    "test-a": 2,
+    "test-b": 2,
+  },
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get vertical filed resize style 1`] = `
+Object {
+  "height": 30,
+  "heightByField": Object {
+    "testField": 2,
+  },
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
 exports[`Interaction Row Column Resize Tests should get vertical filed resize style by field for current resize type 1`] = `
 Object {
   "height": undefined,

diff --git a/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts b/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts
@@ -41,6 +41,8 @@ const MockRootInteraction =
   RootInteraction as unknown as jest.Mock<RootInteraction>;
 
 describe('Interaction Row Column Resize Tests', () => {
+  const mockCell = createMockCellInfo('test').mockCell;
+
   let rowColumnResizeInstance: RowColumnResize;
   let s2: SpreadSheet;
   let mockRootInteraction: RootInteraction;
@@ -92,8 +94,16 @@ describe('Interaction Row Column Resize Tests', () => {
   const emitResize = (
     directionType: ResizeDirectionType,
     effect: ResizeAreaEffect,
-    meta?: Partial<ViewMeta>,
+    defaultMeta?: Partial<ViewMeta>,
   ) => {
+    const meta = {
+      ...defaultMeta,
+      rowId: '0',
+      rowIndex: 0,
+      field: 'testField',
+      id: 'testFieldId',
+    } as ResizeInfo['meta'];
+
     const resizeInfo: ResizeInfo = {
       theme: {},
       type: directionType,
@@ -104,13 +114,8 @@ describe('Interaction Row Column Resize Tests', () => {
       isResizeArea: true,
       effect,
       size: 3,
-      meta: {
-        ...meta,
-        rowId: '0',
-        rowIndex: 0,
-        field: 'testField',
-        id: 'testFieldId',
-      } as ResizeInfo['meta'],
+      meta,
+      cell: mockCell,
     };
 
     emitResizeEvent(
@@ -243,6 +248,7 @@ describe('Interaction Row Column Resize Tests', () => {
       isResizeArea: true,
       effect: ResizeAreaEffect.Cell,
       size: 3,
+      cell: mockCell,
     } as ResizeInfo;
 
     emitResizeEvent(
@@ -294,6 +300,7 @@ describe('Interaction Row Column Resize Tests', () => {
         field: 'testField',
         id: 'testFieldId',
       } as ResizeInfo['meta'],
+      cell: mockCell,
     };
 
     emitResizeEvent(
@@ -369,6 +376,7 @@ describe('Interaction Row Column Resize Tests', () => {
       isResizeArea: true,
       effect: ResizeAreaEffect.Cell,
       size: 3,
+      cell: mockCell,
     } as ResizeInfo;
 
     emitResizeEvent(
@@ -400,6 +408,14 @@ describe('Interaction Row Column Resize Tests', () => {
     const resize = jest.fn();
     const rowWidthResize = jest.fn();
 
+    s2.setOptions({
+      rowCell: {
+        maxLines: 3,
+      },
+      dataCell: {
+        maxLines: Infinity,
+      },
+    });
     s2.on(S2Event.LAYOUT_RESIZE, resize);
     s2.on(S2Event.LAYOUT_RESIZE_ROW_HEIGHT, rowWidthResize);
 
@@ -418,6 +434,7 @@ describe('Interaction Row Column Resize Tests', () => {
       meta: {
         field: 'testField',
       } as Node,
+      cell: mockCell,
     };
 
     emitResizeEvent(
@@ -445,11 +462,15 @@ describe('Interaction Row Column Resize Tests', () => {
     const resizeDetail: ResizeParams = {
       info: resizeInfo,
       style: {
+        dataCell: {
+          maxLines: 1,
+        },
         rowCell: {
           height: 2,
           heightByField: {
             [resizeInfo.meta.field!]: 2,
           },
+          maxLines: 1,
         },
       },
     };
@@ -592,17 +613,24 @@ describe('Interaction Row Column Resize Tests', () => {
   });
 
   test('should get vertical filed resize style', () => {
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Vertical,
-      ResizeAreaEffect.Field,
-    );
-
-    expect(s2.options.style!.colCell!.heightByField).toEqual({
-      [resizeInfo.meta.field!]: resizeInfo.height,
+    s2.setOptions({
+      colCell: {
+        maxLines: 3,
+      },
     });
+
+    emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Field);
+
+    expect(s2.options.style!.colCell).toMatchSnapshot();
   });
 
   test('should get vertical custom filed resize style', () => {
+    s2.setOptions({
+      colCell: {
+        maxLines: Infinity,
+      },
+    });
+
     jest.spyOn(s2, 'isCustomColumnFields').mockImplementationOnce(() => true);
     jest
       .spyOn(s2.facet, 'getColNodes')
@@ -612,17 +640,12 @@ describe('Interaction Row Column Resize Tests', () => {
         createMockCellInfo('test-c', { level: 1 }).getNode(),
       ]);
 
-    const resizeInfo = emitResize(
-      ResizeDirectionType.Vertical,
-      ResizeAreaEffect.Field,
-      { level: 0 },
-    );
+    emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Field, {
+      level: 0,
+    });
 
     // 获取同 level 的 style
-    expect(s2.options.style!.colCell!.heightByField).toEqual({
-      'test-a': resizeInfo.height,
-      'test-b': resizeInfo.height,
-    });
+    expect(s2.options.style!.colCell).toMatchSnapshot();
   });
 
   test('should not reset interaction and hidden tooltip when resize start', () => {
@@ -720,6 +743,7 @@ describe('Interaction Row Column Resize Tests', () => {
       resizedHeight: 0,
       resizedWidth: 0,
       size: 3,
+      cell: mockCell,
     } as ResizeInfo;
 
     emitResizeEvent(

diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts
@@ -23,6 +23,7 @@ import * as dataConfig from 'tests/data/mock-dataset.json';
 import * as simpleDataConfig from 'tests/data/simple-data.json';
 import { assembleDataCfg, assembleOptions } from '.';
 import {
+  CELL_PADDING,
   DEFAULT_FROZEN_COUNTS,
   EventController,
   FrozenGroupArea,
@@ -312,10 +313,20 @@ export const createMockCellInfo = (
     getActualText: jest.fn(),
     getFieldValue: jest.fn(),
     getBBoxByType: jest.fn(() => {}),
-    getStyle: jest.fn(() => {}),
+    getStyle: jest.fn(() => ({
+      cell: {
+        padding: {
+          top: CELL_PADDING,
+          right: CELL_PADDING,
+          bottom: CELL_PADDING,
+          left: CELL_PADDING,
+        },
+      },
+    })),
     hideInteractionShape: jest.fn(),
     updateByState: jest.fn(),
     isTextOverflowing: jest.fn(),
+    getTextLineHeight: jest.fn(() => 16),
   } as unknown as S2CellType;
 
   const getNode = () => mockCellViewMeta as unknown as Node;

diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
@@ -299,6 +299,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return this.textShape?.getLineBoundingRects() || [];
   }
 
+  /**
+   * 获取文本包围盒
+   */
+  public getTextLineHeight() {
+    return this.textShape?.parsedStyle?.metrics?.lineHeight;
+  }
+
   /**
    * 获取单元格空值占位符
    */

diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts
@@ -294,6 +294,7 @@ export class ColCell extends HeaderCell<ColHeaderConfig> {
       width: resizeAreaWidth,
       height,
       meta: this.meta,
+      cell: this,
     });
 
     resizeArea.appendChild(
@@ -395,6 +396,7 @@ export class ColCell extends HeaderCell<ColHeaderConfig> {
       width,
       height,
       meta: this.meta,
+      cell: this,
     });
 
     resizeArea.appendChild(

diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -181,6 +181,7 @@ export class CornerCell extends HeaderCell<CornerHeaderConfig> {
       width,
       height,
       meta: this.meta,
+      cell: this,
     });
 
     resizeArea.appendChild(

diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts
@@ -288,6 +288,7 @@ export class RowCell extends HeaderCell<RowHeaderConfig> {
       width,
       height,
       meta: this.meta,
+      cell: this,
     });
 
     resizeArea.appendChild(

diff --git a/packages/s2-core/src/cell/table-data-cell.ts b/packages/s2-core/src/cell/table-data-cell.ts
@@ -134,6 +134,7 @@ export class TableDataCell extends DataCell {
       width,
       height,
       meta: this.meta,
+      cell: this,
     });
 
     resizeArea.appendChild(

diff --git a/packages/s2-core/src/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts
@@ -66,6 +66,7 @@ export interface ResizeInfo {
 
   /** 当前拖拽热区对应的节点信息 */
   meta: Node | ViewMeta;
+  cell: S2CellType;
 
   /** 拖拽后的宽度 */
   resizedWidth?: number;