@zag-js/rect-utils 0.9.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/rect-utils",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "",
   "keywords": [
     "js",
@@ -13,7 +13,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/rect",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"

package/src/align.ts

@@ -0,0 +1,59 @@
+import type { Rect } from "./rect"
+
+function hAlign(a: Rect, ref: Rect, h: HAlign): Rect {
+  let x = ref.minX
+
+  if (h === "left-inside") {
+    x = ref.minX
+  }
+  if (h === "left-outside") {
+    x = ref.minX - ref.width
+  }
+  if (h === "right-inside") {
+    x = ref.maxX - ref.width
+  }
+  if (h === "right-outside") {
+    x = ref.maxX
+  }
+  if (h === "center") {
+    x = ref.midX - ref.width / 2
+  }
+
+  return { ...a, x }
+}
+
+function vAlign(a: Rect, ref: Rect, v: VAlign): Rect {
+  let y = ref.minY
+
+  if (v === "top-inside") {
+    y = ref.minY
+  }
+  if (v === "top-outside") {
+    y = ref.minY - a.height
+  }
+  if (v === "bottom-inside") {
+    y = ref.maxY - a.height
+  }
+  if (v === "bottom-outside") {
+    y = ref.maxY
+  }
+  if (v === "center") {
+    y = ref.midY - a.height / 2
+  }
+
+  return { ...a, y }
+}
+
+export function alignRect(a: Rect, ref: Rect, options: AlignOptions): Rect {
+  const { h, v } = options
+  return vAlign(hAlign(a, ref, h), ref, v)
+}
+
+export type AlignOptions = {
+  h: HAlign
+  v: VAlign
+}
+
+export type HAlign = "left-inside" | "left-outside" | "center" | "right-inside" | "right-outside"
+
+export type VAlign = "top-inside" | "top-outside" | "center" | "bottom-inside" | "bottom-outside"

package/src/closest.ts

@@ -0,0 +1,53 @@
+import { distance } from "./distance"
+import type { Rect } from "./rect"
+import type { Point, RectSide } from "./types"
+
+export function closest(...pts: Point[]) {
+  return (a: Point): Point => {
+    const ds = pts.map((b) => distance(b, a))
+    const c = Math.min.apply(Math, ds)
+    return pts[ds.indexOf(c)]
+  }
+}
+
+export function closestSideToRect(ref: Rect, r: Rect): RectSide {
+  if (r.maxX <= ref.minX) {
+    return "left"
+  }
+  if (r.minX >= ref.maxX) {
+    return "right"
+  }
+  if (r.maxY <= ref.minY) {
+    return "top"
+  }
+  if (r.minY >= ref.maxY) {
+    return "bottom"
+  }
+  return "left"
+}
+
+export function closestSideToPoint(ref: Rect, p: Point): RectSide {
+  const { x, y } = p
+
+  const dl = x - ref.minX
+  const dr = ref.maxX - x
+  const dt = y - ref.minY
+  const db = ref.maxY - y
+
+  let closest = dl
+  let side: RectSide = "left"
+
+  if (dr < closest) {
+    closest = dr
+    side = "right"
+  }
+  if (dt < closest) {
+    closest = dt
+    side = "top"
+  }
+  if (db < closest) {
+    side = "bottom"
+  }
+
+  return side
+}

package/src/contains.ts

@@ -0,0 +1,14 @@
+import { getRectCorners, isRect, Rect } from "./rect"
+import type { Point } from "./types"
+
+export function containsPoint(r: Rect, p: Point): boolean {
+  return r.minX <= p.x && p.x <= r.maxX && r.minY <= p.y && p.y <= r.maxY
+}
+
+export function containsRect(a: Rect, b: Rect): boolean {
+  return Object.values(getRectCorners(b)).every((c) => containsPoint(a, c))
+}
+
+export function contains(r: Rect, v: Rect | Point): boolean {
+  return isRect(v) ? containsRect(r, v) : containsPoint(r, v)
+}

package/src/distance.ts

@@ -0,0 +1,43 @@
+import { intersects } from "./intersection"
+import type { Rect } from "./rect"
+import type { Point, RectSide } from "./types"
+
+export type DistanceValue = Point & {
+  value: number
+}
+
+export function distance(a: Point, b: Point = { x: 0, y: 0 }): number {
+  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
+}
+
+export function distanceFromPoint(r: Rect, p: Point): DistanceValue {
+  let x = 0
+  let y = 0
+  if (p.x < r.x) x = r.x - p.x
+  else if (p.x > r.maxX) x = p.x - r.maxX
+  if (p.y < r.y) y = r.y - p.y
+  else if (p.y > r.maxY) y = p.y - r.maxY
+  return { x, y, value: distance({ x, y }) }
+}
+
+export function distanceFromRect(a: Rect, b: Rect): DistanceValue {
+  if (intersects(a, b)) return { x: 0, y: 0, value: 0 }
+  const left = a.x < b.x ? a : b
+  const right = b.x < a.x ? a : b
+  const upper = a.y < b.y ? a : b
+  const lower = b.y < a.y ? a : b
+  let x = left.x === right.x ? 0 : right.x - left.maxX
+  x = Math.max(0, x)
+  let y = upper.y === lower.y ? 0 : lower.y - upper.maxY
+  y = Math.max(0, y)
+  return { x, y, value: distance({ x, y }) }
+}
+
+export function distanceBtwEdges(a: Rect, b: Rect): Record<RectSide, number> {
+  return {
+    left: b.x - a.x,
+    top: b.y - a.y,
+    right: a.maxX - b.maxX,
+    bottom: a.maxY - b.maxY,
+  }
+}

package/src/from-element.ts

@@ -0,0 +1,59 @@
+import { createRect, Rect } from "./rect"
+
+const styleCache = new WeakMap<HTMLElement, any>()
+function getCacheComputedStyle(el: HTMLElement) {
+  if (!styleCache.has(el)) {
+    const win = el.ownerDocument.defaultView || window
+    styleCache.set(el, win.getComputedStyle(el))
+  }
+  return styleCache.get(el)
+}
+
+export function getElementRect(el: HTMLElement, opts: ElementRectOptions = {}): Rect {
+  return createRect(getClientRect(el, opts))
+}
+
+export type ElementRectOptions = {
+  /**
+   * Whether to exclude the element's scrollbar size from the calculation.
+   */
+  excludeScrollbar?: boolean
+  /**
+   * Whether to exclude the element's borders from the calculation.
+   */
+  excludeBorders?: boolean
+}
+
+function getClientRect(el: HTMLElement, opts: ElementRectOptions = {}) {
+  const { excludeScrollbar = false, excludeBorders = false } = opts
+
+  const { x, y, width, height } = el.getBoundingClientRect()
+  const r = { x, y, width, height }
+
+  const style = getCacheComputedStyle(el)
+
+  const { borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth } = style
+
+  const borderXWidth = sum(borderLeftWidth, borderRightWidth)
+  const borderYWidth = sum(borderTopWidth, borderBottomWidth)
+
+  if (excludeBorders) {
+    r.width -= borderXWidth
+    r.height -= borderYWidth
+    r.x += px(borderLeftWidth)
+    r.y += px(borderTopWidth)
+  }
+
+  if (excludeScrollbar) {
+    const scrollbarWidth = el.offsetWidth - el.clientWidth - borderXWidth
+    const scrollbarHeight = el.offsetHeight - el.clientHeight - borderYWidth
+    r.width -= scrollbarWidth
+    r.height -= scrollbarHeight
+  }
+
+  return r
+}
+
+const px = (v: string) => parseFloat(v.replace("px", ""))
+
+const sum = (...vals: string[]) => vals.reduce((sum, v) => sum + (v ? px(v) : 0), 0)

package/src/from-points.ts

@@ -0,0 +1,15 @@
+import { createRect, Rect } from "./rect"
+import type { Point } from "./types"
+
+export function getRectFromPoints(...pts: Point[]): Rect {
+  const xs = pts.map((p) => p.x)
+  const ys = pts.map((p) => p.y)
+
+  const x = Math.min(...xs)
+  const y = Math.min(...ys)
+
+  const width = Math.max(...xs) - x
+  const height = Math.max(...ys) - y
+
+  return createRect({ x, y, width, height })
+}

package/src/from-range.ts

@@ -0,0 +1,26 @@
+import { createRect, Rect } from "./rect"
+import { getElementRect } from "./from-element"
+import { union } from "./union"
+
+export function fromRange(range: Range): Rect {
+  let rs: Rect[] = []
+  const rects = Array.from(range.getClientRects())
+
+  if (rects.length) {
+    rs = rs.concat(rects.map(createRect))
+    return union.apply(undefined, rs)
+  }
+
+  let start: Node | ParentNode | null = range.startContainer
+
+  if (start.nodeType === Node.TEXT_NODE) {
+    start = start.parentNode
+  }
+
+  if (start instanceof HTMLElement) {
+    const r = getElementRect(start)
+    rs.push({ ...r, x: r.maxX, width: 0 })
+  }
+
+  return union.apply(undefined, rs)
+}

package/src/from-rotation.ts

@@ -0,0 +1,41 @@
+import { createRect, getRectCorners, Rect } from "./rect"
+import type { Point } from "./types"
+
+export function toRad(d: number) {
+  return ((d % 360) * Math.PI) / 180
+}
+
+export function rotate(a: Point, d: number, c: Point): Point {
+  const r = toRad(d)
+
+  const sin = Math.sin(r)
+  const cos = Math.cos(r)
+
+  const x = a.x - c.x
+  const y = a.y - c.y
+
+  return {
+    x: c.x + x * cos - y * sin,
+    y: c.y + x * sin + y * cos,
+  }
+}
+
+export function getRotationRect(r: Rect, deg: number): Rect {
+  const rr = Object.values(getRectCorners(r)).map((p) => rotate(p, deg, r.center))
+
+  const xs = rr.map((p) => p.x)
+  const ys = rr.map((p) => p.y)
+
+  const minX = Math.min(...xs)
+  const minY = Math.min(...ys)
+
+  const maxX = Math.max(...xs)
+  const maxY = Math.max(...ys)
+
+  return createRect({
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  })
+}

package/src/from-window.ts

@@ -0,0 +1,33 @@
+import { createRect, Rect } from "./rect"
+
+export type WindowRectOptions = {
+  /**
+   * Whether to exclude the element's scrollbar size from the calculation.
+   */
+  excludeScrollbar?: boolean
+}
+
+/**
+ * Creates a rectange from window object
+ */
+export function getWindowRect(win: Window, opts: WindowRectOptions = {}): Rect {
+  return createRect(getViewportRect(win, opts))
+}
+
+/**
+ * Get the rect of the window with the option to exclude the scrollbar
+ */
+export function getViewportRect(win: Window, opts: WindowRectOptions) {
+  const { excludeScrollbar = false } = opts
+  const { innerWidth, innerHeight, document: doc, visualViewport } = win
+  const width = visualViewport?.width || innerWidth
+  const height = visualViewport?.height || innerHeight
+  const rect = { x: 0, y: 0, width, height }
+  if (excludeScrollbar) {
+    const scrollbarWidth = innerWidth - doc.documentElement.clientWidth
+    const scrollbarHeight = innerHeight - doc.documentElement.clientHeight
+    rect.width -= scrollbarWidth
+    rect.height -= scrollbarHeight
+  }
+  return rect
+}

package/src/get-polygon.ts

@@ -0,0 +1,15 @@
+import { createRect, getRectCorners } from "./rect"
+import type { RectValue } from "./types"
+
+export function getElementPolygon(rectValue: RectValue, placement: string) {
+  const rect = createRect(rectValue)
+  const { top, right, left, bottom } = getRectCorners(rect)
+  const [base] = placement.split("-")
+
+  return {
+    top: [left, top, right, bottom],
+    right: [top, right, bottom, left],
+    bottom: [top, left, bottom, right],
+    left: [right, top, left, bottom],
+  }[base]
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export * from "./align"
+export * from "./closest"
+export * from "./contains"
+export * from "./distance"
+export * from "./from-element"
+export * from "./from-points"
+export * from "./from-range"
+export * from "./from-rotation"
+export * from "./from-window"
+export * from "./get-polygon"
+export * from "./intersection"
+export * from "./operations"
+export * from "./polygon"
+export * from "./rect"
+export * from "./types"
+export * from "./union"

package/src/intersection.ts

@@ -0,0 +1,32 @@
+import { createRect, Rect } from "./rect"
+import type { RectSide } from "./types"
+
+/**
+ * Checks if a Rect intersects another Rect
+ */
+export function intersects(a: Rect, b: Rect): boolean {
+  return a.x < b.maxX && a.y < b.maxY && a.maxX > b.x && a.maxY > b.y
+}
+
+/**
+ * Returns a new Rect that represents the intersection between two Rects
+ */
+export function intersection(a: Rect, b: Rect): Rect {
+  const x = Math.max(a.x, b.x)
+  const y = Math.max(a.y, b.y)
+  const x2 = Math.min(a.x + a.width, b.x + b.width)
+  const y2 = Math.min(a.y + a.height, b.y + b.height)
+  return createRect({ x, y, width: x2 - x, height: y2 - y })
+}
+
+/**
+ * Returns whether two rects collide along each edge
+ */
+export function collisions(a: Rect, b: Rect): Record<RectSide, boolean> {
+  return {
+    top: a.minY <= b.minY,
+    right: a.maxX >= b.maxX,
+    bottom: a.maxY >= b.maxY,
+    left: a.minX <= b.minX,
+  }
+}

package/src/operations.ts

@@ -0,0 +1,35 @@
+import { createRect, Rect } from "./rect"
+import type { Point, RectInset, SymmetricRectInset } from "./types"
+
+export const isSymmetric = (v: any): v is SymmetricRectInset => "dx" in v || "dy" in v
+
+export function inset(r: Rect, i: RectInset | SymmetricRectInset): Rect {
+  const v = isSymmetric(i) ? { left: i.dx, right: i.dx, top: i.dy, bottom: i.dy } : i
+  const { top = 0, right = 0, bottom = 0, left = 0 } = v
+  return createRect({
+    x: r.x + left,
+    y: r.y + top,
+    width: r.width - left - right,
+    height: r.height - top - bottom,
+  })
+}
+
+export function expand(r: Rect, v: number | SymmetricRectInset): Rect {
+  const value = typeof v === "number" ? { dx: -v, dy: -v } : v
+  return inset(r, value)
+}
+
+export function shrink(r: Rect, v: number | SymmetricRectInset): Rect {
+  const value = typeof v === "number" ? { dx: -v, dy: -v } : v
+  return inset(r, value)
+}
+
+export function shift(r: Rect, o: Partial<Point>): Rect {
+  const { x = 0, y = 0 } = o
+  return createRect({
+    x: r.x + x,
+    y: r.y + y,
+    width: r.width,
+    height: r.height,
+  })
+}

package/src/polygon.ts

@@ -0,0 +1,53 @@
+import type { Point } from "./types"
+
+export function isPointInPolygon(polygon: Point[], point: Point) {
+  const { x, y } = point
+  let c = false
+
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x
+    const yi = polygon[i].y
+    const xj = polygon[j].x
+    const yj = polygon[j].y
+
+    if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) {
+      c = !c
+    }
+  }
+  return c
+}
+
+function createPolygonElement() {
+  const id = "debug-polygon"
+  const existingPolygon = document.getElementById(id)
+  if (existingPolygon) {
+    return existingPolygon
+  }
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  Object.assign(svg.style, {
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    opacity: "0.15",
+    position: "fixed",
+    pointerEvents: "none",
+    fill: "red",
+  })
+
+  const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
+  polygon.setAttribute("id", id)
+  polygon.setAttribute("points", "0,0 0,0")
+  svg.appendChild(polygon)
+  document.body.appendChild(svg)
+  return polygon
+}
+
+export function debugPolygon(polygon: Point[]) {
+  const el = createPolygonElement()
+  const points = polygon.map((point) => `${point.x},${point.y}`).join(" ")
+  el.setAttribute("points", points)
+  return () => {
+    el.remove()
+  }
+}

