@zag-js/rect-utils 0.39.0 → 0.41.0

package/src/intersection.ts

@@ -1,5 +1,5 @@
-import { createRect, type Rect } from "./rect"
-import type { RectSide } from "./types"
+import { createRect } from "./rect"
+import type { Rect, RectSide } from "./types"
 
 /**
  * Checks if a Rect intersects another Rect

package/src/operations.ts

@@ -1,5 +1,5 @@
-import { createRect, type Rect } from "./rect"
-import type { Point, RectInset, SymmetricRectInset } from "./types"
+import { createRect } from "./rect"
+import type { Point, Rect, RectInset, SymmetricRectInset } from "./types"
 
 export const isSymmetric = (v: any): v is SymmetricRectInset => "dx" in v || "dy" in v
 

package/src/polygon.ts

@@ -1,4 +1,18 @@
-import type { Point } from "./types"
+import { createRect, getRectCorners } from "./rect"
+import type { Point, RectInit } from "./types"
+
+export function getElementPolygon(rectValue: RectInit, 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]
+}
 
 export function isPointInPolygon(polygon: Point[], point: Point) {
   const { x, y } = point

package/src/rect.ts

@@ -1,8 +1,23 @@
-import type { RectEdge, RectValue } from "./types"
+import type { Point, Rect, RectEdge, RectInit } from "./types"
 
-const point = (x: number, y: number) => ({ x, y })
+/* -----------------------------------------------------------------------------
+ * Point
+ * -----------------------------------------------------------------------------*/
 
