[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:graph-undo-redo-history":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 紧凑型图编辑器中的撤销、重做与快照历史\n\n## 这个示例构建了什么\n\n这个示例构建了一个带有文档式历史控制的小型可编辑图画布。用户会看到一个固定位置的 relation graph、一个用于撤销、重做和显示历史记录的悬浮工具栏，以及一个按时间倒序列出已保存快照的悬浮历史面板。\n\n图本身在视觉上保持简洁：矩形节点、标准连线，以及铺满整个视口的画布空间。关键行为在于，诸如移动节点、调整节点大小、创建连线和删除节点这类常规编辑，都会被记录为快照，这些快照可以被撤销、重做，或者通过点击某条历史记录直接回到对应版本。\n\n这个示例最有价值的地方并不在于视觉定制，而是在比完整编辑器工作台小得多的例子里，紧凑地结合了图编辑覆盖层、键盘快捷键、回退后的分支截断，以及基于重建的历史恢复机制。\n\n## 数据是如何组织的\n\n初始图以内联 `RGJsonData` 的形式声明，其中每个节点都带有 `id`、`text` 以及手动编写的 `x` 和 `y` 坐标，每条线都带有 `id`、`from`、`to` 和标签文本。由于布局是固定的，这些坐标就是实际渲染位置，而不是自动布局过程的输入。\n\n在 `setJ",true,500,1782615410355]