@zag-js/rect-utils 0.39.0 → 0.41.0

package/dist/index.mjs

@@ -1,40 +1,198 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// src/affine-transform.ts
+var AffineTransform = class _AffineTransform {
+  constructor([m00, m01, m02, m10, m11, m12] = [0, 0, 0, 0, 0, 0]) {
+    __publicField(this, "m00");
+    __publicField(this, "m01");
+    __publicField(this, "m02");
+    __publicField(this, "m10");
+    __publicField(this, "m11");
+    __publicField(this, "m12");
+    __publicField(this, "rotate", (...args) => {
+      return this.prepend(_AffineTransform.rotate(...args));
+    });
+    __publicField(this, "scale", (...args) => {
+      return this.prepend(_AffineTransform.scale(...args));
+    });
+    __publicField(this, "translate", (...args) => {
+      return this.prepend(_AffineTransform.translate(...args));
+    });
+    this.m00 = m00;
+    this.m01 = m01;
+    this.m02 = m02;
+    this.m10 = m10;
+    this.m11 = m11;
+    this.m12 = m12;
+  }
+  applyTo(point) {
+    const { x, y } = point;
+    const { m00, m01, m02, m10, m11, m12 } = this;
+    return {
+      x: m00 * x + m01 * y + m02,
+      y: m10 * x + m11 * y + m12
+    };
+  }
+  prepend(other) {
+    return new _AffineTransform([
+      this.m00 * other.m00 + this.m01 * other.m10,
+      // m00
+      this.m00 * other.m01 + this.m01 * other.m11,
+      // m01
+      this.m00 * other.m02 + this.m01 * other.m12 + this.m02,
+      // m02
+      this.m10 * other.m00 + this.m11 * other.m10,
+      // m10
+      this.m10 * other.m01 + this.m11 * other.m11,
+      // m11
+      this.m10 * other.m02 + this.m11 * other.m12 + this.m12
+      // m12
+    ]);
+  }
+  append(other) {
+    return new _AffineTransform([
+      other.m00 * this.m00 + other.m01 * this.m10,
+      // m00
+      other.m00 * this.m01 + other.m01 * this.m11,
+      // m01
+      other.m00 * this.m02 + other.m01 * this.m12 + other.m02,
+      // m02
+      other.m10 * this.m00 + other.m11 * this.m10,
+      // m10
+      other.m10 * this.m01 + other.m11 * this.m11,
+      // m11
+      other.m10 * this.m02 + other.m11 * this.m12 + other.m12
+      // m12
+    ]);
+  }
+  get determinant() {
+    return this.m00 * this.m11 - this.m01 * this.m10;
+  }
+  get isInvertible() {
+    const det = this.determinant;
+    return isFinite(det) && isFinite(this.m02) && isFinite(this.m12) && det !== 0;
+  }
+  invert() {
+    const det = this.determinant;
+    return new _AffineTransform([
+      this.m11 / det,
+      // m00
+      -this.m01 / det,
+      // m01
+      (this.m01 * this.m12 - this.m11 * this.m02) / det,
+      // m02
+      -this.m10 / det,
+      // m10
+      this.m00 / det,
+      // m11
+      (this.m10 * this.m02 - this.m00 * this.m12) / det
+      // m12
+    ]);
+  }
+  get array() {
+    return [this.m00, this.m01, this.m02, this.m10, this.m11, this.m12, 0, 0, 1];
+  }
+  get float32Array() {
+    return new Float32Array(this.array);
+  }
+  // Static
+  static get identity() {
+    return new _AffineTransform([1, 0, 0, 0, 1, 0]);
+  }
+  static rotate(theta, origin) {
+    const rotation = new _AffineTransform([Math.cos(theta), -Math.sin(theta), 0, Math.sin(theta), Math.cos(theta), 0]);
+    if (origin && (origin.x !== 0 || origin.y !== 0)) {
+      return _AffineTransform.multiply(
+        _AffineTransform.translate(origin.x, origin.y),
+        rotation,
+        _AffineTransform.translate(-origin.x, -origin.y)
+      );
+    }
+    return rotation;
+  }
+  static scale(sx, sy = sx, origin = { x: 0, y: 0 }) {
+    const scale = new _AffineTransform([sx, 0, 0, 0, sy, 0]);
+    if (origin.x !== 0 || origin.y !== 0) {
+      return _AffineTransform.multiply(
+        _AffineTransform.translate(origin.x, origin.y),
+        scale,
+        _AffineTransform.translate(-origin.x, -origin.y)
+      );
+    }
+    return scale;
+  }
+  static translate(tx, ty) {
+    return new _AffineTransform([1, 0, tx, 0, 1, ty]);
+  }
+  static multiply(...[first, ...rest]) {
+    if (!first)
+      return _AffineTransform.identity;
+    return rest.reduce((result, item) => result.prepend(item), first);
+  }
+  get a() {
+    return this.m00;
+  }
+  get b() {
+    return this.m10;
+  }
+  get c() {
+    return this.m01;
+  }
+  get d() {
+    return this.m11;
+  }
+  get tx() {
+    return this.m02;
+  }
+  get ty() {
+    return this.m12;
+  }
+  get scaleComponents() {
+    return { x: this.a, y: this.d };
+  }
+  get translationComponents() {
+    return { x: this.tx, y: this.ty };
+  }
+  get skewComponents() {
+    return { x: this.c, y: this.b };
+  }
+  toString() {
+    return `matrix(${this.a}, ${this.b}, ${this.c}, ${this.d}, ${this.tx}, ${this.ty})`;
+  }
+};
+
 // src/align.ts
 function hAlign(a, ref, h) {
   let x = ref.minX;
-  if (h === "left-inside") {
+  if (h === "left-inside")
     x = ref.minX;
-  }
-  if (h === "left-outside") {
+  if (h === "left-outside")
     x = ref.minX - ref.width;
-  }
-  if (h === "right-inside") {
+  if (h === "right-inside")
     x = ref.maxX - ref.width;
-  }
-  if (h === "right-outside") {
+  if (h === "right-outside")
     x = ref.maxX;
-  }
-  if (h === "center") {
+  if (h === "center")
     x = ref.midX - ref.width / 2;
-  }
   return { ...a, x };
 }
 function vAlign(a, ref, v) {
   let y = ref.minY;
-  if (v === "top-inside") {
+  if (v === "top-inside")
     y = ref.minY;
-  }
-  if (v === "top-outside") {
+  if (v === "top-outside")
     y = ref.minY - a.height;
-  }
-  if (v === "bottom-inside") {
+  if (v === "bottom-inside")
     y = ref.maxY - a.height;
-  }
-  if (v === "bottom-outside") {
+  if (v === "bottom-outside")
     y = ref.maxY;
-  }
-  if (v === "center") {
+  if (v === "center")
     y = ref.midY - a.height / 2;
-  }
   return { ...a, y };
 }
 function alignRect(a, ref, options) {
@@ -42,8 +200,35 @@ function alignRect(a, ref, options) {
   return vAlign(hAlign(a, ref, h), ref, v);
 }
 
+// src/clamp.ts
+var clamp = (value, min3, max2) => Math.min(Math.max(value, min3), max2);
+var clampPoint = (position, size, boundaryRect) => {
+  const x = clamp(position.x, boundaryRect.x, boundaryRect.x + boundaryRect.width - size.width);
+  const y = clamp(position.y, boundaryRect.y, boundaryRect.y + boundaryRect.height - size.height);
+  return { x, y };
+};
+var defaultMinSize = {
+  width: 0,
+  height: 0
+};
+var defaultMaxSize = {
+  width: Infinity,
+  height: Infinity
+};
+var clampSize = (size, minSize = defaultMinSize, maxSize = defaultMaxSize) => {
+  return {
+    width: Math.min(Math.max(size.width, minSize.width), maxSize.width),
+    height: Math.min(Math.max(size.height, minSize.height), maxSize.height)
+  };
+};
+
 // src/rect.ts
-var point = (x, y) => ({ x, y });
+var createPoint = (x, y) => ({ x, y });
+var subtractPoints = (a, b) => createPoint(a.x - b.x, a.y - b.y);
+var addPoints = (a, b) => createPoint(a.x + b.x, a.y + b.y);
+function isPoint(v) {
+  return Reflect.has(v, "x") && Reflect.has(v, "y");
+}
 function createRect(r) {
   const { x, y, width, height } = r;
   const midX = x + width / 2;
@@ -59,25 +244,24 @@ function createRect(r) {
     maxY: y + height,
     midX,
     midY,
-    center: point(midX, midY)
+    center: createPoint(midX, midY)
   };
 }
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 function isRect(v) {
-  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");
 }
 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);
