fix(core): 文本区域高度不应超过视口高度 (#2265)

Co-authored-by: Jinke Li <[email protected]>
antvis · Jul 13, 2023 · 0507222 · 0507222
1 parent 8be446d
commit 0507222
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 8 deletions.
diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts
@@ -1,6 +1,7 @@
 import type { Point } from '@antv/g-canvas';
 import { GM } from '@antv/g-gesture';
 import { find, get } from 'lodash';
+import type { SimpleBBox } from '@antv/g-canvas';
 import {
   CellTypes,
   KEY_GROUP_ROW_RESIZE_AREA,
@@ -27,7 +28,6 @@ import {
 } from '../utils/interaction/resize';
 import { isMobile } from '../utils/is-mobile';
 import { getAdjustPosition } from '../utils/text-absorption';
-import { checkIsLinkField } from '../utils/interaction/link-field';
 import { shouldAddResizeArea } from './../utils/interaction/resize';
 import { HeaderCell } from './header-cell';
 
@@ -415,7 +415,7 @@ export class RowCell extends HeaderCell {
     return width - this.getTextIndent() - this.getActionIconsWidth();
   }
 
-  protected getTextArea() {
+  protected getTextArea(): SimpleBBox {
     const content = this.getContentArea();
     const textIndent = this.getTextIndent();
     return {
@@ -425,16 +425,37 @@ export class RowCell extends HeaderCell {
     };
   }
 
+  protected getAdjustTextAreaHeight(
+    textArea: SimpleBBox,
+    scrollY: number,
+    viewportHeight: number,
+  ): number {
+    let adjustTextAreaHeight = textArea.height;
+    if (
+      !this.spreadsheet.facet.vScrollBar &&
+      textArea.y + textArea.height > scrollY + viewportHeight
+    ) {
+      adjustTextAreaHeight = scrollY + viewportHeight - textArea.y;
+    }
+    return adjustTextAreaHeight;
+  }
+
   protected getTextPosition(): Point {
     const textArea = this.getTextArea();
-    const { scrollY, viewportHeight: height } = this.headerConfig;
+    const { scrollY, viewportHeight } = this.headerConfig;
+
+    const adjustTextAreaHeight = this.getAdjustTextAreaHeight(
+      textArea,
+      scrollY,
+      viewportHeight,
+    );
 
     const { fontSize } = this.getTextStyle();
     const textY = getAdjustPosition(
       textArea.y,
-      textArea.height,
+      adjustTextAreaHeight,
       scrollY,
-      height,
+      viewportHeight,
       fontSize,
     );
     const textX = getTextAndFollowingIconPosition(

diff --git a/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import { LangType, S2Options, setLang } from '@antv/s2';
+import { LangType, S2Options, setLang, SpreadSheet } from '@antv/s2';
+import { getContainer, sleep } from 'tests/util/helpers';
 import * as mockDataConfig from '../data/simple-data.json';
+import { pivotSheetDataCfg } from '../../playground/config';
 import { SheetComponent } from '../../src';
-import { getContainer } from '../util/helpers';
 import 'antd/dist/antd.min.css';
 
 const s2Options: S2Options = {
@@ -17,6 +18,8 @@ const s2Options: S2Options = {
   hierarchyType: 'grid',
 };
 
+let s2: SpreadSheet;
+
 describe('Pagination Tests', () => {
   let container: HTMLDivElement;
   beforeEach(() => {
@@ -94,4 +97,35 @@ describe('Pagination Tests', () => {
       document.querySelector('.ant-pagination-options-size-changer'),
     ).toBeFalsy();
   });
+
+  test('should row header cell render text position based on the actual cell height when pagination is show', async () => {
+    act(() => {
+      ReactDOM.render(
+        <SheetComponent
+          options={{
+            ...s2Options,
+            pagination: {
+              ...s2Options.pagination,
+              current: 1,
+              pageSize: 1,
+            },
+            height: 400,
+          }}
+          dataCfg={pivotSheetDataCfg as any}
+          onMounted={(instance) => {
+            s2 = instance;
+          }}
+          showPagination
+        />,
+        container,
+      );
+    });
+
+    await sleep(1000);
+
+    expect(
+      s2.foregroundGroup.cfg.children[0].headerConfig.data[0].belongsCell
+        .textShapes[0].attrs.y,
+    ).toBe(9);
+  });
 });
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -188,6 +188,7 @@ function MainLayout() {
   const [tableSheetColumnType, setTableSheetColumnType] = React.useState<
     'single' | 'multiple'
   >('single');
+  const [pageSize, setPageSize] = React.useState(10);
 
   //  ================== Refs ========================
   const s2Ref = React.useRef<SpreadSheet>();
@@ -330,7 +331,7 @@ function MainLayout() {
     {},
     {
       pagination: showPagination && {
-        pageSize: 10,
+        pageSize,
         current: 1,
       },
       tooltip: {
@@ -550,6 +551,14 @@ function MainLayout() {
                 >
                   改变表格大小 (s2.changeSheetSize)
                 </Button>
+                <Input
+                  style={{ width: 150 }}
+                  onChange={(e) => setPageSize(+e.target.value)}
+                  defaultValue={pageSize}
+                  suffix="条"
+                  prefix="每页条数"
+                  size="small"
+                />
                 <Popover
                   placement="bottomRight"
                   content={