e-virt-table 0.0.3

package/dist/lib/Cell.js

@@ -0,0 +1,943 @@
+import BaseCell from './BaseCell';
+export default class Cell extends BaseCell {
+    constructor(ctx, rowIndex, colIndex, x, y, width, height, column, row, cellType = 'body') {
+        super(ctx, x, y, width, height, column.fixed, cellType);
+        Object.defineProperty(this, "formatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hoverIconName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "align", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "verticalAlign", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fixed", {
+            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, "editorType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cellType", {
+            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, "colspan", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
+        Object.defineProperty(this, "rowspan", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
+        Object.defineProperty(this, "key", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "column", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rowIndex", {
+            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, "row", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "value", {
+            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, "renderFooter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "style", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "rules", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "message", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "text", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "displayText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "visibleWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "visibleHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        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, "drawCellSkyBgColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "drawTextColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "drawTextX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawTextY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        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
+        });
+        Object.defineProperty(this, "ellipsis", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "overflowTooltipShow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "overflowTooltipMaxWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 500
+        });
+        Object.defineProperty(this, "overflowTooltipPlacement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'top'
+        });
+        this.visibleWidth = this.width;
+        this.visibleHeight = this.height;
+        this.colIndex = colIndex;
+        this.rowIndex = rowIndex;
+        this.key = column.key;
+        this.type = column.type || 'text';
+        this.editorType = column.editorType || 'text';
+        this.cellType = cellType;
+        this.align = column.align || 'center';
+        this.verticalAlign = column.verticalAlign || 'middle';
+        this.fixed = column.fixed;
+        this.level = column.level;
+        this.column = column;
+        this.rules = column.rules;
+        this.row = row;
+        this.rowKey =
+            this.cellType === 'body'
+                ? this.ctx.database.getRowKeyForRowIndex(rowIndex)
+                : `${this.cellType}_${this.rowIndex}`;
+        this.value = this.getValue();
+        this.render = column.render;
+        this.overflowTooltipShow = column.overflowTooltipShow === false ? false : true;
+        this.overflowTooltipMaxWidth = column.overflowTooltipMaxWidth || 500;
+        this.overflowTooltipPlacement = column.overflowTooltipPlacement || 'top';
+        this.renderFooter = column.renderFooter;
+        this.hoverIconName = column.hoverIconName;
+        this.formatter = column.formatter;
+        this.update();
+    }
+    getValidationMessage() {
+        const errors = this.ctx.database.getValidationError(this.rowKey, this.key);
+        if (Array.isArray(errors) && errors.length) {
+            const [err] = errors;
+            this.message = err.message;
+        }
+        return this.message;
+    }
+    update() {
+        this.drawX = this.getDrawX();
+        this.drawY = this.getDrawY();
+        this.drawTextX = this.drawX;
+        this.drawTextY = this.drawY;
+        this.updateSpan();
+        this.updateStyle();
+        this.updateType();
+        this.updateHoverIcon();
+        this.updateSelection();
+        this.updateTree();
+        this.updateEditorType();
+        this.updateRender();
+        this.getValidationMessage();
+        this.updateContainer();
+        this.text = this.getText();
+        this.displayText = this.getDisplayText();
+    }
+    updateSpan() {
+        // 合计不合并
+        if (this.cellType === 'footer') {
+            return;
+        }
+        const { SPAN_METHOD } = this.ctx.config;
+        if (typeof SPAN_METHOD === 'function') {
+            const spanMethod = SPAN_METHOD;
+            const { colspan = 1, rowspan = 1 } = spanMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+                headIndex: this.ctx.body.headIndex,
+                headPosition: this.ctx.database.getPositionForRowIndex(this.ctx.body.headIndex),
+                visibleRows: this.ctx.body.visibleRows,
+                visibleLeafColumns: this.ctx.header.visibleLeafColumns,
+                rows: this.ctx.body.data,
+            }) || {};
+            this.colspan = colspan;
+            this.rowspan = rowspan;
+            this.visibleWidth = this.getWidthByColIndexColSpan(this.colIndex, this.colspan);
+            this.visibleHeight = this.ctx.database.getHeightByRowIndexRowSpan(this.rowIndex, this.rowspan);
+        }
+    }
+    updateType() {
+        // 更改类型
+        const { CELL_TYPE_METHOD } = this.ctx.config;
+        if (typeof CELL_TYPE_METHOD === 'function') {
+            const cellTypeMethod = CELL_TYPE_METHOD;
+            const type = cellTypeMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            });
+            // 可以动态改变类型
+            if (type !== undefined) {
+                this.type = type;
+            }
+        }
+    }
+    updateEditorType() {
+        // 更改类型
+        const { CELL_EDITOR_TYPE_METHOD } = this.ctx.config;
+        if (typeof CELL_EDITOR_TYPE_METHOD === 'function') {
+            const cellEditorTypeMethod = CELL_EDITOR_TYPE_METHOD;
+            const editorType = cellEditorTypeMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            });
+            // 可以动态改变类型
+            if (editorType !== undefined) {
+                this.editorType = editorType;
+            }
+        }
+    }
+    updateRender() {
+        const { CELL_RENDER_METHOD } = this.ctx.config;
+        if (typeof CELL_RENDER_METHOD === 'function') {
+            const cellRenderMethod = CELL_RENDER_METHOD;
+            const render = cellRenderMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            });
+            // 可以动态改变类型
+            if (render !== undefined) {
+                this.render = render;
+            }
+        }
+    }
+    validate() {
+        this.ctx.database
+            .getValidator(this.rowKey, this.key)
+            .then(() => {
+            this.ctx.database.setValidationError(this.rowKey, this.key, []);
+            this.message = '';
+        })
+            .catch((errors) => {
+            if (Array.isArray(errors) && errors.length) {
+                const [err] = errors;
+                this.message = err.message;
+                this.ctx.database.setValidationError(this.rowKey, this.key, errors);
+            }
+        })
+            .finally(() => {
+            this.ctx.emit('draw');
+        });
+    }
+    /**
+     * 更新样式
+     */
+    updateStyle() {
+        this.style = this.getOverlayerViewsStyle();
+    }
+    updateTree() {
+        const { CELL_PADDING = 0 } = this.ctx.config;
+        const { rowKey, cellType } = this;
+        let icon = undefined;
+        let iconOffsetX = 0;
+        let iconName = '';
+        if (this.type === 'tree' && cellType === 'body') {
+            const row = this.ctx.database.getRowForRowKey(rowKey);
+            const { expand = false, hasChildren = false, expandLoading = false, level = 0 } = row || {};
+            if (expandLoading) {
+                const loadingIcon = this.ctx.icons.get('loading');
+                iconName = 'loading';
+                icon = loadingIcon;
+                iconOffsetX = level * 8;
+            }
+            else if (hasChildren) {
+                const expandIcon = this.ctx.icons.get('expand');
+                const shrinkIcon = this.ctx.icons.get('shrink');
+                icon = !expand ? expandIcon : shrinkIcon;
+                iconName = !expand ? 'expand' : 'shrink';
+                iconOffsetX = level * 8;
+            }
+            else {
+                iconOffsetX = level * 8;
+            }
+            if (icon) {
+                let iconWidth = 20;
+                let iconHeight = 20;
+                let iconX = this.drawX + iconOffsetX + CELL_PADDING;
+                let iconY = this.drawY + (this.visibleHeight - iconHeight) / 2 + 2;
+                this.ctx.paint.drawImage(icon, iconX, iconY, iconWidth, iconHeight);
+                this.drawImageX = iconX;
+                this.drawImageY = iconY;
+                this.drawImageWidth = iconWidth;
+                this.drawImageHeight = iconHeight;
+                this.drawImageName = iconName;
+                this.drawImageSource = icon;
+                // 更改文本距离
+                this.align = 'left';
+                this.drawTextX = iconOffsetX + this.drawX + iconWidth + 0.5;
+            }
+        }
+    }
+    updateContainer() {
+        const { BODY_BG_COLOR, EDIT_BG_COLOR, BODY_CELL_STYLE_METHOD, FOOTER_CELL_STYLE_METHOD, READONLY_TEXT_COLOR, FOOTER_BG_COLOR, HIGHLIGHT_SELECTED_ROW, HIGHLIGHT_SELECTED_ROW_COLOR, HIGHLIGHT_HOVER_ROW, HIGHLIGHT_HOVER_ROW_COLOR, } = this.ctx.config;
+        if (this.cellType === 'footer') {
+            let bgColor = FOOTER_BG_COLOR;
+            let textColor = READONLY_TEXT_COLOR;
+            if (typeof FOOTER_CELL_STYLE_METHOD === 'function') {
+                const footerCellStyleMethod = FOOTER_CELL_STYLE_METHOD;
+                const { backgroundColor, color } = footerCellStyleMethod({
+                    row: this.row,
+                    rowIndex: this.rowIndex,
+                    colIndex: this.colIndex,
+                    column: this.column,
+                    value: this.getValue(),
+                }) || {};
+                if (backgroundColor) {
+                    bgColor = backgroundColor;
+                }
+                // 文字颜色
+                if (color) {
+                    textColor = color;
+                }
+            }
+            // 合计底部背景色
+            this.drawCellSkyBgColor = 'transparent';
+            this.drawCellBgColor = bgColor;
+            this.drawTextColor = textColor;
+            return;
+        }
+        // 高亮行,在背景色上加一层颜色
+        let drawCellSkyBgColor = 'transparent';
+        // 高亮行
+        const focusCell = this.ctx.focusCell;
+        const hoverCell = this.ctx.hoverCell;
+        if (HIGHLIGHT_HOVER_ROW && hoverCell?.rowKey === this.rowKey) {
+            drawCellSkyBgColor = HIGHLIGHT_HOVER_ROW_COLOR;
+        }
+        if (HIGHLIGHT_SELECTED_ROW && focusCell?.rowKey === this.rowKey) {
+            drawCellSkyBgColor = HIGHLIGHT_SELECTED_ROW_COLOR;
+        }
+        this.drawCellSkyBgColor = drawCellSkyBgColor;
+        // 恢复默认背景色
+        let bgColor = BODY_BG_COLOR;
+        let textColor = READONLY_TEXT_COLOR;
+        // 只读
+        if (['index', 'index-selection', 'selection'].includes(this.type)) {
+            this.drawCellBgColor = BODY_BG_COLOR;
+            this.drawTextColor = READONLY_TEXT_COLOR;
+            return;
+        }
+        if (!this.ctx.database.getReadonly(this.rowKey, this.key)) {
+            bgColor = EDIT_BG_COLOR;
+            textColor = READONLY_TEXT_COLOR;
+        }
+        if (typeof BODY_CELL_STYLE_METHOD === 'function') {
+            const cellStyleMethod = BODY_CELL_STYLE_METHOD;
+            const { backgroundColor, color } = cellStyleMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            }) || {};
+            if (backgroundColor) {
+                bgColor = backgroundColor;
+            }
+            // 文字颜色
+            if (color) {
+                textColor = color;
+            }
+        }
+        this.drawCellBgColor = bgColor;
+        this.drawTextColor = textColor;
+        // const change = this.grid.database.isHasChangedData(cell.rowKey, cell.key);
+        // if (change) {
+        //   this.setBackgroundColor("red");
+        // }
+    }
+    updateSelection() {
+        const { visibleWidth, visibleHeight, rowspan, colspan, cellType, type, rowIndex, rowKey } = this;
+        //合并的选框不显示
+        if (rowspan === 0 || colspan === 0) {
+            return;
+        }
+        // 合计不显示
+        if (cellType === 'footer') {
+            return;
+        }
+        // 选中框类型
+        if (['index-selection', 'selection'].includes(type)) {
+            const check = this.ctx.database.getRowSelection(rowKey);
+            const selectable = this.ctx.database.getRowSelectable(rowKey);
+            const { CHECKBOX_SIZE = 0 } = this.ctx.config;
+            const _x = this.drawX + (visibleWidth - CHECKBOX_SIZE) / 2;
+            const _y = this.drawY + (visibleHeight - CHECKBOX_SIZE) / 2;
+            let checkboxImage = this.ctx.icons.get('checkbox-uncheck');
+            let checkboxName = 'checkbox-uncheck';
+            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 && type == 'index-selection') {
+                if ((this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === rowIndex) ||
+                    ['checkbox-disabled', 'checkbox-check'].includes(checkboxName)) {
+                    this.drawImageX = _x;
+                    this.drawImageY = _y;
+                    this.drawImageWidth = CHECKBOX_SIZE;
+                    this.drawImageHeight = CHECKBOX_SIZE;
+                    this.drawImageName = checkboxName;
+                    this.drawImageSource = checkboxImage;
+                }
+            }
+            else if (checkboxImage && 'selection' === type) {
+                this.drawImageX = _x;
+                this.drawImageY = _y;
+                this.drawImageWidth = CHECKBOX_SIZE;
+                this.drawImageHeight = CHECKBOX_SIZE;
+                this.drawImageName = checkboxName;
+                this.drawImageSource = checkboxImage;
+            }
+        }
+    }
+    updateHoverIcon() {
+        const { CELL_HOVER_ICON_METHOD, CELL_HOVER_ICON_SIZE, CELL_PADDING } = this.ctx.config;
+        if (typeof CELL_HOVER_ICON_METHOD === 'function') {
+            const hoverIconMethod = CELL_HOVER_ICON_METHOD;
+            const hoverIconName = hoverIconMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            });
+            // 可以动态改变hoverIconName
+            if (hoverIconName !== undefined) {
+                this.hoverIconName = hoverIconName;
+            }
+        }
+        // 永远放在右边
+        const _x = this.drawX + this.width - CELL_HOVER_ICON_SIZE - CELL_PADDING;
+        const _y = this.drawY + (this.height - CELL_HOVER_ICON_SIZE) / 2;
+        if (this.hoverIconName) {
+            if (this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === this.rowIndex) {
+                const drawImageSource = this.ctx.icons.get(this.hoverIconName);
+                this.drawImageX = _x;
+                this.drawImageY = _y;
+                this.drawImageWidth = CELL_HOVER_ICON_SIZE;
+                this.drawImageHeight = CELL_HOVER_ICON_SIZE;
+                this.drawImageName = this.hoverIconName;
+                this.drawImageSource = drawImageSource;
+            }
+        }
+    }
+    /**
+     * 获取显示文本
+     * @returns
+     */
+    getDisplayText() {
+        if (this.cellType === 'footer') {
+            // 插槽不显示文本
+            if (this.renderFooter) {
+                return '';
+            }
+            if (this.text === null || this.text === undefined) {
+                return '';
+            }
+            return this.text;
+        }
+        else {
+            // cellType === "body"
+            // 被跨度单元格
+            if (this.rowspan === 0 || this.colspan === 0) {
+                return '';
+            }
+            // 插槽不显示文本
+            if (this.render) {
+                return '';
+            }
+            //
+            if (this.type === 'index-selection' &&
+                ((this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === this.rowIndex) ||
+                    ['checkbox-disabled', 'checkbox-check'].includes(this.drawImageName))) {
+                return '';
+            }
+            if (this.text === null || this.text === undefined) {
+                return '';
+            }
+            return `${this.text}`;
+        }
+    }
+    /**
+     * 获取文本
+     * @returns
+     */
+    getText() {
+        if (this.cellType === 'footer') {
+            return this.row[this.key];
+        }
+        // cellType === "body"
+        // formatter优先等级比较高
+        if (typeof this.formatter === 'function') {
+            const _text = this.formatter({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            });
+            return _text;
+        }
+        const { CELL_FORMATTER_METHOD } = this.ctx.config;
+        if (typeof CELL_FORMATTER_METHOD === 'function') {
+            const formatterMethod = CELL_FORMATTER_METHOD;
+            const _text = formatterMethod({
+                row: this.row,
+                rowIndex: this.rowIndex,
+                colIndex: this.colIndex,
+                column: this.column,
+                value: this.getValue(),
+            });
+            return _text;
+        }
+        if (['index-selection', 'index'].includes(this.type)) {
+            const str = `${this.rowIndex + 1}`; // 索引
+            return str; // 索引
+        }
+        this.value = this.ctx.database.getItemValue(this.rowKey, this.key);
+        return this.value;
+    }
+    getValue() {
+        return this.ctx.database.getItemValue(this.rowKey, this.key);
+    }
+    /**
+     * 获取样式
+     */
+    getOverlayerViewsStyle() {
+        let left = `${this.drawX - this.ctx.fixedLeftWidth}px`;
+        let top = `${this.drawY - this.ctx.body.y}px`;
+        // 固定列
+        if (this.fixed === 'left') {
+            left = `${this.drawX}px`;
+        }
+        else if (this.fixed === 'right') {
+            left = `${this.drawX - (this.ctx.target.width - this.ctx.fixedRightWidth)}px`;
+        }
+        // 合计
+        if (this.cellType === 'footer') {
+            if (this.ctx.config.FOOTER_FIXED) {
+                top = `${this.drawY - this.ctx.footer.y}px`;
+            }
+        }
+        return {
+            position: 'absolute',
+            overflow: 'hidden',
+            left,
+            top,
+            width: `${this.visibleWidth}px`,
+            height: `${this.visibleHeight}px`,
+            pointerEvents: 'none',
+        };
+    }
+    draw() {
+        const { paint, config: { BORDER_COLOR }, } = this.ctx;
+        const { drawX, drawY } = this;
+        // 绘制单元格
+        paint.drawRect(drawX, drawY, this.visibleWidth, this.visibleHeight, {
+            borderColor: BORDER_COLOR,
+            fillColor: this.drawCellBgColor,
+        });
+        paint.drawRect(drawX, drawY, this.width, this.height, {
+            borderColor: 'transparent',
+            borderWidth: 1,
+            fillColor: this.drawCellSkyBgColor,
+        });
+        // 画选中框
+        this.ellipsis = this.drawText();
+        this.drawImage();
+        this.drawSelector();
+        this.drawAutofillPiont();
+        this.drawErrorTip();
+    }
+    /**
+     * 根据列的索引获取列的宽度
+     * @param {Number} colIndex
+     */
+    getWidthByColIndexColSpan(colIndex, colSpan) {
+        if (colSpan === 0) {
+            return 0;
+        }
+        let width = 0;
+        for (let i = colIndex; i < colIndex + colSpan; i++) {
+            const cellHeader = this.ctx.header.leafCellHeaders[i];
+            width += cellHeader.width;
+        }
+        return width;
+    }
+    drawText() {
+        const { CELL_PADDING, BODY_FONT } = this.ctx.config;
+        return this.ctx.paint.drawText(this.displayText, this.drawTextX, this.drawTextY, this.visibleWidth, this.visibleHeight, {
+            font: BODY_FONT,
+            padding: CELL_PADDING,
+            align: this.align,
+            verticalAlign: this.verticalAlign,
+            color: this.drawTextColor,
+        });
+    }
+    drawImage() {
+        if (!this.drawImageSource) {
+            return;
+        }
+        this.ctx.paint.drawImage(this.drawImageSource, this.drawImageX, this.drawImageY, this.drawImageWidth, this.drawImageHeight);
+    }
+    drawAutofillPiont() {
+        if (this.cellType === 'footer') {
+            return;
+        }
+        const { SELECT_BORDER_COLOR, ENABLE_AUTOFILL, ENABLE_SELECTOR } = this.ctx.config;
+        if (!ENABLE_SELECTOR) {
+            return;
+        }
+        if (!ENABLE_AUTOFILL) {
+            return;
+        }
+        const show = true;
+        const { xArr, yArr } = this.ctx.selector;
+        const maxX = xArr[1];
+        const maxY = yArr[1];
+        const { colIndex, rowIndex, drawX, drawY } = this;
+        // 绘制自动填充点
+        if (show && colIndex === maxX && rowIndex === maxY) {
+            this.ctx.paint.drawRect(drawX + this.width - 6, drawY + this.height - 6, 6, 6, {
+                borderColor: '#fff',
+                fillColor: SELECT_BORDER_COLOR,
+            });
+        }
+    }
+    drawSelector() {
+        if (this.cellType === 'footer') {
+            return;
+        }
+        const { ENABLE_SELECTOR } = this.ctx.config;
+        if (!ENABLE_SELECTOR) {
+            return;
+        }
+        const { xArr, yArr, xArrCopy, yArrCopy } = this.ctx.selector;
+        // 复制线
+        this.drawBorder({
+            xArr: xArrCopy,
+            yArr: yArrCopy,
+            borderColor: this.ctx.config.SELECT_BORDER_COLOR || 'rgb(82,146,247)',
+            fillColor: this.ctx.config.SELECT_AREA_COLOR || 'rgba(82,146,247,0.1)',
+            borderWidth: 1,
+            lineDash: [4, 4],
+        });
+        // 填充线
+        this.drawBorder({
+            xArr: this.ctx.autofill.xArr,
+            yArr: this.ctx.autofill.yArr,
+            borderColor: this.ctx.config.SELECT_BORDER_COLOR || 'rgb(82,146,247)',
+            fillColor: this.ctx.config.SELECT_AREA_COLOR || 'rgba(82,146,247,0.1)',
+            borderWidth: 1,
+            lineDash: [4, 4],
+        });
+        // 选择线
+        this.drawBorder({
+            xArr,
+            yArr,
+            borderColor: this.ctx.config.SELECT_BORDER_COLOR || 'rgb(82,146,247)',
+            fillColor: this.ctx.config.SELECT_AREA_COLOR || 'rgba(82,146,247,0.1)',
+            borderWidth: 1,
+        });
+    }
+    drawErrorTip() {
+        // 合计不显示
+        if (this.cellType === 'footer') {
+            return;
+        }
+        // 没有错误消息
+        if (!this.message) {
+            return;
+        }
+        const { ERROR_TIP_ICON_SIZE, ERROR_TIP_COLOR } = this.ctx.config;
+        const { width } = this;
+        const x = this.drawX;
+        const y = this.drawY;
+        const points = [
+            x + width - ERROR_TIP_ICON_SIZE - 0.5,
+            y,
+            x + width - 0.5,
+            y,
+            x + width - 0.5,
+            y + ERROR_TIP_ICON_SIZE,
+        ];
+        this.ctx.paint.drawLine(points, {
+            borderColor: ERROR_TIP_COLOR,
+            fillColor: ERROR_TIP_COLOR,
+            borderWidth: 1,
+            lineCap: 'round',
+            lineJoin: 'round',
+        });
+    }
+    drawBorder(options) {
+        const { drawX, drawY, width, rowIndex, colIndex } = this;
+        const x = drawX + 0.5;
+        let y = drawY + 0.5;
+        let height = this.height;
+        // 第一行减去1，不然会被表头覆盖
+        if (rowIndex === 0) {
+            y = this.y + 1;
+            height = height - 1;
+        }
+        const { xArr, yArr, lineDash = [], borderWidth = 1, borderColor, fillColor } = options;
+        const minX = xArr[0];
+        const maxX = xArr[1];
+        const minY = yArr[0];
+        const maxY = yArr[1];
+        // 选择
+        if (colIndex >= minX && colIndex <= maxX && rowIndex === minY) {
+            this.ctx.paint.drawLine([x, y, x + width - 2, y], {
+                borderColor,
+                fillColor,
+                borderWidth,
+                lineCap: 'round',
+                lineJoin: 'round',
+                lineDash,
+            });
+        }
+        // bottom border
+        if (colIndex >= minX && colIndex <= maxX && rowIndex === maxY) {
+            this.ctx.paint.drawLine([x, y + height - 1.5, x + width, y + height - 1.5], {
+                borderColor,
+                fillColor,
+                borderWidth,
+                lineCap: 'round',
+                lineJoin: 'round',
+                lineDash,
+            });
+        }
+        // left border
+        if (colIndex === minX && rowIndex >= minY && rowIndex <= maxY) {
+            this.ctx.paint.drawLine([x, y, x, y + height - 1], {
+                borderColor,
+                fillColor,
+                borderWidth,
+                lineCap: 'round',
+                lineJoin: 'round',
+                lineDash,
+            });
+        }
+        // right border
+        if (colIndex === maxX && rowIndex >= minY && rowIndex <= maxY) {
+            this.ctx.paint.drawLine([x + width - 1, y, x + width - 1, y + height - 1], {
+                borderColor,
+                fillColor,
+                borderWidth,
+                lineCap: 'round',
+                lineJoin: 'round',
+                lineDash,
+            });
+        }
+    }
+}
+//# sourceMappingURL=Cell.js.map