e-virt-table 1.3.25 → 1.4.0

package/dist/lib/Cell.js

@@ -1,7 +1,20 @@
 import BaseCell from './BaseCell';
+import CellImage from './CellImage';
 export default class Cell extends BaseCell {
     constructor(ctx, rowIndex, colIndex, x, y, width, height, column, row, cellType = 'body', isUpdate = true) {
         super(ctx, x, y, width, height, cellType, column.fixed);
+        Object.defineProperty(this, "parentRowKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "parentRowKeys", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         Object.defineProperty(this, "formatter", {
             enumerable: true,
             configurable: true,
@@ -278,117 +291,6 @@ export default class Cell extends BaseCell {
             writable: true,
             value: 0
         });
-        // 画tree图标
-        Object.defineProperty(this, "drawTreeImageX", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
-        Object.defineProperty(this, "drawTreeImageY", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
-        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, "drawHoverImageSource", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "autoRowHeight", {
             enumerable: true,
             configurable: true,
@@ -449,6 +351,36 @@ export default class Cell extends BaseCell {
             writable: true,
             value: 'auto'
         });
+        Object.defineProperty(this, "precision", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "min", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "max", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "maxlength", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "mixedRender", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
         Object.defineProperty(this, "renderType", {
             enumerable: true,
             configurable: true,
@@ -496,8 +428,18 @@ export default class Cell extends BaseCell {
         this.formatter = column.formatter;
         this.formatterFooter = column.formatterFooter;
         this.maxLineClamp = column.maxLineClamp || 'auto';
+        this.precision = column.precision;
+        this.min = column.min;
+        this.max = column.max;
+        this.maxlength = column.maxlength;
+        this.mixedRender = column.mixedRender || false;
         this.renderType = column.renderType || 'default';
         this.renderFooterType = column.renderFooterType || 'default';
+        const rowItem = this.ctx.database.getRowForRowKey(this.rowKey);
+        if (this.cellType === 'body' && rowItem) {
+            this.parentRowKey = rowItem.parentRowKey;
+            this.parentRowKeys = rowItem.parentRowKeys;
+        }
         if (isUpdate) {
             this.update();
         }
@@ -517,11 +459,14 @@ export default class Cell extends BaseCell {
     update() {
         this.drawX = this.getDrawX();
         this.drawY = this.getDrawY();
-        this.drawTextX = this.drawX;
+        this.updateSpan();
+        this.updateDragImage();
+        const dragImage = this.getImage('drag');
+        const drawDragImageWidth = dragImage ? dragImage.width : 0;
+        this.drawTextX = this.drawX + drawDragImageWidth;
         this.drawTextY = this.drawY;
         this.isHasChanged = this.ctx.database.isHasChangedData(this.rowKey, this.key);
-        this.updateSpan();
-        this.drawTextWidth = this.visibleWidth;
+        this.drawTextWidth = this.visibleWidth - drawDragImageWidth;
         this.drawTextHeight = this.visibleHeight;
         this.updateStyle();
         this.updateType();
@@ -674,6 +619,9 @@ export default class Cell extends BaseCell {
         }
         this.style = this.getOverlayerViewsStyle();
     }
+    isInsideVisible(x, y) {
+        return x >= this.drawX && x <= this.drawX + this.visibleWidth && y >= this.drawY && y <= this.drawY + this.visibleHeight;
+    }
     updateTree() {
         const { CELL_PADDING = 0 } = this.ctx.config;
         const { rowKey, cellType } = this;
@@ -712,17 +660,24 @@ export default class Cell extends BaseCell {
         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') {
+        const selectionImage = this.getImage('selection');
+        const dragImage = this.getImage('drag');
+        const dragImageWidth = dragImage ? dragImage.width : 0;
+        if (this.type === 'selection-tree' && selectionImage) {
+            const selectionImageX = selectionImage.x;
+            const selectionImageWidth = selectionImage.width;
             // 树形图标在左侧，checkbox 在树形图标右侧
-            iconX = iconOffsetX + this.drawSelectionImageX + this.drawSelectionImageWidth;
+            iconX = iconOffsetX + selectionImageX + selectionImageWidth;
             drawTextX = iconX + iconWidth - CELL_PADDING / 2;
         }
         else if (this.type === 'tree-selection') {
             // 树形选择,两个图标宽度，文本已经有CELL_PADDING间距,/2看起来好看些
+            iconX += dragImageWidth;
             drawTextX = iconX + CHECKBOX_SIZE + iconWidth - CELL_PADDING / 2;
         }
         else {
             // 普通tree,文本已经有CELL_PADDING间距,/2看起来好看些
+            iconX += dragImageWidth;
             drawTextX = iconX + iconWidth - CELL_PADDING / 2;
         }
         // 更改文本距离
@@ -736,20 +691,21 @@ export default class Cell extends BaseCell {
             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;
-        }
+        this.setImage('tree', new CellImage(iconName, iconX, iconY, iconWidth, iconHeight, icon));
         // 树连线仅在绘制阶段调用，避免在 update 阶段被清屏
     }
+    updateDragImage() {
+        if (this.cellType === 'body' && this.column.dragRow) {
+            const { DRAG_ROW_ICON_SIZE, CELL_PADDING } = this.ctx.config;
+            const dragImageX = this.drawX + CELL_PADDING / 2;
+            const dragImageY = this.drawY + (this.visibleHeight - DRAG_ROW_ICON_SIZE) / 2;
+            const dragImage = new CellImage('drag', dragImageX, dragImageY, DRAG_ROW_ICON_SIZE, DRAG_ROW_ICON_SIZE, this.ctx.icons.get('drag'));
+            if (this.rowspan === 0) {
+                dragImage.setVisible(false);
+            }
+            this.setImage('drag', dragImage);
+        }
+    }
     drawTreeLine() {
         const { TREE_LINE, TREE_INDENT = 16, TREE_ICON_SIZE = 16, TREE_LINE_COLOR = '#e1e6eb' } = this.ctx.config;
         // 仅 body 且树类型才绘制
@@ -762,11 +718,18 @@ export default class Cell extends BaseCell {
         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;
+        const treeImage = this.getImage('tree');
+        if (!treeImage)
+            return;
+        const treeImageX = treeImage.x;
+        const treeImageY = treeImage.y;
+        const treeImageWidth = treeImage.width;
+        const treeImageHeight = treeImage.height;
+        const iconCenterX = treeImageX + treeImageWidth / 2;
+        const iconCenterY = treeImageY + treeImageHeight / 2;
         // 基于已计算的树图标位置反推基准点：当前图标左侧减去 level * TREE_INDENT
         // 这样无论对齐方式如何（left/center/right），都以实际图标为基准定位所有竖线
-        let baseX = this.drawTreeImageX - level * TREE_INDENT;
+        let baseX = treeImageX - level * TREE_INDENT;
         // 逐层画竖线（仅当 level > 0 才需要祖先连线）
         const parentRowKeys = Array.isArray(row.parentRowKeys) ? row.parentRowKeys : [];
         if (level > 0) {
@@ -781,7 +744,7 @@ export default class Cell extends BaseCell {
                 if (nextIsLast)
                     continue;
                 // 以当前树图标 X 为基准向左回推
-                const vx = Math.round(this.drawTreeImageX - (level - i) * TREE_INDENT + TREE_ICON_SIZE / 2);
+                const vx = Math.round(treeImageX - (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,
@@ -790,7 +753,7 @@ export default class Cell extends BaseCell {
                 });
             }
             // 父层（level-1）：无论父是不是末尾，都需要连接当前节点形成 L 型
-            const vxParent = Math.round(this.drawTreeImageX - TREE_INDENT + TREE_ICON_SIZE / 2);
+            const vxParent = Math.round(treeImageX - 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], {
@@ -810,7 +773,7 @@ export default class Cell extends BaseCell {
         }
         // 1) 父节点行：在图标正下画一段短竖线（展开时绘制，符合视觉预期）
         if (row.hasChildren && row.expand) {
-            const shortTop = this.drawTreeImageY + this.drawTreeImageHeight;
+            const shortTop = treeImageY + treeImageHeight;
             const shortBottom = this.drawY + this.visibleHeight;
             this.ctx.paint.drawLine([iconCenterX, shortTop, iconCenterX, shortBottom], {
                 borderColor: TREE_LINE_COLOR,
@@ -865,7 +828,7 @@ export default class Cell extends BaseCell {
             minY = yArr[0];
             maxY = yArr[1];
         }
-        if (HIGHLIGHT_HOVER_ROW && hoverCell) {
+        if (HIGHLIGHT_HOVER_ROW && hoverCell && !this.ctx.dragRowIng) {
             if (hoverCell.rowKey === this.rowKey) {
                 drawCellSkyBgColor = HIGHLIGHT_HOVER_ROW_COLOR;
             }
@@ -873,7 +836,7 @@ export default class Cell extends BaseCell {
                 drawCellSkyBgColor = HIGHLIGHT_HOVER_ROW_COLOR;
             }
         }
-        if (HIGHLIGHT_SELECTED_ROW && currentCell) {
+        if (HIGHLIGHT_SELECTED_ROW && currentCell && !this.ctx.dragRowIng) {
             if (currentCell.rowKey === this.rowKey) {
                 drawCellSkyBgColor = HIGHLIGHT_SELECTED_ROW_COLOR;
             }
@@ -1002,6 +965,9 @@ export default class Cell extends BaseCell {
                 checkboxName = 'checkbox-disabled';
             }
         }
+        const dragImage = this.getImage('drag');
+        const drawDragImageWidth = dragImage ? dragImage.width : 0;
+        iconX += drawDragImageWidth;
         // 判断是否溢出格子
         if (iconX + CHECKBOX_SIZE + CELL_PADDING > this.drawX + this.visibleWidth) {
             return;
@@ -1009,25 +975,25 @@ export default class Cell extends BaseCell {
         if (iconY + CHECKBOX_SIZE + CELL_PADDING > this.drawY + this.visibleHeight) {
             return;
         }
+        const selectionImage = new CellImage(checkboxName, iconX, iconY, CHECKBOX_SIZE, CHECKBOX_SIZE, checkboxImage);
         if (type === 'index-selection') {
+            selectionImage.setVisible(false);
             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;
+                selectionImage.setVisible(true);
+            }
+            let minY = this.rowIndex;
+            let maxY = this.rowIndex;
+            const hoverCell = this.ctx.hoverCell;
+            const spanInfo = this.getSpanInfo();
+            const { yArr } = spanInfo;
+            minY = yArr[0];
+            maxY = yArr[1];
+            if (hoverCell && hoverCell.rowIndex >= minY && hoverCell.rowIndex <= maxY) {
+                selectionImage.setVisible(true);
             }
         }
-        else {
-            this.drawSelectionImageX = iconX;
-            this.drawSelectionImageY = iconY;
-            this.drawSelectionImageWidth = CHECKBOX_SIZE;
-            this.drawSelectionImageHeight = CHECKBOX_SIZE;
-            this.drawSelectionImageName = checkboxName;
-            this.drawSelectionImageSource = checkboxImage;
-        }
+        this.setImage('selection', selectionImage);
     }
     updateHoverIcon() {
         const readonly = this.ctx.database.getReadonly(this.rowKey, this.key);
@@ -1051,7 +1017,7 @@ export default class Cell extends BaseCell {
         }
         // 永远放在右边
         const { hoverCell } = this.ctx;
-        if (this.hoverIconName && !this.ctx.editing && hoverCell) {
+        if (this.hoverIconName && !this.ctx.editing && !this.ctx.dragRowIng && hoverCell) {
             let _x = 0;
             let _y = 0;
             if (hoverCell.rowKey === this.rowKey) {
@@ -1071,12 +1037,11 @@ export default class Cell extends BaseCell {
                 }
             }
             const drawImageSource = this.ctx.icons.get(this.hoverIconName);
-            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;
+            const hoverImage = new CellImage(this.hoverIconName, _x, _y, CELL_HOVER_ICON_SIZE, CELL_HOVER_ICON_SIZE, drawImageSource);
+            if (this.rowspan === 0 || this.colspan === 0) {
+                hoverImage.setVisible(false);
+            }
+            this.setImage('hover', hoverImage);
         }
     }
     /**
@@ -1157,14 +1122,12 @@ export default class Cell extends BaseCell {
             if (this.rowspan === 0 || this.colspan === 0) {
                 return '';
             }
-            // 插槽不显示文本
-            if (this.render && this.renderType === 'default') {
+            // 自定义渲染为 default 且非混合渲染时不显示 canvas 文本
+            if (this.render && this.renderType === 'default' && !this.mixedRender) {
                 return '';
             }
-            //
-            if (this.type === 'index-selection' &&
-                ((this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === this.rowIndex) ||
-                    ['checkbox-disabled', 'checkbox-check'].includes(this.drawSelectionImageName))) {
+            const selectionImage = this.getImage('selection');
+            if (this.type === 'index-selection' && selectionImage && selectionImage.visible) {
                 return '';
             }
             if (this.text === null || this.text === undefined) {
@@ -1191,7 +1154,6 @@ export default class Cell extends BaseCell {
             }
             return this.row[this.key];
         }
-        // cellType === "body"
         // formatter优先等级比较高
         if (typeof this.formatter === 'function') {
             const _text = this.formatter({
@@ -1392,27 +1354,27 @@ export default class Cell extends BaseCell {
             lineHeight: CELL_LINE_HEIGHT,
             maxLineClamp: this.maxLineClamp,
             cacheTextKey,
+            layoutCallback: (layout) => {
+                this.ctx.emit('registerTextLayout', `${this.rowIndex}-${this.colIndex}`, layout);
+            },
         });
         return this.ellipsis;
     }
     drawImage() {
-        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.drawHoverImageSource) {
-            // 绘制hover图标背景
-            const { CELL_HOVER_ICON_BG_COLOR, CELL_HOVER_ICON_BORDER_COLOR } = this.ctx.config;
-            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);
-        }
+        // 遍历cellImages
+        this.getImages().forEach((image, key) => {
+            if (image.visible && image.source) {
+                if (key === 'hover') {
+                    // 绘制hover图标背景
+                    const { CELL_HOVER_ICON_BG_COLOR, CELL_HOVER_ICON_BORDER_COLOR } = this.ctx.config;
+                    image.drawWrapper(this.ctx, {
+                        borderColor: CELL_HOVER_ICON_BORDER_COLOR,
+                        fillColor: CELL_HOVER_ICON_BG_COLOR,
+                    });
+                }
+                this.ctx.paint.drawImage(image.source, image.x, image.y, image.width, image.height);
+            }
+        });
     }
     drawSelector() {
         if (this.cellType === 'footer') {