选中连线自定义工具栏
这个示例展示如何把自定义悬浮工具栏附着到当前选中的 relation-graph 连线上。工具栏会跟随连线实时几何位置,可修改线色、线形、线宽或删除连线;外围辅助窗还提供画布设置与图片导出。
自定义选中连线工具栏
这个示例构建了什么
这个示例构建了一个小型的 relation-graph 编辑工作区:当用户点击一条已有连线时,会在该连线上方打开一个浮动工具栏。用户可以通过这个工具栏修改当前选中连线的颜色、形状和宽度,也可以直接删除这条连线。
整体视觉效果刻意更偏向编辑器,而不是某个特定业务场景。点状画布背景、辅助窗口以及附着在图谱上的覆盖层,共同让这个示例更像一个聚焦于自定义连线维护的参考实现。这里的关键点在于,连线工具栏并不是固定在屏幕上的 UI;当图谱移动或缩放时,它会跟随当前选中连线的实时几何位置一起移动。
数据是如何组织的
图数据以内联方式组织成一个 RGJsonData 对象,其中包含 rootId、一个较小的 nodes 数组以及一个 lines 数组。大多数连线都继承图谱的默认配置,而连线 l4 则预先设置为正交形状,并带有显式的连接点,因此画布初始状态同时展示了默认的曲线样式,以及一个预配置好的例外连线。
在调用 setJsonData() 之前,没有额外的预处理流程。唯一有意义的准备工作,就是内联定义这份