Electrolux_blog@xyflow/system 核心系统
@xyflow/system 是 框架无关 层：几何、图算法、变更归约、指针逻辑。React/Svelte 包只做绑定与渲染。
1. 模块地图
| 模块 | 职责 |
|---|---|
| XYPanZoom | viewport 变换、约束、事件 |
| XYDrag | 节点/选择拖拽 |
| XYHandle | 连接点命中与校验 |
| applyNodeChanges / applyEdgeChanges | 将 change 列表归约到数组 |
| 边路径 | 贝塞尔、平滑步进等 |
| 图工具 | 连接性、边界框、fitView 计算等 |
2. 为何依赖 d3
- d3-zoom、d3-drag 成熟处理指针与变换。
- system 封装后，框架层不直接散落 d3 调用。
3. 变更（Change）模型
用户交互不产生「新 nodes 数组」的隐式魔法，而是：
- 交互层生成
NodeChange[]（type: position/select/remove/…） applyNodeChanges(changes, nodes)得到下一状态- 可选同步到 React props
利于 时间旅行、协同、撤销重做 扩展。
4. 测试与发布
- system 包可单测纯函数。
- v12 起独立版本号，React 包依赖其 semver。
见 07-v12重构。
5. 总结
改 bug 或加交互时，先判断属 system 还是 react 绑定；几何/变更归约优先查 system。