🐛明细表紧凑布局文字溢出

[wzdong26]

🏷 Version

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

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

设置 S2Options style. layoutWidthType = 'compact'，dataCell.maxLines = 1 后，拖拽 resize 单元格宽高会导致文本向左向上溢出。

【尝试了将 S2Options style. layoutWidthType 设置为非 'compact' 的任意值或者将 dataCell.maxLines 设置为 >= 2 都能解决文本异常溢出的情况，具体不知道是什么原因影响】

关联 issues：#2900 虽然已经在 2.0.0-next.31 版本专门提了 pr 解决这一问题，但好像还是没有完全解决。

我尝试看了一下 pr #2953 的改动，感觉仅靠对 「紧凑模式极端情况处理」、「调整单元格最小可拖拽宽度的默认值」并不能完全解决。

这一问题看样子并不是在极端情况下才复现的，可能 pr 解决的是 拖拽单元格宽度极端 情况下的复现情况，但当单元格内文本换行过多时初次渲染也会出现文字溢出异常。

20241107-174602.mp4

⌨️ Code Snapshots

const s2Options = {
  style: {
    layoutWidthType: LayoutWidthType.Compact,
    colCell: {
      maxLines: 1,
      wordWrap: true,
      textOverflow: 'ellipsis',
    },
    dataCell: {
      maxLines: 1,
      wordWrap: true,
      textOverflow: 'ellipsis',
    },
  },
  // ... ...
} satisfies S2Options;

const header = [' ', 'item_name', 'item_cnt', 'pay_amount'];
const data = [
  [
    'Alice猫粮-5kg装',
    'Alice狗粮-10kg装Alice狗粮-\nAlice狗粮-10kg\nAlice狗粮-10kg\nAlice狗粮-10kg',
    '360.0',
  ],
 // ... ...
];
const s2DataConfig: S2DataConfig = {
  data: data.map((e, i) => [`${i + 1}`, ...e]) as any,
  meta: header.map((e, i) => ({ field: `${i}`, name: e })),
  fields: {
    columns: Array.from({ length: 4 }, (_, i) => `${i}`),
  },
};

function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const container = containerRef.current!;
    const s2 = new TableSheet(container, s2DataConfig, s2Options);
    s2.render();
  }, []);
  return <div style={{ width: '100vw', height: '100vh' }} ref={containerRef} />;
}

export default App;

🔗 Reproduce Link

https://stackblitz.com/edit/vitejs-vite-h4yav4?file=src%2FApp.tsx
可以看这个在线code链接，引入的最新版本@antv/s2^2.0.0-next.31

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[lijinke666]

PR 解决的问题和你的不是同一个问题, 你的是多行文本和紧凑模式组合使用的场景. 这里包含两个问题:

1. 就是 🐛紧凑模式，手动拖拽减小列宽，字体直接溢出 #2900 描述的单行文本溢出的问题

"Alice狗粮-10kg装Alice狗粮-\nAlice狗粮-10kg\nAlice狗粮-10kg\nAlice狗粮-10k"

2. 你这里设置的 maxLines 为 1, 预期应该只渲染一行 (这里是 bug 需要修复, 渲染行数应该始终和 maxLines 匹配) 预期应该是 "Alice狗粮-10kg装Alice狗粮-" 而不是 "Alice狗粮-10kg装Alice狗粮-\nAlice狗粮-10kg\nAlice狗粮-10kg\nAlice狗粮-10k" 的宽度, 如果想展示全应该修改 maxLines

【尝试了将 S2Options style. layoutWidthType 设置为非 'compact' 的任意值或者将 dataCell.maxLines 设置为 >= 2 都能解决文本异常溢出的情况，具体不知道是什么原因影响】

但是实际上你的文本宽度最大为 4 行, 所以这里正确的配置应该是 maxLines: 4 或者一个足够大的值

[github-actions]

你好 @wzdong26，感谢你的建议, 我们会及时评估和排期, 谢谢!
当然, 如果能贡献 PR 帮助我们改进, 不胜感激！

Hello, @wzdong26, thanks for your advice. We will evaluate and schedule in time. Thank you!
you could implement it by yourself through the customization capabilities provided by S2. Thanks so much for your understanding.

[wzdong26]

感谢你的回复！
你回复的第一点的确也是我注意到的点，单元格内部计算文本宽度确实有问题，针对换行多文本内容计算还是有问题的。
第二个点其实我的诉求是初始渲染时只渲染一行（尽管我的数据是多行数据，多行数据的话就ellipse处理），然后在我拖拽单元格边框时可以根据单元格宽度和高度分别动态计算单元格文本的 wordWrapWidth 和 maxLines [（这是s2调用g的渲染api提供的选项），我注意到主要是代码中base-cell.ts#L446 这里传入的style中 wordWrapWidth 和 maxLines 的前置计算逻辑需要改造，然而本人目前对整体代码理解有限，没有好的解决方案，希望这块能力能够支持～

[lijinke666]

拖拽单元格边框时可以根据单元格宽度和高度分别动态计算单元格文本的 wordWrapWidth 和 maxLines

1. 目前不支持 "\n" 类型的多行文本和紧凑模式组合使用的场景 (现在紧凑模式只支持单行文本, 计算的是整体文本, 如果要兼容这种场景计算准确的列宽, 还需要测量每一行的宽度取最大值, 比较耗费性能)
2. 拖拽动态调整配置的场景

这两点实现比较麻烦, 待后续增强, 目前优先解决 maxLines =1 拖拽后的文字溢出 bug.

[lijinke666]

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

The release is available on:

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

Your semantic-release bot 📦🚀