package/src/rect.ts

@@ -0,0 +1,56 @@
+import type { RectEdge, RectValue } from "./types"
+
+const point = (x: number, y: number) => ({ x, y })
+
+export function createRect(r: RectValue) {
+  const { x, y, width, height } = r
+  const midX = x + width / 2
+  const midY = y + height / 2
+  return {
+    x,
+    y,
+    width,
+    height,
+    minX: x,
+    minY: y,
+    maxX: x + width,
+    maxY: y + height,
+    midX,
+    midY,
+    center: point(midX, midY),
+  }
+}
+
+export type Rect = ReturnType<typeof createRect>
+
+const hasProp = <T extends string>(obj: any, prop: T): obj is Record<T, any> =>
+  Object.prototype.hasOwnProperty.call(obj, prop)
+
+export function isRect(v: any): v is Rect {
+  return hasProp(v, "x") && hasProp(v, "y") && hasProp(v, "width") && hasProp(v, "height")
+}
+
+export function getRectCenters(v: Rect) {
+  const top = point(v.midX, v.minY)
+  const right = point(v.maxX, v.midY)
+  const bottom = point(v.midX, v.maxY)
+  const left = point(v.minX, v.midY)
+  return { top, right, bottom, left }
+}
+
+export function getRectCorners(v: Rect) {
+  const top = point(v.minX, v.minY)
+  const right = point(v.maxX, v.minY)
+  const bottom = point(v.maxX, v.maxY)
+  const left = point(v.minX, v.maxY)
+  return { top, right, bottom, left }
+}
+
+export function getRectEdges(v: Rect) {
+  const c = getRectCorners(v)
+  const top: RectEdge = [c.top, c.right]
+  const right: RectEdge = [c.right, c.bottom]
+  const bottom: RectEdge = [c.left, c.bottom]
+  const left: RectEdge = [c.top, c.left]
+  return { top, right, bottom, left }
+}

