diff --git a/packages/g6/__tests__/demos/element-label-oversized.ts b/packages/g6/__tests__/demos/element-label-oversized.ts index 23d429d70e..45aa401f2a 100644 --- a/packages/g6/__tests__/demos/element-label-oversized.ts +++ b/packages/g6/__tests__/demos/element-label-oversized.ts @@ -8,7 +8,7 @@ export const elementLabelOversized: TestCase = async (context) => { data: { x: 100, y: 150, - label: `This label is too long to be displayed`, + label: `This label with padding is too long to be displayed`, size: 100, }, }, @@ -17,7 +17,7 @@ export const elementLabelOversized: TestCase = async (context) => { data: { x: 400, y: 150, - label: 'This label is too long to be displayed', + label: 'This label with padding is too long to be displayed', size: 150, }, }, @@ -50,6 +50,7 @@ export const elementLabelOversized: TestCase = async (context) => { labelBackgroundFill: '#eee', labelBackgroundFillOpacity: 0.5, labelBackgroundRadius: 4, + labelPadding: [0, 10, 0, 10], labelWordWrap: true, labelMaxLines: 4, }, diff --git a/packages/g6/__tests__/snapshots/elements/label-oversized/default.svg b/packages/g6/__tests__/snapshots/elements/label-oversized/default.svg index 1aab3c448b..bccd69c339 100644 --- a/packages/g6/__tests__/snapshots/elements/label-oversized/default.svg +++ b/packages/g6/__tests__/snapshots/elements/label-oversized/default.svg @@ -31,15 +31,18 @@ - + - This label is + This label with - too long to be + padding is too + + + long to be displayed @@ -54,15 +57,18 @@ - + - This label is too long to + This label with padding - be displayed + is too long to be + + + displayed diff --git a/packages/g6/src/elements/shapes/label.ts b/packages/g6/src/elements/shapes/label.ts index cbd39d0947..cb4a58f846 100644 --- a/packages/g6/src/elements/shapes/label.ts +++ b/packages/g6/src/elements/shapes/label.ts @@ -91,7 +91,7 @@ export class Label extends BaseShape { Object.assign(backgroundStyle, { x: minX - left, y: minY - top, - width: wordWrap ? Math.min(totalWidth, wordWrapWidth) : totalWidth, + width: wordWrap ? Math.min(totalWidth, wordWrapWidth + left + right) : totalWidth, height: halfHeight * 2 + top + bottom, }); }