[Bug]: Setting offsetX and offsetY in getLabelStyle does not take effect

[zmbxy]

Describe the bug / 问题描述

自定义边，在getLabelStyle中设置offsetX、offsetY不生效

import { BaseEdge, ExtensionCategory, Graph, register } from '@antv/g6';

class PolylineEdge extends BaseEdge {

  getKeyStyle(attributes) {
    return { ...super.getKeyStyle(attributes), lineWidth: 2, stroke: '#000' };
  }

  getLabelStyle(attributes) {
    const labelStyle = {
      ...super.getLabelStyle(attributes),
      offsetX: 30,
      offsetY: 30,
    }
    console.log(labelStyle);
    return labelStyle;
  }

  drawLabelShape(attributes, container) {
    const style = this.getLabelStyle(attributes);
    this.upsert('label', Label, style, container);
  }

  getKeyPath(attributes) {
    const [sourcePoint, targetPoint] = this.getEndpoints(attributes);

    return [
      ['M', sourcePoint[0], sourcePoint[1]],
      ['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], sourcePoint[1]],
      ['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], targetPoint[1]],
      ['L', targetPoint[0], targetPoint[1]],
    ];
  }
}

register(ExtensionCategory.EDGE, 'custom-polyline', PolylineEdge);

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [
      { id: 'node-0', style: { x: 100, y: 100, ports: [{ key: 'right', placement: [1, 0.5] }] } },
      { id: 'node-1', style: { x: 250, y: 200, ports: [{ key: 'left', placement: [0, 0.5] }] } },
    ],
    edges: [{ source: 'node-0', target: 'node-1' }],
  },
  edge: {
    type: 'custom-polyline',
    style: {
      startArrow: true,
      endArrow: true,
      stroke: '#000',
      labelText: '12313',
    },
  },
  behaviors: ['drag-element'],
});

graph.render();

预期：

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[petercat-assistant]

在您的代码中，您尝试在 getLabelStyle 方法中设置 offsetX 和 offsetY，但这些属性似乎没有生效。这个问题可能与 upsert 方法的实现有关，或者与 Label 的处理方式有关。

以下是一些可能的解决方案和检查步骤：

1. 检查 upsert 方法：确保 upsert 方法正确地应用了 offsetX 和 offsetY。如果 upsert 方法没有考虑这些属性，您可能需要修改它以支持这些偏移量。

2. 验证 Label 的实现：确保 Label 组件能够接受并正确处理 offsetX 和 offsetY 属性。

3. 调试日志：您已经在 getLabelStyle 中使用了 console.log 来输出 labelStyle。请确保这些日志显示的值是正确的，并且在 upsert 方法中没有被覆盖或忽略。

4. 检查 G6 文档：确认 offsetX 和 offsetY 是在当前版本的 G6 中支持的属性，并且它们的用法符合文档说明。

如果这些步骤没有解决问题，您可能需要查看 G6 的源代码或相关文档，以确保这些属性在自定义边中是可用的。

如果需要进一步的帮助，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.