[v5] drag-element 对于关联的edge（polyline）端点坐标计算异常

[zzjjbbaa]

Describe the bug

edge已经配置了style.targetPort和style.sourcePort
这是正常的，终点应该是bottom-center port

当targetNode移动到sourceNode下方后，就变成了这样

Your Example Website or App

无

Steps to Reproduce the Bug or Issue

无

Expected behavior

无

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[dosubot]

It looks like the issue you're encountering with the drag-element and its effect on the associated edge (polyline) endpoint calculations in G6 might be due to how the framework calculates the endpoints based on the style.targetPort and style.sourcePort properties. These properties should reference the ports' placement information in the nodes' ports array, which determines the exact position of the port on the node's boundary.

To address the unexpected behavior when the target node moves below the source node, consider the following steps:

1. Verify the placement values for the ports to ensure they are correctly set and interpreted. Incorrect placement values can lead to unexpected endpoint calculations.
2. Ensure that the graph updates the edge paths correctly when nodes or their ports move. If the edge paths are not updated or are updated incorrectly, it could cause the endpoints to be calculated incorrectly.
3. Simplify your graph to include only the source and target nodes involved in the issue for easier debugging.
4. Add logging or breakpoints in the code that handles node movement and edge drawing to help identify if and when the edge paths are recalculated.

For more detailed guidance on handling edge calculation with ports, you might find the element-edge-port.ts demo file in the G6 repository helpful.

If you need further assistance or have more details to share, feel free to reach out.

Sources

• packages/g6/tests/unit/elements/port.spec.ts
• packages/g6/src/behaviors/drag-element.ts
• packages/g6/tests/demos/element-edge-port.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[yvonneyx]

看截图是自动吸附到距离更近的连接桩了，建议先检查一下连接桩设置是否正确。如果还是存在问题，请提供一个在线示例链接，方便排查定位问题~

[zzjjbbaa]

看截图是自动吸附到距离更近的连接桩了，建议先检查一下连接桩设置是否正确。如果还是存在问题，请提供一个在线示例链接，方便排查定位问题~

不好意思，在线没问题，没复现出来；我的估计问题出在我自定义node时，复写的getPortXY方法有问题，先关闭吧