e-virt-table 1.2.21 → 1.2.23

package/dist/lib/Cell.d.ts

@@ -45,12 +45,26 @@ export default class Cell extends BaseCell {
     drawTextColor: string;
     drawTextX: number;
     drawTextY: number;
-    drawImageX: number;
-    drawImageY: number;
-    drawImageWidth: number;
-    drawImageHeight: number;
-    drawImageName: string;
-    drawImageSource?: HTMLImageElement;
+    drawTextWidth: number;
+    drawTextHeight: number;
+    drawTreeImageX: number;
+    drawTreeImageY: number;
+    drawTreeImageWidth: number;
+    drawTreeImageHeight: number;
+    drawTreeImageName: string;
+    drawTreeImageSource?: HTMLImageElement;
+    drawSelectionImageX: number;
+    drawSelectionImageY: number;
+    drawSelectionImageWidth: number;
+    drawSelectionImageHeight: number;
+    drawSelectionImageName: string;
+    drawSelectionImageSource?: HTMLImageElement;
+    drawHoverImageX: number;
+    drawHoverImageY: number;
+    drawHoverImageWidth: number;
+    drawHoverImageHeight: number;
+    drawHoverImageName: string;
+    drawHoverImageSource?: HTMLImageElement;
     ellipsis: boolean;
     rowExpand: boolean;
     rowHasChildren: boolean;
@@ -73,6 +87,7 @@ export default class Cell extends BaseCell {
      */
     updateStyle(): void;
     private updateTree;
+    private drawTreeLine;
     private updateContainer;
     private updateSelection;
     private updateHoverIcon;

package/dist/lib/Cell.js

@@ -254,37 +254,124 @@ export default class Cell extends BaseCell {
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "drawImageX", {
+        Object.defineProperty(this, "drawTextWidth", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "drawImageY", {
+        Object.defineProperty(this, "drawTextHeight", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "drawImageWidth", {
+        // 画tree图标
+        Object.defineProperty(this, "drawTreeImageX", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "drawImageHeight", {
+        Object.defineProperty(this, "drawTreeImageY", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "drawImageName", {
+        Object.defineProperty(this, "drawTreeImageWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawTreeImageHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawTreeImageName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "drawTreeImageSource", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 画selection图标
+        Object.defineProperty(this, "drawSelectionImageX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawSelectionImageY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawSelectionImageWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawSelectionImageHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawSelectionImageName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "drawSelectionImageSource", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 画hover图标
+        Object.defineProperty(this, "drawHoverImageX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawHoverImageY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawHoverImageWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawHoverImageHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "drawHoverImageName", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: ''
         });
-        Object.defineProperty(this, "drawImageSource", {
+        Object.defineProperty(this, "drawHoverImageSource", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -339,11 +426,12 @@ export default class Cell extends BaseCell {
         this.key = column.key;
         this.type = column.type || '';
         this.editorType = column.editorType || 'text';
-        this.selectorCellValueType = column.selectorCellValueType || this.ctx.config.SELECTOR_CELL_VALUE_TYPE || 'value';
+        this.selectorCellValueType =
+            column.selectorCellValueType || this.ctx.config.SELECTOR_CELL_VALUE_TYPE || 'value';
         this.editorProps = column.editorProps || {};
         this.cellType = cellType;
-        this.align = column.align || 'center';
-        this.verticalAlign = column.verticalAlign || 'middle';
+        this.align = column.align || this.ctx.config.COLUMNS_ALIGN;
+        this.verticalAlign = column.verticalAlign || this.ctx.config.COLUMNS_VERTICAL_ALIGN;
         this.fixed = column.fixed;
         this.level = column.level || 0;
         this.operation = column.operation || false;
@@ -384,6 +472,8 @@ export default class Cell extends BaseCell {
         this.drawTextY = this.drawY;
         this.isHasChanged = this.ctx.database.isHasChangedData(this.rowKey, this.key);
         this.updateSpan();
+        this.drawTextWidth = this.visibleWidth;
+        this.drawTextHeight = this.visibleHeight;
         this.updateStyle();
         this.updateType();
         this.updateHoverIcon();
@@ -533,43 +623,144 @@ export default class Cell extends BaseCell {
         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 || {};
-            this.rowExpand = expand;
-            this.rowHasChildren = hasChildren;
-            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;
-            }
-            let iconWidth = 20;
-            let iconHeight = 20;
-            if (icon) {
-                let iconX = this.drawX + iconOffsetX + CELL_PADDING;
-                let iconY = this.drawY + (this.visibleHeight - iconHeight) / 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;
-            }
-            // 更改文本距离
+        if (!(['tree', 'selection-tree', 'tree-selection'].includes(this.type) && cellType === 'body')) {
+            return;
+        }
+        const row = this.ctx.database.getRowForRowKey(rowKey);
+        const { expand = false, hasChildren = false, expandLoading = false, level = 0 } = row || {};
+        this.rowExpand = expand;
+        this.rowHasChildren = hasChildren;
+        // 计算树形图标的偏移量
+        const { TREE_INDENT = 16, CHECKBOX_SIZE, TREE_ICON_SIZE } = this.ctx.config;
+        iconOffsetX = level * TREE_INDENT;
+        if (expandLoading) {
+            const loadingIcon = this.ctx.icons.get('loading');
+            iconName = 'loading';
+            icon = loadingIcon;
+        }
+        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';
+        }
+        let iconWidth = TREE_ICON_SIZE;
+        let iconHeight = TREE_ICON_SIZE;
+        let drawX = this.drawX;
+        if (this.align === 'center' || this.align === 'right') {
+            drawX = this.drawX + (this.visibleWidth - iconWidth - 2 * CELL_PADDING) / 2;
+            // 居中对齐，改成左对齐
             this.align = 'left';
-            this.drawTextX = iconOffsetX + this.drawX + iconWidth - 0.5;
+        }
+        let iconX = drawX + iconOffsetX + CELL_PADDING;
+        let iconY = this.drawY + (this.visibleHeight - iconHeight) / 2;
+        let drawTextX = iconOffsetX + this.drawX + iconWidth - 0.5;
+        if (this.type === 'selection-tree') {
+            // 树形图标在左侧，checkbox 在树形图标右侧
+            iconX = iconOffsetX + this.drawSelectionImageX + this.drawSelectionImageWidth;
+            drawTextX = iconX + iconWidth - CELL_PADDING / 2;
+        }
+        else if (this.type === 'tree-selection') {
+            // 树形选择,两个图标宽度，文本已经有CELL_PADDING间距,/2看起来好看些
+            drawTextX = iconX + CHECKBOX_SIZE + iconWidth - CELL_PADDING / 2;
+        }
+        else {
+            // 普通tree,文本已经有CELL_PADDING间距,/2看起来好看些
+            drawTextX = iconX + iconWidth - CELL_PADDING / 2;
+        }
+        // 更改文本距离
+        this.drawTextX = drawTextX;
+        this.drawTextWidth = this.drawX + this.visibleWidth - drawTextX; // 减去树形图标的宽度
+        // 判断是否溢出格子
+        if (iconX + iconWidth + CELL_PADDING > this.drawX + this.visibleWidth) {
+            return;
+        }
+        if (iconY + iconHeight + CELL_PADDING > this.drawY + this.visibleHeight) {
+            return;
+        }
+        // 不论是否需要绘制图标，都更新图标的“基准位置”，供树线使用
+        this.drawTreeImageX = iconX;
+        this.drawTreeImageY = iconY;
+        this.drawTreeImageWidth = iconWidth;
+        this.drawTreeImageHeight = iconHeight;
+        if (icon) {
+            this.drawTreeImageName = iconName;
+            this.drawTreeImageSource = icon;
+        }
+        else {
+            this.drawTreeImageName = '';
+            this.drawTreeImageSource = undefined;
+        }
+        // 树连线仅在绘制阶段调用，避免在 update 阶段被清屏
+    }
+    drawTreeLine() {
+        const { TREE_LINE, TREE_INDENT = 16, TREE_ICON_SIZE = 16, TREE_LINE_COLOR = '#e1e6eb' } = this.ctx.config;
+        // 仅 body 且树类型才绘制
+        if (!TREE_LINE || this.cellType !== 'body')
+            return;
+        if (!['tree', 'selection-tree', 'tree-selection'].includes(this.type))
+            return;
+        if (this.rowspan === 0 || this.colspan === 0)
+            return;
+        const row = this.ctx.database.getRowForRowKey(this.rowKey) || {};
+        const level = row.level ?? 0;
+        // 以当前树图标为中心点
+        const iconCenterX = this.drawTreeImageX + this.drawTreeImageWidth / 2;
+        const iconCenterY = this.drawTreeImageY + this.drawTreeImageHeight / 2;
+        // 基于已计算的树图标位置反推基准点：当前图标左侧减去 level * TREE_INDENT
+        // 这样无论对齐方式如何（left/center/right），都以实际图标为基准定位所有竖线
+        let baseX = this.drawTreeImageX - level * TREE_INDENT;
+        // 逐层画竖线（仅当 level > 0 才需要祖先连线）
+        const parentRowKeys = Array.isArray(row.parentRowKeys) ? row.parentRowKeys : [];
+        if (level > 0) {
+            // 祖先层（0..level-2）：是否继续取决于该层“下一层链路节点”是否为最后子项
+            // 例如当前节点 0-2-1：
+            //  - 对 i=0（根 0 对应竖线），应看其下一层链路节点 0-2 是否为最后子项。
+            //    若 0-2 是最后子项（没有 0-3），则 i=0 的竖线在本行不应出现。
+            for (let i = 0; i < level - 1; i += 1) {
+                const nextKey = parentRowKeys[i + 1];
+                const nextRow = nextKey ? this.ctx.database.getRowForRowKey(nextKey) || {} : {};
+                const nextIsLast = !!nextRow.isLastChild;
+                if (nextIsLast)
+                    continue;
+                // 以当前树图标 X 为基准向左回推
+                const vx = Math.round(this.drawTreeImageX - (level - i) * TREE_INDENT + TREE_ICON_SIZE / 2);
+                this.ctx.paint.drawLine([vx, this.drawY, vx, this.drawY + this.visibleHeight], {
+                    borderColor: TREE_LINE_COLOR,
+                    borderWidth: 1,
+                    lineDash: [4, 4],
+                    lineDashOffset: 0,
+                });
+            }
+            // 父层（level-1）：无论父是不是末尾，都需要连接当前节点形成 L 型
+            const vxParent = Math.round(this.drawTreeImageX - TREE_INDENT + TREE_ICON_SIZE / 2);
+            const toCenter = !!row.isLastChild;
+            const y2 = toCenter ? iconCenterY : this.drawY + this.visibleHeight;
+            this.ctx.paint.drawLine([vxParent, this.drawY, vxParent, y2], {
+                borderColor: TREE_LINE_COLOR,
+                borderWidth: 1,
+                lineDash: [4, 4],
+                lineDashOffset: 0,
+            });
+            // 当前层的横线：从当前层竖线到图标中心
+            const currVX = Math.round(baseX + (level - 1) * TREE_INDENT + TREE_ICON_SIZE / 2);
+            this.ctx.paint.drawLine([currVX, iconCenterY, iconCenterX, iconCenterY], {
+                borderColor: TREE_LINE_COLOR,
+                borderWidth: 1,
+                lineDash: [4, 4],
+                lineDashOffset: 0,
+            });
+        }
+        // 1) 父节点行：在图标正下画一段短竖线（展开时绘制，符合视觉预期）
+        if (row.hasChildren && row.expand) {
+            const shortTop = this.drawTreeImageY + this.drawTreeImageHeight;
+            const shortBottom = shortTop + Math.min(this.visibleHeight / 2, Math.max(8, TREE_ICON_SIZE / 2));
+            this.ctx.paint.drawLine([iconCenterX, shortTop, iconCenterX, shortBottom], {
+                borderColor: TREE_LINE_COLOR,
+                borderWidth: 1,
+                lineDash: [4, 4],
+                lineDashOffset: 0,
+            });
         }
     }
     updateContainer() {
@@ -679,20 +870,58 @@ export default class Cell extends BaseCell {
         if (cellType === 'footer') {
             return;
         }
-        // 选中框类型
-        if (['index-selection', 'selection'].includes(type)) {
+        if (!['index-selection', 'selection', 'selection-tree', 'tree-selection'].includes(type)) {
+            return;
+        }
+        const selectable = this.ctx.database.getRowSelectable(rowKey);
+        const { CHECKBOX_SIZE = 0, CELL_PADDING } = this.ctx.config;
+        let drawX = this.drawX + CELL_PADDING;
+        if (this.align === 'center' || this.align === 'right') {
+            drawX = this.drawX + (visibleWidth - CHECKBOX_SIZE) / 2;
+        }
+        let iconX = drawX;
+        let iconY = this.drawY + (visibleHeight - CHECKBOX_SIZE) / 2;
+        // 对于 selection-tree 类型，checkbox 应该居中显示
+        if (type === 'selection-tree') {
+        }
+        else if (type === 'tree-selection') {
+            // 更新选择器的位置
+            const { TREE_INDENT = 16, TREE_ICON_SIZE } = this.ctx.config;
+            const row = this.ctx.database.getRowForRowKey(rowKey);
+            const { level = 0 } = row || {};
+            const iconOffsetX = level * TREE_INDENT;
+            iconX = drawX + TREE_ICON_SIZE + iconOffsetX; // 树形图标右侧 + 间距
+        }
+        let checkboxImage = this.ctx.icons.get('checkbox-uncheck');
+        let checkboxName = 'checkbox-uncheck';
+        if (type === 'selection-tree' || type === 'tree-selection') {
+            // 树形选择逻辑
+            const treeState = this.ctx.database.getTreeSelectionState(rowKey);
+            if (treeState.indeterminate && selectable) {
+                checkboxImage = this.ctx.icons.get('checkbox-indeterminate');
+                checkboxName = 'checkbox-indeterminate';
+            }
+            else if (treeState.checked && selectable) {
+                checkboxImage = this.ctx.icons.get('checkbox-check');
+                checkboxName = 'checkbox-check';
+            }
+            else if (!treeState.checked && selectable) {
+                checkboxImage = this.ctx.icons.get('checkbox-uncheck');
+                checkboxName = 'checkbox-uncheck';
+            }
+            else {
+                checkboxImage = this.ctx.icons.get('checkbox-disabled');
+                checkboxName = 'checkbox-disabled';
+            }
+        }
+        else {
+            // 普通选择逻辑
             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) {
+            else if (check && !selectable) {
                 checkboxImage = this.ctx.icons.get('checkbox-check-disabled');
                 checkboxName = 'checkbox-check-disabled';
             }
@@ -704,26 +933,33 @@ export default class Cell extends BaseCell {
                 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;
+        }
+        // 判断是否溢出格子
+        if (iconX + CHECKBOX_SIZE + CELL_PADDING > this.drawX + this.visibleWidth) {
+            return;
+        }
+        if (iconY + CHECKBOX_SIZE + CELL_PADDING > this.drawY + this.visibleHeight) {
+            return;
+        }
+        if (type === 'index-selection') {
+            if ((this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === rowIndex) ||
+                ['checkbox-disabled', 'checkbox-check'].includes(checkboxName)) {
+                this.drawSelectionImageX = iconX;
+                this.drawSelectionImageY = iconY;
+                this.drawSelectionImageWidth = CHECKBOX_SIZE;
+                this.drawSelectionImageHeight = CHECKBOX_SIZE;
+                this.drawSelectionImageName = checkboxName;
+                this.drawSelectionImageSource = checkboxImage;
             }
         }
+        else {
+            this.drawSelectionImageX = iconX;
+            this.drawSelectionImageY = iconY;
+            this.drawSelectionImageWidth = CHECKBOX_SIZE;
+            this.drawSelectionImageHeight = CHECKBOX_SIZE;
+            this.drawSelectionImageName = checkboxName;
+            this.drawSelectionImageSource = checkboxImage;
+        }
     }
     updateHoverIcon() {
         const readonly = this.ctx.database.getReadonly(this.rowKey, this.key);
@@ -767,12 +1003,12 @@ export default class Cell extends BaseCell {
                 }
             }
             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;
+            this.drawHoverImageX = _x;
+            this.drawHoverImageY = _y;
+            this.drawHoverImageWidth = CELL_HOVER_ICON_SIZE;
+            this.drawHoverImageHeight = CELL_HOVER_ICON_SIZE;
+            this.drawHoverImageName = this.hoverIconName;
+            this.drawHoverImageSource = drawImageSource;
         }
     }
     // 过去跨度配置
@@ -807,7 +1043,7 @@ export default class Cell extends BaseCell {
             //
             if (this.type === 'index-selection' &&
                 ((this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === this.rowIndex) ||
-                    ['checkbox-disabled', 'checkbox-check'].includes(this.drawImageName))) {
+                    ['checkbox-disabled', 'checkbox-check'].includes(this.drawSelectionImageName))) {
                 return '';
             }
             if (this.text === null || this.text === undefined) {
@@ -956,7 +1192,9 @@ export default class Cell extends BaseCell {
         }
     }
     draw() {
-        // 画选中框
+        // 树连线（需在文本之前绘制，避免覆盖图标但不遮挡文本）
+        this.drawTreeLine();
+        // 文字与图标
         this.drawText();
         this.drawImage();
         this.drawSelector();
@@ -980,12 +1218,7 @@ export default class Cell extends BaseCell {
     }
     drawText() {
         const { CELL_PADDING, BODY_FONT, PLACEHOLDER_COLOR } = this.ctx.config;
-        let visibleWidth = this.visibleWidth;
-        if (this.type === 'tree') {
-            const offsetIconX = this.drawTextX - this.drawX;
-            visibleWidth = this.visibleWidth - offsetIconX; // 减去树形图标的宽度
-        }
-        const { ellipsis } = this.ctx.paint.handleEllipsis(this.displayText, visibleWidth, CELL_PADDING, BODY_FONT);
+        const { ellipsis } = this.ctx.paint.handleEllipsis(this.displayText, this.drawTextWidth, CELL_PADDING, BODY_FONT);
         this.ellipsis = ellipsis;
         const { placeholder } = this.column;
         let text = this.displayText;
@@ -1000,7 +1233,7 @@ export default class Cell extends BaseCell {
             text = placeholder;
             color = PLACEHOLDER_COLOR;
         }
-        return this.ctx.paint.drawText(text, this.drawTextX, this.drawTextY, visibleWidth, this.visibleHeight, {
+        return this.ctx.paint.drawText(text, this.drawTextX, this.drawTextY, this.drawTextWidth, this.drawTextHeight, {
             font: BODY_FONT,
             padding: CELL_PADDING,
             align: this.align,
@@ -1009,19 +1242,23 @@ export default class Cell extends BaseCell {
         });
     }
     drawImage() {
-        if (!this.drawImageSource) {
-            return;
+        if (this.drawSelectionImageSource) {
+            this.ctx.paint.drawImage(this.drawSelectionImageSource, this.drawSelectionImageX, this.drawSelectionImageY, this.drawSelectionImageWidth, this.drawSelectionImageHeight);
+        }
+        if (this.drawTreeImageSource) {
+            this.ctx.paint.drawImage(this.drawTreeImageSource, this.drawTreeImageX, this.drawTreeImageY, this.drawTreeImageWidth, this.drawTreeImageHeight);
         }
-        if (this.hoverIconName) {
+        if (this.drawHoverImageSource) {
+            // 绘制hover图标背景
             const { CELL_HOVER_ICON_BG_COLOR, CELL_HOVER_ICON_BORDER_COLOR } = this.ctx.config;
-            this.ctx.paint.drawRect(this.drawImageX - 2, this.drawImageY - 2, this.drawImageWidth + 4, this.drawImageHeight + 4, {
+            this.ctx.paint.drawRect(this.drawHoverImageX - 2, this.drawHoverImageY - 2, this.drawHoverImageWidth + 4, this.drawHoverImageHeight + 4, {
                 borderColor: CELL_HOVER_ICON_BORDER_COLOR,
                 radius: 4,
                 borderWidth: 1,
                 fillColor: CELL_HOVER_ICON_BG_COLOR,
             });
+            this.ctx.paint.drawImage(this.drawHoverImageSource, this.drawHoverImageX, this.drawHoverImageY, this.drawHoverImageWidth, this.drawHoverImageHeight);
         }
-        this.ctx.paint.drawImage(this.drawImageSource, this.drawImageX, this.drawImageY, this.drawImageWidth, this.drawImageHeight);
     }
     drawSelector() {
         if (this.cellType === 'footer') {