[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:context-menu-node-and-line-editing":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 树形图中的右键菜单节点与连线编辑\n\n## 这个示例构建了什么\n\n这个示例在一个全屏白色工作区中构建了一张小型树形图，并在其上添加了一个自定义右键菜单。用户可以在空白画布区域右键以添加节点，在现有节点上右键以开始创建新的连线，也可以在节点或连线上右键以删除该特定对象。一个浮动辅助窗口会一直可用，用于重新布局、调整画布设置以及导出图片。\n\n这个演示的重点并不在于初始数据集本身。真正有价值的是这套编辑流程：一个临时菜单即可处理与对象类型相关的操作，而不需要引入完整的工具栏式编辑器外壳，也不需要更大的持久化层。\n\n## 数据是如何组织的\n\n初始图数据以内联方式声明为 `staticJsonData`。它使用标准的 relation-graph JSON 结构，包括 `rootId`、`nodes` 和 `lines`，并且初始内容刻意保持得很小：一个根节点、若干围绕它的节点，以及三条带标签的关系。\n\n在执行 `setJsonData` 之前，示例会先进行一个重要的预处理步骤。它会遍历初始连线，并为尚未包含 `id` 的连线补上一个 `id`。这个标准化处理很重要，因为后续菜单操作会按 ID",true,500,1782615416441]