[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:node-drag-alignment-guides":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 拖拽节点时的对齐参考线与可选吸附\n\n## 这个示例构建了什么\n\n这个示例构建了一个紧凑的图编辑工作区，在节点被拖拽时显示临时对齐参考线。界面将全高点状画布、浮动说明窗口、小型内联图，以及一个可在运行时开启或关闭对齐辅助吸附行为的复选框组合在一起。\n\n用户可以拖拽节点，点击节点和连线来切换当前编辑目标，点击空白画布清除编辑状态；并且当画布拖拽模式被设置为选择时，还可以用选择框替换当前的编辑节点集合。这个演示的重点并不是通用图编排，而是一个聚焦的参考示例，用最少但足够的周边选择逻辑来支撑拖拽过程中的定位辅助叠加层。\n\n## 数据是如何组织的\n\n图数据在 `initializeGraph()` 内以内联方式声明为一个 `RGJsonData` 对象。它使用单个 `rootId`、一个包含 `id` 和 `text` 的扁平 `nodes` 数组，以及一个包含 `id`、`from` 和 `to` 的 `lines` 数组。大多数连线继承默认图选项，而其中有一条连线会在数据集中直接覆盖自身的形状和连接点。\n\n在 relation-graph 接收这份数据之前，没有任何预处理流程。组件会创建",true,500,1782615408696]