Skip to content

Commit

Permalink
Merge pull request #1332 from VisActor/1331-bug-sparkline-row-height
Browse files Browse the repository at this point in the history 
1331 bug sparkline row height
  • Loading branch information
@fangsmile
fangsmile committed Mar 25, 2024
2 parents bde7592 + 5ce39bd commit c3bc1d3
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 106 deletions.
11 changes: 11 additions & 0 deletions common/changes/@visactor/vtable/1331-bug-sparkline-row-height_2024-03-21-06-52.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "fix: compute row height handle with sparkline cellType #1331\n\n",
"type": "none",
"packageName": "@visactor/vtable"
}
],
"packageName": "@visactor/vtable",
"email": "[email protected]"
}
214 changes: 108 additions & 106 deletions packages/vtable/src/scenegraph/layout/compute-row-height.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export function computeRowsHeight(
}

export function computeRowHeight(row: number, startCol: number, endCol: number, table: BaseTableAPI): number {
let maxHeight = 0;
let maxHeight;
// 如果是透视图
if (
table.isPivotChart() &&
Expand All @@ -338,7 +338,7 @@ export function computeRowHeight(row: number, startCol: number, endCol: number,
// CustomRender height calculation
const customHeight = computeCustomRenderHeight(col, row, table);
if (customHeight) {
maxHeight = Math.max(customHeight.height, maxHeight);
maxHeight = isValid(maxHeight) ? Math.max(customHeight.height, maxHeight) : customHeight.height;
if (!customHeight.renderDefault) {
continue;
}
Expand All @@ -351,7 +351,7 @@ export function computeRowHeight(row: number, startCol: number, endCol: number,
if (axisConfig) {
const axisWidth = computeAxisComponentHeight(axisConfig, table);
if (typeof axisWidth === 'number') {
maxHeight = Math.max(axisWidth, maxHeight);
maxHeight = isValid(maxHeight) ? Math.max(axisWidth, maxHeight) : axisWidth;
continue;
}
}
Expand All @@ -367,25 +367,24 @@ export function computeRowHeight(row: number, startCol: number, endCol: number,
const cellType = table.isHeader(col, row)
? (table._getHeaderLayoutMap(col, row) as HeaderData)?.headerType
: table.getBodyColumnType(col, row);
if (
isValid(cellType) &&
cellType !== 'text' &&
cellType !== 'link' &&
cellType !== 'progressbar' &&
cellType !== 'checkbox'
) {
// text&link&progressbar测量文字宽度
// image&video&sparkline使用默认宽度
const defaultHeight = table.getDefaultRowHeight(row);
maxHeight = Math.max(maxHeight, isNumber(defaultHeight) ? defaultHeight : table.defaultRowHeight);
continue;
}
// if ( isValid(cellType) && cellType !== 'text' && cellType !== 'link' && cellType !== 'progressbar' && cellType !== 'checkbox') {
// // text&link&progressbar测量文字宽度
// // image&video&sparkline使用默认宽度
// const defaultHeight = table.getDefaultRowHeight(row);
// maxHeight = Math.max(maxHeight, isNumber(defaultHeight) ? defaultHeight : table.defaultRowHeight);
// continue;
// }

// text height calculation
const textHeight = computeTextHeight(col, row, cellType, table);
maxHeight = Math.max(textHeight, maxHeight);
maxHeight = isValid(maxHeight) ? Math.max(textHeight, maxHeight) : textHeight;
}
if (isValid(maxHeight)) {
return maxHeight;
}
return maxHeight;

const defaultHeight = table.getDefaultRowHeight(row);
return isNumber(defaultHeight) ? defaultHeight : table.defaultRowHeight;
}

function checkFixedStyleAndNoWrap(table: BaseTableAPI): boolean {
Expand Down Expand Up @@ -646,99 +645,102 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption,
const fontFamily = getProp('fontFamily', actStyle, col, row, table);
const autoWrapText = getProp('autoWrapText', actStyle, col, row, table);
let text;
if (cellType === 'checkbox') {
text = isObject(cellValue) ? (cellValue as any).text : cellValue;
if (cellType !== 'text' && cellType !== 'link' && cellType !== 'progressbar' && cellType !== 'checkbox') {
maxHeight = lineHeight;
} else {
text = cellValue;
}
const lines = validToString(text).split('\n') || [];

const cellWidth = table.getColsWidth(col, endCol);

if (cellType === 'checkbox') {
const size = getProp('size', actStyle, col, row, table);
if (autoWrapText) {
const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', actStyle, col, row, table);
const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - size - spaceBetweenTextAndIcon;
utilCheckBoxMark.setAttributes({
text: {
maxLineWidth,
text: lines,
fontSize,
fontStyle,
fontWeight,
fontFamily,
lineHeight,
wordBreak: 'break-word'
},
icon: {
width: Math.floor(size / 1.4), // icon : box => 10 : 14
height: Math.floor(size / 1.4)
},
box: {
width: size,
height: size
},
spaceBetweenTextAndIcon
if (cellType === 'checkbox') {
text = isObject(cellValue) ? (cellValue as any).text : cellValue;
} else {
text = cellValue;
}
const lines = validToString(text).split('\n') || [];

const cellWidth = table.getColsWidth(col, endCol);

if (cellType === 'checkbox') {
const size = getProp('size', actStyle, col, row, table);
if (autoWrapText) {
const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', actStyle, col, row, table);
const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - size - spaceBetweenTextAndIcon;
utilCheckBoxMark.setAttributes({
text: {
maxLineWidth,
text: lines,
fontSize,
fontStyle,
fontWeight,
fontFamily,
lineHeight,
wordBreak: 'break-word'
},
icon: {
width: Math.floor(size / 1.4), // icon : box => 10 : 14
height: Math.floor(size / 1.4)
},
box: {
width: size,
height: size
},
spaceBetweenTextAndIcon
});
utilCheckBoxMark.render();
maxHeight = utilTextMark.AABBBounds.height();
} else {
maxHeight = Math.max(size, lines.length * lineHeight);
}
} else if (iconInlineFront.length || iconInlineEnd.length) {
// if (autoWrapText) {
const textOption = Object.assign({
text: cellValue?.toString(),
fontFamily,
fontSize,
fontStyle,
fontWeight,
lineHeight
});
utilCheckBoxMark.render();
maxHeight = utilTextMark.AABBBounds.height();
textOption.textBaseline = 'middle';
const textConfig = [
...iconInlineFront.map(icon => dealWithRichTextIcon(icon)),
textOption,
...iconInlineEnd.map(icon => dealWithRichTextIcon(icon))
];
utilRichTextMark.setAttributes({
width: cellWidth - (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 = cellWidth - (padding[1] + padding[3]) - iconWidth;
utilTextMark.setAttributes({
maxLineWidth,
text: lines,
fontSize,
fontStyle,
fontWeight,
fontFamily,
lineHeight,
wordBreak: 'break-word',
whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
});
maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
} else {
maxHeight = Math.max(size, lines.length * lineHeight);
// autoWrapText = false
maxHeight = lines.length * lineHeight;
}
} else if (iconInlineFront.length || iconInlineEnd.length) {
// if (autoWrapText) {
const textOption = Object.assign({
text: cellValue?.toString(),
fontFamily,
fontSize,
fontStyle,
fontWeight,
lineHeight
});
textOption.textBaseline = 'middle';
const textConfig = [
...iconInlineFront.map(icon => dealWithRichTextIcon(icon)),
textOption,
...iconInlineEnd.map(icon => dealWithRichTextIcon(icon))
];
utilRichTextMark.setAttributes({
width: cellWidth - (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 = cellWidth - (padding[1] + padding[3]) - iconWidth;
utilTextMark.setAttributes({
maxLineWidth,
text: lines,
fontSize,
fontStyle,
fontWeight,
fontFamily,
lineHeight,
wordBreak: 'break-word',
whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
});
maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
} else {
// autoWrapText = false
maxHeight = lines.length * lineHeight;
}

return (Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow;
}

Expand Down

0 comments on commit c3bc1d3

Please sign in to comment.