@zag-js/rect-utils 0.1.1 → 0.1.4

package/dist/align.d.ts

@@ -0,0 +1,8 @@
+import type { Rect } from "./rect";
+export declare function alignRect(a: Rect, ref: Rect, options: AlignOptions): Rect;
+export declare type AlignOptions = {
+    h: HAlign;
+    v: VAlign;
+};
+export declare type HAlign = "left-inside" | "left-outside" | "center" | "right-inside" | "right-outside";
+export declare type VAlign = "top-inside" | "top-outside" | "center" | "bottom-inside" | "bottom-outside";

package/dist/closest.d.ts

@@ -0,0 +1,5 @@
+import type { Rect } from "./rect";
+import type { Point, RectSide } from "./types";
+export declare function closest(...pts: Point[]): (a: Point) => Point;
+export declare function closestSideToRect(ref: Rect, r: Rect): RectSide;
+export declare function closestSideToPoint(ref: Rect, p: Point): RectSide;

package/dist/contains.d.ts

@@ -0,0 +1,5 @@
+import { Rect } from "./rect";
+import type { Point } from "./types";
+export declare function containsPoint(r: Rect, p: Point): boolean;
+export declare function containsRect(a: Rect, b: Rect): boolean;
+export declare function contains(r: Rect, v: Rect | Point): boolean;

package/dist/distance.d.ts

@@ -0,0 +1,9 @@
+import type { Rect } from "./rect";
+import type { Point, RectSide } from "./types";
+export declare type DistanceValue = Point & {
+    value: number;
+};
+export declare function distance(a: Point, b?: Point): number;
+export declare function distanceFromPoint(r: Rect, p: Point): DistanceValue;
+export declare function distanceFromRect(a: Rect, b: Rect): DistanceValue;
+export declare function distanceBtwEdges(a: Rect, b: Rect): Record<RectSide, number>;

package/dist/from-element.d.ts

@@ -10,4 +10,3 @@ export declare type ElementRectOptions = {
      */
     excludeBorders?: boolean;
 };
-//# sourceMappingURL=from-element.d.ts.map

package/dist/from-points.d.ts

@@ -0,0 +1,3 @@
+import { Rect } from "./rect";
+import type { Point } from "./types";
+export declare function getRectFromPoints(...pts: Point[]): Rect;

package/dist/from-range.d.ts

@@ -0,0 +1,2 @@
+import { Rect } from "./rect";
+export declare function fromRange(range: Range): Rect;

package/dist/from-rotation.d.ts

@@ -0,0 +1,5 @@
+import { Rect } from "./rect";
+import type { Point } from "./types";
+export declare function toRad(d: number): number;
+export declare function rotate(a: Point, d: number, c: Point): Point;
+export declare function getRotationRect(r: Rect, deg: number): Rect;

package/dist/from-window.d.ts

@@ -0,0 +1,20 @@
+import { Rect } from "./rect";
+export declare type WindowRectOptions = {
+    /**
+     * Whether to exclude the element's scrollbar size from the calculation.
+     */
+    excludeScrollbar?: boolean;
+};
+/**
+ * Creates a rectange from window object
+ */
+export declare function getWindowRect(win: Window, opts?: WindowRectOptions): Rect;
+/**
+ * Get the rect of the window with the option to exclude the scrollbar
+ */
+export declare function getViewportRect(win: Window, opts: WindowRectOptions): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/dist/get-polygon.d.ts

@@ -0,0 +1,5 @@
+import type { RectValue } from "./types";
+export declare function getElementPolygon(rectValue: RectValue, placement: string): {
+    x: number;
+    y: number;
+}[];

package/dist/index.d.ts

@@ -1,7 +1,16 @@
-export * from "./rect";
-export * from "./types";
+export * from "./align";
+export * from "./closest";
+export * from "./contains";
+export * from "./distance";
 export * from "./from-element";
-export * from "./point";
+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";
-//# sourceMappingURL=index.d.ts.map
+export * from "./rect";
+export * from "./types";
+export * from "./union";

package/dist/index.js

@@ -1,7 +1,25 @@
+"use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,112 +37,276 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Rect: () => Rect,
+  alignRect: () => alignRect,
   closest: () => closest,
