port 连接桩布局 的问题。同一个边使用不同 group 时布局重叠

### 问题描述

在使用连接桩时，同一个边上使用了 不同 group 的时，数量在 偶数时，会重叠，不会平均分配，加入严格按照平均分配也不确定

### 重现链接

https://codesandbox.io/p/sandbox/heuristic-satoshi-2ksz85

### 重现步骤

```import React from "react";
import { Graph, Node } from "@antv/x6";
import { Settings, State } from "./settings";
import "./index.less";

export default class Example extends React.Component {
private container: HTMLDivElement;
private node: Node;

componentDidMount() {
const graph = new Graph({
container: this.container,
background: {
color: "#F2F7FA",
},
});

this.node = graph.addNode({
x: 160,
y: 110,
width: 280,
height: 120,
attrs: {
body: {
refWidth: "100%",
refHeight: "100%",
fill: "#fff",
stroke: "#8f8f8f",
strokeWidth: 1,
},
label: { text: "left", fill: "#888" },
},
ports: {
groups: {
"left-in": {
position: {
name: "left",
args: {
dx: 2,
angle: 270,
},
},
label: {
position: {
name: "left",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"left-out": {
position: {
name: "left",
args: {
dx: 0,
angle: 90,
},
},
label: {
position: {
name: "left",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"top-in": {
position: {
name: "top",
args: {
dx: 0,
angle: 0,
},
},
label: {
position: {
name: "top",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"top-out": {
position: {
name: "top",
args: {
dx: 2,
angle: 180,
},
},
label: {
position: {
name: "top",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"right-in": {
position: {
name: "right",
args: {
dx: -2,
angle: 90,
},
},
label: {
position: {
name: "right",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"right-out": {
position: {
name: "right",
args: {
dx: 0,
angle: 270,
},
},
label: {
position: {
name: "right",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"bottom-in": {
position: {
name: "bottom",
args: {
dx: 0,
angle: 180,
},
},
label: {
position: {
name: "bottom",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
"bottom-out": {
position: {
name: "bottom",
args: {
dx: 0,
angle: 0,
},
},
label: {
position: {
name: "bottom",
},
},
markup: [
{
tagName: "path",
selector: "path",
},
],
attrs: {
path: {
d: "M -4 -5 L 0 5 L 4 -5 Z",
fill: "#FFFFFF",
stroke: "#8f8f8f",
magnet: true,
},
},
},
},
},
});

this.node.addPorts([
{
group: "top-in",
},
{
group: "top-out",
},
{
group: "top-in",
},
{
group: "top-in",
},
]);
}

onAttrsChanged = ({ position, strict, ...args }: State) => {
this.node.prop("ports/groups/group1/position", {
name: position,
args: { strict },
});
this.node.attr("label/text", position);
this.node.portProp("port2", { args } as any);
};

refContainer = (container: HTMLDivElement) => {
this.container = container;
};

render() {
return (

Start with the linked CodeSandbox reproduction and the addPorts call that creates four ports using top-in and top-out groups. Trace the port-group position and layout entry points involved by onAttrsChanged, then verify that an even number of ports using different groups no longer overlap and are distributed evenly.

Written by the indexing model from the issue text.