feat: 新增treeLineShow配置和usePolyline，给树形表头扩展配置线性功能（优化版） #3022
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| /** | ||
| * 画线 | ||
| */ | ||
| export function drawDottedLines(s2: SpreadSheet) { |
There was a problem hiding this comment.
怎么越写越奇怪呢? 这个咋又放在 pivot-chart 里面去了, 这个是透视组合图, 和连接线没有关系
| @@ -454,6 +457,7 @@ export abstract class SpreadSheet extends EE { | |||
| } | |||
|
|
|||
| this.emit(S2Event.LAYOUT_AFTER_RENDER); | |||
| drawDottedLines(this); | |||
There was a problem hiding this comment.
感觉你对整体流程还不是很清晰
s2.render => facet.init => facet.render => facet layout
之前的 PR 说的是放在 pivot-facet 中, 意思就是你可以在节点构建后绘制这条线, 这些逻辑应该只在 pivot-facet 感知, 渲染/销毁都在这里, 而不是放在 spread-sheet 中
// packages/s2-core/src/facet/pivot-facet.ts
export class PivotFacet extends FrozenFacet {
init() {
super.init()
// 在 facet 构建后
drawDottedLines(this)
}
}| @@ -920,4 +924,12 @@ export abstract class SpreadSheet extends EE { | |||
| public enableAsyncExport(): Error | true { | |||
| return true; | |||
| } | |||
|
|
|||
| public getDottedLines() { | |||
| return dottedTreeLines; | |||
There was a problem hiding this comment.
存储应该也是挂在 PivotFacet 上, 而不是一个全局变量
| @@ -601,6 +601,12 @@ export const getTheme = ( | |||
| opacity: 1, | |||
| }, | |||
| }, | |||
| // ------------- poly line ----------------- | |||
| polyline: { | |||
There was a problem hiding this comment.
polyline 只是内部 G 的图形, 对外应该和 api 保持一致, 就叫 treeLine
| @@ -56,6 +56,7 @@ order: 3 | |||
| | showTreeLeafNodeAlignDot | 树状模式下行头叶子节点是否显示层级占位点 | `boolean` | `false` | | | |||
| | withByField | 根据 `field` 设置每行的宽度。`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或 列头 id （优先级大于 `width`) [查看详情](/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E8%A1%8C%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) | `Record<string, number>` | - | | | |||
| | heightByField | 根据 `field` 设置每行的高度。<br/> 1. 透视表：`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或 列头 id. <br/> 2. 明细表：`field` 对应 行序号，从 `1` 开始。（优先级大于 `height`) [查看详情](/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E8%A1%8C%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) | `Record<string, number>` | - | | | |||
| | showTreeLine| 树状模式下是否展示线性配置| `boolean`| `false` | | | |||
There was a problem hiding this comment.
注意下缩进
| | showTreeLine| 树状模式下是否展示线性配置| `boolean`| `false` | | | |
| | showTreeLine | 树状模式下是否展示连接线 | `boolean` | `false` | | |
| @@ -18,6 +19,9 @@ export const useLoading = ( | |||
| s2?.on(S2Event.LAYOUT_AFTER_RENDER, () => { | |||
| setLoading(false); | |||
| }); | |||
| s2?.on(S2Event.GLOBAL_SCROLL, () => { | |||
| @@ -14,6 +15,9 @@ export const useLoading = (s2: SpreadSheet, loadingFromProps?: boolean) => { | |||
| s2?.on(S2Event.LAYOUT_AFTER_RENDER, () => { | |||
| setLoading(false); | |||
| }); | |||
| s2?.on(S2Event.GLOBAL_SCROLL, () => { | |||
There was a problem hiding this comment.
为什么又是在 useLoading 里面监听滚动, 这个 hook 不要做其他事情.
另外滚动会触发重新 render, 按理说就会重新构建, 为什么还需要额外监听呢?
| @@ -1,5 +1,6 @@ | |||
| import { S2Event, SpreadSheet } from '@antv/s2'; | |||
| import React from 'react'; | |||
| import { drawDottedLines } from '../../../s2-core/src/extends/pivot-chart/utils/polyline-axis'; | |||
| const rowNodeTreeIconCfg = getTreeIconCfg(rowNode); | ||
| const childTreeIconCfg = getTreeIconCfg(child); | ||
|
|
||
| // console.log(rowNodeTreeIconCfg, 'rowNodeTreeIconCfg'); |
| * 获取列头的高度 | ||
| */ | ||
| function getColHeaderHeight(s2: SpreadSheet) { | ||
| return s2.facet.getColNodes(0)?.[0]?.hierarchy?.height; |
There was a problem hiding this comment.
hierarchy 可以直接 s2.facet.getLayoutResult() 中获取
|
感谢你的贡献, 建议参考 CR 再看看, 目前还达不到合并标准, 实现不行建议增加一个场景案例 Demo 吧, 就不做成配置内置了
比如在这里增加一个 demo, 给其他有需要的参考 |
| } | ||
|
|
||
| // 树形图全部收起时，不展示polyline | ||
| const customTreeOptions1: S2Options = { |
| const offsetHeight = s2.facet.getScrollOffset().scrollY; | ||
| const dottedLines = s2.getDottedLines(); | ||
|
|
||
| for (let i = 0; i <= maxLevel; i++) { |
There was a problem hiding this comment.
单测有点复杂了, 后面不太好维护, 可以直接给实际渲染的连接线的坐标等做一个快照测试 toMatchSnapshot()
| @@ -109,6 +109,10 @@ export interface RowCellStyle extends BaseCellStyle, CellTextWordWrapStyle { | |||
| * @description 优先级 `collapseFields` > `expandDepth` > `collapseAll` | |||
| */ | |||
| expandDepth?: number | null; | |||
| /** | |||
| * 是否配置线性样式，默认不配置 | |||
There was a problem hiding this comment.
| * 是否配置线性样式，默认不配置 | |
| * 是否展示连接线，默认关闭 |
| * 获取视口高度（列头 + 数值区域） | ||
| */ | ||
| function getViewportHeight(s2: SpreadSheet) { | ||
| return s2.facet.panelBBox.viewportHeight + getColHeaderHeight(s2); |
There was a problem hiding this comment.
这些都已经有了
s2.facet.getContentheight()
| } | ||
|
|
||
| return { | ||
| x: 8 + node.level * 14, |
| function getTreeIconCfg(node: Node) { | ||
| if ( | ||
| get(node, 'belongsCell.treeIcon.cfg') && | ||
| !get(node, 'belongsCell.treeIcon.cfg.destroyed') |
There was a problem hiding this comment.
尽量都写 getter, 而不是写死属性值
node.belongsCell?.getTreeIcon()?.getCfg()
| /** | ||
| * 获取滚动高度 | ||
| */ | ||
| function getOffsetHeight(s2: SpreadSheet) { |
|
|
||
| const rowHeaderTreeDepth = getRowHeaderTreeDepth(s2); | ||
|
|
||
| for (let i = 0; i <= rowHeaderTreeDepth; i++) { |
There was a problem hiding this comment.
rowNode 是全量的, rowCell 是当前可视范围的, 是不是只需要取 rowCell 绘制当前可见的就行了?
比如有 1w 个 rowNode, 现在连接线是全部绘制?
|
我加一个场景案例Demo吧 |
👀 PR includes
✨ Feature
🎨 Enhance
🔧 Chore
📝 Description
改动点：给树形结构的表头，添加线性配置，类似于Ant Design的TreeSelect组件
解决问题：面对复杂的树形结构，在视觉上可以增加层次感。
🖼️ Screenshot
改动前：
改动后：
🔗 Related issue link
#2987
🔍 Self-Check before the merge