+  closestSideToPoint: () => closestSideToPoint,
+  closestSideToRect: () => closestSideToRect,
+  collisions: () => collisions,
+  contains: () => contains,
+  containsPoint: () => containsPoint,
+  containsRect: () => containsRect,
+  createRect: () => createRect,
   debugPolygon: () => debugPolygon,
   distance: () => distance,
+  distanceBtwEdges: () => distanceBtwEdges,
+  distanceFromPoint: () => distanceFromPoint,
+  distanceFromRect: () => distanceFromRect,
   expand: () => expand,
+  fromRange: () => fromRange,
+  getElementPolygon: () => getElementPolygon,
   getElementRect: () => getElementRect,
-  getEventPoint: () => getEventPoint,
+  getRectCenters: () => getRectCenters,
+  getRectCorners: () => getRectCorners,
+  getRectEdges: () => getRectEdges,
+  getRectFromPoints: () => getRectFromPoints,
+  getRotationRect: () => getRotationRect,
+  getViewportRect: () => getViewportRect,
+  getWindowRect: () => getWindowRect,
   inset: () => inset,
+  intersection: () => intersection,
+  intersects: () => intersects,
+  isPointInPolygon: () => isPointInPolygon,
+  isRect: () => isRect,
   isSymmetric: () => isSymmetric,
-  relativeToNode: () => relativeToNode,
+  rotate: () => rotate,
   shift: () => shift,
   shrink: () => shrink,
