feat: 新增treeLineShow配置和usePolyline，给树形表头扩展配置线性功能 #2995
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
感谢贡献, 近期有点忙, 预计下周 review 代码 |
|
你好 @gb853940223，感谢你的贡献, 为了让代码更健壮, 请根据 贡献指南 补充相应单元测试, 如果有 API 改动, 请修改 相应的文档 Hello, @gb853940223, 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. |
|
@lijinke666 十分感谢 |
| @@ -0,0 +1,166 @@ | |||
| import { Polyline } from '@antv/g'; | |||
There was a problem hiding this comment.
线的逻辑为什么是做在 react 这一层, 而不是 s2-core 里? 不太合理
| /** | ||
| * 是否配置线性样式，默认不配置 | ||
| */ | ||
| treeLineShow?: boolean; |
There was a problem hiding this comment.
| treeLineShow?: boolean; | |
| showTreeLine?: boolean; |
另外连接线属于行头的能力, 建议放在 s2Options.style.rowCell.showTreeLine
|
|
|
||
| const dottedLine = canvas.appendChild( | ||
| new Polyline({ | ||
| style: { |
There was a problem hiding this comment.
建议主题里面增加相关配置能力, 满足个性化诉求: packages/s2-core/src/theme/index.ts
类似:
S2/packages/s2-core/src/theme/index.ts
Lines 531 to 537 in 598f68a
| /** | ||
| * 获取列头的高度 | ||
| */ | ||
| const getColHeaderHeight = (chart: SpreadSheet | TableSheet | PivotSheet) => { |
There was a problem hiding this comment.
下同
| const getColHeaderHeight = (chart: SpreadSheet | TableSheet | PivotSheet) => { | |
| const getColHeaderHeight = (s2: SpreadSheet) => { |
| points.push([x2, y2 - offsetHeight]); | ||
| } | ||
|
|
||
| const dottedLine = canvas.appendChild( |
There was a problem hiding this comment.
相关绘制逻辑建议放在 RowHeader (packages/s2-core/src/facet/header/row.ts) 或者 PivotFacet (packages/s2-core/src/facet/pivot-facet.ts) 里, 而不是直接在 canvas 上添加
There was a problem hiding this comment.
之所以在canvas添加，是因为只有表格绘制完成之后，即S2Event.LAYOUT_AFTER_RENDER，才能更好的根据整个树形图的位置、层级、宽高等因素来计算绘制polyLine，而且在处理展开、收起、滚动操作时，polyLine的计算也更加准确和方便。
|
@lijinke666 感谢大佬专业的意见，修改之后，下周再PR一版 |
👀 PR includes
✨ Feature
📝 Description
改动点：给树形结构的表头，添加线性配置，类似于Ant Design的TreeSelect组件
解决问题：面对复杂的树形结构，在视觉上可以增加层次感。
🖼️ Screenshot
改动前：
改动后：
🔗 Related issue link
#2987
🔍 Self-Check before the merge