[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:selected-node-directional-line-creation":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 从选中节点创建定向连线\n\n## 这个示例构建了什么\n\n这个示例构建了一个轻量级图编辑工作区，其中一个被选中的节点会成为新建出向连接的起点。页面初始载入的是一个小型预置图，隐藏了内置工具栏，并额外添加了自定义的浮动辅助窗口和环绕节点的工具栏。\n\n用户可以点击节点，使用修饰键调整编辑选区，拖动选择框，然后从选中节点上方、下方、左侧或右侧的小型操作按钮发起一条新连接。这个示例的重点并不是通用节点操作，而是展示一种聚焦模式：从附着在单个节点上的上下文控件中启动 relation-graph 的交互式连线创建流程。\n\n## 数据是如何组织的\n\n图数据以内联方式声明为一个 `RGJsonData` 对象，其中包含 `rootId`、扁平的 `nodes` 数组以及扁平的 `lines` 数组。每条连线只需要 `id`、`from` 和 `to`，这让初始数据集保持小巧，也便于替换为业务实体，例如人员、服务、工作流步骤或文档依赖关系。\n\n在调用 `setJsonData(...)` 之前没有预处理流程。初始化发生在挂载时的 effect 中：示例先创建 JSON 对象，将其加载到图实例中，然后调",true,500,1782615406811]