@antv/s2
Version:
effective spreadsheet render core lib
88 lines • 4.04 kB
JavaScript
import { __rest } from "tslib";
import { Group } from '@antv/g';
import { last } from 'lodash';
import { KEY_GROUP_GRID_GROUP, PANEL_GRID_GROUP_Z_INDEX, } from '../common/constant';
import { batchSetStyle, renderLine } from '../utils/g-renders';
export class GridGroup extends Group {
constructor(cfg) {
const { name, s2 } = cfg, rest = __rest(cfg, ["name", "s2"]);
super({
name,
style: rest,
});
this.gridInfo = {
cols: [],
rows: [],
};
this.updateGrid = (gridInfo, id = KEY_GROUP_GRID_GROUP) => {
var _a, _b, _c, _d;
if (!this.gridGroup || !this.getElementById(id)) {
this.gridGroup = this.appendChild(new Group({
id,
style: {
zIndex: PANEL_GRID_GROUP_Z_INDEX,
},
}));
}
const width = (_a = last(gridInfo.cols)) !== null && _a !== void 0 ? _a : 0;
const height = (_b = last(gridInfo.rows)) !== null && _b !== void 0 ? _b : 0;
const { theme } = this.s2;
const style = theme.dataCell.cell;
const verticalBorderWidth = (_c = style === null || style === void 0 ? void 0 : style.verticalBorderWidth) !== null && _c !== void 0 ? _c : 1;
const halfVerticalBorderWidth = verticalBorderWidth / 2;
const verticalBorderStyle = {
stroke: style.verticalBorderColor,
strokeOpacity: style.verticalBorderColorOpacity,
lineWidth: verticalBorderWidth,
};
const horizontalBorderWidth = (_d = style === null || style === void 0 ? void 0 : style.horizontalBorderWidth) !== null && _d !== void 0 ? _d : 1;
const halfHorizontalBorderWidth = horizontalBorderWidth / 2;
const horizontalBorderStyle = {
stroke: style.horizontalBorderColor,
strokeOpacity: style.horizontalBorderColorOpacity,
lineWidth: horizontalBorderWidth,
};
const children = this.gridGroup.children;
let childIndex = 0;
// 复用或新增垂直线
gridInfo.cols.forEach((x) => {
const attrs = Object.assign({ x1: x - halfVerticalBorderWidth, x2: x - halfVerticalBorderWidth, y1: 0, y2: height }, verticalBorderStyle);
if (childIndex < children.length) {
// 复用已有的 Line 对象
batchSetStyle(children[childIndex], attrs);
}
else {
// 创建新的 Line 对象
renderLine(this.gridGroup, attrs);
}
childIndex++;
});
// 复用或新增水平线
gridInfo.rows.forEach((y) => {
const attrs = Object.assign({ x1: 0, x2: width, y1: -halfHorizontalBorderWidth, y2: -halfHorizontalBorderWidth, transform: `translate(0, ${y})` }, horizontalBorderStyle);
if (childIndex < children.length) {
// 复用已有的 Line 对象
batchSetStyle(children[childIndex], attrs);
}
else {
// 创建新的 Line 对象
renderLine(this.gridGroup, attrs);
}
childIndex++;
});
// 移除多余的 Line 对象
const requiredCount = childIndex;
const currentCount = children.length;
if (requiredCount < currentCount) {
// 从后往前删除，避免在循环中改变数组长度导致索引错乱
for (let i = currentCount - 1; i >= requiredCount; i--) {
children[i].destroy();
}
}
// 更新 gridInfo 供下次使用
this.gridInfo = gridInfo;
};
this.s2 = s2;
}
}
//# sourceMappingURL=grid-group.js.map