@ai-table/grid 0.5.8 → 0.5.9

package/fesm2022/ai-table-grid.mjs

@@ -945,7 +945,7 @@ const AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD = 40;
 const AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 const AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 const AI_TABLE_FIELD_STAT_INNER_HEIGHT = 47; // 字段统计内部高度
-const AI_TABLE_TEXT_LINE_HEIGHT = 1.84; // 默认文本行高
+const AI_TABLE_TEXT_LINE_HEIGHT = 1.7; // 默认文本行高
 const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT + AI_TABLE_CELL_LINE_BORDER * 2; // 统计容器高度
 const AI_TABLE_GROUP_MAX_LEVEL = 3;
 const AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON = 'AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON';
@@ -3814,7 +3814,7 @@ function getPlaceHolderCellsConfigs(options) {
                 fill: Colors.transparent,
                 strokeEnabled: false,
                 hitStrokeWidth: 0,
-                transformsEnabled: 'position',
+                transformsEnabled: DEFAULT_TEXT_TRANSFORMS_ENABLED,
                 perfectDrawEnabled: false,
                 shadowEnabled: false
             });
@@ -4518,7 +4518,7 @@ class Drawer {
         return res;
     }
     wrapTextWithKonva(options) {
-        const { x, y, text, maxWidth, maxHeight, lineHeight = AI_TABLE_TEXT_LINE_HEIGHT, maxRow = DEFAULT_WRAP_TEXT_MAX_ROW, fontSize = DEFAULT_FONT_SIZE, fillStyle = this.colors.gray800, textAlign = DEFAULT_TEXT_ALIGN_LEFT, verticalAlign = DEFAULT_TEXT_VERTICAL_ALIGN_TOP, fontWeight = DEFAULT_FONT_WEIGHT, textDecoration = DEFAULT_TEXT_DECORATION, fieldType, needDraw = false } = options;
+        const { x, y, text, maxWidth, maxHeight, lineHeight = AI_TABLE_TEXT_LINE_HEIGHT, maxRow, fontSize = DEFAULT_FONT_SIZE, fillStyle = this.colors.gray800, textAlign = DEFAULT_TEXT_ALIGN_LEFT, verticalAlign = DEFAULT_TEXT_VERTICAL_ALIGN_TOP, fontWeight = DEFAULT_FONT_WEIGHT, textDecoration = DEFAULT_TEXT_DECORATION, fieldType, needDraw = false } = options;
         let offsetX = 0;
         const fontStyle = DEFAULT_FONT_STYLE;
         const baselineOffset = verticalAlign === DEFAULT_TEXT_VERTICAL_ALIGN_TOP ? fontSize / 2 : 0;
@@ -4543,7 +4543,7 @@ 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) {
@@ -4552,12 +4552,12 @@ class Drawer {
             return cacheTextData;
         }
         const resultData = [];
-        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,
@@ -4565,7 +4565,7 @@ class Drawer {
             verticalAlign: 'top',
             fontStyle: fontStyle,
             ellipsis: true,
-            transformsEnabled: true,
+            transformsEnabled: DEFAULT_TEXT_TRANSFORMS_ENABLED,
             listening: false
         });
         konvaText.textArr.forEach((item, index) => {
@@ -5385,7 +5385,7 @@ class AITableActionIcon {
             };
         }, ...(ngDevMode ? [{ debugName: "iconGroupConfig" }] : []));
         this.iconConfig = computed(() => {
-            let { type, data, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill, hoverFill: hoverFill, transformsEnabled = 'position' } = this.config();
+            let { type, data, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill, hoverFill: hoverFill, transformsEnabled = DEFAULT_TEXT_TRANSFORMS_ENABLED } = this.config();
             fill = fill || Colors.gray600;
             let pathData = data;
             switch (type) {
@@ -6499,7 +6499,7 @@ class CellDrawer extends Drawer {
             this.wrapTextWithKonva({
                 x: renderX,
                 y: renderY,
-                maxHeight: rowHeight,
+                maxHeight: rowHeight - AI_TABLE_CELL_PADDING,
                 text: renderText,
                 maxWidth: textMaxWidth,
                 maxRow,
@@ -7337,7 +7337,7 @@ class AITableIcon {
             };
         }, ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : []));
         this.iconConfig = computed(() => {
-            const { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill = Colors.gray600, transformsEnabled = 'position', disabled } = this.config();
+            const { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill = Colors.gray600, transformsEnabled = DEFAULT_TEXT_TRANSFORMS_ENABLED, disabled } = this.config();
             let pathData = data;
             switch (type) {
                 case AITableCheckType.checked:
@@ -10934,23 +10934,29 @@ class AITableCellText extends CoverCellBase {
         }, ...(ngDevMode ? [{ debugName: "scrollConfig" }] : []));
         this.expandTextBounds = computed(() => {
             const textRender = this.textString();
-            const tmpText = new Konva.Text({
+            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
             };
         }, ...(ngDevMode ? [{ debugName: "expandTextBounds" }] : []));
         this.textMaxWidth = computed(() => {
@@ -10980,24 +10986,25 @@ class AITableCellText extends CoverCellBase {
             const render = this.config()?.render;
             if (render) {
                 const { x, y, transformValue, field, columnWidth, rowHeight, style, zIndex, recordId } = render;
-                let textRender = this.textString();
-                if (isUndefinedOrNull(textRender)) {
+                let text = 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
                 };
             }
@@ -11019,7 +11026,7 @@ 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,