-export function createRect(r: RectValue) {
+export const createPoint = (x: number, y: number) => ({ x, y })
+
+export const subtractPoints = (a: Point, b: Point) => createPoint(a.x - b.x, a.y - b.y)
+export const addPoints = (a: Point, b: Point) => createPoint(a.x + b.x, a.y + b.y)
+
+export function isPoint(v: any): v is Point {
+  return Reflect.has(v, "x") && Reflect.has(v, "y")
+}
+
+/* -----------------------------------------------------------------------------
+ * Rect
+ * -----------------------------------------------------------------------------*/
+
+export function createRect(r: RectInit): Rect {
   const { x, y, width, height } = r
   const midX = x + width / 2
   const midY = y + height / 2
@@ -17,32 +32,27 @@ export function createRect(r: RectValue) {
     maxY: y + height,
     midX,
     midY,
-    center: point(midX, midY),
+    center: createPoint(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")
+  return Reflect.has(v, "x") && Reflect.has(v, "y") && Reflect.has(v, "width") && Reflect.has(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)
+  const top = createPoint(v.midX, v.minY)
+  const right = createPoint(v.maxX, v.midY)
+  const bottom = createPoint(v.midX, v.maxY)
+  const left = createPoint(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)
+  const top = createPoint(v.minX, v.minY)
+  const right = createPoint(v.maxX, v.minY)
+  const bottom = createPoint(v.maxX, v.maxY)
+  const left = createPoint(v.minX, v.maxY)
   return { top, right, bottom, left }
 }
 

package/src/resize.ts

@@ -0,0 +1,106 @@
+import { AffineTransform } from "./affine-transform"
+import { compassDirectionMap, oppositeDirectionMap, type CompassDirection } from "./compass"
+import type { Point, Rect, RectInit, ScalingOptions } from "./types"
+
+const { sign, abs, min } = Math
+
+function getRectExtentPoint(rect: Rect, direction: CompassDirection) {
+  const { minX, minY, maxX, maxY, midX, midY } = rect
+  const x = direction.includes("w") ? minX : direction.includes("e") ? maxX : midX
+  const y = direction.includes("n") ? minY : direction.includes("s") ? maxY : midY
+  return { x, y }
+}
+
+function getOppositeDirection(direction: CompassDirection) {
+  return oppositeDirectionMap[direction]
+}
+
+export function resizeRect(rect: Rect, offset: Point, direction: CompassDirection, opts: ScalingOptions) {
+  const { scalingOriginMode, lockAspectRatio } = opts
+
+  const extent = getRectExtentPoint(rect, direction)
+
+  const oppositeDirection = getOppositeDirection(direction)
+  const oppositeExtent = getRectExtentPoint(rect, oppositeDirection)
+
+  if (scalingOriginMode === "center") {
+    offset = { x: offset.x * 2, y: offset.y * 2 }
+  }
+
+  const newExtent = {
+    x: extent.x + offset.x,
+    y: extent.y + offset.y,
+  }
+
+  const multiplier = {
+    x: compassDirectionMap[direction].x * 2 - 1,
+    y: compassDirectionMap[direction].y * 2 - 1,
+  }
+
+  const newSize = {
+    width: newExtent.x - oppositeExtent.x,
+    height: newExtent.y - oppositeExtent.y,
+  }
+
+  const scaleX = (multiplier.x * newSize.width) / rect.width
+  const scaleY = (multiplier.y * newSize.height) / rect.height
+
+  const largestMagnitude = abs(scaleX) > abs(scaleY) ? scaleX : scaleY
+
+  const scale = lockAspectRatio
+    ? { x: largestMagnitude, y: largestMagnitude }
+    : {
+        x: extent.x === oppositeExtent.x ? 1 : scaleX,
+        y: extent.y === oppositeExtent.y ? 1 : scaleY,
+      }
+
+  if (extent.y === oppositeExtent.y) {
+    scale.y = abs(scale.y)
+  } else if (sign(scale.y) !== sign(scaleY)) {
+    scale.y *= -1
+  }
+
+  if (extent.x === oppositeExtent.x) {
+    scale.x = abs(scale.x)
+  } else if (sign(scale.x) !== sign(scaleX)) {
+    scale.x *= -1
+  }
+
+  switch (scalingOriginMode) {
+    case "extent":
+      return transformRect(rect, AffineTransform.scale(scale.x, scale.y, oppositeExtent), false)
+    case "center":
+      return transformRect(
+        rect,
+        AffineTransform.scale(scale.x, scale.y, {
+          x: rect.midX,
+          y: rect.midY,
+        }),
+        false,
+      )
+  }
+}
+
+function createRectFromPoints(initialPoint: Point, finalPoint: Point, normalized: boolean = true): RectInit {
+  if (normalized) {
+    return {
+      x: min(finalPoint.x, initialPoint.x),
+      y: min(finalPoint.y, initialPoint.y),
+      width: abs(finalPoint.x - initialPoint.x),
+      height: abs(finalPoint.y - initialPoint.y),
+    }
+  }
+
+  return {
+    x: initialPoint.x,
+    y: initialPoint.y,
+    width: finalPoint.x - initialPoint.x,
+    height: finalPoint.y - initialPoint.y,
+  }
+}
+
+function transformRect(rect: Rect, transform: AffineTransform, normalized = true): RectInit {
+  const p1 = transform.applyTo({ x: rect.minX, y: rect.minY })
+  const p2 = transform.applyTo({ x: rect.maxX, y: rect.maxY })
+  return createRectFromPoints(p1, p2, normalized)
+}

package/src/types.ts

@@ -1,12 +1,38 @@
-export type Point = { x: number; y: number }
+/* -----------------------------------------------------------------------------
+ * Basic
+ * -----------------------------------------------------------------------------*/
 
-export type RectValue = {
+export interface Point {
   x: number
   y: number
+}
+
+export interface Size {
   width: number
   height: number
 }
 
+export interface Bounds {
+  minX: number
+  midX: number
+  maxX: number
+  minY: number
+  midY: number
+  maxY: number
+}
+
+export interface CenterPoint {
+  center: Point
+}
+
+export interface RectInit extends Point, Size {}
+
+export interface Rect extends Point, Size, Bounds, CenterPoint {}
+
+/* -----------------------------------------------------------------------------
+ * Edge and Side
+ * -----------------------------------------------------------------------------*/
+
 export type RectSide = "top" | "right" | "bottom" | "left"
 
 export type RectPoint =
@@ -42,4 +68,25 @@ export type RectCenters = Record<RectCenter, Point> & {
 
 export type RectInset = Partial<Record<RectSide, number>>
 
-export type SymmetricRectInset = { dx?: number; dy?: number }
+export interface SymmetricRectInset {
+  dx?: number
+  dy?: number
+}
+
+export interface ScalingOptions {
+  scalingOriginMode: "center" | "extent"
+  lockAspectRatio: boolean
+}
+
+/* -----------------------------------------------------------------------------
+ * Alignment
+ * -----------------------------------------------------------------------------*/
+
+export interface 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/union.ts

@@ -1,28 +1,16 @@
 import { getRectFromPoints } from "./from-points"
-import type { Rect } from "./rect"
+import type { Rect } from "./types"
 
 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),
-    ),
+    x: min(...rs.map((r) => r.minX)),
+    y: min(...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),
-    ),
+    x: max(...rs.map((r) => r.maxX)),
+    y: max(...rs.map((r) => r.maxY)),
   }
   return getRectFromPoints(pMin, pMax)
 }

package/src/get-polygon.ts

@@ -1,15 +0,0 @@
-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]
-}