编辑节点周围的八方向快捷操作

这个示例构建了什么

这个示例构建了一个轻量级图编辑工作区，在当前处于 relation-graph 编辑状态的节点周围挂载了自定义快捷操作托盘。页面展示了一个全高的点状画布、一个浮动辅助窗口，以及位于编辑节点上方、下方、左侧、右侧和四个角落的白色操作组。

用户可以点击节点，通过组合键把更多节点切换进编辑集合，完成框选后重新定位覆盖层，并点击空白画布区域清除当前编辑状态。这个示例的重点不是按钮背后的业务逻辑，而是精确演示如何在一个或多个节点周围放置上下文控制项。

数据是如何组织的

图数据以内联方式声明为一个 RGJsonData 对象，包含一个 rootId、一个扁平的 nodes 数组和一个扁平的 lines 数组。在这个示例中，数据集很小：11 个节点和 11 条连线，字段仅包含简单的 id、text、from 和 to。

在调用 setJsonData(...) 之前，没有任何外部获取或转换流程。唯一的数据准备步骤发生在 initializeGraph() 内部：示例构建 JSON 对