JavaScript is required

拖拽节点对齐参考线

这个示例展示如何挂载 relation-graph 的对齐参考线覆盖层,使拖拽节点时显示临时参考线。它还结合可选吸附开关、选中态协同、运行时画布设置和图片导出,形成紧凑编辑式工作区。

在 GraphPilot 中编辑

拖拽节点时的对齐参考线与可选吸附

这个示例构建了什么

这个示例构建了一个紧凑的图编辑工作区,在节点被拖拽时显示临时对齐参考线。界面将全高点状画布、浮动说明窗口、小型内联图,以及一个可在运行时开启或关闭对齐辅助吸附行为的复选框组合在一起。

用户可以拖拽节点,点击节点和连线来切换当前编辑目标,点击空白画布清除编辑状态;并且当画布拖拽模式被设置为选择时,还可以用选择框替换当前的编辑节点集合。这个演示的重点并不是通用图编排,而是一个聚焦的参考示例,用最少但足够的周边选择逻辑来支撑拖拽过程中的定位辅助叠加层。

数据是如何组织的

图数据在 initializeGraph() 内以内联方式声明为一个 RGJsonData 对象。它使用单个 rootId、一个包含 idtext 的扁平 nodes 数组,以及一个包含 idfromtolines 数组。大多数连线继承默认图选项,而其中有一条连线会在数据集中直接覆盖自身的形状和连接点。

在 relation-graph 接收这份数据之前,没有任何预处理流程。组件会创建