[Bug]: The ports of the jsx custom node settings are located in the upper left corner #6728

Describe the bug / 问题描述

使用的是官方的示例：https://g6.antv.antgroup.com/zh/examples/element/custom-node/#react-g

具体修改代码如下(只给node配置了ports属性)：

import { ExtensionCategory, Graph, register } from '@antv/g6';
import { GNode, Group, Image, Rect, Text } from '@antv/g6-extension-react';

register(ExtensionCategory.NODE, 'g', GNode);

const Node = ({ data, size }) => {
  const [width, height] = size;

  const { name, type, status, success, time, failure } = data.data;
  const color = status === 'success' ? '#30BF78' : '#F4664A';
  const radius = 4;

  const titleMap = {
    success: 'Success',
    time: 'Time',
    failure: 'Failure',
  };

  const format = (category, value) => {
    if (category === 'success') return `${value}%`;
    if (category === 'time') return `${value}min`;
    return value.toString();
  };

  const highlight = (category, value) => {
    if (category === 'success') {
      if (value >= 90) return 'green';
      if (value < 60) return 'red';
      return 'gray';
    }
    if (category === 'time') {
      if (value <= 10) return 'green';
      if (value >= 30) return 'red';
      return 'gray';
    }
    if (value >= 20) return 'red';
    if (value >= 5) return 'orange';
    return 'gray';
  };

  return (
    <Group>
      <Rect width={width} height={height} stroke={color} fill={'white'} radius={radius}>
        <Rect width={width} height={20} fill={color} radius={[radius, radius, 0, 0]}>
          <Image
            src={
              type === 'module'
                ? 'https://gw.alipayobjects.com/mdn/rms_8fd2eb/afts/img/A*0HC-SawWYUoAAAAAAAAAAABkARQnAQ'
                : 'https://gw.alipayobjects.com/mdn/rms_8fd2eb/afts/img/A*sxK0RJ1UhNkAAAAAAAAAAABkARQnAQ'
            }
            x={2}
            y={2}
            width={16}
            height={16}
          />
          <Text text={name} textBaseline="top" fill="#fff" fontSize={14} dx={20} dy={2} />
        </Rect>
        <Group transform="translate(5,40)">
          {Object.entries({ success, time, failure }).map(([key, value], index) => (
            <Group key={index} transform={`translate(${(index * width) / 3}, 0)`}>
              <Text text={titleMap[key]} fontSize={12} fill="gray" />
              <Text text={format(key, value)} fontSize={12} dy={16} fill={highlight(key, value)} />
            </Group>
          ))}
        </Group>
      </Rect>
    </Group>
  );
};

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [
      {
        id: 'node-1',
        data: { name: 'Module', type: 'module', status: 'success', success: 90, time: 58, failure: 8 },
        style: { x: 100, y: 100 },
      },
      {
        id: 'node-2',
        data: { name: 'Process', type: 'process', status: 'error', success: 11, time: 12, failure: 26 },
        style: { x: 300, y: 100 },
      },
    ],
    edges: [{ source: 'node-1', target: 'node-2' }],
  },
  node: {
    type: 'g',
    style: {
      size: [180, 60],
      component: (data) => <Node data={data} size={[180, 60]} />,
      ports: [
        { "key": "left", r: 6, "placement": [0, 0.5], "fill": "#D580FF" },
        { "key": "right", "placement": 'right', "fill": "#F4664A" },
        { "key": "top", r: 5, "placement": 'top', "fill": "#7E92B5" },
      ],
      portR: 3,
      portLineWidth: 1,
      portStroke: "#fff"
    },
  },
  behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
});

graph.render();

ports显示如下图所示：

Reproduction link / 复现链接

https://g6.antv.antgroup.com/zh/examples/element/custom-node/#react-g

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

在节点style中配置如下属性

     ports: [
        { "key": "left", r: 6, "placement": [0, 0.5], "fill": "#D580FF" },
        { "key": "right", "placement": 'right', "fill": "#F4664A" },
        { "key": "top", r: 5, "placement": 'top', "fill": "#7E92B5" },
      ],
      portR: 3,
      portLineWidth: 1,
      portStroke: "#fff"

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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