fix: label background word wrap width (#6055)

* fix: label background 折行宽度修改 * feat: 更新label-oversized 测试demo和截图 --------- Co-authored-by: xwb163631 <xwb163631@gongdao.com>
antvis · Jul 18, 2024 · f72d4c2 · f72d4c2
1 parent 3f775f9
commit f72d4c2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git 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
diff --git 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<LabelStyleProps> {
       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,
       });
     }