+  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 };
 }
 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);
+  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 };
 }
 function getRectEdges(v) {
@@ -157,18 +341,14 @@ function closest(...pts) {
   };
 }
 function closestSideToRect(ref, r) {
-  if (r.maxX <= ref.minX) {
+  if (r.maxX <= ref.minX)
     return "left";
-  }
-  if (r.minX >= ref.maxX) {
+  if (r.minX >= ref.maxX)
     return "right";
-  }
-  if (r.maxY <= ref.minY) {
+  if (r.maxY <= ref.minY)
     return "top";
-  }
-  if (r.minY >= ref.maxY) {
+  if (r.minY >= ref.maxY)
     return "bottom";
-  }
   return "left";
 }
 function closestSideToPoint(ref, p) {
@@ -193,6 +373,20 @@ function closestSideToPoint(ref, p) {
   return side;
 }
 
+// src/constrain.ts
+var constrainRect = (rect, boundary) => {
+  const { x, y, width, height } = rect;
+  const { x: bx, y: by, width: bw, height: bh } = boundary;
+  const left = Math.max(bx, Math.min(x, bx + bw - width));
+  const top = Math.max(by, Math.min(y, by + bh - height));
+  return {
+    x: left,
+    y: top,
+    width: Math.min(width, bw),
+    height: Math.min(height, bh)
+  };
+};
+
 // src/contains.ts
 function containsPoint(r, p) {
   return r.minX <= p.x && p.x <= r.maxX && r.minY <= p.y && p.y <= r.maxY;
@@ -204,6 +398,17 @@ function contains(r, v) {
   return isRect(v) ? containsRect(r, v) : containsPoint(r, v);
 }
 
+// src/equality.ts
+var isSizeEqual = (a, b) => {
+  return a.width === b.width && a.height === b.height;
+};
+var isPointEqual = (a, b) => {
+  return a.x === b.x && a.y === b.y;
+};
+var isRectEqual = (a, b) => {
+  return isPointEqual(a, b) && isSizeEqual(a, b);
+};
+
 // src/from-element.ts
 var styleCache = /* @__PURE__ */ new WeakMap();
 function getCacheComputedStyle(el) {
@@ -256,24 +461,12 @@ function getRectFromPoints(...pts) {
 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)
-    )
+    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);
 }
