Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "fix: the width of title label should auto fit content width when `autoWidth` is true, fix #3880\n\n",
"type": "none",
"packageName": "@visactor/vchart"
}
],
"packageName": "@visactor/vchart",
"email": "dingling112@gmail.com"
}
Original file line number Diff line number Diff line change
Expand Up @@ -304,17 +304,32 @@ export class DomTooltipHandler extends BaseTooltipHandler {
}
protected _updateDomStyle(sizeKey: 'width' | 'height' = 'width') {
const rootDom = this._rootDom;

const contentDom = [...(rootDom.children as any)].find(child =>
child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)
);
const titleDom = [...(rootDom.children as any)].find(child => child.className.includes(TOOLTIP_TITLE_CLASS_NAME));

if (contentDom) {
const tooltipSpec = this._component.getSpec() as ITooltipSpec;
const contentStyle: Partial<CSSStyleDeclaration> = {};
const titleLabel = tooltipSpec.style?.titleLabel;
const autoFixTitleWidth = titleLabel && titleLabel.autoWidth && titleLabel.multiLine !== false;

if (autoFixTitleWidth && titleDom) {
const maxWidth = [...(contentDom.children as any)].reduce((res, col) => {
return sizeKey === 'height'
? res + col.getBoundingClientRect().width
: Math.max(res, col.getBoundingClientRect().width);
}, 0);

if (maxWidth > 0) {
titleDom.style.maxWidth = `${maxWidth}px`;
// 需要再计算一次,因为之前可能因为没有设置maxWidth, content的dom被撑宽了
titleDom.style.maxWidth = `${Math.ceil(contentDom.getBoundingClientRect().width)}px`;
}
}

if (isValid(tooltipSpec?.style?.maxContentHeight)) {
const titleDom = rootDom.children[0];
const titleHeight =
titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME)
? titleDom.getBoundingClientRect().height + (tooltipSpec.style.spaceRow ?? 0)
Expand Down
Loading