@zag-js/rect-utils
Advanced tools
Comparing version 0.0.0-dev-20220413091534 to 0.0.0-dev-20220413174154
@@ -6,1 +6,2 @@ declare type Key = keyof CSSStyleDeclaration | (string & {}); | ||
export {}; | ||
//# sourceMappingURL=computed-style.d.ts.map |
@@ -13,1 +13,2 @@ import { Rect } from "./rect"; | ||
}; | ||
//# sourceMappingURL=from-element.d.ts.map |
@@ -7,1 +7,2 @@ export * from "./rect"; | ||
export * from "./polygon"; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -1,2 +0,247 @@ | ||
var d=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},C=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Y(e))!I.call(t,i)&&i!==n&&d(t,i,{get:()=>e[i],enumerable:!(o=X(e,i))||o.enumerable});return t};var j=t=>C(d({},"__esModule",{value:!0}),t);var J={};W(J,{Rect:()=>r,closest:()=>H,debugPolygon:()=>G,distance:()=>R,expand:()=>F,getElementRect:()=>K,getEventPoint:()=>V,inset:()=>f,isSymmetric:()=>P,relativeToNode:()=>B,shift:()=>D,shrink:()=>$,withinPolygon:()=>q});module.exports=j(J);var a=(t,e)=>({x:t,y:e}),r=class{constructor(e){this.v=e}static create(e){return new r(e)}set(e){return new r(Object.assign({},this.v,e))}clone(){return new r(this.v)}get x(){return this.v.x}get y(){return this.v.y}get width(){return this.v.width}get height(){return this.v.height}get minX(){return this.v.x}get midX(){return this.v.x+this.v.width/2}get maxX(){return this.v.x+this.v.width}get minY(){return this.v.y}get midY(){return this.v.y+this.v.height/2}get maxY(){return this.v.y+this.v.height}get center(){return a(this.midX,this.midY)}get centers(){let e=a(this.midX,this.minY),n=a(this.maxX,this.midY),o=a(this.midX,this.maxY),i=a(this.minX,this.midY);return{top:e,right:n,bottom:o,left:i}}get corners(){let e=a(this.minX,this.minY),n=a(this.maxX,this.minY),o=a(this.maxX,this.maxY),i=a(this.minX,this.maxY);return{top:e,right:n,bottom:o,left:i}}get edges(){let e=this.corners,n=[e.top,e.right],o=[e.right,e.bottom],i=[e.left,e.bottom],c=[e.top,e.left];return{top:n,right:o,bottom:i,left:c}}};var b=new WeakMap;function v(t){var n;if(!t)return{};let e=b.get(t);return e||(e=((n=t==null?void 0:t.ownerDocument.defaultView)!=null?n:window).getComputedStyle(t),b.set(t,e)),e}function K(t,e={}){return r.create(k(t,e))}function k(t,e={}){let{excludeScrollbar:n=!1,excludeBorders:o=!1}=e,{x:i,y:c,width:u,height:l}=t.getBoundingClientRect(),s={x:i,y:c,width:u,height:l},p=v(t),{borderLeftWidth:h,borderTopWidth:y,borderRightWidth:S,borderBottomWidth:A}=p,g=w(h,S),x=w(y,A);if(o&&(s.width-=g,s.height-=x,s.x+=m(h),s.y+=m(y)),n){let M=t.offsetWidth-t.clientWidth-g,T=t.offsetHeight-t.clientHeight-x;s.width-=M,s.height-=T}return s}var m=t=>parseFloat(t.replace("px","")),w=(...t)=>t.reduce((e,n)=>e+(n?m(n):0),0);var nt=(()=>{let t=0;return()=>(t++,t.toString(36))})();var L=t=>Array.isArray(t);var O=t=>!(t==null||typeof t!="object"||L(t));var E=t=>O(t)&&"touches"in t;function R(t,e={x:0,y:0}){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function H(...t){return e=>{let n=t.map(i=>R(i,e)),o=Math.min.apply(Math,n);return t[n.indexOf(o)]}}var N={pageX:0,pageY:0,clientX:0,clientY:0};function V(t,e="page"){let n=E(t)?t.touches[0]||t.changedTouches[0]||N:t;return{x:n[`${e}X`],y:n[`${e}Y`]}}function B(t,e){let n=t.x-e.offsetLeft-e.clientLeft+e.scrollLeft,o=t.y-e.offsetTop-e.clientTop+e.scrollTop;return{point:{x:n,y:o},progress:{x:n/e.offsetWidth,y:o/e.offsetHeight}}}var P=t=>"dx"in t||"dy"in t;function f(t,e){let n=P(e)?{left:e.dx,right:e.dx,top:e.dy,bottom:e.dy}:e,{top:o=0,right:i=0,bottom:c=0,left:u=0}=n;return r.create({x:t.x+u,y:t.y+o,width:t.width-u-i,height:t.height-o-c})}function F(t,e){let n=typeof e=="number"?{dx:-e,dy:-e}:e;return f(t,n)}function $(t,e){let n=typeof e=="number"?{dx:-e,dy:-e}:e;return f(t,n)}function D(t,e){let{x:n=0,y:o=0}=e;return r.create({x:t.x+n,y:t.y+o,width:t.width,height:t.height})}function q(t,e){let{x:n,y:o}=e,i=!1;for(let c=0,u=t.length-1;c<t.length;u=c++){let l=t[c].x,s=t[c].y,p=t[u].x,h=t[u].y;s>o!=h>o&&n<(p-l)*(o-s)/(h-s)+l&&(i=!i)}return i}function z(){let t="debug-polygon",e=document.getElementById(t);if(e)return e;let n=document.createElementNS("http://www.w3.org/2000/svg","svg");Object.assign(n.style,{top:"0",left:"0",width:"100%",height:"100%",opacity:"0.15",position:"fixed",pointerEvents:"none"});let o=document.createElementNS("http://www.w3.org/2000/svg","polygon");return o.setAttribute("id",t),o.setAttribute("points","0,0 0,0"),n.appendChild(o),document.body.appendChild(n),o}function G(t){let e=z(),n=t.map(o=>`${o.x},${o.y}`).join(" ");e.setAttribute("points",n)} | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __export = (target, all) => { | ||
for (var name in all) | ||
__defProp(target, name, { get: all[name], enumerable: true }); | ||
}; | ||
var __copyProps = (to, from, except, desc) => { | ||
if (from && typeof from === "object" || typeof from === "function") { | ||
for (let key of __getOwnPropNames(from)) | ||
if (!__hasOwnProp.call(to, key) && key !== except) | ||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
} | ||
return to; | ||
}; | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
// src/index.ts | ||
var src_exports = {}; | ||
__export(src_exports, { | ||
Rect: () => Rect, | ||
closest: () => closest, | ||
debugPolygon: () => debugPolygon, | ||
distance: () => distance, | ||
expand: () => expand, | ||
getElementRect: () => getElementRect, | ||
getEventPoint: () => getEventPoint, | ||
inset: () => inset, | ||
isSymmetric: () => isSymmetric, | ||
relativeToNode: () => relativeToNode, | ||
shift: () => shift, | ||
shrink: () => shrink, | ||
withinPolygon: () => withinPolygon | ||
}); | ||
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); | ||
} | ||
set(n) { | ||
return new Rect(Object.assign({}, this.v, n)); | ||
} | ||
clone() { | ||
return new Rect(this.v); | ||
} | ||
get x() { | ||
return this.v.x; | ||
} | ||
get y() { | ||
return this.v.y; | ||
} | ||
get width() { | ||
return this.v.width; | ||
} | ||
get height() { | ||
return this.v.height; | ||
} | ||
get minX() { | ||
return this.v.x; | ||
} | ||
get midX() { | ||
return this.v.x + this.v.width / 2; | ||
} | ||
get maxX() { | ||
return this.v.x + this.v.width; | ||
} | ||
get minY() { | ||
return this.v.y; | ||
} | ||
get midY() { | ||
return this.v.y + this.v.height / 2; | ||
} | ||
get maxY() { | ||
return this.v.y + this.v.height; | ||
} | ||
get center() { | ||
return point(this.midX, this.midY); | ||
} | ||
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 }; | ||
} | ||
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 }; | ||
} | ||
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 }; | ||
} | ||
}; | ||
// src/computed-style.ts | ||
var styleCache = /* @__PURE__ */ new WeakMap(); | ||
function getComputedStyle(el) { | ||
var _a; | ||
if (!el) | ||
return {}; | ||
let style = styleCache.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); | ||
} | ||
return style; | ||
} | ||
// src/from-element.ts | ||
function getElementRect(el, opts = {}) { | ||
return Rect.create(getClientRect(el, opts)); | ||
} | ||
function getClientRect(el, opts = {}) { | ||
const { excludeScrollbar = false, excludeBorders = false } = opts; | ||
const { x, y, width, height } = el.getBoundingClientRect(); | ||
const r = { x, y, width, height }; | ||
const style = getComputedStyle(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; | ||
} | ||
var px = (v) => parseFloat(v.replace("px", "")); | ||
var sum = (...vals) => vals.reduce((sum2, v) => sum2 + (v ? px(v) : 0), 0); | ||
// ../core/src/guard.ts | ||
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)); | ||
} | ||
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)]; | ||
}; | ||
} | ||
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`] }; | ||
} | ||
function relativeToNode(p, el) { | ||
const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft; | ||
const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop; | ||
return { | ||
point: { x: dx, y: dy }, | ||
progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight } | ||
}; | ||
} | ||
// 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 }); | ||
} | ||
function expand(r, v) { | ||
const value = typeof v === "number" ? { dx: -v, dy: -v } : v; | ||
return inset(r, value); | ||
} | ||
function shrink(r, v) { | ||
const value = typeof v === "number" ? { dx: -v, dy: -v } : v; | ||
return inset(r, value); | ||
} | ||
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 }); | ||
} | ||
// src/polygon.ts | ||
function withinPolygon(polygon, point2) { | ||
const { x, y } = point2; | ||
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" | ||
}); | ||
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; | ||
} | ||
function debugPolygon(polygon) { | ||
const el = createPolygonElement(); | ||
const points = polygon.map((point2) => `${point2.x},${point2.y}`).join(" "); | ||
el.setAttribute("points", points); | ||
} | ||
//# sourceMappingURL=index.js.map |
@@ -8,1 +8,2 @@ import { Rect } from "./rect"; | ||
export declare function shift(r: Rect, o: Partial<Point>): Rect; | ||
//# sourceMappingURL=operations.d.ts.map |
@@ -16,1 +16,2 @@ import { Point } from "./types"; | ||
export {}; | ||
//# sourceMappingURL=point.d.ts.map |
import { Point } from "./types"; | ||
export declare function withinPolygon(polygon: Point[], point: Point): boolean; | ||
export declare function debugPolygon(polygon: Point[]): void; | ||
//# sourceMappingURL=polygon.d.ts.map |
@@ -65,1 +65,2 @@ import { RectEdge, RectValue } from "./types"; | ||
} | ||
//# sourceMappingURL=rect.d.ts.map |
@@ -31,1 +31,2 @@ export declare type Point = { | ||
}; | ||
//# sourceMappingURL=types.d.ts.map |
{ | ||
"name": "@zag-js/rect-utils", | ||
"version": "0.0.0-dev-20220413091534", | ||
"version": "0.0.0-dev-20220413174154", | ||
"description": "", | ||
@@ -19,3 +19,3 @@ "keywords": [ | ||
"files": [ | ||
"dist" | ||
"dist/**/*" | ||
], | ||
@@ -29,4 +29,13 @@ "publishConfig": { | ||
"dependencies": { | ||
"@zag-js/utils": "^0.0.0-dev-20220413091534" | ||
"@zag-js/utils": "^0.0.0-dev-20220413174154" | ||
}, | ||
"scripts": { | ||
"build:fast": "zag build", | ||
"start": "zag build --watch", | ||
"build": "zag build --prod", | ||
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests", | ||
"lint": "eslint src --ext .ts,.tsx", | ||
"test:ci": "yarn test --ci --runInBand", | ||
"test:watch": "yarn test --watch --updateSnapshot" | ||
} | ||
} | ||
} |
@@ -13,6 +13,6 @@ # @zag-js/geometry | ||
Yes please! See the [contributing guidelines](https://github.com/chakra-ui/core/blob/main/CONTRIBUTING.md) for details. | ||
Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. | ||
## Licence | ||
This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/core/blob/main/LICENSE). | ||
This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
54685
22
600
1