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