[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:around-node-quick-actions":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 编辑节点周围的八方向快捷操作\n\n## 这个示例构建了什么\n\n这个示例构建了一个轻量级图编辑工作区，在当前处于 relation-graph 编辑状态的节点周围挂载了自定义快捷操作托盘。页面展示了一个全高的点状画布、一个浮动辅助窗口，以及位于编辑节点上方、下方、左侧、右侧和四个角落的白色操作组。\n\n用户可以点击节点，通过组合键把更多节点切换进编辑集合，完成框选后重新定位覆盖层，并点击空白画布区域清除当前编辑状态。这个示例的重点不是按钮背后的业务逻辑，而是精确演示如何在一个或多个节点周围放置上下文控制项。\n\n## 数据是如何组织的\n\n图数据以内联方式声明为一个 `RGJsonData` 对象，包含一个 `rootId`、一个扁平的 `nodes` 数组和一个扁平的 `lines` 数组。在这个示例中，数据集很小：11 个节点和 11 条连线，字段仅包含简单的 `id`、`text`、`from` 和 `to`。\n\n在调用 `setJsonData(...)` 之前，没有任何外部获取或转换流程。唯一的数据准备步骤发生在 `initializeGraph()` 内部：示例构建 JSON 对",true,500,1782615406397]