Overview
The Rectangle API provides utilities for working with axis-aligned rectangles defined by a position and size. All operations are immutable and return new rectangle instances.
Types
Rectangle
Represents an axis-aligned rectangle in 2D space.
interface Rectangle {
position: Vector2;
size: Vector2;
}
The top-left corner of the rectangle
The width (x) and height (y) of the rectangle
Constructor functions
Creates a rectangle from a position vector and size vector.
rectangle.of(position: Vector2, size: Vector2): Rectangle
The top-left corner position
The width and height as a vector
A new rectangle with the specified position and size
import { rectangle, vector2 } from "@temelj/math";
const rect = rectangle.of(
vector2.of(10, 20),
vector2.of(100, 50)
);
console.log(rect);
// { position: { x: 10, y: 20 }, size: { x: 100, y: 50 } }
ofBounds
Creates a rectangle from explicit x, y, width, and height values.
rectangle.ofBounds(x: number, y: number, width: number, height: number): Rectangle
The x coordinate of the top-left corner
The y coordinate of the top-left corner
The width of the rectangle
The height of the rectangle
A new rectangle with the specified bounds
const rect = rectangle.ofBounds(10, 20, 100, 50);
console.log(rect);
// { position: { x: 10, y: 20 }, size: { x: 100, y: 50 } }
fromDOM
Converts a browser DOMRect to a Rectangle.
rectangle.fromDOM(rect: DOMRect): Rectangle
The DOMRect to convert (e.g., from element.getBoundingClientRect())
A new rectangle with the DOMRect’s bounds
const element = document.getElementById("myElement");
const domRect = element.getBoundingClientRect();
const rect = rectangle.fromDOM(domRect);
Operations
expand
Expands rectangle a to include rectangle b, creating a bounding box.
rectangle.expand(a: Rectangle, b: Rectangle): Rectangle
The rectangle to include in the bounds
A new rectangle that encompasses both input rectangles
const rect1 = rectangle.ofBounds(0, 0, 50, 50);
const rect2 = rectangle.ofBounds(40, 40, 60, 60);
const expanded = rectangle.expand(rect1, rect2);
console.log(expanded);
// { position: { x: 0, y: 0 }, size: { x: 100, y: 100 } }
center
Calculates the center point of a rectangle.
rectangle.center(r: Rectangle): Vector2
The rectangle to find the center of
The center point of the rectangle
const rect = rectangle.ofBounds(0, 0, 100, 50);
const centerPoint = rectangle.center(rect);
console.log(centerPoint); // { x: 50, y: 25 }
overlaps
Checks if two rectangles overlap or intersect.
rectangle.overlaps(a: Rectangle, b: Rectangle): boolean
True if the rectangles overlap, false otherwise
const rect1 = rectangle.ofBounds(0, 0, 50, 50);
const rect2 = rectangle.ofBounds(40, 40, 60, 60);
const rect3 = rectangle.ofBounds(100, 100, 50, 50);
console.log(rectangle.overlaps(rect1, rect2)); // true
console.log(rectangle.overlaps(rect1, rect3)); // false
displayString
Converts a rectangle to a readable string representation.
rectangle.displayString(r: Rectangle): string
A formatted string representation
const rect = rectangle.ofBounds(10, 20, 100, 50);
console.log(rectangle.displayString(rect));
// "Rectangle(10, 20, 100, 50)"
Common use cases
Collision detection
function checkCollision(player: Rectangle, enemy: Rectangle): boolean {
return rectangle.overlaps(player, enemy);
}
Bounding multiple elements
function getBoundingBox(elements: Rectangle[]): Rectangle {
return elements.reduce((acc, rect) =>
rectangle.expand(acc, rect)
);
}
Converting DOM elements
function getElementRectangle(element: HTMLElement): Rectangle {
return rectangle.fromDOM(element.getBoundingClientRect());
}