@antv/s2
Version:
effective spreadsheet render core lib
218 lines • 10.4 kB
JavaScript
import { Group, Rect } from '@antv/g';
import { includes } from 'lodash';
import { CornerCell } from '../../cell/corner-cell';
import { S2Event } from '../../common';
import { CornerNodeType } from '../../common/interface/node';
import { Node } from '../layout/node';
import { translateGroup } from '../utils';
import { FRONT_GROUND_GROUP_SCROLL_Z_INDEX, KEY_GROUP_CORNER_SCROLL, getDefaultCornerText, } from './../../common/constant/basic';
import { BaseHeader } from './base';
/**
* Corner Header for SpreadSheet
*/
export class CornerHeader extends BaseHeader {
initGroups() {
this.scrollGroup = this.appendChild(new Group({
name: KEY_GROUP_CORNER_SCROLL,
style: { zIndex: FRONT_GROUND_GROUP_SCROLL_Z_INDEX },
}));
}
getCellInstance(node) {
const headerConfig = this.getHeaderConfig();
const { spreadsheet } = headerConfig;
const { cornerCell } = spreadsheet.options;
return ((cornerCell === null || cornerCell === void 0 ? void 0 : cornerCell(node, spreadsheet, headerConfig)) ||
new CornerCell(node, spreadsheet, headerConfig));
}
/**
* Get corner Header by config
*/
static getCornerHeader(options) {
const { panelBBox, cornerBBox, seriesNumberWidth, layoutResult, spreadsheet, } = options;
const { width, height } = panelBBox;
const { originalWidth: cornerOriginalWidth, originalHeight: cornerOriginalHeight, width: cornerWidth, height: cornerHeight, } = cornerBBox;
const cornerNodes = this.getCornerNodes({
position: {
x: cornerBBox.x,
y: cornerBBox.y,
},
width: cornerOriginalWidth,
height: cornerOriginalHeight,
layoutResult,
seriesNumberWidth,
spreadsheet,
});
return new CornerHeader({
nodes: cornerNodes,
position: { x: cornerBBox.x, y: cornerBBox.y },
width: cornerWidth,
height: cornerHeight,
originalHeight: cornerOriginalHeight,
originalWidth: cornerOriginalWidth,
viewportWidth: width,
viewportHeight: height,
seriesNumberWidth,
spreadsheet,
});
}
static getTreeCornerText(spreadsheet) {
const { rows = [] } = spreadsheet.dataSet.fields;
const { cornerText: defaultCornerText } = spreadsheet.options;
if (defaultCornerText) {
return defaultCornerText;
}
const drillDownFieldInLevel = spreadsheet.store.get('drillDownFieldInLevel', []);
const drillFields = drillDownFieldInLevel.map((field) => field.drillField);
// 角头过滤下钻的维度
const treeLabel = rows
.filter((value) => !includes(drillFields, value))
.map((field) => spreadsheet.dataSet.getFieldName(field))
.join('/');
if (treeLabel) {
return treeLabel;
}
return getDefaultCornerText();
}
static getCornerNodes(options) {
var _a, _b, _c, _d, _e;
const { position, width, layoutResult, seriesNumberWidth, spreadsheet } = options;
const { rowsHierarchy, colsHierarchy } = layoutResult;
const { rows = [], columns = [] } = ((_a = spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.dataSet) === null || _a === void 0 ? void 0 : _a.fields) || {};
const { colCell } = spreadsheet.options.style;
const cornerNodes = [];
const leafNode = colsHierarchy === null || colsHierarchy === void 0 ? void 0 : colsHierarchy.sampleNodeForLastLevel;
if (seriesNumberWidth) {
const sNode = new Node({
id: '',
field: '',
value: spreadsheet.getSeriesNumberText(),
});
sNode.x = position === null || position === void 0 ? void 0 : position.x;
// different type different y
sNode.y = (_b = leafNode === null || leafNode === void 0 ? void 0 : leafNode.y) !== null && _b !== void 0 ? _b : 0;
sNode.width = seriesNumberWidth;
// different type different height
sNode.height = (_c = leafNode === null || leafNode === void 0 ? void 0 : leafNode.height) !== null && _c !== void 0 ? _c : colCell === null || colCell === void 0 ? void 0 : colCell.height;
sNode.isPivotMode = true;
sNode.spreadsheet = spreadsheet;
sNode.cornerType = CornerNodeType.Series;
cornerNodes.push(sNode);
}
if (spreadsheet.isHierarchyTreeType()) {
const cornerText = this.getTreeCornerText(spreadsheet);
const cornerNode = new Node({
id: cornerText,
field: '',
value: cornerText,
});
cornerNode.x = position.x + seriesNumberWidth;
cornerNode.y = (_d = leafNode === null || leafNode === void 0 ? void 0 : leafNode.y) !== null && _d !== void 0 ? _d : 0;
// cNode should subtract series width
cornerNode.width = width - seriesNumberWidth;
cornerNode.height = (_e = leafNode === null || leafNode === void 0 ? void 0 : leafNode.height) !== null && _e !== void 0 ? _e : colCell === null || colCell === void 0 ? void 0 : colCell.height;
cornerNode.seriesNumberWidth = seriesNumberWidth;
cornerNode.isPivotMode = true;
cornerNode.spreadsheet = spreadsheet;
cornerNode.cornerType = CornerNodeType.Row;
cornerNodes.push(cornerNode);
}
else {
const rowNodes = rowsHierarchy.sampleNodesForAllLevels || [];
const isCustomRow = spreadsheet.isCustomRowFields();
// spreadsheet type grid mode
rowNodes.forEach((rowNode) => {
var _a, _b, _c;
// 自定义行头直接取采样的行头 field 值即可, 可通过 s2DataCfg.meta.name 自定义名称
const field = isCustomRow
? rowNode.field
: rows[rowNode.level];
const value = spreadsheet.dataSet.getFieldName(field);
const cornerNode = new Node({
id: field,
field,
value,
});
cornerNode.x = rowNode.x + seriesNumberWidth;
cornerNode.y = (_a = leafNode === null || leafNode === void 0 ? void 0 : leafNode.y) !== null && _a !== void 0 ? _a : 0;
cornerNode.width = rowNode.width;
cornerNode.height =
(_b = leafNode === null || leafNode === void 0 ? void 0 : leafNode.height) !== null && _b !== void 0 ? _b : (_c = spreadsheet.facet) === null || _c === void 0 ? void 0 : _c.getCellCustomSize(null, colCell === null || colCell === void 0 ? void 0 : colCell.height);
cornerNode.isPivotMode = true;
cornerNode.cornerType = CornerNodeType.Row;
cornerNode.spreadsheet = spreadsheet;
cornerNodes.push(cornerNode);
});
}
const columnNodes = colsHierarchy.sampleNodesForAllLevels || [];
const isCustomColumn = spreadsheet.isCustomColumnFields();
columnNodes.forEach((colNode) => {
// 列头最后一个层级的位置为行头 label 标识，需要过滤
if (colNode.level < colsHierarchy.maxLevel) {
const field = isCustomColumn
? colNode.field
: columns[colNode.level];
const value = spreadsheet.dataSet.getFieldName(field);
const cNode = new Node({
id: field,
field,
value,
});
cNode.x = position.x;
cNode.y = colNode.y;
cNode.width = width;
cNode.height = colNode.height;
cNode.isPivotMode = true;
cNode.cornerType = CornerNodeType.Col;
cNode.spreadsheet = spreadsheet;
cornerNodes.push(cNode);
}
});
return cornerNodes;
}
/**
* Make cornerHeader scroll with hScrollBar
* @param scrollX
*/
onCorScroll(scrollX, type) {
if (this.headerConfig.scrollX !== scrollX) {
this.headerConfig.scrollX = scrollX;
this.render(type);
}
}
layout() {
var _a, _b;
const { nodes, spreadsheet } = this.getHeaderConfig();
const cornerHeader = (_a = spreadsheet.options) === null || _a === void 0 ? void 0 : _a.cornerHeader;
if (cornerHeader) {
cornerHeader(this, spreadsheet, this.headerConfig);
return;
}
const colNodes = ((_b = spreadsheet.facet) === null || _b === void 0 ? void 0 : _b.getColNodes()) || [];
nodes.forEach((node) => {
var _a;
// 自定义列头高度时, 需要同时标记下对应的角头 (兼容自定义列头场景)
const currentColNode = colNodes === null || colNodes === void 0 ? void 0 : colNodes.find((colNode) => (node === null || node === void 0 ? void 0 : node.y) === (colNode === null || colNode === void 0 ? void 0 : colNode.y) && (node === null || node === void 0 ? void 0 : node.height) === (colNode === null || colNode === void 0 ? void 0 : colNode.height));
node.extra.isCustomHeight = (_a = currentColNode === null || currentColNode === void 0 ? void 0 : currentColNode.extra) === null || _a === void 0 ? void 0 : _a.isCustomHeight;
const cell = this.getCellInstance(node);
this.scrollGroup.appendChild(cell);
spreadsheet.emit(S2Event.CORNER_CELL_RENDER, cell);
spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
});
}
offset() {
const { position, scrollX = 0 } = this.getHeaderConfig();
translateGroup(this.scrollGroup, position.x - scrollX, position.y);
}
clip() {
const { width, height, position } = this.getHeaderConfig();
this.scrollGroup.style.clipPath = new Rect({
style: {
x: position.x,
y: position.y,
width,
height,
},
});
}
}
//# sourceMappingURL=corner.js.map