Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request]设置节点锚点id,节点可通过锚点id自动连线 #1241

Closed
GM-117 opened this issue Jul 24, 2023 · 9 comments
Closed

Comments

@GM-117
Copy link

GM-117 commented Jul 24, 2023

问题背景

通过 getDefaultAnchor 设置锚点,能否在数据 edges 中设置 sourceAnchorId 与 targetAnchorId 自动连接对应节点的锚点。
设置 TA0001 节点右锚点 与 TA0002 节点左锚点自动连线

目前查询文档未看到有此功能。
感谢🙇‍

提案

相关信息

image
image

@wumail
Copy link
Collaborator

wumail commented Jul 24, 2023

什么场景需要这么做呢?在已知节点锚点之间的连接关系的情况下可以自己手动调用addEdge完成边的生成

@GM-117
Copy link
Author

GM-117 commented Jul 24, 2023

在绘制层次图中,通过数据的配置,指定 edges 中的 sourceAnchorId 与 targetAnchorId 能够将两个节点 node 对应锚点连接起来。

例如:
指定 TEST01 下边锚点 与 TEST02 & TEST03 左边锚点通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线
而不是通过 pointsList 绘制直角位置坐标来实现。
image

感谢🙇‍

@wumail
Copy link
Collaborator

wumail commented Jul 24, 2023

在绘制层次图中,通过数据的配置,指定 edges 中的 sourceAnchorId 与 targetAnchorId 能够将两个节点 node 对应锚点连接起来。

例如: 指定 TEST01 下边锚点 与 TEST02 & TEST03 左边锚点通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现。 image

感谢🙇‍

「通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现」没太看懂,如果通过addEdge绘制有哪里不符合预期吗 👀https://docs.logic-flow.cn/docs/#/zh/api/logicFlowApi?id=addedge 自己算出起始点下锚点和终点左锚点

@wumail
Copy link
Collaborator

wumail commented Jul 24, 2023

在绘制层次图中,通过数据的配置,指定 edges 中的 sourceAnchorId 与 targetAnchorId 能够将两个节点 node 对应锚点连接起来。
例如: 指定 TEST01 下边锚点 与 TEST02 & TEST03 左边锚点通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现。 image
感谢🙇‍

「通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现」没太看懂,如果通过addEdge绘制有哪里不符合预期吗 👀https://docs.logic-flow.cn/docs/#/zh/api/logicFlowApi?id=addedge 自己算出起始点下锚点和终点左锚点

后续可以支持,可以先尝试这样做

@GM-117
Copy link
Author

GM-117 commented Jul 24, 2023

在绘制层次图中,通过数据的配置,指定 edges 中的 sourceAnchorId 与 targetAnchorId 能够将两个节点 node 对应锚点连接起来。
例如: 指定 TEST01 下边锚点 与 TEST02 & TEST03 左边锚点通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现。 image
感谢🙇‍

「通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现」没太看懂,如果通过addEdge绘制有哪里不符合预期吗 👀https://docs.logic-flow.cn/docs/#/zh/api/logicFlowApi?id=addedge 自己算出起始点下锚点和终点左锚点

不符合预期
image

@GM-117
Copy link
Author

GM-117 commented Jul 24, 2023

例如:https://antv-g6.gitee.io/zh/docs/manual/middle/elements/nodes/anchorpoint/#gatsby-focus-wrapper
image

如这种实现,可以在edges中设置节点锚点的值,连线将根据节点锚点进行相连,并且直角绘制不会出现曲折

image

在logicFlow中查阅文档,可以为每个节点上下左右锚点设置对应的id,能否通过 sourceAnchorId 与 targetAnchorId 将两个节点 node 对应锚点连接起来,而不是计算节点锚点的位置,通过锚点id就可以连接~

感谢🙇‍

@wumail
Copy link
Collaborator

wumail commented Jul 24, 2023

在绘制层次图中,通过数据的配置,指定 edges 中的 sourceAnchorId 与 targetAnchorId 能够将两个节点 node 对应锚点连接起来。
例如: 指定 TEST01 下边锚点 与 TEST02 & TEST03 左边锚点通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现。 image
感谢🙇‍

「通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现」没太看懂,如果通过addEdge绘制有哪里不符合预期吗 👀https://docs.logic-flow.cn/docs/#/zh/api/logicFlowApi?id=addedge 自己算出起始点下锚点和终点左锚点

不符合预期 image

这里pointsList计算规则最近会改一版,我测试了改版后的应该是符合你预期的。至于通过锚点ID连线的这个问题,后续可以支持

@GM-117
Copy link
Author

GM-117 commented Jul 24, 2023

在绘制层次图中,通过数据的配置,指定 edges 中的 sourceAnchorId 与 targetAnchorId 能够将两个节点 node 对应锚点连接起来。
例如: 指定 TEST01 下边锚点 与 TEST02 & TEST03 左边锚点通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现。 image
感谢🙇‍

「通过 edges 中配置的 sourceAnchorId 与 targetAnchorId 绘制直角连线 而不是通过 pointsList 绘制直角位置坐标来实现」没太看懂,如果通过addEdge绘制有哪里不符合预期吗 👀https://docs.logic-flow.cn/docs/#/zh/api/logicFlowApi?id=addedge 自己算出起始点下锚点和终点左锚点

不符合预期 image

这里pointsList计算规则最近会改一版,我测试了改版后的应该是符合你预期的。至于通过锚点ID连线的这个问题,后续可以支持

感谢🙇‍

@DymoneLewis
Copy link
Collaborator

例如:https://antv-g6.gitee.io/zh/docs/manual/middle/elements/nodes/anchorpoint/#gatsby-focus-wrapper image

如这种实现,可以在edges中设置节点锚点的值,连线将根据节点锚点进行相连,并且直角绘制不会出现曲折

image

在logicFlow中查阅文档,可以为每个节点上下左右锚点设置对应的id,能否通过 sourceAnchorId 与 targetAnchorId 将两个节点 node 对应锚点连接起来,而不是计算节点锚点的位置,通过锚点id就可以连接~

感谢🙇‍

该功能已于1.2.23版本支持上了,请试下呢~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

4 participants