e-virt-table
Version:
A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
369 lines • 12.3 kB
JavaScript
import { generateShortUUID } from './util';
import BaseCell from './BaseCell';
export default class CellHeader extends BaseCell {
constructor(ctx, colIndex, x, y, width, height, column) {
super(ctx, x, y, width, height, 'header', column.fixed);
Object.defineProperty(this, "align", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "verticalAlign", {
enumerable: true,
configurable: true,
writable: true,
value: 'middle'
});
Object.defineProperty(this, "fixed", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "widthFillDisable", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "type", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "operation", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "editorType", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "level", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "text", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "displayText", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "colspan", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "rowspan", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "row", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "key", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "required", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "readonly", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "children", {
enumerable: true,
configurable: true,
writable: true,
value: []
});
Object.defineProperty(this, "column", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "colIndex", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "rowKey", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "rules", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "hasChildren", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "render", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "style", {
enumerable: true,
configurable: true,
writable: true,
value: {}
});
Object.defineProperty(this, "drawX", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "drawY", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "drawCellBgColor", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "drawTextColor", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "drawImageX", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "drawImageY", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "drawImageWidth", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "drawImageHeight", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "drawImageName", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "drawImageSource", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
this.ctx = ctx;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.colIndex = colIndex;
this.key = column.key;
this.type = column.type || '';
this.editorType = column.editorType || 'text';
this.align = column.align || 'center';
this.verticalAlign = column.verticalAlign || 'middle';
this.fixed = column.fixed;
this.level = column.level || 0;
this.operation = column.operation || false;
this.text = column.title;
this.column = column;
this.colspan = column.colspan || 1;
this.widthFillDisable = column.widthFillDisable || false;
this.rowspan = column.rowspan || 1;
this.rules = column.rules;
this.readonly = column.readonly || false;
this.required = column.required || false;
this.rowKey = generateShortUUID();
this.hasChildren = (column.children && column.children.length > 0) || false; // 是否有子
this.render = column.renderHeader;
}
/**
* 是否可见，覆盖基类方法，表头是跟y滚动条没有关系的所以不需要加滚动参数
* @returns
*/
isVerticalVisible() {
const { stageHeight } = this.ctx;
const offsetHeight = stageHeight;
return !(this.y + this.height <= 0 || this.y >= offsetHeight);
}
/**
* 更新样式
*/
updateStyle() {
this.style = this.getOverlayerViewsStyle();
}
updateContainer() {
const { HEADER_CELL_STYLE_METHOD, HEADER_BG_COLOR, HEADER_TEXT_COLOR } = this.ctx.config;
let bgColor = HEADER_BG_COLOR;
let textColor = HEADER_TEXT_COLOR;
if (typeof HEADER_CELL_STYLE_METHOD === 'function') {
const headerCellStyleMethod = HEADER_CELL_STYLE_METHOD;
const { backgroundColor, color } = headerCellStyleMethod({
colIndex: this.colIndex,
column: this.column,
}) || {};
if (backgroundColor) {
bgColor = backgroundColor;
}
// 文字颜色
if (color) {
textColor = color;
}
}
this.drawCellBgColor = bgColor;
this.drawTextColor = textColor;
}
update() {
this.updateContainer();
this.displayText = this.getText();
this.drawX = this.getDrawX();
this.drawY = this.getDrawY();
this.updateStyle();
}
draw() {
const { paint, config: { BORDER_COLOR, CELL_PADDING, HEADER_FONT }, } = this.ctx;
const { drawX, drawY, displayText } = this;
paint.drawRect(drawX, drawY, this.width, this.height, {
borderColor: BORDER_COLOR,
fillColor: this.drawCellBgColor,
});
paint.drawText(displayText, drawX, drawY, this.width, this.height, {
font: HEADER_FONT,
padding: CELL_PADDING,
color: this.drawTextColor,
align: this.align,
verticalAlign: this.verticalAlign,
});
this.drawSelection();
}
drawSelection() {
const { width, height, type } = this;
// 选中框类型
if (['index-selection', 'selection'].includes(type)) {
const { indeterminate, check, selectable } = this.ctx.database.getCheckedState();
const { CHECKBOX_SIZE = 0 } = this.ctx.config;
const _x = this.drawX + (width - CHECKBOX_SIZE) / 2;
const _y = this.drawY + (height - CHECKBOX_SIZE) / 2;
let checkboxImage = this.ctx.icons.get('checkbox-uncheck');
let checkboxName = 'checkbox-uncheck';
if (indeterminate) {
checkboxImage = this.ctx.icons.get('checkbox-indeterminate');
checkboxName = 'checkbox-indeterminate';
}
else if (check && selectable) {
checkboxImage = this.ctx.icons.get('checkbox-check');
checkboxName = 'checkbox-check';
}
else if (check && selectable) {
checkboxImage = this.ctx.icons.get('checkbox-check-disabled');
checkboxName = 'checkbox-check-disabled';
}
else if (!check && selectable) {
checkboxImage = this.ctx.icons.get('checkbox-uncheck');
checkboxName = 'checkbox-uncheck';
}
else {
checkboxImage = this.ctx.icons.get('checkbox-disabled');
checkboxName = 'checkbox-disabled';
}
if (checkboxImage) {
this.drawImageX = _x;
this.drawImageY = _y;
this.drawImageWidth = CHECKBOX_SIZE;
this.drawImageHeight = CHECKBOX_SIZE;
this.drawImageName = checkboxName;
this.drawImageSource = checkboxImage;
this.ctx.paint.drawImage(this.drawImageSource, this.drawImageX, this.drawImageY, this.drawImageWidth, this.drawImageHeight);
}
}
}
getText() {
if (this.render) {
return '';
}
return this.text;
}
/**
* 获取样式
*/
getOverlayerViewsStyle() {
let left = '';
if (this.fixed === 'left') {
left = `${this.drawX}px`;
}
else if (this.fixed === 'right') {
left = `${this.drawX - (this.ctx.stageWidth - this.ctx.fixedRightWidth)}px`;
}
else {
// 中间的，需要减去左边固定列的宽度
left = `${this.drawX - this.ctx.fixedLeftWidth}px`;
}
return {
position: 'absolute',
overflow: 'hidden',
left: left,
top: `${this.drawY + 1}px`,
width: `${this.width}px`,
height: `${this.height - 2}px`,
pointerEvents: 'initial',
userSelect: 'none',
};
}
}
//# sourceMappingURL=CellHeader.js.map