circleIntersection for CollisionDetection (f.e. dartboard)

[Repith]

Hi!

There is possibility, that someone would like to use dnd-kit for creating dartboard or any other kind of circle droppable tables.
Here is a custom collision algorithm for circleIntersection adapted for a full rounded rings.

Maybe someone would enjoy :)

#Function getCircleIntersectionRatio
This function calculates the intersection ratio between two "circular" areas derived from rectangular shapes (ClientRect).

• If either rectangle has no dimensions (width or height ≤ 0), the function immediately returns 0, meaning there is no collision.
• The center (center) of each rectangle is determined using the left, top, width, and height properties.
• The radius is calculated as half the smaller dimension of the rectangle (width or height), simulating a circle inscribed within the rectangle.
• The distance between the centers of the two circles is calculated using the Pythagorean theorem.
• No collision: If the distance between the centers is greater than or equal to the sum of the radii, the function returns 0.
• If one circle is entirely inside the other, the intersection area is calculated as the area of the smaller circle.
• The angle of intersection for each circle is computed using trigonometric formulas.
• The intersection area is derived by summing the partial circular areas and subtracting the area of the triangle formed by the intersection points.

function getCircleIntersectionRatio(
  entryRect: ClientRect,
  targetRect: ClientRect
): number {
  if (
    entryRect.width <= 0 ||
    entryRect.height <= 0 ||
    targetRect.width <= 0 ||
    targetRect.height <= 0
  ) {
    return 0
  }

  const entryCenter = {
    x: entryRect.left + entryRect.width / 2,
    y: entryRect.top + entryRect.height / 2,
  }
  const targetCenter = {
    x: targetRect.left + targetRect.width / 2,
    y: targetRect.top + targetRect.height / 2,
  }

  const entryRadius = Math.min(entryRect.width, entryRect.height) / 2
  const targetRadius = Math.min(targetRect.width, targetRect.height) / 2

  const dx = targetCenter.x - entryCenter.x
  const dy = targetCenter.y - entryCenter.y
  const distance = Math.sqrt(dx * dx + dy * dy)

  const sumRadii = entryRadius + targetRadius
  const diffRadii = Math.abs(entryRadius - targetRadius)

  if (distance >= sumRadii) {
    return 0
  }

  if (distance <= diffRadii) {
    const smallerRadius = Math.min(entryRadius, targetRadius)
    const intersectionArea = Math.PI * smallerRadius * smallerRadius
    const totalArea = Math.PI * (entryRadius ** 2 + targetRadius ** 2)
    return intersectionArea / (totalArea - intersectionArea)
  }

  const r = entryRadius
  const R = targetRadius
  const d = distance

  const dSquared = d * d
  const cosTheta1 = (dSquared + r * r - R * R) / (2 * d * r)
  const cosTheta2 = (dSquared + R * R - r * r) / (2 * d * R)

  const safeCos1 = Math.max(-1, Math.min(1, cosTheta1))
  const safeCos2 = Math.max(-1, Math.min(1, cosTheta2))

  const theta1 = Math.acos(safeCos1)
  const theta2 = Math.acos(safeCos2)

  const part1 = r * r * theta1
  const part2 = R * R * theta2
  const part3 =
    0.5 * Math.sqrt((-d + r + R) * (d + r - R) * (d - r + R) * (d + r + R))

  const intersectionArea = part1 + part2 - part3
  const totalArea = Math.PI * (r * r + R * R)

  return intersectionArea / (totalArea - intersectionArea)
}

#Function circleIntersection
This function uses getCircleIntersectionRatio to find collisions and sorts them by the most significant intersection ratio.

• For each droppable container (droppableContainer), the corresponding rectangle (rect) is retrieved from the droppableRects map.
• For each pair (collisionRect, rect), the getCircleIntersectionRatio function is called to compute the intersection ratio.
• If the intersection ratio is greater than 0, the collision is added to a list as an object containing the id, droppableContainer, and intersection value (value).
• The list of collisions is sorted in descending order using sortCollisionsDesc, returning the most significant collisions first.

export const circleIntersection: CollisionDetection = ({
  collisionRect,
  droppableRects,
  droppableContainers,
}) => {
  const collisions: CollisionDescriptor[] = []

  for (const droppableContainer of droppableContainers) {
    const { id } = droppableContainer
    const rect = droppableRects.get(id)

    if (rect) {
      const intersectionRatio = getCircleIntersectionRatio(rect, collisionRect)

      if (intersectionRatio > 0) {
        collisions.push({
          id,
          data: {
            droppableContainer,
            value: intersectionRatio,
          },
        })
      }
    }
  }

  return collisions.sort(sortCollisionsDesc)
}