fix: 使用离屏 Canvas 测量文本, 提高宽度计算的准确性 close #3018

[lijinke666]

👀 PR includes

🐛 Bugfix

• Solve the issue and close 🐛紧凑布局下，单元格计算宽度不正确，文字被截断显示... #3018

📝 Description

1. S2 的问题:

• 使用 G 的 Canvas, 由于 context 会被污染, 从而导致 measureText 的值不准, 需要使用有一个干净 ctx 的离屏 Canvas
• 离屏 Canvas 需要 append 到 body 中, 继承宿主环境字体等各种因素, 不然测量结果也会不同

2. G 的问题:

开启 textWrap 的文本, 由于是逐字计算, 会导致单行文本是否展示省略号不太准确, 尤其是纯数字, 如: 11111111

背景见: antvis/G#1876 antvis/G#1879

🖼️ Screenshot

Before	After
❌	✅

🔗 Related issue link

🔍 Self-Check before the merge

• Add or update relevant docs.
• Add or update relevant demos.
• Add or update test case.
• Add or update relevant TypeScript definitions.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
antvis-s2	❌ Failed (Inspect)			Dec 30, 2024 2:05am

[github-actions]

你好 @lijinke666，非常感谢你的贡献.
为了让代码更健壮, 请根据 贡献指南 补充相应单元测试 (文档改动或其他特殊场景除外), 如果有 API 改动, 请修改 相应的文档.
同时请检查 lint 和 test 相关 CI 是否通过, 如果失败, 请点击 [Details] 按钮查看, 并根据日志修复.

Hello, @lijinke666, Thanks for your contribution. In order to make the code more robust, please add the corresponding unit tests, and update the docs if there are API changes.
At the same time, please check whether the CI related to lint and test passes. If the CI fails, please click [Details] button to check and repair according to the log.

[petercat-assistant]

Walkthrough

此 PR 解决了使用 G 的 Canvas 时，由于 context 污染导致 measureText 值不准确的问题。通过使用一个干净的离屏 Canvas 来测量文本宽度，并将其附加到 body 中以确保测量结果的准确性。此外，修复了开启 textWrap 时逐字计算导致的文本省略号显示不准确的问题。

Changes

文件	概要
compare-layout-spec.ts	更新了宽度计算的测试用例，调整了期望值以匹配新的测量方式。
canvas-spec.ts	修改了离屏 Canvas 的 DOM ID。
test-live.mjs	移除了 --detectOpenHandles 参数。
base-cell.ts	优化了文本渲染前的预处理逻辑。
base-facet.ts, pivot-facet.ts, table-facet.ts	移除了 measureTextWidth 方法中的 roughly 参数。
spread-sheet.ts	使用离屏 Canvas 获取上下文。
canvas.ts	更新了离屏 Canvas 的 DOM ID。
config.tsx	更新了测试数据。
test-live.mjs	移除了 --detectOpenHandles 参数。

[github-actions]

Size Change: 0 B

Total Size: 619 kB

ℹ️ View Unchanged

Filename	Size
./packages/s2-core/dist/s2-extends.min.js	154 kB
./packages/s2-core/dist/s2.min.css	581 B
./packages/s2-core/dist/s2.min.js	257 kB
./packages/s2-react-components/dist/s2-react-components.min.css	2.55 kB
./packages/s2-react-components/dist/s2-react-components.min.js	124 kB
./packages/s2-react/dist/s2-react.min.css	1.74 kB
./packages/s2-react/dist/s2-react.min.js	38.3 kB
./packages/s2-vue/dist/s2-vue.min.css	2.05 kB
./packages/s2-vue/dist/s2-vue.min.js	38.3 kB

_{compressed-size-action}

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.77%. Comparing base (ecdc9c8) to head (2b60691).
Report is 578 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #3053      +/-   ##
==========================================
  Coverage   75.77%   75.77%              
==========================================
  Files         257       51     -206     
  Lines       11994     1490   -10504     
  Branches     2464      284    -2180     
==========================================
- Hits         9088     1129    -7959     
+ Misses       1398      210    -1188     
+ Partials     1508      151    -1357     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[lijinke666]

🎉 This PR is included in version @antv/s2-v2.1.6 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[lijinke666]

🎉 This PR is included in version @antv/s2-react-v2.1.5 🎉

The release is available on:

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

Your semantic-release bot 📦🚀