“自愈”指通过嵌套捕获与多维空间变换维持坐标逻辑一致性和视觉稳定性，而非自动修复错误；其实现依赖声明式父子绑定、三类坐标流解耦、变换矩阵缓存、视口裁剪前置、锚点解耦及批量重绘节流。

嵌套捕获配合多维空间变换实现节点坐标“自愈”，本质不是让坐标自动修复错误，而是通过结构化层级约束 + 坐标系解耦 + 变换链缓存，使节点位置在缩放、平移、嵌套移动等操作后，仍能实时维持逻辑一致性和视觉稳定性。所谓“极速自愈”，是指用户感知不到计算延迟，拖动父节点时子节点瞬时跟随、连线路径毫秒级重绘、视口滚动后所有坐标关系不漂移。

一、嵌套捕获：用 parentNode 锁定逻辑归属关系

嵌套捕获不是监听事件，而是声明式绑定父子拓扑。关键在于放弃手动同步绝对坐标：

• 设置 子节点 parentNode = "parent-id"，触发框架原生嵌套生命周期（如 Vue Flow 或 LiteGraph.js）
• 子节点的 x/y 始终为相对于父节点左上角的偏移量，而非画布全局坐标
• 当父节点移动时，框架自动触发子节点的 onParentTransform 回调，无需你写 node.x += dx
• 禁用对子节点 position 的直接赋值——所有变更必须经由父节点或 updateNode API

二、多维空间变换：分离三类坐标流

把一次鼠标拖拽或缩放操作，拆解为独立可缓存的变换层：

• 逻辑空间（Logical Space）：节点原始数据坐标，仅用于保存和计算，不参与渲染
• 视图空间（View Space）：应用 DragAndScale 后的中间坐标（即 offset 坐标），用于碰撞检测、连接线锚点计算
• 画布空间（Canvas Space）：最终传给 ctx.fillRect() 或 DOM transform 的像素坐标，只在渲染帧内生成

三者之间用纯函数转换（如 convertOffsetToCanvas），不共享状态，避免副作用。每次缩放仅更新视图空间缩放因子，不重算全部节点逻辑坐标。

三、坐标自愈的关键实现点

“自愈”效果来自以下四点协同：

• 变换矩阵缓存：对每个嵌套层级预计算并缓存 [scale, translate] 矩阵，子节点坐标转换时直接相乘，避免重复三角函数或浮点累加误差
• 视口裁剪前置：在坐标转换前先判断节点是否在视口 padding 区域内，跳过非可见节点的全部坐标计算（含嵌套子树）
• 连接线锚点解耦：连线不绑定到节点 DOM 元素，而是绑定到节点的 getCenter() 方法——该方法内部自动调用 convertOffsetToCanvas，确保锚点始终精准
• 批量重绘节流：监听 transformchange 自定义事件，合并连续的缩放/平移操作，在下一帧统一 repaint，避免每像素滚动都触发全量坐标重算

四、避坑提醒：哪些操作会破坏自愈能力

以下行为会让“自愈”失效，导致坐标漂移或连线断裂：

• 直接修改子节点 position 属性，绕过 parentNode 机制
• 在 onNodeDrag 中手动调用 setCanvasTransform 而未同步更新逻辑坐标
• 使用 getBoundingClientRect() 获取节点位置替代 convertCanvasToOffset，忽略缩放偏移
• 未为嵌套节点配置 extent: 'parent'，导致子节点可拖出父边界，脱离约束体系