fix: #WIK-19521 【aitable】排查：点击单元格卡顿（点空白处再点单元格，见附件）

packages/grid/src/constants/table.ts

@@ -109,7 +109,7 @@ export const AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2
 export const AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 
 export const AI_TABLE_FIELD_STAT_INNER_HEIGHT = 47; // 字段统计内部高度
-export const AI_TABLE_TEXT_LINE_HEIGHT = 1.84; // 默认文本行高
+export const AI_TABLE_TEXT_LINE_HEIGHT = 1.7; // 默认文本行高
 export const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT + AI_TABLE_CELL_LINE_BORDER * 2; // 统计容器高度
 
 export const AI_TABLE_GROUP_MAX_LEVEL = 3;

packages/grid/src/renderer/components/cells/single-text.component.ts

@@ -11,19 +11,21 @@ import {
     DEFAULT_FONT_FAMILY,
     DEFAULT_FONT_SIZE,
     DEFAULT_FONT_STYLE,
+    DEFAULT_FONT_WEIGHT,
     DEFAULT_TEXT_ALIGN_LEFT,
-    DEFAULT_TEXT_ELLIPSIS,
-    DEFAULT_TEXT_TRANSFORMS_ENABLED,
-    DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE
+    DEFAULT_TEXT_DECORATION,
+    DEFAULT_TEXT_LINE_HEIGHT,
+    DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE,
+    DEFAULT_WRAP_TEXT_MAX_ROW
 } from '../../../constants';
 import { generateTargetName, setExpandCellInfo } from '../../../utils';
 import { AITableFieldType, isUndefinedOrNull } from '@ai-table/utils';
 import { TextConfig } from 'konva/lib/shapes/Text';
 import { AITableTextComponent } from '../text.component';
 import { CoverCellBase } from './cover-cell-base';
 import { KoShape, KoContainer } from '../../../angular-konva';
-import Konva from 'konva';
 import { AITableScrollableGroup, ScrollableGroupConfig } from '../scrollable-group';
+import { drawer } from '../../drawers/drawer';
 
 @Component({
     selector: 'ai-table-single-text',
@@ -124,24 +126,32 @@ export class AITableCellText extends CoverCellBase {
 
     expandTextBounds = computed(() => {
         const textRender = this.textString();
-        const tmpText = new Konva.Text({
-            text: textRender,
+        const render = this.config()?.render;
+        if (!render) {
+            return { height: 0, data: [] };
+        }
+        const { x, y } = render;
+
+        const text = drawer.wrapTextWithKonva({
+            x,
+            y,
+            text: textRender!,
+            maxWidth: this.textMaxWidth(),
             fontSize: DEFAULT_FONT_SIZE,
-            fontFamily: DEFAULT_FONT_FAMILY,
             lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
-            wrap: 'char',
-            width: this.textMaxWidth(),
-            align: DEFAULT_TEXT_ALIGN_LEFT,
-            verticalAlign: 'top',
-            fontStyle: DEFAULT_FONT_STYLE,
-            ellipsis: DEFAULT_TEXT_ELLIPSIS,
-            transformsEnabled: DEFAULT_TEXT_TRANSFORMS_ENABLED,
-            listening: false
+            textAlign: DEFAULT_TEXT_ALIGN_LEFT,
+            verticalAlign: DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE,
+            fillStyle: Colors.primary,
+            fontWeight: DEFAULT_FONT_WEIGHT,
+            textDecoration: DEFAULT_TEXT_DECORATION,
+            fieldType: AITableFieldType.text,
+            needDraw: false
         });
         return {
-            ...tmpText.getClientRect(),
-            height: tmpText.getClientRect().height + this.startY() * 2 - AI_TABLE_CELL_LINE_BORDER
+            ...text,
+            height: text.height + AI_TABLE_CELL_PADDING + AI_TABLE_CELL_LINE_BORDER
         };
+
     });
 
     textMaxWidth = computed(() => {
@@ -177,27 +187,28 @@ export class AITableCellText extends CoverCellBase {
         const render = this.config()?.render;
         if (render) {
             const { x, y, transformValue, field, columnWidth, rowHeight, style, zIndex, recordId } = render;
-            let textRender: string | undefined = this.textString();
-            if (isUndefinedOrNull(textRender)) {
+            let text: string | undefined = this.textString();
+            if (isUndefinedOrNull(text)) {
                 return;
             }
-            const { height } = this.expandTextBounds();
-
+            const { height, data } = this.expandTextBounds();
+            const textRender = data.map((item) => item.text).join('\n');
             return {
                 x,
                 y: this.startY(),
                 name: this.cellName(),
                 text: textRender,
-                wrap: 'char',
+                wrap: 'none',
                 width: this.textMaxWidth(),
                 fillStyle: Colors.primary,
                 lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
                 verticalAlign: 'top',
                 height,
                 listening: true,
-                ellipsis: true,
+                ellipsis: false,
                 zIndex
             };
+
         }
         return;
     });
@@ -219,7 +230,7 @@ export class AITableCellText extends CoverCellBase {
                 wrap: 'char',
                 width: this.textMaxWidth(),
                 fillStyle: Colors.primary,
-                height: rowHeight + AI_TABLE_CELL_LINE_BORDER * 2,
+                height: rowHeight - AI_TABLE_CELL_PADDING,
                 lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
                 listening: false,
                 ellipsis: true,

packages/grid/src/renderer/drawers/cell-drawer.ts

@@ -195,7 +195,7 @@ export class CellDrawer extends Drawer {
             this.wrapTextWithKonva({
                 x: renderX,
                 y: renderY,
-                maxHeight: rowHeight,
+                maxHeight: rowHeight - AI_TABLE_CELL_PADDING,
                 text: renderText,
                 maxWidth: textMaxWidth,
                 maxRow,

packages/grid/src/renderer/drawers/drawer.ts

@@ -378,7 +378,7 @@ export class Drawer {
             maxWidth,
             maxHeight,
             lineHeight = AI_TABLE_TEXT_LINE_HEIGHT,
-            maxRow = DEFAULT_WRAP_TEXT_MAX_ROW,
+            maxRow,
             fontSize = DEFAULT_FONT_SIZE,
             fillStyle = this.colors.gray800,
             textAlign = DEFAULT_TEXT_ALIGN_LEFT,
@@ -412,7 +412,7 @@ export class Drawer {
 
         if (fillStyle) this.setStyle({ fillStyle });
         this.ctx.textAlign = textAlign;
-        const cacheKey = `${fontStyleKey}-${maxRow}-${maxWidth || 0}-${maxHeight || 0}-${fieldType}-${text}`;
+        const cacheKey = `${fontStyleKey}-${(maxRow || 1)}-${maxWidth || 0}-${maxHeight || 0}-${fieldType}-${text}`;
         const cacheTextData = textDataCache.get(cacheKey);
         if (cacheTextData) {
             if (this.needDraw && needDraw) {
@@ -422,12 +422,12 @@ export class Drawer {
         }
 
         const resultData: AITableWrapTextData = [];
-        const height = maxHeight ? maxHeight : maxRow * lineHeight * fontSize;
+        const height = maxHeight ? maxHeight : maxRow ? (maxRow) * lineHeight * fontSize : undefined;
         const konvaText = new Konva.Text({
             text,
             fontSize,
             fontFamily: DEFAULT_FONT_FAMILY,
-            lineHeight: 1.84,
+            lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
             wrap: 'char',
             width: maxWidth,
             height: height,