-  withinPolygon: () => withinPolygon
+  toRad: () => toRad,
+  union: () => union
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/rect.ts
-var point = (x, y) => ({ x, y });
-var Rect = class {
-  constructor(v) {
-    this.v = v;
-  }
-  static create(v) {
-    return new Rect(v);
+// src/align.ts
+function hAlign(a, ref, h) {
+  let x = ref.minX;
+  if (h === "left-inside") {
+    x = ref.minX;
   }
-  set(n) {
-    return new Rect(Object.assign({}, this.v, n));
+  if (h === "left-outside") {
+    x = ref.minX - ref.width;
   }
-  clone() {
-    return new Rect(this.v);
+  if (h === "right-inside") {
+    x = ref.maxX - ref.width;
   }
-  get x() {
-    return this.v.x;
+  if (h === "right-outside") {
+    x = ref.maxX;
   }
-  get y() {
-    return this.v.y;
+  if (h === "center") {
+    x = ref.midX - ref.width / 2;
   }
-  get width() {
-    return this.v.width;
+  return __spreadProps(__spreadValues({}, a), { x });
+}
+function vAlign(a, ref, v) {
+  let y = ref.minY;
+  if (v === "top-inside") {
+    y = ref.minY;
   }
-  get height() {
-    return this.v.height;
+  if (v === "top-outside") {
+    y = ref.minY - a.height;
   }
-  get minX() {
-    return this.v.x;
+  if (v === "bottom-inside") {
+    y = ref.maxY - a.height;
   }
-  get midX() {
-    return this.v.x + this.v.width / 2;
+  if (v === "bottom-outside") {
+    y = ref.maxY;
   }
-  get maxX() {
-    return this.v.x + this.v.width;
+  if (v === "center") {
+    y = ref.midY - a.height / 2;
   }
-  get minY() {
-    return this.v.y;
+  return __spreadProps(__spreadValues({}, a), { y });
+}
+function alignRect(a, ref, options) {
+  const { h, v } = options;
+  return vAlign(hAlign(a, ref, h), ref, v);
+}
+
+// ../core/dist/index.mjs
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// src/rect.ts
+var point = (x, y) => ({ x, y });
+function createRect(r) {
+  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)
+  };
+}
+function isRect(v) {
+  return hasProp(v, "x") && hasProp(v, "y") && hasProp(v, "width") && hasProp(v, "height");
+}
+function getRectCenters(v) {
+  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 };
+}
+function getRectCorners(v) {
+  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 };
+}
+function getRectEdges(v) {
+  const c = getRectCorners(v);
+  const top = [c.top, c.right];
+  const right = [c.right, c.bottom];
+  const bottom = [c.left, c.bottom];
+  const left = [c.top, c.left];
+  return { top, right, bottom, left };
+}
+
+// src/intersection.ts
+function intersects(a, b) {
+  return a.x < b.maxX && a.y < b.maxY && a.maxX > b.x && a.maxY > b.y;
+}
+function intersection(a, b) {
+  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 });
+}
+function collisions(a, b) {
+  return {
+    top: a.minY <= b.minY,
+    right: a.maxX >= b.maxX,
+    bottom: a.maxY >= b.maxY,
+    left: a.minX <= b.minX
+  };
+}
+
+// src/distance.ts
+function distance(a, b = { x: 0, y: 0 }) {
+  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+}
+function distanceFromPoint(r, p) {
+  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 }) };
+}
+function distanceFromRect(a, b) {
+  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 }) };
+}
+function distanceBtwEdges(a, b) {
+  return {
+    left: b.x - a.x,
+    top: b.y - a.y,
+    right: a.maxX - b.maxX,
+    bottom: a.maxY - b.maxY
+  };
+}
+
+// src/closest.ts
+function closest(...pts) {
+  return (a) => {
+    const ds = pts.map((b) => distance(b, a));
+    const c = Math.min.apply(Math, ds);
+    return pts[ds.indexOf(c)];
+  };
+}
+function closestSideToRect(ref, r) {
+  if (r.maxX <= ref.minX) {
+    return "left";
   }
-  get midY() {
-    return this.v.y + this.v.height / 2;
+  if (r.minX >= ref.maxX) {
+    return "right";
   }
-  get maxY() {
-    return this.v.y + this.v.height;
+  if (r.maxY <= ref.minY) {
+    return "top";
   }
-  get center() {
-    return point(this.midX, this.midY);
+  if (r.minY >= ref.maxY) {
+    return "bottom";
   }
-  get centers() {
-    const top = point(this.midX, this.minY);
-    const right = point(this.maxX, this.midY);
-    const bottom = point(this.midX, this.maxY);
-    const left = point(this.minX, this.midY);
-    return { top, right, bottom, left };
+  return "left";
+}
+function closestSideToPoint(ref, p) {
+  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 closest2 = dl;
+  let side = "left";
+  if (dr < closest2) {
+    closest2 = dr;
+    side = "right";
   }
-  get corners() {
-    const top = point(this.minX, this.minY);
-    const right = point(this.maxX, this.minY);
-    const bottom = point(this.maxX, this.maxY);
-    const left = point(this.minX, this.maxY);
-    return { top, right, bottom, left };
+  if (dt < closest2) {
+    closest2 = dt;
+    side = "top";
   }
-  get edges() {
-    const c = this.corners;
-    const top = [c.top, c.right];
-    const right = [c.right, c.bottom];
-    const bottom = [c.left, c.bottom];
-    const left = [c.top, c.left];
-    return { top, right, bottom, left };
+  if (db < closest2) {
+    side = "bottom";
   }
-};
+  return side;
+}
 
-// src/computed-style.ts
-var styleCache = /* @__PURE__ */ new WeakMap();
+// src/contains.ts
+function containsPoint(r, p) {
+  return r.minX <= p.x && p.x <= r.maxX && r.minY <= p.y && p.y <= r.maxY;
+}
+function containsRect(a, b) {
+  return Object.values(getRectCorners(b)).every((c) => containsPoint(a, c));
+}
+function contains(r, v) {
+  return isRect(v) ? containsRect(r, v) : containsPoint(r, v);
+}
+
+// ../dom/dist/index.mjs
+function getCache() {
+  const g = globalThis;
+  g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
+  return g.__styleCache;
+}
 function getComputedStyle(el) {
   var _a;
   if (!el)
     return {};
-  let style = styleCache.get(el);
+  const cache = getCache();
+  let style = cache.get(el);
   if (!style) {
     const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
     style = win.getComputedStyle(el);
-    styleCache.set(el, style);
+    cache.set(el, style);
   }
   return style;
 }
 
 // src/from-element.ts
 function getElementRect(el, opts = {}) {
-  return Rect.create(getClientRect(el, opts));
+  return createRect(getClientRect(el, opts));
 }
 function getClientRect(el, opts = {}) {
   const { excludeScrollbar = false, excludeBorders = false } = opts;
@@ -151,42 +333,124 @@ function getClientRect(el, opts = {}) {
 var px = (v) => parseFloat(v.replace("px", ""));
 var sum = (...vals) => vals.reduce((sum2, v) => sum2 + (v ? px(v) : 0), 0);
 
-// ../core/dist/index.mjs
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var isTouchEvent = (v) => isObject(v) && "touches" in v;
-
-// src/point.ts
-function distance(a, b = { x: 0, y: 0 }) {
-  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+// src/from-points.ts
+function getRectFromPoints(...pts) {
+  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 });
 }
-function closest(...pts) {
-  return (a) => {
-    const ds = pts.map((b) => distance(b, a));
-    const c = Math.min.apply(Math, ds);
-    return pts[ds.indexOf(c)];
+
+// src/union.ts
+var { min, max } = Math;
+function union(...rs) {
+  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);
+}
+
+// src/from-range.ts
+function fromRange(range) {
+  let rs = [];
+  const rects = Array.from(range.getClientRects());
+  if (rects.length) {
+    rs = rs.concat(rects.map(createRect));
+    return union.apply(void 0, rs);
+  }
+  let start = range.startContainer;
+  if (start.nodeType === Node.TEXT_NODE) {
+    start = start.parentNode;
+  }
+  if (start instanceof HTMLElement) {
+    const r = getElementRect(start);
+    rs.push(__spreadProps(__spreadValues({}, r), { x: r.maxX, width: 0 }));
+  }
+  return union.apply(void 0, rs);
 }
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t = "page") {
-  const p = isTouchEvent(e) ? e.touches[0] || e.changedTouches[0] || fallback : e;
-  return { x: p[`${t}X`], y: p[`${t}Y`] };
+
+// src/from-rotation.ts
+function toRad(d) {
+  return d % 360 * Math.PI / 180;
 }
-function relativeToNode(p, el) {
-  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
-  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
+function rotate(a, d, c) {
+  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 {
-    point: { x: dx, y: dy },
-    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
+    x: c.x + x * cos - y * sin,
+    y: c.y + x * sin + y * cos
   };
 }
+function getRotationRect(r, deg) {
+  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
+  });
+}
+
+// src/from-window.ts
+function getWindowRect(win, opts = {}) {
+  return createRect(getViewportRect(win, opts));
+}
+function getViewportRect(win, opts) {
+  const { excludeScrollbar = false } = opts;
+  const { innerWidth: innerWidth2, innerHeight: innerHeight2, document: doc, visualViewport } = win;
+  const width = visualViewport.width || innerWidth2;
+  const height = visualViewport.height || innerHeight2;
+  const rect = { x: 0, y: 0, width, height };
+  if (excludeScrollbar) {
+    const scrollbarWidth = innerWidth2 - doc.documentElement.clientWidth;
+    const scrollbarHeight = innerHeight2 - doc.documentElement.clientHeight;
+    rect.width -= scrollbarWidth;
+    rect.height -= scrollbarHeight;
+  }
+  return rect;
+}
+
+// src/get-polygon.ts
+function getElementPolygon(rectValue, placement) {
+  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];
+}
 
 // src/operations.ts
 var isSymmetric = (v) => "dx" in v || "dy" in v;
 function inset(r, i) {
   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 Rect.create({ x: r.x + left, y: r.y + top, width: r.width - left - right, height: r.height - top - bottom });
+  return createRect({
+    x: r.x + left,
+    y: r.y + top,
+    width: r.width - left - right,
+    height: r.height - top - bottom
+  });
 }
 function expand(r, v) {
   const value = typeof v === "number" ? { dx: -v, dy: -v } : v;
@@ -198,11 +462,16 @@ function shrink(r, v) {
 }
 function shift(r, o) {
   const { x = 0, y = 0 } = o;
-  return Rect.create({ x: r.x + x, y: r.y + y, width: r.width, height: r.height });
+  return createRect({
+    x: r.x + x,
+    y: r.y + y,
+    width: r.width,
+    height: r.height
+  });
 }
 
 // src/polygon.ts
-function withinPolygon(polygon, point2) {
+function isPointInPolygon(polygon, point2) {
   const { x, y } = point2;
   let c = false;
   for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
@@ -230,7 +499,8 @@ function createPolygonElement() {
     height: "100%",
     opacity: "0.15",
     position: "fixed",
-    pointerEvents: "none"
+    pointerEvents: "none",
+    fill: "red"
   });
   const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
   polygon.setAttribute("id", id);
@@ -243,5 +513,7 @@ function debugPolygon(polygon) {
   const el = createPolygonElement();
   const points = polygon.map((point2) => `${point2.x},${point2.y}`).join(" ");
   el.setAttribute("points", points);
+  return () => {
+    el.remove();
+  };
 }
-//# sourceMappingURL=index.js.map