JavaScript is required

连线端点编辑

这是一个紧凑 relation-graph 编辑器,用户可点击已有连线并拖动起点或终点手柄到其他节点。示例禁用了线文字和路径编辑,在顶点移动生命周期中提供 toast 反馈,并通过悬浮辅助窗提供画布设置与图片导出。

在 GraphPilot 中编辑

重新指定现有连线端点

这个示例构建了什么

这个示例构建了一个小型的编辑器风格关系图,用户可以选中一条已有连线,并将其可见的起点或终点控制手柄拖动到另一个节点上。图谱会铺满整个视口,使用带点状纹理的工作区背景,并在画布上方保留一个悬浮的辅助窗口。它的关注点被刻意收窄:仅演示端点重连,不暴露连线文本编辑或路径编辑。

数据是如何组织的

图数据在 MyGraph.tsx 中以内联方式声明为一个 RGJsonData 对象。它包含一个 rootId、一个带有 idtext 的节点数组,以及一个带标签的连线数组,连线项包含 idtextfromto

在调用 setJsonData(...) 之前没有本地预处理步骤。组件会直接创建最终的 JSON 字面量,将其直接加载到图实例中,然后调用 zoomToFit()。在业务图中,相同的数据结构可以表示依赖关系、审批链、拓扑连接,或任何后续可能需要重新挂接边端点的记录。

relation-graph 是如何使用的

这个示例包裹在 RGProvider 中,