[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:selected-node-line-creation-with-target-endpoint-selection":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 带目标端点选择的选中节点连线创建\n\n## 这个示例构建了什么\n\n这个示例在一个小型预置图之上构建了一个紧凑的连线编排工作区。页面使用全高的点状画布、一个浮动辅助窗口，以及一个自定义的环绕节点工具栏；该工具栏只会在恰好有一个节点处于编辑状态时出现。\n\n用户可以点击节点、结合修饰键调整选择、清除画布状态，并从所选节点上方、下方、左侧或右侧的方向按钮发起一条新的出边。这个示例的核心在于，这个流程不会在选择目标节点时结束：示例还挂载了 relation-graph 内置的连线覆盖层，使用户可以进一步选择新连线落在目标节点的哪个位置。\n\n## 数据如何组织\n\n图数据直接在 `initializeGraph()` 内以内联方式组装为一个 `RGJsonData` 对象，其中包含一个 `rootId`、一个扁平的 `nodes` 数组，以及一个扁平的 `lines` 数组。这个预置数据集规模小且写死在代码中，因此很容易替换为工作流步骤、服务、审批项或依赖项等业务实体。\n\n在调用 `setJsonData(...)` 之前，没有额外的预处理步骤，只有在代码中构建这个 JSON 对象。组件挂载时的 ",true,500,1782615407039]