X6
X6 copied to clipboard
antvis
port 连接桩布局 的问题。同一个边使用不同 group 时布局重叠
问题描述
在使用连接桩时，同一个边上使用了 不同 group 的时，数量在 偶数时，会重叠，不会平均分配，加入严格按照平均分配也不确定
重现链接
https://codesandbox.io/p/sandbox/heuristic-satoshi-2ksz85
重现步骤
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 (
<div className="port-side-app">
<div className="app-side">
<Settings onChange={this.onAttrsChanged} />
</div>
<div className="app-content" ref={this.refContainer} />
</div>
);
}
}
addPorts 中的数组为偶数时 ，连接桩就会重叠
预期行为
希望能正确 平均分配
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox ...]
- X6 版本: [2.11.1 ...]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
验证了一下，目前的行为是按照group来平均分配的，所以哪怕是奇数其实也没有按照平均分配的逻辑来，不过似乎也还是按照position来平均分配会更好？🤔
