diff --git a/packages/vtable/examples/icon/icon-register.ts b/packages/vtable/examples/icon/icon-register.ts index 61e991584..fef65a43d 100644 --- a/packages/vtable/examples/icon/icon-register.ts +++ b/packages/vtable/examples/icon/icon-register.ts @@ -345,6 +345,12 @@ export function createTable() { } } ] + // style: { + // autoWrapText: true + // }, + // headerStyle: { + // autoWrapText: true + // } }, { field: 'id', diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index 566b9e9ce..cf959e01d 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -9,6 +9,7 @@ import { WrapText } from '../graphic/text'; import { getProp } from '../utils/get-prop'; import { getQuadProps } from '../utils/padding'; import { getCellRect } from './compute-col-width'; +import { dealWithRichTextIcon } from '../utils/text-icon-layout'; const utilTextMark = new WrapText({ autoWrapText: true @@ -203,7 +204,7 @@ function computeTextHeight(col: number, row: number, table: BaseTableAPI): numbe icon.positionType !== IconPosition.inlineEnd ) { iconWidth += (icon.width ?? 0) + (icon.marginLeft ?? 0) + (icon.marginRight ?? 0); - iconHeight = Math.max(iconHeight, (icon.height ?? 0) + (icon.marginLeft ?? 0) + (icon.marginRight ?? 0)); + iconHeight = Math.max(iconHeight, icon.height ?? 0); } else if (icon.positionType === IconPosition.inlineFront) { iconInlineFront.push(icon); iconInlineFrontHeight = Math.max( @@ -233,37 +234,37 @@ function computeTextHeight(col: number, row: number, table: BaseTableAPI): numbe const lines = validToString(cellValue).split('\n') || []; if (iconInlineFront.length || iconInlineEnd.length) { - if (autoWrapText) { - const textOption = Object.assign({ - text: cellValue?.toString(), - fontFamily, - fontSize, - lineHeight - }); - textOption.textBaseline = 'middle'; - const textConfig = [ - ...iconInlineFront.map(icon => dealWithRichTextIcon(icon)), - textOption, - ...iconInlineEnd.map(icon => dealWithRichTextIcon(icon)) - ]; - utilRichTextMark.setAttributes({ - width: table.getColWidth(col) - (padding[1] + padding[3]) - iconWidth, - height: 0, - textConfig - }); - maxHeight = utilRichTextMark.AABBBounds.height(); - } else { - maxHeight = 0; - lines.forEach((line: string, index: number) => { - if (index === 0 && iconInlineFront.length) { - maxHeight += Math.max(lineHeight, iconInlineFrontHeight); - } else if (index === lines.length - 1 && iconInlineEnd.length) { - maxHeight += Math.max(lineHeight, iconInlineEndHeight); - } else { - maxHeight += lineHeight; - } - }); - } + // if (autoWrapText) { + const textOption = Object.assign({ + text: cellValue?.toString(), + fontFamily, + fontSize, + lineHeight + }); + textOption.textBaseline = 'middle'; + const textConfig = [ + ...iconInlineFront.map(icon => dealWithRichTextIcon(icon)), + textOption, + ...iconInlineEnd.map(icon => dealWithRichTextIcon(icon)) + ]; + utilRichTextMark.setAttributes({ + width: table.getColWidth(col) - (padding[1] + padding[3]) - iconWidth, + height: 0, + textConfig + }); + maxHeight = utilRichTextMark.AABBBounds.height(); + // } else { + // maxHeight = 0; + // lines.forEach((line: string, index: number) => { + // if (index === 0 && iconInlineFront.length) { + // maxHeight += Math.max(lineHeight, iconInlineFrontHeight); + // } else if (index === lines.length - 1 && iconInlineEnd.length) { + // maxHeight += Math.max(lineHeight, iconInlineEndHeight); + // } else { + // maxHeight += lineHeight; + // } + // }); + // } } else if (autoWrapText) { const maxLineWidth = table.getColWidth(col) - (padding[1] + padding[3]) - iconWidth; utilTextMark.setAttributes({ @@ -280,10 +281,3 @@ function computeTextHeight(col: number, row: number, table: BaseTableAPI): numbe return (Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow; } - -function dealWithRichTextIcon(iconConfig: ColumnIconOption) { - return { - width: iconConfig.width, - height: iconConfig.height - }; -} diff --git a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts index 9c0457b7f..ba0bd55e7 100644 --- a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts +++ b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts @@ -403,7 +403,7 @@ export function dealWithIcon( * @param {ColumnIconOption} icon * @return {*} */ -function dealWithRichTextIcon(icon: ColumnIconOption) { +export function dealWithRichTextIcon(icon: ColumnIconOption) { // positionType在外部处理 const config = {} as any;