@@ -347,19 +540,6 @@ function getViewportRect(win, opts) {
   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) {
@@ -391,8 +571,19 @@ function shift(r, o) {
 }
 
 // src/polygon.ts
-function isPointInPolygon(polygon, point2) {
-  const { x, y } = point2;
+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];
+}
+function isPointInPolygon(polygon, 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;
@@ -431,21 +622,133 @@ function createPolygonElement() {
 }
 function debugPolygon(polygon) {
   const el = createPolygonElement();
-  const points = polygon.map((point2) => `${point2.x},${point2.y}`).join(" ");
+  const points = polygon.map((point) => `${point.x},${point.y}`).join(" ");
   el.setAttribute("points", points);
   return () => {
     el.remove();
   };
 }
+
+// src/compass.ts
+var compassDirectionMap = {
+  n: { x: 0.5, y: 0 },
+  ne: { x: 1, y: 0 },
+  e: { x: 1, y: 0.5 },
+  se: { x: 1, y: 1 },
+  s: { x: 0.5, y: 1 },
+  sw: { x: 0, y: 1 },
+  w: { x: 0, y: 0.5 },
+  nw: { x: 0, y: 0 }
+};
+var oppositeDirectionMap = {
+  n: "s",
+  ne: "sw",
+  e: "w",
+  se: "nw",
+  s: "n",
+  sw: "ne",
+  w: "e",
+  nw: "se"
+};
+
+// src/resize.ts
+var { sign, abs, min: min2 } = Math;
+function getRectExtentPoint(rect, direction) {
+  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) {
+  return oppositeDirectionMap[direction];
+}
+function resizeRect(rect, offset, direction, opts) {
+  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, finalPoint, normalized = true) {
+  if (normalized) {
+    return {
+      x: min2(finalPoint.x, initialPoint.x),
+      y: min2(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, transform, normalized = true) {
+  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);
+}
 export {
+  AffineTransform,
+  addPoints,
   alignRect,
+  clampPoint,
+  clampSize,
   closest,
   closestSideToPoint,
   closestSideToRect,
   collisions,
+  constrainRect,
   contains,
   containsPoint,
   containsRect,
+  createPoint,
   createRect,
   debugPolygon,
   distance,
@@ -466,12 +769,18 @@ export {
   inset,
   intersection,
   intersects,
+  isPoint,
+  isPointEqual,
   isPointInPolygon,
   isRect,
+  isRectEqual,
+  isSizeEqual,
   isSymmetric,
+  resizeRect,
   rotate,
   shift,
   shrink,
+  subtractPoints,
   toRad,
   union
 };