自定义Node，添加边时不居中显示

[bingxueyinlian]

问题描述

使用vue自定义组件的节点，添加边线时，没有垂直居中.

重现链接

https://codesandbox.io/s/vue-shape-8ciig

重现步骤

在上面的连接中，添加一行边线的代码：

    graph.addEdge({
      shape: "edge", // 指定使用何种图形，默认值为 'edge'
      source: "1",
      target: "2",
      label: "edge",
    });

预期行为

边线的在垂直方向与两按钮对齐。

平台

• 操作系统: [ Windows 10]
• 网页浏览器: [Google Chrome]
• X6 版本: 1.32.7
• x6-vue-shape 版本: 1.4.0

屏幕截图或视频（可选）

补充说明（可选）

No response

[x6-bot]

👋 @bingxueyinlian

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[lloydzhou]

简单的给x6-node *加上边框，就可以比较清楚的看到，实际上是添加节点的时候，给节点定义了100px的高度，而内部使用vue渲染出来的button并不能占满整个节点所在的范围。

而边的绘制是按照整个节点范围计算连接的位置的。

所以，正确的处理方式是需要确保当前节点的size和内部的vue组件的大小相匹配。
这样就能获得预期的结果了。

[bingxueyinlian]

@lloydzhou
您好，感谢您的回复。还想请教一下，Node可以不设置高度吗，让Node的高度自适应按钮的高度。我把addNode中的width和heigth注释了，也不是居中的，而且起点变成了0坐标，不是从开始节点的后面开始连接。

    graph.addNode({
      id: '1',
      shape: 'vue-shape',
      x: 50,
      y: 150,
      // width: 150,
      // height: 100,
      component: 'count',
      data: {
        num: 0,
      },
    });
    graph.addNode({
      id: '2',
      shape: 'my-count',
      x: 400,
      y: 150,
      // width: 150,
      // height: 100,
      data: {
        num: 0,
      },
    });

[lloydzhou]

1. x6里面必须设置大小（可能是宽x高，也可能是半径之类的）
2. 至于自定义组件要适配大小。react-shape可以通过getNode拿到当前节点，在componentUpdated里面更新node的大小。

[sunyonghua]

@bingxueyinlian @lloydzhou
有解决自定义组件适配大小的问题吗？
如果不设置默认宽度的话，在react-shape中，子节点宽度全部是0,没办法根据子节点宽度设置容器宽度
而在svg中直接获取dom的BBox拿到的宽高也是不正确的。

[NewByVector]

请问上面的回答有解决你的问题吗，为了高效沟通，我们暂时关闭这个 issue，如果有必要，请重新开一个新的 issue。

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.