@zag-js/rect-utils 0.0.0-dev-20220704111810 → 0.0.0-dev-20220706194607
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/from-points.d.ts +1 -1
- package/dist/from-rotation.d.ts +1 -1
- package/dist/index.js +134 -110
- package/dist/index.mjs +137 -110
- package/dist/rect.d.ts +54 -57
- package/package.json +2 -2
package/dist/from-points.d.ts
CHANGED
package/dist/from-rotation.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Point } from "./types";
|
|
2
1
|
import { Rect } from "./rect";
|
|
2
|
+
import type { Point } from "./types";
|
|
3
3
|
export declare function toRad(d: number): number;
|
|
4
4
|
export declare function rotate(a: Point, d: number, c: Point): Point;
|
|
5
5
|
export declare function getRotationRect(r: Rect, deg: number): Rect;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
6
23
|
var __export = (target, all) => {
|
|
7
24
|
for (var name in all)
|
|
8
25
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -20,7 +37,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
37
|
// src/index.ts
|
|
21
38
|
var src_exports = {};
|
|
22
39
|
__export(src_exports, {
|
|
23
|
-
Rect: () => Rect,
|
|
24
40
|
alignRect: () => alignRect,
|
|
25
41
|
closest: () => closest,
|
|
26
42
|
closestSideToPoint: () => closestSideToPoint,
|
|
@@ -29,6 +45,7 @@ __export(src_exports, {
|
|
|
29
45
|
contains: () => contains,
|
|
30
46
|
containsPoint: () => containsPoint,
|
|
31
47
|
containsRect: () => containsRect,
|
|
48
|
+
createRect: () => createRect,
|
|
32
49
|
debugPolygon: () => debugPolygon,
|
|
33
50
|
distance: () => distance,
|
|
34
51
|
distanceBtwEdges: () => distanceBtwEdges,
|
|
@@ -37,6 +54,9 @@ __export(src_exports, {
|
|
|
37
54
|
expand: () => expand,
|
|
38
55
|
fromRange: () => fromRange,
|
|
39
56
|
getElementRect: () => getElementRect,
|
|
57
|
+
getRectCenters: () => getRectCenters,
|
|
58
|
+
getRectCorners: () => getRectCorners,
|
|
59
|
+
getRectEdges: () => getRectEdges,
|
|
40
60
|
getRectFromPoints: () => getRectFromPoints,
|
|
41
61
|
getRotationRect: () => getRotationRect,
|
|
42
62
|
getViewportRect: () => getViewportRect,
|
|
@@ -44,6 +64,7 @@ __export(src_exports, {
|
|
|
44
64
|
inset: () => inset,
|
|
45
65
|
intersection: () => intersection,
|
|
46
66
|
intersects: () => intersects,
|
|
67
|
+
isRect: () => isRect,
|
|
47
68
|
isSymmetric: () => isSymmetric,
|
|
48
69
|
rotate: () => rotate,
|
|
49
70
|
shift: () => shift,
|
|
@@ -57,108 +78,90 @@ module.exports = __toCommonJS(src_exports);
|
|
|
57
78
|
// src/align.ts
|
|
58
79
|
function hAlign(a, ref, h) {
|
|
59
80
|
let x = ref.minX;
|
|
60
|
-
if (h === "left-inside")
|
|
81
|
+
if (h === "left-inside") {
|
|
61
82
|
x = ref.minX;
|
|
62
|
-
|
|
83
|
+
}
|
|
84
|
+
if (h === "left-outside") {
|
|
63
85
|
x = ref.minX - ref.width;
|
|
64
|
-
|
|
86
|
+
}
|
|
87
|
+
if (h === "right-inside") {
|
|
65
88
|
x = ref.maxX - ref.width;
|
|
66
|
-
|
|
89
|
+
}
|
|
90
|
+
if (h === "right-outside") {
|
|
67
91
|
x = ref.maxX;
|
|
68
|
-
|
|
92
|
+
}
|
|
93
|
+
if (h === "center") {
|
|
69
94
|
x = ref.midX - ref.width / 2;
|
|
70
|
-
|
|
95
|
+
}
|
|
96
|
+
return __spreadProps(__spreadValues({}, a), { x });
|
|
71
97
|
}
|
|
72
98
|
function vAlign(a, ref, v) {
|
|
73
99
|
let y = ref.minY;
|
|
74
|
-
if (v === "top-inside")
|
|
100
|
+
if (v === "top-inside") {
|
|
75
101
|
y = ref.minY;
|
|
76
|
-
|
|
102
|
+
}
|
|
103
|
+
if (v === "top-outside") {
|
|
77
104
|
y = ref.minY - a.height;
|
|
78
|
-
|
|
105
|
+
}
|
|
106
|
+
if (v === "bottom-inside") {
|
|
79
107
|
y = ref.maxY - a.height;
|
|
80
|
-
|
|
108
|
+
}
|
|
109
|
+
if (v === "bottom-outside") {
|
|
81
110
|
y = ref.maxY;
|
|
82
|
-
|
|
111
|
+
}
|
|
112
|
+
if (v === "center") {
|
|
83
113
|
y = ref.midY - a.height / 2;
|
|
84
|
-
|
|
114
|
+
}
|
|
115
|
+
return __spreadProps(__spreadValues({}, a), { y });
|
|
85
116
|
}
|
|
86
117
|
function alignRect(a, ref, options) {
|
|
87
118
|
const { h, v } = options;
|
|
88
119
|
return vAlign(hAlign(a, ref, h), ref, v);
|
|
89
120
|
}
|
|
90
121
|
|
|
122
|
+
// ../core/dist/index.mjs
|
|
123
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
124
|
+
|
|
91
125
|
// src/rect.ts
|
|
92
126
|
var point = (x, y) => ({ x, y });
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return this.v.y + this.v.height / 2;
|
|
132
|
-
}
|
|
133
|
-
get maxY() {
|
|
134
|
-
return this.v.y + this.v.height;
|
|
135
|
-
}
|
|
136
|
-
get center() {
|
|
137
|
-
return point(this.midX, this.midY);
|
|
138
|
-
}
|
|
139
|
-
get centers() {
|
|
140
|
-
const top = point(this.midX, this.minY);
|
|
141
|
-
const right = point(this.maxX, this.midY);
|
|
142
|
-
const bottom = point(this.midX, this.maxY);
|
|
143
|
-
const left = point(this.minX, this.midY);
|
|
144
|
-
return { top, right, bottom, left };
|
|
145
|
-
}
|
|
146
|
-
get corners() {
|
|
147
|
-
const top = point(this.minX, this.minY);
|
|
148
|
-
const right = point(this.maxX, this.minY);
|
|
149
|
-
const bottom = point(this.maxX, this.maxY);
|
|
150
|
-
const left = point(this.minX, this.maxY);
|
|
151
|
-
return { top, right, bottom, left };
|
|
152
|
-
}
|
|
153
|
-
get edges() {
|
|
154
|
-
const c = this.corners;
|
|
155
|
-
const top = [c.top, c.right];
|
|
156
|
-
const right = [c.right, c.bottom];
|
|
157
|
-
const bottom = [c.left, c.bottom];
|
|
158
|
-
const left = [c.top, c.left];
|
|
159
|
-
return { top, right, bottom, left };
|
|
160
|
-
}
|
|
161
|
-
};
|
|
127
|
+
function createRect(v) {
|
|
128
|
+
const midX = v.x + v.width / 2;
|
|
129
|
+
const midY = v.y + v.height / 2;
|
|
130
|
+
return __spreadProps(__spreadValues({}, v), {
|
|
131
|
+
minX: v.x,
|
|
132
|
+
minY: v.y,
|
|
133
|
+
maxX: v.x + v.width,
|
|
134
|
+
maxY: v.y + v.height,
|
|
135
|
+
midX,
|
|
136
|
+
midY,
|
|
137
|
+
center: point(midX, midY)
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
function isRect(v) {
|
|
141
|
+
return hasProp(v, "x") && hasProp(v, "y") && hasProp(v, "width") && hasProp(v, "height");
|
|
142
|
+
}
|
|
143
|
+
function getRectCenters(v) {
|
|
144
|
+
const top = point(v.midX, v.minY);
|
|
145
|
+
const right = point(v.maxX, v.midY);
|
|
146
|
+
const bottom = point(v.midX, v.maxY);
|
|
147
|
+
const left = point(v.minX, v.midY);
|
|
148
|
+
return { top, right, bottom, left };
|
|
149
|
+
}
|
|
150
|
+
function getRectCorners(v) {
|
|
151
|
+
const top = point(v.minX, v.minY);
|
|
152
|
+
const right = point(v.maxX, v.minY);
|
|
153
|
+
const bottom = point(v.maxX, v.maxY);
|
|
154
|
+
const left = point(v.minX, v.maxY);
|
|
155
|
+
return { top, right, bottom, left };
|
|
156
|
+
}
|
|
157
|
+
function getRectEdges(v) {
|
|
158
|
+
const c = getRectCorners(v);
|
|
159
|
+
const top = [c.top, c.right];
|
|
160
|
+
const right = [c.right, c.bottom];
|
|
161
|
+
const bottom = [c.left, c.bottom];
|
|
162
|
+
const left = [c.top, c.left];
|
|
163
|
+
return { top, right, bottom, left };
|
|
164
|
+
}
|
|
162
165
|
|
|
163
166
|
// src/intersection.ts
|
|
164
167
|
function intersects(a, b) {
|
|
@@ -169,7 +172,7 @@ function intersection(a, b) {
|
|
|
169
172
|
const y = Math.max(a.y, b.y);
|
|
170
173
|
const x2 = Math.min(a.x + a.width, b.x + b.width);
|
|
171
174
|
const y2 = Math.min(a.y + a.height, b.y + b.height);
|
|
172
|
-
return
|
|
175
|
+
return createRect({ x, y, width: x2 - x, height: y2 - y });
|
|
173
176
|
}
|
|
174
177
|
function collisions(a, b) {
|
|
175
178
|
return {
|
|
@@ -228,14 +231,18 @@ function closest(...pts) {
|
|
|
228
231
|
};
|
|
229
232
|
}
|
|
230
233
|
function closestSideToRect(ref, r) {
|
|
231
|
-
if (r.maxX <= ref.minX)
|
|
234
|
+
if (r.maxX <= ref.minX) {
|
|
232
235
|
return "left";
|
|
233
|
-
|
|
236
|
+
}
|
|
237
|
+
if (r.minX >= ref.maxX) {
|
|
234
238
|
return "right";
|
|
235
|
-
|
|
239
|
+
}
|
|
240
|
+
if (r.maxY <= ref.minY) {
|
|
236
241
|
return "top";
|
|
237
|
-
|
|
242
|
+
}
|
|
243
|
+
if (r.minY >= ref.maxY) {
|
|
238
244
|
return "bottom";
|
|
245
|
+
}
|
|
239
246
|
return "left";
|
|
240
247
|
}
|
|
241
248
|
function closestSideToPoint(ref, p) {
|
|
@@ -265,17 +272,17 @@ function containsPoint(r, p) {
|
|
|
265
272
|
return r.minX <= p.x && p.x <= r.maxX && r.minY <= p.y && p.y <= r.maxY;
|
|
266
273
|
}
|
|
267
274
|
function containsRect(a, b) {
|
|
268
|
-
return Object.values(b
|
|
275
|
+
return Object.values(getRectCorners(b)).every((c) => containsPoint(a, c));
|
|
269
276
|
}
|
|
270
277
|
function contains(r, v) {
|
|
271
|
-
return v
|
|
278
|
+
return isRect(v) ? containsRect(r, v) : containsPoint(r, v);
|
|
272
279
|
}
|
|
273
280
|
|
|
274
281
|
// ../dom/dist/index.mjs
|
|
275
282
|
function getCache() {
|
|
276
283
|
const g = globalThis;
|
|
277
|
-
g.
|
|
278
|
-
return g.
|
|
284
|
+
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
285
|
+
return g.__styleCache;
|
|
279
286
|
}
|
|
280
287
|
function getComputedStyle(el) {
|
|
281
288
|
var _a;
|
|
@@ -293,7 +300,7 @@ function getComputedStyle(el) {
|
|
|
293
300
|
|
|
294
301
|
// src/from-element.ts
|
|
295
302
|
function getElementRect(el, opts = {}) {
|
|
296
|
-
return
|
|
303
|
+
return createRect(getClientRect(el, opts));
|
|
297
304
|
}
|
|
298
305
|
function getClientRect(el, opts = {}) {
|
|
299
306
|
const { excludeScrollbar = false, excludeBorders = false } = opts;
|
|
@@ -328,7 +335,7 @@ function getRectFromPoints(...pts) {
|
|
|
328
335
|
const y = Math.min(...ys);
|
|
329
336
|
const width = Math.max(...xs) - x;
|
|
330
337
|
const height = Math.max(...ys) - y;
|
|
331
|
-
return
|
|
338
|
+
return createRect({ x, y, width, height });
|
|
332
339
|
}
|
|
333
340
|
|
|
334
341
|
// src/union.ts
|
|
@@ -350,17 +357,16 @@ function fromRange(range) {
|
|
|
350
357
|
let rs = [];
|
|
351
358
|
const rects = Array.from(range.getClientRects());
|
|
352
359
|
if (rects.length) {
|
|
353
|
-
rs = rs.concat(rects.map(
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
}
|
|
360
|
+
rs = rs.concat(rects.map(createRect));
|
|
361
|
+
return union.apply(void 0, rs);
|
|
362
|
+
}
|
|
363
|
+
let start = range.startContainer;
|
|
364
|
+
if (start.nodeType === Node.TEXT_NODE) {
|
|
365
|
+
start = start.parentNode;
|
|
366
|
+
}
|
|
367
|
+
if (start instanceof HTMLElement) {
|
|
368
|
+
const r = getElementRect(start);
|
|
369
|
+
rs.push(__spreadProps(__spreadValues({}, r), { x: r.maxX, width: 0 }));
|
|
364
370
|
}
|
|
365
371
|
return union.apply(void 0, rs);
|
|
366
372
|
}
|
|
@@ -375,22 +381,30 @@ function rotate(a, d, c) {
|
|
|
375
381
|
const cos = Math.cos(r);
|
|
376
382
|
const x = a.x - c.x;
|
|
377
383
|
const y = a.y - c.y;
|
|
378
|
-
return {
|
|
384
|
+
return {
|
|
385
|
+
x: c.x + x * cos - y * sin,
|
|
386
|
+
y: c.y + x * sin + y * cos
|
|
387
|
+
};
|
|
379
388
|
}
|
|
380
389
|
function getRotationRect(r, deg) {
|
|
381
|
-
const rr = Object.values(r
|
|
390
|
+
const rr = Object.values(getRectCorners(r)).map((p) => rotate(p, deg, r.center));
|
|
382
391
|
const xs = rr.map((p) => p.x);
|
|
383
392
|
const ys = rr.map((p) => p.y);
|
|
384
393
|
const minX = Math.min(...xs);
|
|
385
394
|
const minY = Math.min(...ys);
|
|
386
395
|
const maxX = Math.max(...xs);
|
|
387
396
|
const maxY = Math.max(...ys);
|
|
388
|
-
return
|
|
397
|
+
return createRect({
|
|
398
|
+
x: minX,
|
|
399
|
+
y: minY,
|
|
400
|
+
width: maxX - minX,
|
|
401
|
+
height: maxY - minY
|
|
402
|
+
});
|
|
389
403
|
}
|
|
390
404
|
|
|
391
405
|
// src/from-window.ts
|
|
392
406
|
function getWindowRect(win, opts = {}) {
|
|
393
|
-
return
|
|
407
|
+
return createRect(getViewportRect(win, opts));
|
|
394
408
|
}
|
|
395
409
|
function getViewportRect(win, opts) {
|
|
396
410
|
const { excludeScrollbar = false } = opts;
|
|
@@ -412,7 +426,12 @@ var isSymmetric = (v) => "dx" in v || "dy" in v;
|
|
|
412
426
|
function inset(r, i) {
|
|
413
427
|
const v = isSymmetric(i) ? { left: i.dx, right: i.dx, top: i.dy, bottom: i.dy } : i;
|
|
414
428
|
const { top = 0, right = 0, bottom = 0, left = 0 } = v;
|
|
415
|
-
return
|
|
429
|
+
return createRect({
|
|
430
|
+
x: r.x + left,
|
|
431
|
+
y: r.y + top,
|
|
432
|
+
width: r.width - left - right,
|
|
433
|
+
height: r.height - top - bottom
|
|
434
|
+
});
|
|
416
435
|
}
|
|
417
436
|
function expand(r, v) {
|
|
418
437
|
const value = typeof v === "number" ? { dx: -v, dy: -v } : v;
|
|
@@ -424,7 +443,12 @@ function shrink(r, v) {
|
|
|
424
443
|
}
|
|
425
444
|
function shift(r, o) {
|
|
426
445
|
const { x = 0, y = 0 } = o;
|
|
427
|
-
return
|
|
446
|
+
return createRect({
|
|
447
|
+
x: r.x + x,
|
|
448
|
+
y: r.y + y,
|
|
449
|
+
width: r.width,
|
|
450
|
+
height: r.height
|
|
451
|
+
});
|
|
428
452
|
}
|
|
429
453
|
|
|
430
454
|
// src/polygon.ts
|
package/dist/index.mjs
CHANGED
|
@@ -1,108 +1,110 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
|
|
1
21
|
// src/align.ts
|
|
2
22
|
function hAlign(a, ref, h) {
|
|
3
23
|
let x = ref.minX;
|
|
4
|
-
if (h === "left-inside")
|
|
24
|
+
if (h === "left-inside") {
|
|
5
25
|
x = ref.minX;
|
|
6
|
-
|
|
26
|
+
}
|
|
27
|
+
if (h === "left-outside") {
|
|
7
28
|
x = ref.minX - ref.width;
|
|
8
|
-
|
|
29
|
+
}
|
|
30
|
+
if (h === "right-inside") {
|
|
9
31
|
x = ref.maxX - ref.width;
|
|
10
|
-
|
|
32
|
+
}
|
|
33
|
+
if (h === "right-outside") {
|
|
11
34
|
x = ref.maxX;
|
|
12
|
-
|
|
35
|
+
}
|
|
36
|
+
if (h === "center") {
|
|
13
37
|
x = ref.midX - ref.width / 2;
|
|
14
|
-
|
|
38
|
+
}
|
|
39
|
+
return __spreadProps(__spreadValues({}, a), { x });
|
|
15
40
|
}
|
|
16
41
|
function vAlign(a, ref, v) {
|
|
17
42
|
let y = ref.minY;
|
|
18
|
-
if (v === "top-inside")
|
|
43
|
+
if (v === "top-inside") {
|
|
19
44
|
y = ref.minY;
|
|
20
|
-
|
|
45
|
+
}
|
|
46
|
+
if (v === "top-outside") {
|
|
21
47
|
y = ref.minY - a.height;
|
|
22
|
-
|
|
48
|
+
}
|
|
49
|
+
if (v === "bottom-inside") {
|
|
23
50
|
y = ref.maxY - a.height;
|
|
24
|
-
|
|
51
|
+
}
|
|
52
|
+
if (v === "bottom-outside") {
|
|
25
53
|
y = ref.maxY;
|
|
26
|
-
|
|
54
|
+
}
|
|
55
|
+
if (v === "center") {
|
|
27
56
|
y = ref.midY - a.height / 2;
|
|
28
|
-
|
|
57
|
+
}
|
|
58
|
+
return __spreadProps(__spreadValues({}, a), { y });
|
|
29
59
|
}
|
|
30
60
|
function alignRect(a, ref, options) {
|
|
31
61
|
const { h, v } = options;
|
|
32
62
|
return vAlign(hAlign(a, ref, h), ref, v);
|
|
33
63
|
}
|
|
34
64
|
|
|
65
|
+
// ../core/dist/index.mjs
|
|
66
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
67
|
+
|
|
35
68
|
// src/rect.ts
|
|
36
69
|
var point = (x, y) => ({ x, y });
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
return this.v.y + this.v.height / 2;
|
|
76
|
-
}
|
|
77
|
-
get maxY() {
|
|
78
|
-
return this.v.y + this.v.height;
|
|
79
|
-
}
|
|
80
|
-
get center() {
|
|
81
|
-
return point(this.midX, this.midY);
|
|
82
|
-
}
|
|
83
|
-
get centers() {
|
|
84
|
-
const top = point(this.midX, this.minY);
|
|
85
|
-
const right = point(this.maxX, this.midY);
|
|
86
|
-
const bottom = point(this.midX, this.maxY);
|
|
87
|
-
const left = point(this.minX, this.midY);
|
|
88
|
-
return { top, right, bottom, left };
|
|
89
|
-
}
|
|
90
|
-
get corners() {
|
|
91
|
-
const top = point(this.minX, this.minY);
|
|
92
|
-
const right = point(this.maxX, this.minY);
|
|
93
|
-
const bottom = point(this.maxX, this.maxY);
|
|
94
|
-
const left = point(this.minX, this.maxY);
|
|
95
|
-
return { top, right, bottom, left };
|
|
96
|
-
}
|
|
97
|
-
get edges() {
|
|
98
|
-
const c = this.corners;
|
|
99
|
-
const top = [c.top, c.right];
|
|
100
|
-
const right = [c.right, c.bottom];
|
|
101
|
-
const bottom = [c.left, c.bottom];
|
|
102
|
-
const left = [c.top, c.left];
|
|
103
|
-
return { top, right, bottom, left };
|
|
104
|
-
}
|
|
105
|
-
};
|
|
70
|
+
function createRect(v) {
|
|
71
|
+
const midX = v.x + v.width / 2;
|
|
72
|
+
const midY = v.y + v.height / 2;
|
|
73
|
+
return __spreadProps(__spreadValues({}, v), {
|
|
74
|
+
minX: v.x,
|
|
75
|
+
minY: v.y,
|
|
76
|
+
maxX: v.x + v.width,
|
|
77
|
+
maxY: v.y + v.height,
|
|
78
|
+
midX,
|
|
79
|
+
midY,
|
|
80
|
+
center: point(midX, midY)
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
function isRect(v) {
|
|
84
|
+
return hasProp(v, "x") && hasProp(v, "y") && hasProp(v, "width") && hasProp(v, "height");
|
|
85
|
+
}
|
|
86
|
+
function getRectCenters(v) {
|
|
87
|
+
const top = point(v.midX, v.minY);
|
|
88
|
+
const right = point(v.maxX, v.midY);
|
|
89
|
+
const bottom = point(v.midX, v.maxY);
|
|
90
|
+
const left = point(v.minX, v.midY);
|
|
91
|
+
return { top, right, bottom, left };
|
|
92
|
+
}
|
|
93
|
+
function getRectCorners(v) {
|
|
94
|
+
const top = point(v.minX, v.minY);
|
|
95
|
+
const right = point(v.maxX, v.minY);
|
|
96
|
+
const bottom = point(v.maxX, v.maxY);
|
|
97
|
+
const left = point(v.minX, v.maxY);
|
|
98
|
+
return { top, right, bottom, left };
|
|
99
|
+
}
|
|
100
|
+
function getRectEdges(v) {
|
|
101
|
+
const c = getRectCorners(v);
|
|
102
|
+
const top = [c.top, c.right];
|
|
103
|
+
const right = [c.right, c.bottom];
|
|
104
|
+
const bottom = [c.left, c.bottom];
|
|
105
|
+
const left = [c.top, c.left];
|
|
106
|
+
return { top, right, bottom, left };
|
|
107
|
+
}
|
|
106
108
|
|
|
107
109
|
// src/intersection.ts
|
|
108
110
|
function intersects(a, b) {
|
|
@@ -113,7 +115,7 @@ function intersection(a, b) {
|
|
|
113
115
|
const y = Math.max(a.y, b.y);
|
|
114
116
|
const x2 = Math.min(a.x + a.width, b.x + b.width);
|
|
115
117
|
const y2 = Math.min(a.y + a.height, b.y + b.height);
|
|
116
|
-
return
|
|
118
|
+
return createRect({ x, y, width: x2 - x, height: y2 - y });
|
|
117
119
|
}
|
|
118
120
|
function collisions(a, b) {
|
|
119
121
|
return {
|
|
@@ -172,14 +174,18 @@ function closest(...pts) {
|
|
|
172
174
|
};
|
|
173
175
|
}
|
|
174
176
|
function closestSideToRect(ref, r) {
|
|
175
|
-
if (r.maxX <= ref.minX)
|
|
177
|
+
if (r.maxX <= ref.minX) {
|
|
176
178
|
return "left";
|
|
177
|
-
|
|
179
|
+
}
|
|
180
|
+
if (r.minX >= ref.maxX) {
|
|
178
181
|
return "right";
|
|
179
|
-
|
|
182
|
+
}
|
|
183
|
+
if (r.maxY <= ref.minY) {
|
|
180
184
|
return "top";
|
|
181
|
-
|
|
185
|
+
}
|
|
186
|
+
if (r.minY >= ref.maxY) {
|
|
182
187
|
return "bottom";
|
|
188
|
+
}
|
|
183
189
|
return "left";
|
|
184
190
|
}
|
|
185
191
|
function closestSideToPoint(ref, p) {
|
|
@@ -209,17 +215,17 @@ function containsPoint(r, p) {
|
|
|
209
215
|
return r.minX <= p.x && p.x <= r.maxX && r.minY <= p.y && p.y <= r.maxY;
|
|
210
216
|
}
|
|
211
217
|
function containsRect(a, b) {
|
|
212
|
-
return Object.values(b
|
|
218
|
+
return Object.values(getRectCorners(b)).every((c) => containsPoint(a, c));
|
|
213
219
|
}
|
|
214
220
|
function contains(r, v) {
|
|
215
|
-
return v
|
|
221
|
+
return isRect(v) ? containsRect(r, v) : containsPoint(r, v);
|
|
216
222
|
}
|
|
217
223
|
|
|
218
224
|
// ../dom/dist/index.mjs
|
|
219
225
|
function getCache() {
|
|
220
226
|
const g = globalThis;
|
|
221
|
-
g.
|
|
222
|
-
return g.
|
|
227
|
+
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
228
|
+
return g.__styleCache;
|
|
223
229
|
}
|
|
224
230
|
function getComputedStyle(el) {
|
|
225
231
|
var _a;
|
|
@@ -237,7 +243,7 @@ function getComputedStyle(el) {
|
|
|
237
243
|
|
|
238
244
|
// src/from-element.ts
|
|
239
245
|
function getElementRect(el, opts = {}) {
|
|
240
|
-
return
|
|
246
|
+
return createRect(getClientRect(el, opts));
|
|
241
247
|
}
|
|
242
248
|
function getClientRect(el, opts = {}) {
|
|
243
249
|
const { excludeScrollbar = false, excludeBorders = false } = opts;
|
|
@@ -272,7 +278,7 @@ function getRectFromPoints(...pts) {
|
|
|
272
278
|
const y = Math.min(...ys);
|
|
273
279
|
const width = Math.max(...xs) - x;
|
|
274
280
|
const height = Math.max(...ys) - y;
|
|
275
|
-
return
|
|
281
|
+
return createRect({ x, y, width, height });
|
|
276
282
|
}
|
|
277
283
|
|
|
278
284
|
// src/union.ts
|
|
@@ -294,17 +300,16 @@ function fromRange(range) {
|
|
|
294
300
|
let rs = [];
|
|
295
301
|
const rects = Array.from(range.getClientRects());
|
|
296
302
|
if (rects.length) {
|
|
297
|
-
rs = rs.concat(rects.map(
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
}
|
|
303
|
+
rs = rs.concat(rects.map(createRect));
|
|
304
|
+
return union.apply(void 0, rs);
|
|
305
|
+
}
|
|
306
|
+
let start = range.startContainer;
|
|
307
|
+
if (start.nodeType === Node.TEXT_NODE) {
|
|
308
|
+
start = start.parentNode;
|
|
309
|
+
}
|
|
310
|
+
if (start instanceof HTMLElement) {
|
|
311
|
+
const r = getElementRect(start);
|
|
312
|
+
rs.push(__spreadProps(__spreadValues({}, r), { x: r.maxX, width: 0 }));
|
|
308
313
|
}
|
|
309
314
|
return union.apply(void 0, rs);
|
|
310
315
|
}
|
|
@@ -319,22 +324,30 @@ function rotate(a, d, c) {
|
|
|
319
324
|
const cos = Math.cos(r);
|
|
320
325
|
const x = a.x - c.x;
|
|
321
326
|
const y = a.y - c.y;
|
|
322
|
-
return {
|
|
327
|
+
return {
|
|
328
|
+
x: c.x + x * cos - y * sin,
|
|
329
|
+
y: c.y + x * sin + y * cos
|
|
330
|
+
};
|
|
323
331
|
}
|
|
324
332
|
function getRotationRect(r, deg) {
|
|
325
|
-
const rr = Object.values(r
|
|
333
|
+
const rr = Object.values(getRectCorners(r)).map((p) => rotate(p, deg, r.center));
|
|
326
334
|
const xs = rr.map((p) => p.x);
|
|
327
335
|
const ys = rr.map((p) => p.y);
|
|
328
336
|
const minX = Math.min(...xs);
|
|
329
337
|
const minY = Math.min(...ys);
|
|
330
338
|
const maxX = Math.max(...xs);
|
|
331
339
|
const maxY = Math.max(...ys);
|
|
332
|
-
return
|
|
340
|
+
return createRect({
|
|
341
|
+
x: minX,
|
|
342
|
+
y: minY,
|
|
343
|
+
width: maxX - minX,
|
|
344
|
+
height: maxY - minY
|
|
345
|
+
});
|
|
333
346
|
}
|
|
334
347
|
|
|
335
348
|
// src/from-window.ts
|
|
336
349
|
function getWindowRect(win, opts = {}) {
|
|
337
|
-
return
|
|
350
|
+
return createRect(getViewportRect(win, opts));
|
|
338
351
|
}
|
|
339
352
|
function getViewportRect(win, opts) {
|
|
340
353
|
const { excludeScrollbar = false } = opts;
|
|
@@ -356,7 +369,12 @@ var isSymmetric = (v) => "dx" in v || "dy" in v;
|
|
|
356
369
|
function inset(r, i) {
|
|
357
370
|
const v = isSymmetric(i) ? { left: i.dx, right: i.dx, top: i.dy, bottom: i.dy } : i;
|
|
358
371
|
const { top = 0, right = 0, bottom = 0, left = 0 } = v;
|
|
359
|
-
return
|
|
372
|
+
return createRect({
|
|
373
|
+
x: r.x + left,
|
|
374
|
+
y: r.y + top,
|
|
375
|
+
width: r.width - left - right,
|
|
376
|
+
height: r.height - top - bottom
|
|
377
|
+
});
|
|
360
378
|
}
|
|
361
379
|
function expand(r, v) {
|
|
362
380
|
const value = typeof v === "number" ? { dx: -v, dy: -v } : v;
|
|
@@ -368,7 +386,12 @@ function shrink(r, v) {
|
|
|
368
386
|
}
|
|
369
387
|
function shift(r, o) {
|
|
370
388
|
const { x = 0, y = 0 } = o;
|
|
371
|
-
return
|
|
389
|
+
return createRect({
|
|
390
|
+
x: r.x + x,
|
|
391
|
+
y: r.y + y,
|
|
392
|
+
width: r.width,
|
|
393
|
+
height: r.height
|
|
394
|
+
});
|
|
372
395
|
}
|
|
373
396
|
|
|
374
397
|
// src/polygon.ts
|
|
@@ -415,7 +438,6 @@ function debugPolygon(polygon) {
|
|
|
415
438
|
el.setAttribute("points", points);
|
|
416
439
|
}
|
|
417
440
|
export {
|
|
418
|
-
Rect,
|
|
419
441
|
alignRect,
|
|
420
442
|
closest,
|
|
421
443
|
closestSideToPoint,
|
|
@@ -424,6 +446,7 @@ export {
|
|
|
424
446
|
contains,
|
|
425
447
|
containsPoint,
|
|
426
448
|
containsRect,
|
|
449
|
+
createRect,
|
|
427
450
|
debugPolygon,
|
|
428
451
|
distance,
|
|
429
452
|
distanceBtwEdges,
|
|
@@ -432,6 +455,9 @@ export {
|
|
|
432
455
|
expand,
|
|
433
456
|
fromRange,
|
|
434
457
|
getElementRect,
|
|
458
|
+
getRectCenters,
|
|
459
|
+
getRectCorners,
|
|
460
|
+
getRectEdges,
|
|
435
461
|
getRectFromPoints,
|
|
436
462
|
getRotationRect,
|
|
437
463
|
getViewportRect,
|
|
@@ -439,6 +465,7 @@ export {
|
|
|
439
465
|
inset,
|
|
440
466
|
intersection,
|
|
441
467
|
intersects,
|
|
468
|
+
isRect,
|
|
442
469
|
isSymmetric,
|
|
443
470
|
rotate,
|
|
444
471
|
shift,
|
package/dist/rect.d.ts
CHANGED
|
@@ -1,64 +1,61 @@
|
|
|
1
1
|
import type { RectEdge, RectValue } from "./types";
|
|
2
|
-
export declare
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
get width(): number;
|
|
11
|
-
get height(): number;
|
|
12
|
-
get minX(): number;
|
|
13
|
-
get midX(): number;
|
|
14
|
-
get maxX(): number;
|
|
15
|
-
get minY(): number;
|
|
16
|
-
get midY(): number;
|
|
17
|
-
get maxY(): number;
|
|
18
|
-
get center(): {
|
|
2
|
+
export declare function createRect(v: RectValue): {
|
|
3
|
+
minX: number;
|
|
4
|
+
minY: number;
|
|
5
|
+
maxX: number;
|
|
6
|
+
maxY: number;
|
|
7
|
+
midX: number;
|
|
8
|
+
midY: number;
|
|
9
|
+
center: {
|
|
19
10
|
x: number;
|
|
20
11
|
y: number;
|
|
21
12
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
y: number;
|
|
34
|
-
};
|
|
35
|
-
left: {
|
|
36
|
-
x: number;
|
|
37
|
-
y: number;
|
|
38
|
-
};
|
|
13
|
+
x: number;
|
|
14
|
+
y: number;
|
|
15
|
+
width: number;
|
|
16
|
+
height: number;
|
|
17
|
+
};
|
|
18
|
+
export declare type Rect = ReturnType<typeof createRect>;
|
|
19
|
+
export declare function isRect(v: any): v is Rect;
|
|
20
|
+
export declare function getRectCenters(v: Rect): {
|
|
21
|
+
top: {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
39
24
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
y: number;
|
|
44
|
-
};
|
|
45
|
-
right: {
|
|
46
|
-
x: number;
|
|
47
|
-
y: number;
|
|
48
|
-
};
|
|
49
|
-
bottom: {
|
|
50
|
-
x: number;
|
|
51
|
-
y: number;
|
|
52
|
-
};
|
|
53
|
-
left: {
|
|
54
|
-
x: number;
|
|
55
|
-
y: number;
|
|
56
|
-
};
|
|
25
|
+
right: {
|
|
26
|
+
x: number;
|
|
27
|
+
y: number;
|
|
57
28
|
};
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
29
|
+
bottom: {
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
};
|
|
33
|
+
left: {
|
|
34
|
+
x: number;
|
|
35
|
+
y: number;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export declare function getRectCorners(v: Rect): {
|
|
39
|
+
top: {
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
};
|
|
43
|
+
right: {
|
|
44
|
+
x: number;
|
|
45
|
+
y: number;
|
|
46
|
+
};
|
|
47
|
+
bottom: {
|
|
48
|
+
x: number;
|
|
49
|
+
y: number;
|
|
50
|
+
};
|
|
51
|
+
left: {
|
|
52
|
+
x: number;
|
|
53
|
+
y: number;
|
|
63
54
|
};
|
|
64
|
-
}
|
|
55
|
+
};
|
|
56
|
+
export declare function getRectEdges(v: Rect): {
|
|
57
|
+
top: RectEdge;
|
|
58
|
+
right: RectEdge;
|
|
59
|
+
bottom: RectEdge;
|
|
60
|
+
left: RectEdge;
|
|
61
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/rect-utils",
|
|
3
|
-
"version": "0.0.0-dev-
|
|
3
|
+
"version": "0.0.0-dev-20220706194607",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@zag-js/dom-utils": "0.0.0-dev-
|
|
28
|
+
"@zag-js/dom-utils": "0.0.0-dev-20220706194607",
|
|
29
29
|
"@zag-js/utils": "0.1.2"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|