[fxtf-drafts] [geometry-1] Proposal: Geometriy Utility Methods (#602)

lukewarlow has just created a new issue for https://github.com/w3c/fxtf-drafts:

== [geometry-1] Proposal: Geometriy Utility Methods ==
## Proposal: Geometric Utility Methods

### Summary

This proposal adds common utility methods to the `DOMRectReadOnly` interface.

These methods are widely used across DOM APIs and developer code, but currently require developers to write the logic themselves.

### Proposed Additions

**Web IDL:**

```webidl
partial interface DOMRectReadOnly {  
 boolean containsPoint(DOMPointInit point);  
 boolean contains(DOMRectInit other);  
 boolean intersects(DOMRectInit other);  
 DOMRectReadOnly? intersection(DOMRectInit other);
 // ... Other such methods?
};
```

- Uses dictionary arguments so raw objects aswell as DOMRect and DOMPoint objects can be used.
- Should return type use a DOMRectReadOnly or a DOMRect?
- Should containsPoint take a DOMPointInit or should it take (double x, double y) args? Perhaps it could take both?

### Motivation

Web developers frequently need to:

- Determine whether a point lies inside a rectangle (e.g. Does this pointer event lie inside or outside an element's bounding client rect)  
- Calculate the overlap between two rectangles

Currently these sorts of calculations require developers to write this logic themselves.

Most other platforms provide a more complete API out the box (e.g. Android's [Rect](https://developer.android.com/reference/android/graphics/Rect) object)

**Current workaround:**
```js
const r = el.getBoundingClientRect();  
if (event.clientX >= r.left &&  
  event.clientX <= r.right &&  
  event.clientY >= r.top &&  
  event.clientY <= r.bottom) {
  // inside
}
```
**With proposed API:**
```js
if (rect.containsPoint({ x: event.clientX, y: event.clientY })) {  
  // inside  
}
```
### Benefits

- A more complete platform API surface familiar to newcomers who have used other platforms.
- Less repeated code.

### Prior Art

- Searching GitHub provides numerous instances of codeblocks that implement these functions.
- As mentioned other platform's Rect have built-in `.intersects()`, `.contains()`, etc.
- The Set JS type recently had helper methods added to it. (https://github.com/tc39/proposal-set-methods)

### Polyfill Example

```js
DOMRectReadOnly.prototype.containsPoint = function ({ x, y }) {  
  return x >= this.left && x <= this.right &&  
         y >= this.top  && y <= this.bottom;  
};
```

Would love to know if there's any interest on solving this, I'm sure there's more methods that could be added both to DOMRect but also to the other geometric interfaces.

Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/602 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 5 July 2025 09:26:58 UTC