dataCell单元格渲染多行文本无法自适应高度🐛

[Gxyrious]

🏷 Version

Package	Version
@antv/s2	2.0.0-next.14
@antv/s2-react	-
@antv/s2-vue	-

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

• 需求是让数据单元格(dataCell)能够自动换行，dataCell内容的长度是不确定的，希望能够在保持默认宽度下自适应cell的高度。虽然我希望dataCell能够自动换行并自适应高度，但行头也存在这种问题。

• 在next分支的仓库里找到了相关的测试，并且本地跑了一下，但是没通过，node版本是v21.2.0

• 在G的文档中看到了maxLines的默认值是'infinity'，这个值貌似是起作用的，虽然源码中maxLines类型是number?，但无论是'infinity'还是诸如4的数字，都会有无法自适应的情况。

⌨️ Code Snapshots

把官网示例的透视表改成了明细表：https://s2.antv.antgroup.com/examples/layout/custom#multi-line-text，下面是改完的代码：

import {
  CellTextWordWrapStyle,
  TableSheet,
  S2DataConfig,
  S2Options,
} from '@antv/s2';
import '@antv/s2/dist/style.min.css';

fetch('https://assets.antv.antgroup.com/s2/basic.json')
  .then((res) => res.json())
  .then(async (data) => {
    const container = document.getElementById('container');
    const s2DataConfig: S2DataConfig = {
      fields: {
        columns: ['province', 'city', 'type', 'price', 'cost'],
      },
      meta: [
        {
          field: 'province',
          name: '省份',
        },
        {
          field: 'city',
          name: '城市',
        },
        {
          field: 'type',
          name: '商品类别',
        },
        {
          field: 'price',
          name: '价格',
        },
        {
          field: 'cost',
          name: '成本',
        },
      ],
      data: [
        {
          province: '浙江浙江浙江浙江浙江浙江浙江浙江浙江浙江浙江浙江',
          city: '杭州杭州杭州杭州杭州杭州杭州杭州杭州杭州杭州杭州',
          type: '纸张纸张纸张纸张纸张纸张纸张纸张纸张纸张',
          price: '价格价格价格价格价格价格价格价格价格价格价格价格价格价格价格价格价格价格',
          cost: '花费花费花费花费花费花费',
        },
      ],
    };

    const cellTextWordWrapStyle: CellTextWordWrapStyle = {
      // 最大行数，文本超出后将被截断
      maxLines: 'infinity', // 如果是数字也会有问题
      // 文本是否换行
      wordWrap: true,
      // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
      textOverflow: 'ellipsis',
    };

    const s2Options: S2Options = {
      width: 600,
      height: 480,
      style: {
        // 数值不建议换行, 容易产生歧义
        dataCell: cellTextWordWrapStyle,
      },
    };

    const s2 = new TableSheet(container, s2DataConfig, s2Options);

    await s2.render();
  });

🔗 Reproduce Link

🤔 Steps to Reproduce

借助官网上的这个示例可以直接体现：https://s2.antv.antgroup.com/examples/layout/custom#multi-line-text

1. 将cellTextWordWrapStyle中原来的maxLines替换为4或上述的'infinity'

const cellTextWordWrapStyle: CellTextWordWrapStyle = {
  // 最大行数，文本超出后将被截断
  maxLines: 4,
  // 文本是否换行
  wordWrap: true,
  // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
  textOverflow: 'ellipsis',
};

2. 把s2DataConfig.data里的province多增加一些：

  data: [
    {
      province: '浙江浙江浙江浙江浙江浙江浙江浙江浙江浙江浙江浙江',
      city: '杭州杭州杭州杭州杭州杭州',
      type: '纸张纸张纸张纸张纸张',
      price: '2',
      cost: '20',
    },
    ...data,
  ],

这个行头单元格并没有高度自适应：

比较神奇的是改这个杭州的city是可以自适应的：

  data: [
    {
      province: '浙江浙江浙江浙江浙江浙江',
      city: '杭州杭州杭州杭州杭州杭州杭州杭州杭州杭州杭州杭州',
      type: '纸张纸张纸张纸张纸张',
      price: '2',
      cost: '20',
    },
    ...data,
  ],

😊 Expected Behavior

希望能够设置maxlines为'infinity'，使得无论内容多长都能够自动换行并高度自适应。

😅 Current Behavior

单元格虽然能够换行，但是高度无法自适应。

💻 System information

Environment	Info
System	Ubuntu 22.04.1 LTS
Browser	Chrome v119.0.6045.159(64位)，firefox122.0.1(64位)

[Jinke Li]

在next分支的仓库里找到了相关的测试，并且本地跑了一下，但是没通过，node版本是v21.2.0

这个应该和你是 Ubuntu 系统有关, 本地和 CI 的环境都是 macOS

比较神奇的是改这个杭州的city是可以自适应的

确实有问题, 看来单测覆盖的场景还不够全, 目前看起来当前行的高度以最后一个节点为准了, 空了我排查下

[github-actions]

你好 @Gxyrious，很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @Gxyrious, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

[Jinke Li]

希望能够设置maxlines为'infinity'，使得无论内容多长都能够自动换行并高度自适应。

这个是 g 的文档有问题，是 Infinity, 它就是 number 类型, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity

另外 S2 只支持具体的数字, 才能计算高度, 不支持 Infinity

[Gxyrious]

能设置个很大的数字实现类似自动换行的效果就可以 感谢修复

[Jinke Li]

fixed #2598

[Jinke Li]

🎉 This issue has been resolved in version @antv/s2-v2.0.0-next.15 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Jinke Li]

🎉 This issue has been resolved in version @antv/s2-react-v2.0.0-next.14 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