Intersections

When building complex drag-and-drop interactions—such as dropping a node into a specific zone or detecting overlaps for auto-alignment—accurate geometric calculations are essential. Flow operates in a unified coordinate system, making it straightforward to implement spatial logic.

Spatial Overlap Demo

Drag the "Mover" node below. When it overlaps with the central dashed area, both the status indicator and the container background will change to signal a collision.

Status: Clear

Drop Zone (Static)

Drag Me

Intersection Detection

How it works

The demo uses v-model:nodes and @node-drag: while dragging, Flow emits the live position via node-drag and syncs nodes to the parent, so AABB comparison of the mover and target bounding boxes gives the intersection state.

Since Flow maps all nodes to a global coordinate system, you can directly compare a node's position.x/y and width/height.

The standard algorithm used for these rectangles is AABB (Axis-Aligned Bounding Box):

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

Intersection detection is the foundational logic for implementing Dynamic Nesting (e.g., assigning a parentId when a node is dropped inside a group container).