Rectangle

In ixfx, a rectangle has this shape:

type Rect = {
  height: number
  width: number
}

Rectangles can be positioned, meaning they also have an x & y, denoting the top-left corner:

type RectPositioned = Rect & {
  x: number
  y: number
}

Once you have data that conforms to Rect or RectPositioned, ixfx has a bunch of functions to help you work with them:

area - compute area
cardinal - a point on cardinal direction (n, ne, e, se, sw, w, nw)
center - center point
corners - corner locations
edges - edges of rectangle as Line instances.
encompass - returns a rectangle as big as source rectangle and also including provided point(s).
getEdgeX getEdgeY - point on edge of rectangle
randomPoint - random point within rectangle
lengths - length of each edge

Distances, intersection

distanceFromCenter - distance between two rectangle centers
distanceFromExterior -distance between outer edge of two rectangles
intersectsPoint - checks whether point intersects rectangle
isIntersecting - check if rectangle is intersecting with a point
nearestInternal - finds closest point within or on perimeter of rectangle to a given point

Creating

fromCenter - create a rectangle from a center
fromElement - create a rectangle based on size of a HTML element
fromNumbers - create a rectangle from a series of numbers (opposite of toNumbers)
fromTopLeft - create a rectangle from its top-left corner
random - create a random rectangle

Math

multiply - multiplies one rectangle by another
multiplyScalar - multiplies all components of a rectangle by a value
divide - divides one rectangle by another
divideScalar - divides all components of a rectangle by a value
dividerByLargestDimension - returns a function that divides a number or point by largest dimension of a rectangle
subtract
sum

Etc

isEmpty - true if rectangle has 0 for height and width. Use Rects.Empty or Rects.EmptyPositioned to get an empty rectangle.
isPlaceholder - true if rectangle has NaN for height and width. Use Rects.Placeholder or Rects.PlaceholderPositioned to get a placeholder rectangle.

Importing

// Sub module
import { Rects } from "@ixfx/geometry.js"
// Eg: Rects.random();

// Whole module
import * as Geometry from "@ixfx/geometry.js"
// Eg: Geometry.Rects.random();

// From bundle
import { Geometry } from "@ixfx"
// Eg: Geometry.Rects.random();

// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>

// Sub module from parent
import { Rects } from "@ixfx/geometry.js"
// Eg: Rects.random();

// Whole parent module
import * as Geometry from "@ixfx/geometry.js"
// Eg: Geometry.Rects.random();

// From the bundle
import { Geometry } from "@ixfx/bundle.js"
// Eg: Geometry.Rects.random();

// Sub module from parent
import { Rects } from "https://unpkg.com/@ixfx/geometry/bundle"
// Eg: Rects.random();

// Whole parent module
import * as Geometry from "https://unpkg.com/@ixfx/geometry/bundle"
// Eg: Geometry.Rects.random();

// Single module from the bundle
import { Geometry } from "https://unpkg.com/@ixfx/bundle"
// Eg: Geometry.Rects.random();