交互系统详解 ​

交互由 @xyflow/system（d3-zoom、d3-drag 等）处理指针/触摸，结果写回 store（位置、viewport、connection、selection）。

1. 平移与缩放（Pan / Zoom） ​

逻辑在 XYPanZoom；React 层监听事件更新 viewport state。

2. 节点拖拽 ​

XYDrag 负责指针捕获与增量；避免在 onNodeDrag 里做重计算。

3. 选择与框选 ​

• 点击：选中单节点/边，multiSelectionKeyCode 多选。
• 框选：拖拽矩形，更新 selection。
• 键盘：删除、方向键 nudge（若启用）。

4. 连线（Connect） ​

pointerDown on Handle → connection 状态
  → pointerMove 更新临时线
  → pointerUp on 合法 Handle → onConnect → 新 edge

isValidConnection 可拒绝连接；connectionMode 影响是否允许多 handle。

5. 事件与 props ​

用户钩子：onNodeClick、onPaneClick、onConnect、onNodesDelete 等。
应在文档中区分 「变更回调」（onNodesChange）与 「交互回调」（点击）。

6. 总结 ​

交互 = system 算几何 + store 记状态 + React 触发重绘；自定义行为优先用 props 回调，勿直接改内部 DOM。