碰撞检测 (Intersections)

在构建复杂的拖拽交互时——例如将节点放入特定区域或检测重叠以进行自动对齐——精确的几何计算至关重要。Flow 在统一的坐标系中运行，使得实现空间逻辑变得非常简单。

空间碰撞示例

拖动下方的 "拖动我" 节点。当它与中央虚线区域重叠时，状态指示器和容器背景会变化以信号碰撞。

状态: 安全

目标区域 (静态)

拖动我

碰撞检测

工作原理

示例中使用 v-model:nodes 与 @node-drag：拖拽时 Flow 会通过 node-drag 传出实时 position，并同步节点到父组件，从而用 AABB 比较「拖动我」与「目标区域」的包围盒即可得到碰撞状态。

由于 Flow 将所有节点映射到全局坐标系，你可以直接比较节点的 position.x/y 和 width/height。

使用的标准算法是 AABB（轴对齐包围盒）：

const isIntersecting = (rectA, rectB) => {
  return (
    rectA.x < rectB.x + rectB.width &&
    rectA.x + rectA.width > rectB.x &&
    rectA.y < rectB.y + rectB.height &&
    rectA.y + rectA.height > rectB.y
  )
}

TIP

碰撞检测是实现动态嵌套的基础逻辑（例如，当节点被放入组容器中时自动分配 parentId）。