/
row.ts
113 lines (105 loc) · 3.01 KB
/
row.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import { Group } from '@antv/g-canvas';
import { GM } from '@antv/g-gesture';
import { each, isEmpty } from 'lodash';
import { RowCell } from '../../cell';
import { DetailRowCell } from '../../cell/detail-row-cell';
import { Node } from '@/facet/layout/node';
import { BaseHeader, BaseHeaderConfig } from './base';
import { translateGroup } from '../utils';
import { S2Options } from '../../common/interface';
export interface RowHeaderConfig extends BaseHeaderConfig {
// type of hierarchy
hierarchyType: S2Options['hierarchyType'];
// field ids that click to navigate
linkFieldIds: string[];
// series number group's width, will be 0 when not exists
seriesNumberWidth: number;
}
/**
* Row Header for SpreadSheet
*/
export class RowHeader extends BaseHeader<RowHeaderConfig> {
// mobile event
private gm: GM;
constructor(cfg: RowHeaderConfig) {
super(cfg);
}
public destroy() {
super.destroy();
if (this.gm) {
this.gm.destroy();
}
}
protected layout() {
const {
data,
spreadsheet,
width,
height,
seriesNumberWidth,
scrollY,
scrollX,
} = this.headerConfig;
const rowCell = spreadsheet?.facet?.cfg?.rowCell;
// row'cell only show when visible
const rowCellInRect = (item: Node): boolean => {
return (
height + scrollY > item.y && // bottom
scrollY < item.y + item.height && // top
width - seriesNumberWidth + scrollX > item.x && // left
scrollX - seriesNumberWidth < item.x + item.width
); // right
};
each(data, (item: Node) => {
if (rowCellInRect(item) && item.height !== 0) {
let cell: Group;
// 首先由外部控制UI展示
if (rowCell) {
cell = rowCell(item, spreadsheet, this.headerConfig);
}
// 如果外部没处理,就用默认的
if (isEmpty(cell)) {
if (spreadsheet.isPivotMode()) {
cell = new RowCell(item, spreadsheet, this.headerConfig);
} else {
cell = new DetailRowCell(item, spreadsheet, this.headerConfig);
}
}
item.belongsCell = cell;
this.add(cell);
}
});
// this.addShape('rect', {
// attrs: {
// x: 0,
// y: scrollY,
// width: scrollX + width,
// height,
// fill: '#0ff'
// }
// });
}
protected offset() {
const { scrollY, scrollX, position, seriesNumberWidth } = this.headerConfig;
// 向右多移动的seriesNumberWidth是序号的宽度
translateGroup(
this,
position.x - scrollX + seriesNumberWidth,
position.y - scrollY,
);
}
protected clip(): void {
const { width, height, scrollX, scrollY, seriesNumberWidth } =
this.headerConfig;
this.setClip({
type: 'rect',
attrs: {
// 由于多移动了seriesNumberWidth跨度,所有需要向左切。 - 是反向剪裁(右 -> 左)
x: scrollX - seriesNumberWidth,
y: scrollY,
width,
height,
},
});
}
}