[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:graph-editor-with-context-menu-and-local-save":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 构建一个带右键菜单和本地保存的轻量级图编辑器\n\n## 这个示例构建了什么\n\n这个示例构建的是一个全屏图编辑工作区，而不是一个固定的查看器。用户可以添加节点、创建连线、删除选中的对象、重新应用布局、让视口适配内容，并将当前图状态保存到浏览器本地存储中。一个悬浮的辅助窗口会持续提供说明、画布交互设置以及图片导出功能。\n\n这个演示最有价值的部分，在于它如何把多种编辑行为整合进一个小巧的外壳里。工具栏、右键菜单以及已保存状态的恢复流程协同工作，让同一块画布既可以作为初始树形视图，也可以作为一个轻量级的浏览器内编辑器。\n\n## 数据是如何组织的\n\n初始图以内联的 `staticJsonData` 声明，其中包含 `rootId`、`nodes` 和 `lines`。这个起始数据刻意保持通用：一个根节点、若干环绕节点，以及几条带标签的关系。这样示例的重点就放在编辑行为上，而不是某个特定领域的 schema。\n\n在执行 `setJsonData(...)` 之前，代码会遍历默认的连线列表并在连线没有显式 `id` 时注入 `line_auto_{index}`，以此规范化连线 ID。这个预处理很",true,500,1782615402910]