package/src/types.ts

@@ -0,0 +1,45 @@
+export type Point = { x: number; y: number }
+
+export type RectValue = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type RectSide = "top" | "right" | "bottom" | "left"
+
+export type RectPoint =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "right-center"
+  | "left-center"
+  | "bottom-left"
+  | "bottom-right"
+  | "bottom-center"
+  | "center"
+
+export type RectEdge = [Point, Point]
+
+export type RectPoints = [Point, Point, Point, Point]
+
+export type RectEdges = Record<RectSide, RectEdge> & {
+  value: RectEdge[]
+}
+
+export type RectCorner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight"
+
+export type RectCorners = Record<RectCorner, Point> & {
+  value: RectPoints
+}
+
+export type RectCenter = "topCenter" | "rightCenter" | "leftCenter" | "bottomCenter"
+
+export type RectCenters = Record<RectCenter, Point> & {
+  value: RectPoints
+}
+
+export type RectInset = Partial<Record<RectSide, number>>
+
+export type SymmetricRectInset = { dx?: number; dy?: number }

package/src/union.ts

@@ -0,0 +1,28 @@
+import { getRectFromPoints } from "./from-points"
+import type { Rect } from "./rect"
+
+const { min, max } = Math
+
+export function union(...rs: Rect[]): Rect {
+  const pMin = {
+    x: min.apply(
+      Math,
+      rs.map((r) => r.minX),
+    ),
+    y: min.apply(
+      Math,
+      rs.map((r) => r.minY),
+    ),
+  }
+  const pMax = {
+    x: max.apply(
+      Math,
+      rs.map((r) => r.maxX),
+    ),
+    y: max.apply(
+      Math,
+      rs.map((r) => r.maxY),
+    ),
+  }
+  return getRectFromPoints(pMin, pMax)
+}