react-panel-layout 0.4.1 → 0.5.0

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.
Files changed (63) hide show
  1. package/README.md +291 -0
  2. package/dist/FloatingPanelFrame-DDT6aING.js +66 -0
  3. package/dist/FloatingPanelFrame-DDT6aING.js.map +1 -0
  4. package/dist/FloatingPanelFrame-DrYwgI9f.cjs +2 -0
  5. package/dist/FloatingPanelFrame-DrYwgI9f.cjs.map +1 -0
  6. package/dist/GridLayout-DC7fCmcI.cjs +2 -0
  7. package/dist/GridLayout-DC7fCmcI.cjs.map +1 -0
  8. package/dist/GridLayout-tpSM0iM-.js +1460 -0
  9. package/dist/GridLayout-tpSM0iM-.js.map +1 -0
  10. package/dist/components/grid/GridLayout.d.ts +5 -0
  11. package/dist/components/pivot/PivotLayer.d.ts +14 -0
  12. package/dist/components/window/FloatingWindow.d.ts +15 -0
  13. package/dist/config/PanelContentDeclaration.d.ts +20 -0
  14. package/dist/config/panelRouter.d.ts +4 -2
  15. package/dist/config.cjs +1 -1
  16. package/dist/config.cjs.map +1 -1
  17. package/dist/config.js +125 -76
  18. package/dist/config.js.map +1 -1
  19. package/dist/constants/styles.d.ts +8 -0
  20. package/dist/floating.cjs +1 -1
  21. package/dist/floating.js +1 -1
  22. package/dist/index.cjs +2 -2
  23. package/dist/index.cjs.map +1 -1
  24. package/dist/index.d.ts +4 -1
  25. package/dist/index.js +996 -853
  26. package/dist/index.js.map +1 -1
  27. package/dist/modules/grid/GridLayoutContext.d.ts +5 -0
  28. package/dist/modules/grid/resizeHandles.d.ts +14 -0
  29. package/dist/modules/grid/trackUtils.d.ts +29 -0
  30. package/dist/modules/grid/useGridTracks.d.ts +6 -15
  31. package/dist/modules/grid/useLayerInteractions.d.ts +2 -1
  32. package/dist/modules/panels/rendering/ContentRegistry.d.ts +50 -0
  33. package/dist/modules/panels/rendering/RenderContext.d.ts +1 -0
  34. package/dist/modules/panels/state/types.d.ts +2 -2
  35. package/dist/modules/pivot/PivotContent.d.ts +29 -0
  36. package/dist/modules/pivot/index.d.ts +5 -0
  37. package/dist/modules/pivot/types.d.ts +62 -0
  38. package/dist/modules/pivot/usePivot.d.ts +28 -0
  39. package/dist/modules/window/useFloatingState.d.ts +9 -0
  40. package/dist/pivot/index.d.ts +8 -0
  41. package/dist/pivot.cjs +2 -0
  42. package/dist/pivot.cjs.map +1 -0
  43. package/dist/pivot.js +5 -0
  44. package/dist/pivot.js.map +1 -0
  45. package/dist/styles-DcG3aIFx.cjs +2 -0
  46. package/dist/styles-DcG3aIFx.cjs.map +1 -0
  47. package/dist/styles-w0ZixggV.js +51 -0
  48. package/dist/styles-w0ZixggV.js.map +1 -0
  49. package/dist/types.d.ts +106 -4
  50. package/dist/usePivot-C8q0pMgW.cjs +2 -0
  51. package/dist/usePivot-C8q0pMgW.cjs.map +1 -0
  52. package/dist/usePivot-z9gumDf-.js +97 -0
  53. package/dist/usePivot-z9gumDf-.js.map +1 -0
  54. package/dist/utils/css.d.ts +19 -0
  55. package/package.json +6 -1
  56. package/dist/FloatingPanelFrame-BeP9z8EI.js +0 -98
  57. package/dist/FloatingPanelFrame-BeP9z8EI.js.map +0 -1
  58. package/dist/FloatingPanelFrame-Cu50Y9xg.cjs +0 -2
  59. package/dist/FloatingPanelFrame-Cu50Y9xg.cjs.map +0 -1
  60. package/dist/GridLayout-CwuQEP7k.cjs +0 -2
  61. package/dist/GridLayout-CwuQEP7k.cjs.map +0 -1
  62. package/dist/GridLayout-DZCV1X-3.js +0 -1338
  63. package/dist/GridLayout-DZCV1X-3.js.map +0 -1
@@ -1,1338 +0,0 @@
1
- import { jsxs as $, Fragment as G, jsx as m } from "react/jsx-runtime";
2
- import * as i from "react";
3
- import { C as xt, D as At, f as Ht, F as Nt, e as _t, g as $t, a as Gt, h as Ft, i as Ot, j as Wt, b as Bt, k as Yt, G as B, l as M, m as Xt, n as Vt, o as Ut, R as ct, p as jt, q as J } from "./FloatingPanelFrame-BeP9z8EI.js";
4
- import { createPortal as Zt } from "react-dom";
5
- const Kt = () => {
6
- const t = /* @__PURE__ */ new Map();
7
- return (e) => {
8
- if (!e)
9
- return;
10
- const n = t.get(e);
11
- if (n !== void 0)
12
- return n;
13
- const o = t.size;
14
- return t.set(e, o), o;
15
- };
16
- }, qt = Kt(), Q = /* @__PURE__ */ new Map(), Jt = (t) => {
17
- const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${qt(t.root)}`;
18
- if (Q.has(e))
19
- return Q.get(e);
20
- const n = new class {
21
- #t = /* @__PURE__ */ new Map();
22
- #e = new IntersectionObserver((o) => {
23
- o.forEach((r) => {
24
- const s = this.#t.get(r.target);
25
- s && s(r);
26
- });
27
- }, t);
28
- observe(o, r) {
29
- return this.#t.set(o, r), this.#e.observe(o), () => {
30
- this.#t.delete(o), this.#e.unobserve(o);
31
- };
32
- }
33
- }();
34
- return Q.set(e, n), n;
35
- }, ut = Object.freeze({
36
- x: 0,
37
- y: 0,
38
- width: 0,
39
- height: 0,
40
- top: 0,
41
- right: 0,
42
- bottom: 0,
43
- left: 0
44
- });
45
- function Qt(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
46
- const [r, s] = i.useState(null);
47
- return i.useEffect(() => {
48
- const c = t.current;
49
- return c ? Jt({
50
- threshold: e,
51
- rootMargin: n,
52
- root: o
53
- }).observe(c, (a) => {
54
- s({
55
- isIntersecting: a.isIntersecting,
56
- boundingClientRect: a.boundingClientRect,
57
- intersectionRatio: a.intersectionRatio,
58
- intersectionRect: a.intersectionRect,
59
- rootBounds: a.rootBounds,
60
- target: a.target,
61
- time: a.time
62
- });
63
- }) : void 0;
64
- }, [t, e, n, o]), i.useMemo(() => ({
65
- isIntersecting: r?.isIntersecting ?? !1,
66
- boundingClientRect: r?.boundingClientRect ?? ut,
67
- intersectionRatio: r?.intersectionRatio ?? 0,
68
- intersectionRect: r?.intersectionRect ?? ut,
69
- rootBounds: r?.rootBounds ?? null,
70
- target: r?.target ?? t.current,
71
- time: r?.time ?? 0
72
- }), [r, t]);
73
- }
74
- const lt = {
75
- position: "fixed",
76
- inset: 0,
77
- background: xt
78
- }, te = {
79
- willChange: "transform"
80
- }, dt = {
81
- left: {
82
- top: 0,
83
- bottom: 0,
84
- left: 0,
85
- transform: "translateX(-100%)"
86
- },
87
- right: {
88
- top: 0,
89
- bottom: 0,
90
- right: 0,
91
- transform: "translateX(100%)"
92
- },
93
- top: {
94
- top: 0,
95
- left: 0,
96
- right: 0,
97
- transform: "translateY(-100%)"
98
- },
99
- bottom: {
100
- bottom: 0,
101
- left: 0,
102
- right: 0,
103
- transform: "translateY(100%)"
104
- }
105
- }, ee = (t, e, n) => t === "none" ? void 0 : `transform ${e ?? At} ${n ?? Ht}`, ne = (t, e) => t ? e : !1, re = {
106
- marginLeft: "auto",
107
- border: "none",
108
- background: "transparent",
109
- cursor: "pointer",
110
- fontSize: Yt
111
- }, oe = ({ header: t, dismissible: e, onClose: n }) => {
112
- if (!t)
113
- return null;
114
- const o = t.showCloseButton ?? !0, r = ne(e, o);
115
- return /* @__PURE__ */ m(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ $(
116
- Gt,
117
- {
118
- style: { padding: `${Ot} ${Wt}`, gap: Ft },
119
- children: [
120
- /* @__PURE__ */ m(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ m(Bt, { children: t.title }) }),
121
- /* @__PURE__ */ m(i.Activity, { mode: r ? "visible" : "hidden", children: /* @__PURE__ */ m("button", { style: re, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" }) })
122
- ]
123
- }
124
- ) });
125
- }, se = ({ header: t, dismissible: e, onClose: n, chrome: o, children: r }) => o ? /* @__PURE__ */ $(Nt, { style: { height: "100%", borderRadius: 0 }, children: [
126
- /* @__PURE__ */ m(oe, { header: t, dismissible: e, onClose: n }),
127
- /* @__PURE__ */ m(
128
- _t,
129
- {
130
- style: { padding: $t, flex: 1, display: "flex", flexDirection: "column" },
131
- children: r
132
- }
133
- )
134
- ] }) : /* @__PURE__ */ m(G, { children: r }), ie = ({
135
- id: t,
136
- config: e,
137
- isOpen: n,
138
- onClose: o,
139
- children: r,
140
- zIndex: s,
141
- width: c,
142
- height: u,
143
- position: a
144
- }) => {
145
- const {
146
- dismissible: d = !0,
147
- header: p,
148
- chrome: f = !0,
149
- inline: h = !1,
150
- transitionMode: w = "css",
151
- transitionDuration: E,
152
- transitionEasing: z
153
- } = e, D = i.useCallback((y) => y ? y.left !== void 0 ? "left" : y.right !== void 0 ? "right" : y.top !== void 0 ? "top" : y.bottom !== void 0 ? "bottom" : "right" : "right", [])(a), F = {
154
- left: "translateX(0)",
155
- right: "translateX(0)",
156
- top: "translateY(0)",
157
- bottom: "translateY(0)"
158
- }, T = i.useMemo(() => {
159
- const y = ee(w, E, z), I = {
160
- ...te,
161
- ...h ? { position: "absolute" } : { position: "fixed" },
162
- ...dt[D],
163
- transform: n ? F[D] : dt[D].transform,
164
- transition: y
165
- };
166
- return s !== void 0 && (I.zIndex = s), c !== void 0 && (I.width = typeof c == "number" ? `${c}px` : c), u !== void 0 && (I.height = typeof u == "number" ? `${u}px` : u), I;
167
- }, [u, h, n, D, E, z, w, c, s]), L = p?.title ?? e.ariaLabel ?? "Drawer", x = i.useMemo(() => {
168
- const y = h ? { ...lt, position: "absolute" } : lt, I = w === "none" ? void 0 : `opacity ${E ?? "220ms"} ease`;
169
- return {
170
- ...y,
171
- opacity: n ? 1 : 0,
172
- pointerEvents: n ? "auto" : "none",
173
- transition: I,
174
- zIndex: s !== void 0 ? s - 1 : void 0
175
- };
176
- }, [h, n, E, w, s]);
177
- return /* @__PURE__ */ $(G, { children: [
178
- /* @__PURE__ */ m("div", { style: x, onClick: d ? o : void 0 }),
179
- /* @__PURE__ */ m(
180
- "div",
181
- {
182
- "data-layer-id": t,
183
- "data-placement": D,
184
- style: T,
185
- role: "dialog",
186
- "aria-modal": d ? !0 : void 0,
187
- "aria-hidden": n ? void 0 : !0,
188
- "aria-label": L,
189
- children: /* @__PURE__ */ m(se, { header: p, dismissible: d, onClose: o, chrome: f, children: r })
190
- }
191
- )
192
- ] });
193
- }, ae = (t, e) => new Promise((n) => {
194
- let o = !1;
195
- const r = () => {
196
- o || (o = !0, t.removeEventListener("transitionend", s), n());
197
- }, s = (c) => {
198
- c.target === t && r();
199
- };
200
- t.addEventListener("transitionend", s), setTimeout(r, e + 50);
201
- }), Rt = async (t, e, n, o) => {
202
- switch (e) {
203
- case "none":
204
- t();
205
- return;
206
- case "css":
207
- t(), n && await ae(n, o);
208
- return;
209
- }
210
- }, Dn = (t) => {
211
- const [e, n] = i.useState({}), o = i.useRef(t);
212
- o.current = t;
213
- const r = i.useCallback(
214
- async (a, d, p) => {
215
- const { mode: f = "none", element: h, duration: w = 300 } = p ?? {};
216
- await Rt(() => {
217
- n((P) => P[a] === d ? P : { ...P, [a]: d });
218
- }, f, h?.current, w);
219
- const z = o.current;
220
- d ? z?.onOpen?.(a) : z?.onClose?.(a), z?.onTransitionEnd?.(a, d);
221
- },
222
- []
223
- ), s = i.useCallback((a) => e[a] ?? !1, [e]), c = i.useCallback(
224
- (a, d) => r(a, !0, d),
225
- [r]
226
- ), u = i.useCallback(
227
- (a, d) => r(a, !1, d),
228
- [r]
229
- );
230
- return { state: s, open: c, close: u };
231
- }, ce = (t) => {
232
- if (!t)
233
- return 300;
234
- const e = t.match(/(\d+)/);
235
- return e ? parseInt(e[1], 10) : 300;
236
- }, ue = (t) => {
237
- const [e, n] = i.useState(() => {
238
- const a = {};
239
- return t.forEach((d) => {
240
- d.drawer && (a[d.id] = d.drawer.defaultOpen ?? !1);
241
- }), a;
242
- }), o = i.useMemo(() => {
243
- const a = /* @__PURE__ */ new Map();
244
- return t.forEach((d) => a.set(d.id, d)), a;
245
- }, [t]), r = i.useCallback(
246
- async (a, d, p) => {
247
- const f = o.get(a);
248
- if (!f?.drawer)
249
- return;
250
- const h = p?.mode ?? f.drawer.transitionMode ?? "css", w = p?.duration ?? ce(f.drawer.transitionDuration), E = p?.element?.current;
251
- await Rt(() => {
252
- f.drawer?.open === void 0 && n((P) => P[a] === d ? P : { ...P, [a]: d }), f.drawer?.onStateChange?.(d);
253
- }, h, E, w);
254
- },
255
- [o]
256
- ), s = i.useCallback(
257
- (a) => {
258
- const d = o.get(a);
259
- return d?.drawer?.open !== void 0 ? d.drawer.open : e[a] ?? !1;
260
- },
261
- [o, e]
262
- ), c = i.useCallback(
263
- (a, d) => r(a, !0, d),
264
- [r]
265
- ), u = i.useCallback(
266
- (a, d) => r(a, !1, d),
267
- [r]
268
- );
269
- return { state: s, open: c, close: u };
270
- }, le = ({ layers: t }) => {
271
- const e = ue(t), n = i.useMemo(() => t.filter((r) => r.drawer), [t]), o = i.useMemo(() => {
272
- const r = /* @__PURE__ */ new Map();
273
- return n.forEach((s) => {
274
- r.set(s.id, () => e.close(s.id));
275
- }), r;
276
- }, [n, e.close]);
277
- return /* @__PURE__ */ m(G, { children: n.map((r) => {
278
- if (!r.drawer)
279
- return null;
280
- const s = e.state(r.id), c = o.get(r.id);
281
- return c ? /* @__PURE__ */ m(
282
- ie,
283
- {
284
- id: r.id,
285
- config: r.drawer,
286
- isOpen: s,
287
- onClose: c,
288
- zIndex: r.zIndex,
289
- width: r.width,
290
- height: r.height,
291
- position: r.position,
292
- children: r.component
293
- },
294
- r.id
295
- ) : null;
296
- }) });
297
- }, Pt = i.createContext(null), de = ({ value: t, children: e }) => /* @__PURE__ */ m(Pt.Provider, { value: t, children: e }), fe = () => {
298
- const t = i.useContext(Pt);
299
- if (!t)
300
- throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
301
- return t;
302
- }, yt = i.createContext(null), pe = () => {
303
- const t = i.useContext(yt);
304
- if (!t)
305
- throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
306
- return t;
307
- }, ge = ({ config: t, layers: e, style: n, children: o }) => {
308
- const r = i.useMemo(() => {
309
- const c = /* @__PURE__ */ new Map();
310
- return e.forEach((u) => {
311
- c.set(u.id, u);
312
- }), c;
313
- }, [e]), s = i.useMemo(
314
- () => ({
315
- config: t,
316
- style: n,
317
- layers: {
318
- defs: e,
319
- layerById: r
320
- }
321
- }),
322
- [t, n, e, r]
323
- );
324
- return /* @__PURE__ */ m(yt.Provider, { value: s, children: o });
325
- }, Dt = i.createContext(null), Lt = ({ layerId: t, children: e }) => {
326
- const n = i.useMemo(() => ({ layerId: t }), [t]);
327
- return /* @__PURE__ */ m(Dt.Provider, { value: n, children: e });
328
- }, Ln = () => {
329
- const t = i.useContext(Dt);
330
- if (!t)
331
- throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
332
- return t;
333
- }, ft = (t, e, n) => {
334
- if (typeof t == "number" && Number.isFinite(t))
335
- return t;
336
- throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`);
337
- }, Mt = (t, e) => {
338
- if (!t)
339
- throw new Error(`Popup layer "${e}" must define position (left/top).`);
340
- return {
341
- left: ft(t.left, "left", e),
342
- top: ft(t.top, "top", e)
343
- };
344
- }, Y = (t) => `${Math.round(t)}`, N = (t) => {
345
- if (t !== void 0)
346
- return t ? "yes" : "no";
347
- }, he = (t, e, n, o, r) => {
348
- const s = {}, c = Mt(e, t);
349
- if (typeof n != "number" || typeof o != "number")
350
- throw new Error(`Popup layer "${t}" requires numeric width/height.`);
351
- s.width = Y(n), s.height = Y(o), s.left = Y(c.left), s.top = Y(c.top);
352
- const u = r?.features;
353
- if (u) {
354
- const a = N(u.toolbar), d = N(u.menubar), p = N(u.location), f = N(u.status), h = N(u.resizable), w = N(u.scrollbars);
355
- a !== void 0 && (s.toolbar = a), d !== void 0 && (s.menubar = d), p !== void 0 && (s.location = p), f !== void 0 && (s.status = f), h !== void 0 && (s.resizable = h), w !== void 0 && (s.scrollbars = w);
356
- }
357
- return Object.entries(s).map(([a, d]) => `${a}=${d}`).join(",");
358
- }, pt = (t, e, n, o, r) => {
359
- const s = Mt(n, e);
360
- if (typeof o != "number" || typeof r != "number")
361
- throw new Error(`Popup layer "${e}" requires numeric width/height.`);
362
- t.moveTo(Math.round(s.left), Math.round(s.top)), t.resizeTo(Math.round(o), Math.round(r));
363
- }, me = ({ layer: t }) => {
364
- const e = t.floating;
365
- if (!e)
366
- throw new Error(`Layer "${t.id}" is missing floating configuration required for popup mode.`);
367
- if ((e.mode ?? "embedded") !== "popup")
368
- throw new Error(`PopupLayerPortal received layer "${t.id}" that is not configured for popup mode.`);
369
- const o = i.useRef(null), r = i.useRef(null), [s, c] = i.useState(!1);
370
- return i.useEffect(() => {
371
- if (typeof window > "u")
372
- return;
373
- const u = he(t.id, t.position, t.width, t.height, e.popup), a = e.popup?.name ?? t.id, d = be(
374
- a,
375
- u,
376
- {
377
- position: t.position,
378
- size: { width: t.width, height: t.height }
379
- },
380
- e.popup
381
- );
382
- if (!d)
383
- throw new Error(`Failed to open popup window for layer "${t.id}".`);
384
- const p = d;
385
- r.current = p, e.popup?.focus !== !1 && p.focus(), p.document.title || (p.document.title = t.id), p.document.body.innerHTML = "";
386
- const f = p.document.createElement("div");
387
- f.dataset.layerId = t.id, p.document.body.appendChild(f), o.current = f, c(!0), pt(p, t.id, t.position, t.width, t.height);
388
- const h = () => {
389
- r.current = null, o.current = null, c(!1);
390
- };
391
- return p.addEventListener("beforeunload", h), () => {
392
- p.removeEventListener("beforeunload", h), e.popup?.closeOnUnmount !== !1 && p.close(), r.current = null, o.current = null, c(!1);
393
- };
394
- }, [
395
- e.popup?.closeOnUnmount,
396
- e.popup?.features?.location,
397
- e.popup?.features?.menubar,
398
- e.popup?.features?.resizable,
399
- e.popup?.features?.scrollbars,
400
- e.popup?.features?.status,
401
- e.popup?.features?.toolbar,
402
- e.popup?.focus,
403
- e.popup?.name,
404
- t.id
405
- ]), i.useEffect(() => {
406
- const u = r.current;
407
- u && pt(u, t.id, t.position, t.width, t.height);
408
- }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !o.current ? null : Zt(/* @__PURE__ */ m(Lt, { layerId: t.id, children: t.component }), o.current);
409
- }, be = (t, e, n, o) => {
410
- const r = o?.createWindow;
411
- return r ? r({ name: t, features: e, bounds: n }) : window.open("", t, e);
412
- }, Tt = {
413
- position: "absolute",
414
- pointerEvents: "auto",
415
- boxSizing: "border-box",
416
- background: "transparent",
417
- border: "none"
418
- }, we = {
419
- ...Tt,
420
- width: M,
421
- height: M,
422
- zIndex: 2
423
- }, ve = {
424
- ...Tt,
425
- zIndex: 1
426
- }, Ee = {
427
- "top-left": {
428
- top: 0,
429
- left: 0,
430
- transform: "translate(-50%, -50%)",
431
- cursor: "nwse-resize"
432
- },
433
- "top-right": {
434
- top: 0,
435
- right: 0,
436
- transform: "translate(50%, -50%)",
437
- cursor: "nesw-resize"
438
- },
439
- "bottom-left": {
440
- bottom: 0,
441
- left: 0,
442
- transform: "translate(-50%, 50%)",
443
- cursor: "nesw-resize"
444
- },
445
- "bottom-right": {
446
- bottom: 0,
447
- right: 0,
448
- transform: "translate(50%, 50%)",
449
- cursor: "nwse-resize"
450
- }
451
- }, Se = {
452
- left: {
453
- top: M,
454
- bottom: M,
455
- left: 0,
456
- width: B,
457
- transform: "translateX(-50%)",
458
- cursor: "ew-resize"
459
- },
460
- right: {
461
- top: M,
462
- bottom: M,
463
- right: 0,
464
- width: B,
465
- transform: "translateX(50%)",
466
- cursor: "ew-resize"
467
- },
468
- top: {
469
- left: M,
470
- right: M,
471
- top: 0,
472
- height: B,
473
- transform: "translateY(-50%)",
474
- cursor: "ns-resize"
475
- },
476
- bottom: {
477
- left: M,
478
- right: M,
479
- bottom: 0,
480
- height: B,
481
- transform: "translateY(50%)",
482
- cursor: "ns-resize"
483
- }
484
- }, Ce = [
485
- { key: "top-left", variant: "corner", horizontal: "left", vertical: "top" },
486
- { key: "top-right", variant: "corner", horizontal: "right", vertical: "top" },
487
- { key: "bottom-left", variant: "corner", horizontal: "left", vertical: "bottom" },
488
- { key: "bottom-right", variant: "corner", horizontal: "right", vertical: "bottom" },
489
- { key: "left", variant: "edge", horizontal: "left" },
490
- { key: "right", variant: "edge", horizontal: "right" },
491
- { key: "top", variant: "edge", vertical: "top" },
492
- { key: "bottom", variant: "edge", vertical: "bottom" }
493
- ], ze = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ m(G, { children: Ce.map((n) => {
494
- const o = n.variant === "corner" ? we : ve, r = n.variant === "corner" ? Ee[n.key] : Se[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
495
- return /* @__PURE__ */ m(
496
- "div",
497
- {
498
- role: "presentation",
499
- "aria-hidden": "true",
500
- style: s,
501
- ...c,
502
- "data-layer-id": t,
503
- onPointerDown: (u) => e(n, u)
504
- },
505
- n.key
506
- );
507
- }) }), Re = ({ layers: t }) => {
508
- const { handleLayerPointerDown: e, getLayerRenderState: n } = fe(), o = i.useCallback((r) => r.length === 0 ? null : r.map((s) => /* @__PURE__ */ m(ze, { layerId: s.layerId, onPointerDown: s.onPointerDown }, s.layerId)), []);
509
- return /* @__PURE__ */ m(G, { children: t.map((r) => {
510
- const s = r.floating?.mode ?? "embedded";
511
- if (r.floating && s === "popup")
512
- return /* @__PURE__ */ m(me, { layer: r }, r.id);
513
- const { style: c, isResizable: u, isResizing: a, onResizeHandlePointerDown: d } = n(r), p = {};
514
- r.gridArea && (p.gridArea = r.gridArea), r.gridRow && (p.gridRow = r.gridRow), r.gridColumn && (p.gridColumn = r.gridColumn);
515
- const h = u ? { ...c, ...p, position: "relative" } : { ...c, ...p }, E = o(u ? [
516
- {
517
- layerId: r.id,
518
- onPointerDown: d
519
- }
520
- ] : []);
521
- return /* @__PURE__ */ $(
522
- "div",
523
- {
524
- "data-layer-id": r.id,
525
- "data-draggable": !!r.floating?.draggable,
526
- "data-resizable": u,
527
- "data-resizing": a,
528
- style: h,
529
- onPointerDown: e,
530
- children: [
531
- /* @__PURE__ */ m(Lt, { layerId: r.id, children: r.component }),
532
- E
533
- ]
534
- },
535
- r.id
536
- );
537
- }) });
538
- };
539
- function _(t) {
540
- const e = i.useRef(t);
541
- return e.current = t, i.useCallback((...n) => {
542
- const o = e.current;
543
- if (o)
544
- return o(...n);
545
- }, []);
546
- }
547
- function tt(t, e) {
548
- const n = _(e.onMove), o = _(e.onUp), r = _(e.onCancel);
549
- i.useEffect(() => {
550
- if (t)
551
- return e.onMove && document.addEventListener("pointermove", n, { passive: !1 }), e.onUp && document.addEventListener("pointerup", o), e.onCancel && document.addEventListener("pointercancel", r), () => {
552
- e.onMove && document.removeEventListener("pointermove", n), e.onUp && document.removeEventListener("pointerup", o), e.onCancel && document.removeEventListener("pointercancel", r);
553
- };
554
- }, [t, e.onMove, e.onUp, e.onCancel, n, o, r]);
555
- }
556
- function Pe(t, e, n) {
557
- i.useEffect(() => {
558
- const o = t.current;
559
- if (!(!e || !o || n === void 0))
560
- return o.setPointerCapture(n), () => {
561
- o.hasPointerCapture && o.hasPointerCapture(n) && o.releasePointerCapture(n);
562
- };
563
- }, [t, e, n]);
564
- }
565
- function ye(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
566
- i.useEffect(() => {
567
- const o = t.current;
568
- if (!e || !o)
569
- return;
570
- const r = (s) => {
571
- s.preventDefault();
572
- };
573
- return n.forEach((s) => {
574
- o.addEventListener(s, r, { passive: !1 });
575
- }), () => {
576
- n.forEach((s) => {
577
- o.removeEventListener(s, r);
578
- });
579
- };
580
- }, [t, e, n]);
581
- }
582
- function De(t, e, n) {
583
- const { onMove: o, onUp: r, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: a = !0 } = n;
584
- tt(e, { onMove: o, onUp: r, onCancel: s }), Pe(t, e ? u : !1, c), ye(t, e ? a : !1);
585
- }
586
- const Le = (t) => {
587
- const e = i.useRef(null), n = i.useRef(null), o = i.useRef(0), [r, s] = i.useState(!1), c = _((f) => {
588
- t.onResize?.(f);
589
- }), u = i.useCallback(
590
- (f) => t.axis === "x" ? f.clientX : f.clientY,
591
- [t.axis]
592
- ), a = i.useCallback(
593
- (f) => {
594
- f.preventDefault(), e.current = f.currentTarget, n.current = f.pointerId, o.current = u(f), s(!0);
595
- },
596
- [u]
597
- ), d = i.useCallback(
598
- (f) => {
599
- const h = u(f), w = h - o.current;
600
- w !== 0 && (o.current = h, c(w));
601
- },
602
- [u, c]
603
- ), p = i.useCallback(() => {
604
- s(!1), n.current = null;
605
- }, []);
606
- return De(e, r, {
607
- onMove: d,
608
- onUp: p,
609
- pointerId: n.current ?? void 0,
610
- capturePointer: !0,
611
- preventDefaults: !1
612
- }), {
613
- ref: e,
614
- onPointerDown: a,
615
- isDragging: r
616
- };
617
- }, Me = ({
618
- element: t,
619
- component: e
620
- }) => i.forwardRef(({ children: n, ...o }, r) => t ? i.cloneElement(
621
- t,
622
- { ...o, ref: r },
623
- n ?? t.props.children
624
- ) : e ? /* @__PURE__ */ m(e, { ...o, ref: r, children: n }) : /* @__PURE__ */ m("div", { ...o, ref: r, children: n }));
625
- function Te({
626
- element: t,
627
- component: e
628
- }) {
629
- return i.useMemo(
630
- () => Me({
631
- element: t,
632
- component: e
633
- }),
634
- [e, t]
635
- );
636
- }
637
- const Ie = {
638
- position: "absolute",
639
- zIndex: jt
640
- }, ke = {
641
- vertical: {
642
- width: ct,
643
- height: "100%",
644
- top: 0,
645
- cursor: "col-resize"
646
- },
647
- horizontal: {
648
- width: "100%",
649
- height: ct,
650
- left: 0,
651
- cursor: "row-resize"
652
- }
653
- }, xe = {
654
- idle: Ut,
655
- hovered: Vt,
656
- dragging: Xt
657
- }, Ae = ({
658
- direction: t,
659
- onResize: e,
660
- component: n,
661
- element: o,
662
- children: r
663
- }) => {
664
- const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: a } = Le({ axis: s, onResize: e }), [d, p] = i.useState(!1), f = i.useCallback(() => {
665
- p(!0);
666
- }, []), h = i.useCallback(() => {
667
- p(!1);
668
- }, []), w = Te({
669
- element: o,
670
- component: n
671
- }), E = i.useMemo(() => u ? "dragging" : d ? "hovered" : "idle", [u, d]), z = i.useMemo(() => ({
672
- ...Ie,
673
- ...ke[t],
674
- backgroundColor: xe[E],
675
- touchAction: "none"
676
- }), [t, E]);
677
- return /* @__PURE__ */ m(
678
- w,
679
- {
680
- ref: c,
681
- style: z,
682
- role: "separator",
683
- "aria-orientation": t,
684
- "aria-hidden": void 0,
685
- "data-resize-handle": "true",
686
- "data-direction": t,
687
- "data-is-dragging": u ? "true" : void 0,
688
- onPointerDown: a,
689
- onPointerEnter: f,
690
- onPointerLeave: h,
691
- children: r
692
- }
693
- );
694
- }, gt = {
695
- position: "absolute",
696
- pointerEvents: "auto"
697
- }, ht = ({
698
- direction: t,
699
- trackIndex: e,
700
- align: n,
701
- gap: o,
702
- span: r,
703
- onResize: s
704
- }) => {
705
- const c = t === "col" ? "vertical" : "horizontal", u = i.useCallback(
706
- (p) => {
707
- const f = n === "start" ? -p : p;
708
- s(t, e, f);
709
- },
710
- [n, t, e, s]
711
- ), a = i.useMemo(() => t === "col" ? {
712
- gridColumn: `${e + 1} / ${e + 2}`,
713
- gridRow: `${r.start} / ${r.end}`
714
- } : {
715
- gridRow: `${e + 1} / ${e + 2}`,
716
- gridColumn: `${r.start} / ${r.end}`
717
- }, [t, e, r]), d = i.useMemo(() => {
718
- const f = Math.max(0, o) / 2 + J / 2;
719
- return t === "col" ? {
720
- ...gt,
721
- width: J,
722
- height: "100%",
723
- top: 0,
724
- bottom: 0,
725
- ...n === "start" ? { left: -f } : { right: -f }
726
- } : {
727
- ...gt,
728
- width: "100%",
729
- height: J,
730
- left: 0,
731
- right: 0,
732
- ...n === "start" ? { top: -f } : { bottom: -f }
733
- };
734
- }, [n, t, o]);
735
- return /* @__PURE__ */ m("div", { "data-resizable": "true", style: { ...a, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ m("div", { "data-direction": c, "data-align": n, "data-handle": "true", style: d, children: /* @__PURE__ */ m(Ae, { direction: c, onResize: u }) }) });
736
- }, He = (t) => {
737
- const e = /* @__PURE__ */ new Map();
738
- t.forEach((o, r) => {
739
- o.forEach((s, c) => {
740
- if (!s || s === ".")
741
- return;
742
- const u = e.get(s);
743
- if (u) {
744
- const d = {
745
- rowStart: Math.min(u.rowStart, r),
746
- rowEnd: Math.max(u.rowEnd, r),
747
- colStart: Math.min(u.colStart, c),
748
- colEnd: Math.max(u.colEnd, c)
749
- };
750
- e.set(s, d);
751
- return;
752
- }
753
- const a = {
754
- rowStart: r,
755
- rowEnd: r,
756
- colStart: c,
757
- colEnd: c
758
- };
759
- e.set(s, a);
760
- });
761
- });
762
- const n = /* @__PURE__ */ new Map();
763
- return e.forEach((o, r) => {
764
- const s = o.rowStart + 1, c = o.rowEnd + 2, u = o.colStart + 1, a = o.colEnd + 2, d = {
765
- gridArea: r,
766
- gridRow: `${s} / ${c}`,
767
- gridColumn: `${u} / ${a}`
768
- };
769
- n.set(r, d);
770
- }), n;
771
- }, Ne = (t, e) => {
772
- if ((t.positionMode ?? "grid") !== "grid")
773
- return t;
774
- const o = t.gridArea ?? t.id, r = e.get(o);
775
- if (!r)
776
- return t;
777
- const s = !t.gridArea, c = !t.gridRow, u = !t.gridColumn;
778
- return !s && !c && !u ? t : {
779
- ...t,
780
- gridArea: s ? r.gridArea : t.gridArea,
781
- gridRow: c ? r.gridRow : t.gridRow,
782
- gridColumn: u ? r.gridColumn : t.gridColumn
783
- };
784
- }, _e = (t, e) => {
785
- const n = i.useMemo(() => He(t.areas), [t.areas]), o = i.useMemo(() => e.map((u) => Ne(u, n)), [e, n]), r = i.useMemo(
786
- () => o.filter((u) => u.visible !== !1),
787
- [o]
788
- ), s = i.useMemo(
789
- () => r.filter((u) => !u.drawer),
790
- [r]
791
- ), c = i.useMemo(() => {
792
- const u = /* @__PURE__ */ new Map();
793
- return o.forEach((a) => {
794
- u.set(a.id, a);
795
- }), u;
796
- }, [o]);
797
- return {
798
- normalizedLayers: o,
799
- visibleLayers: r,
800
- regularLayers: s,
801
- layerById: c
802
- };
803
- }, $e = typeof window < "u" && typeof window.document < "u", It = $e ? i.useLayoutEffect : i.useEffect, j = (t, e) => `${t}-${e}`, Ge = (t, e, n, o) => {
804
- const r = j(n, o), s = e[r];
805
- return s !== void 0 ? `${s}px` : t.size;
806
- }, mt = (t, e, n) => t.map((o, r) => Ge(o, e, n, r)).join(" "), X = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[j(e, r)] = parseInt(o.size, 10)), n), {}), Fe = (t, e, n) => {
807
- const o = e !== void 0 ? Math.max(t, e) : t;
808
- return n !== void 0 ? Math.min(o, n) : o;
809
- }, Oe = (t, e, n) => {
810
- const o = t + e;
811
- return Fe(o, n.minSize, n.maxSize);
812
- }, We = (t, e, n, o, r) => {
813
- const s = j(t, e);
814
- return (c) => {
815
- const u = Oe(n, o, r);
816
- return { ...c, [s]: u };
817
- };
818
- }, bt = (t, e) => {
819
- const n = t.length, o = [];
820
- for (let c = 0; c < n; c++) {
821
- const u = t[c], a = u[e], d = u[e + 1];
822
- a !== d && o.push(c);
823
- }
824
- if (o.length === 0)
825
- return { start: 1, end: n + 1 };
826
- const r = Math.min(...o), s = Math.max(...o);
827
- return { start: r + 1, end: s + 2 };
828
- }, wt = (t, e) => {
829
- const n = t[e], o = t[e + 1], r = n?.length ?? 0, s = [];
830
- for (let a = 0; a < r; a++) {
831
- const d = n?.[a], p = o?.[a];
832
- d !== p && s.push(a);
833
- }
834
- if (s.length === 0)
835
- return { start: 1, end: r + 1 };
836
- const c = Math.min(...s), u = Math.max(...s);
837
- return { start: c + 1, end: u + 2 };
838
- }, Be = (t, e) => {
839
- if (t.length === 0)
840
- return [];
841
- const n = e.length;
842
- if (t.length === 1)
843
- return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
844
- const o = [];
845
- return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
846
- const c = t[s];
847
- if (t[s + 1]?.resizable) {
848
- const a = bt(e, s);
849
- o.push({ trackIndex: s + 1, align: "start", span: a });
850
- return;
851
- }
852
- if (c?.resizable) {
853
- const a = bt(e, s);
854
- o.push({ trackIndex: s, align: "end", span: a });
855
- }
856
- }), o;
857
- }, Ye = (t, e) => {
858
- if (t.length === 0)
859
- return [];
860
- const n = e[0]?.length ?? 0;
861
- if (t.length === 1)
862
- return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
863
- const o = [];
864
- return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
865
- const c = t[s];
866
- if (t[s + 1]?.resizable) {
867
- const a = wt(e, s);
868
- o.push({ trackIndex: s + 1, align: "start", span: a });
869
- return;
870
- }
871
- if (c?.resizable) {
872
- const a = wt(e, s);
873
- o.push({ trackIndex: s, align: "end", span: a });
874
- }
875
- }), o;
876
- }, Xe = (t) => {
877
- if (!t)
878
- return { rowGap: 0, columnGap: 0 };
879
- const e = t.split(/\s+/).map((o) => o.trim()).filter(Boolean), n = (o) => {
880
- const r = o.match(/^(-?\d+(?:\.\d+)?)px$/);
881
- return r ? Number.parseFloat(r[1]) : 0;
882
- };
883
- if (e.length === 1) {
884
- const o = n(e[0]);
885
- return { rowGap: o, columnGap: o };
886
- }
887
- return {
888
- rowGap: n(e[0]),
889
- columnGap: n(e[1])
890
- };
891
- }, Ve = (t) => t !== void 0 ? { gap: t } : {}, Ue = (t, e, n, o) => {
892
- const r = j(n, o), s = t[r];
893
- return s !== void 0 ? s : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
894
- }, je = (t, e) => {
895
- const [n, o] = i.useState(() => ({
896
- ...X(t.columns, "col"),
897
- ...X(t.rows, "row")
898
- }));
899
- It(() => {
900
- const p = {
901
- ...X(t.columns, "col"),
902
- ...X(t.rows, "row")
903
- };
904
- o((f) => {
905
- const h = /* @__PURE__ */ new Set([...Object.keys(f), ...Object.keys(p)]);
906
- return Array.from(h).some((E) => f[E] !== p[E]) ? p : f;
907
- });
908
- }, [t.columns, t.rows]);
909
- const r = i.useMemo(() => t.areas.map((p) => `"${p.join(" ")}"`).join(" "), [t.areas]), s = i.useMemo(() => Xe(t.gap), [t.gap]), c = i.useMemo(
910
- () => Be(t.columns, t.areas),
911
- [t.columns, t.areas]
912
- ), u = i.useMemo(
913
- () => Ye(t.rows, t.areas),
914
- [t.rows, t.areas]
915
- ), a = i.useMemo(() => ({
916
- ...t.style,
917
- ...e,
918
- gridTemplateAreas: r,
919
- gridTemplateRows: mt(t.rows, n, "row"),
920
- gridTemplateColumns: mt(t.columns, n, "col"),
921
- ...Ve(t.gap)
922
- }), [r, t.columns, t.gap, t.rows, t.style, e, n]), d = i.useCallback(
923
- (p, f, h) => {
924
- const E = (p === "row" ? t.rows : t.columns)[f];
925
- if (!E || !E.resizable)
926
- return;
927
- const z = Ue(n, E, p, f);
928
- o(We(p, f, z, h, E));
929
- },
930
- [t.columns, t.rows, n]
931
- );
932
- return {
933
- columnHandles: c,
934
- rowHandles: u,
935
- gapSizes: s,
936
- gridStyle: a,
937
- handleResize: d
938
- };
939
- }, Ze = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Mn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Ke = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", qe = (t) => ({ position: t === "grid" ? "relative" : t }), Je = (t, e) => e !== "grid" ? {} : {
940
- gridArea: t.gridArea,
941
- gridRow: t.gridRow,
942
- gridColumn: t.gridColumn
943
- }, Qe = (t) => t ? {
944
- top: t.top,
945
- right: t.right,
946
- bottom: t.bottom,
947
- left: t.left
948
- } : {}, tn = (t) => t !== void 0 ? { zIndex: t } : {}, en = (t, e) => ({
949
- width: t,
950
- height: e
951
- }), nn = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, rn = (t) => t.position, on = (t) => ({
952
- width: t.width,
953
- height: t.height
954
- }), sn = (t) => t.zIndex, an = (t) => {
955
- const e = Ke(t), n = rn(t), o = on(t), r = sn(t);
956
- return {
957
- ...t.style,
958
- ...qe(e),
959
- ...Je(t, e),
960
- ...Qe(n),
961
- ...tn(r),
962
- ...en(o.width, o.height),
963
- ...nn(t, e)
964
- };
965
- }, cn = (t) => {
966
- const e = t.floating;
967
- return e ? e.mode ?? "embedded" : null;
968
- }, H = (t) => cn(t) !== "embedded" ? null : t.floating ?? null, vt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, Et = (t, e, n) => {
969
- const o = e ?? Number.NEGATIVE_INFINITY, r = n ?? Number.POSITIVE_INFINITY;
970
- return Ze(t, o, r);
971
- }, St = (t, e, n) => {
972
- if (typeof t == "number" && Number.isFinite(t))
973
- return t;
974
- throw new Error(
975
- `Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`
976
- );
977
- }, Ct = (t) => {
978
- if (!H(t))
979
- throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
980
- const n = t.position;
981
- if (!n)
982
- throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
983
- return {
984
- left: St(n.left, "left", t.id),
985
- top: St(n.top, "top", t.id)
986
- };
987
- }, un = (t) => {
988
- const e = H(t);
989
- return e ? e.constraints ?? {} : {};
990
- }, ln = (t, e, n) => t ? t === "left" ? e - n : e + n : e, dn = (t, e, n) => t ? t === "top" ? e - n : e + n : e, fn = (t, e, n) => !t || t === "right" ? e : e + n, pn = (t, e, n) => !t || t === "bottom" ? e : e + n, et = (t, e) => t ? t.dataset.layerId === e ? t : et(t.parentElement, e) : null, nt = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : nt(t.parentElement, e, n), gn = (t) => t instanceof HTMLElement ? nt(
991
- t,
992
- (e) => e.dataset.dragHandle === "true",
993
- (e) => e.dataset.dragIgnore === "true"
994
- ) : null, zt = (t) => t instanceof HTMLElement ? nt(
995
- t,
996
- (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
997
- ) !== null : !1, V = (t) => {
998
- const e = H(t);
999
- return e ? e.resizable === !0 : !1;
1000
- }, U = (t) => {
1001
- if (!H(t))
1002
- return null;
1003
- const n = bn(t);
1004
- if (!n)
1005
- throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);
1006
- return {
1007
- width: n.width,
1008
- height: n.height
1009
- };
1010
- }, hn = (t, e, n) => {
1011
- const o = t.filter(V).reduce((f, h) => {
1012
- if (n === h.id) {
1013
- const E = e[h.id];
1014
- if (E)
1015
- return f[h.id] = E, f;
1016
- }
1017
- const w = U(h);
1018
- return w && (f[h.id] = w), f;
1019
- }, {}), r = Object.keys(e), s = Object.keys(o), c = r.length !== s.length, u = r.some((f) => !Object.prototype.hasOwnProperty.call(o, f)), a = c ? !0 : u, d = s.some((f) => {
1020
- const h = e[f], w = o[f];
1021
- return !h || !w ? !0 : h.width !== w.width || h.height !== w.height;
1022
- });
1023
- return {
1024
- sizes: o,
1025
- changed: a ? !0 : d
1026
- };
1027
- }, mn = ({
1028
- layers: t,
1029
- layerById: e
1030
- }) => {
1031
- const [n, o] = i.useState(null), [r, s] = i.useState(null), [c, u] = i.useState({}), [a, d] = i.useState({}), p = i.useRef(null), f = i.useRef(null), h = _((g, l) => {
1032
- e.get(g)?.floating?.onMove?.(l);
1033
- }), w = _((g, l) => {
1034
- e.get(g)?.floating?.onResize?.(l);
1035
- });
1036
- It(() => {
1037
- const { sizes: g, changed: l } = hn(t, a, r);
1038
- l && d(g);
1039
- }, [t, r]);
1040
- const E = i.useCallback(
1041
- (g, l, b, v) => {
1042
- const S = Ct(l), R = c[g] ?? { x: 0, y: 0 }, C = {
1043
- pointerStartX: v.clientX,
1044
- pointerStartY: v.clientY,
1045
- initialTranslationX: R.x,
1046
- initialTranslationY: R.y,
1047
- baseLeft: S.left,
1048
- baseTop: S.top,
1049
- layerId: g,
1050
- pointerId: v.pointerId,
1051
- target: b
1052
- };
1053
- if (C.target.setPointerCapture)
1054
- try {
1055
- C.target.setPointerCapture(C.pointerId);
1056
- } catch {
1057
- }
1058
- p.current = C, o(g);
1059
- },
1060
- [c]
1061
- ), z = i.useCallback(
1062
- (g) => {
1063
- const l = g.target, b = gn(l);
1064
- if (!b)
1065
- return;
1066
- const v = b.closest("[data-layer-id]")?.getAttribute("data-layer-id");
1067
- if (!v)
1068
- return;
1069
- const S = e.get(v);
1070
- if (!S)
1071
- return;
1072
- const R = H(S);
1073
- if (!(!R || R.draggable !== !0) && !vt(g.target) && !zt(g.target) && b) {
1074
- const C = et(b, v);
1075
- if (!C)
1076
- return;
1077
- E(v, S, C, g);
1078
- return;
1079
- }
1080
- },
1081
- [E, e]
1082
- ), P = i.useCallback(
1083
- (g, l) => {
1084
- const b = e.get(g), v = b ? H(b) : null;
1085
- if (!b || !v || v.draggable !== !0 || vt(l.target) || zt(l.target))
1086
- return;
1087
- const S = et(l.currentTarget, g);
1088
- S && E(g, b, S, l);
1089
- },
1090
- [E, e]
1091
- ), D = i.useCallback(
1092
- (g, l, b) => {
1093
- const v = e.get(g);
1094
- if (!v || !V(v))
1095
- return;
1096
- const S = a[g] ?? U(v);
1097
- if (!S)
1098
- return;
1099
- const R = Ct(v), C = un(v), k = c[g] ?? { x: 0, y: 0 };
1100
- if (b.stopPropagation(), b.preventDefault(), b.currentTarget.setPointerCapture)
1101
- try {
1102
- b.currentTarget.setPointerCapture(b.pointerId);
1103
- } catch {
1104
- }
1105
- f.current = {
1106
- layerId: g,
1107
- pointerId: b.pointerId,
1108
- horizontalEdge: l.horizontal,
1109
- verticalEdge: l.vertical,
1110
- startX: b.clientX,
1111
- startY: b.clientY,
1112
- startWidth: S.width,
1113
- startHeight: S.height,
1114
- startPosition: k,
1115
- baseLeft: R.left,
1116
- baseTop: R.top,
1117
- minWidth: C.minWidth,
1118
- maxWidth: C.maxWidth,
1119
- minHeight: C.minHeight,
1120
- maxHeight: C.maxHeight,
1121
- target: b.currentTarget
1122
- }, s(g);
1123
- },
1124
- [e, c, a]
1125
- ), F = i.useCallback(
1126
- (g) => {
1127
- const l = p.current;
1128
- if (!l)
1129
- return;
1130
- const b = g.clientX - l.pointerStartX, v = g.clientY - l.pointerStartY, S = {
1131
- x: l.initialTranslationX + b,
1132
- y: l.initialTranslationY + v
1133
- };
1134
- u((R) => ({ ...R, [l.layerId]: S })), h(l.layerId, {
1135
- left: l.baseLeft + S.x,
1136
- top: l.baseTop + S.y
1137
- });
1138
- },
1139
- [h]
1140
- ), T = i.useCallback(
1141
- (g) => {
1142
- const l = f.current;
1143
- if (!l || l.pointerId !== g.pointerId || !e.get(l.layerId))
1144
- return;
1145
- const v = g.clientX - l.startX, S = g.clientY - l.startY, R = ln(l.horizontalEdge, l.startWidth, v), C = dn(l.verticalEdge, l.startHeight, S), k = Et(R, l.minWidth, l.maxWidth), A = Et(C, l.minHeight, l.maxHeight), O = l.startWidth - k, Z = l.startHeight - A, st = fn(
1146
- l.horizontalEdge,
1147
- l.startPosition.x,
1148
- O
1149
- ), kt = pn(l.verticalEdge, l.startPosition.y, Z), K = a[l.layerId], it = { width: k, height: A };
1150
- (!K || K.width !== k || K.height !== A) && (d((q) => ({
1151
- ...q,
1152
- [l.layerId]: it
1153
- })), w(l.layerId, it));
1154
- const at = c[l.layerId] ?? { x: 0, y: 0 }, W = { x: st, y: kt };
1155
- (at.x !== W.x || at.y !== W.y) && (u((q) => ({
1156
- ...q,
1157
- [l.layerId]: W
1158
- })), h(l.layerId, {
1159
- left: l.baseLeft + W.x,
1160
- top: l.baseTop + W.y
1161
- }));
1162
- },
1163
- [e, c, a, h, w]
1164
- ), L = i.useCallback((g) => {
1165
- const l = p.current;
1166
- if (l) {
1167
- if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
1168
- try {
1169
- l.target.releasePointerCapture(l.pointerId);
1170
- } catch {
1171
- }
1172
- p.current = null;
1173
- }
1174
- o(null);
1175
- }, []), x = i.useCallback((g) => {
1176
- const l = f.current;
1177
- if (l) {
1178
- if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
1179
- try {
1180
- l.target.releasePointerCapture(l.pointerId);
1181
- } catch {
1182
- }
1183
- f.current = null;
1184
- }
1185
- s(null);
1186
- }, []);
1187
- tt(n !== null, {
1188
- onMove: F,
1189
- onUp: L,
1190
- onCancel: L
1191
- }), tt(r !== null, {
1192
- onMove: T,
1193
- onUp: x,
1194
- onCancel: x
1195
- });
1196
- const y = i.useCallback(
1197
- (g) => {
1198
- const l = an(g), b = H(g);
1199
- if (!b || b.draggable !== !0)
1200
- return l;
1201
- const v = c[g.id], S = n === g.id, R = r === g.id, C = v ? { transform: `translate(${v.x}px, ${v.y}px)` } : {}, k = a[g.id], A = V(g) ? U(g) : null, O = k ?? A, Z = O ? { width: `${O.width}px`, height: `${O.height}px` } : {};
1202
- return {
1203
- ...l,
1204
- ...Z,
1205
- ...C,
1206
- ...S || R ? { cursor: "grabbing" } : {}
1207
- };
1208
- },
1209
- [n, c, a, r]
1210
- ), I = i.useCallback(
1211
- (g) => {
1212
- if (!V(g))
1213
- return { isResizable: !1 };
1214
- const b = a[g.id], v = U(g);
1215
- return (b ?? v) !== null ? { isResizable: !0, onPointerDown: (k, A) => {
1216
- D(g.id, k, A);
1217
- } } : { isResizable: !1 };
1218
- },
1219
- [D, a]
1220
- ), rt = i.useCallback(
1221
- (g) => {
1222
- const { isResizable: l, onPointerDown: b } = I(g), v = y(g), S = r === g.id;
1223
- return {
1224
- style: v,
1225
- isResizable: l,
1226
- isResizing: S,
1227
- onResizeHandlePointerDown: (R, C) => {
1228
- b && b(R, C);
1229
- }
1230
- };
1231
- },
1232
- [y, I, r]
1233
- ), ot = i.useCallback(
1234
- (g) => ({
1235
- "data-drag-handle": "true",
1236
- role: "button",
1237
- "aria-roledescription": "Drag handle",
1238
- "aria-label": "Drag layer",
1239
- onPointerDown: (l) => {
1240
- P(g, l);
1241
- }
1242
- }),
1243
- [P]
1244
- );
1245
- return {
1246
- providerValue: i.useMemo(
1247
- () => ({
1248
- handleLayerPointerDown: z,
1249
- getLayerRenderState: rt,
1250
- getLayerHandleProps: ot
1251
- }),
1252
- [ot, rt, z]
1253
- ),
1254
- draggingLayerId: n,
1255
- resizingLayerId: r
1256
- };
1257
- }, bn = (t) => {
1258
- if (typeof t.width == "number" && typeof t.height == "number")
1259
- return { width: t.width, height: t.height };
1260
- }, wn = {
1261
- display: "grid",
1262
- width: "100%",
1263
- height: "100%"
1264
- }, vn = {
1265
- touchAction: "none",
1266
- WebkitTouchCallout: "none",
1267
- WebkitUserSelect: "none",
1268
- userSelect: "none"
1269
- }, Tn = ({ config: t, layers: e, style: n }) => {
1270
- const o = i.useRef(null), { isIntersecting: r } = Qt(o, { threshold: 0 });
1271
- return /* @__PURE__ */ m(ge, { config: t, layers: e, style: n, children: /* @__PURE__ */ m(En, { gridRef: o, isIntersecting: r }) });
1272
- }, En = ({ gridRef: t, isIntersecting: e }) => {
1273
- const { config: n, style: o, layers: r } = pe(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: a } = _e(n, r.defs), { columnHandles: d, rowHandles: p, gapSizes: f, gridStyle: h, handleResize: w } = je(n, o), { providerValue: E, draggingLayerId: z, resizingLayerId: P } = mn({
1274
- layers: s,
1275
- layerById: a
1276
- }), D = z ? !0 : !!P, F = i.useMemo(() => ({
1277
- ...wn,
1278
- ...h,
1279
- ...D ? vn : {}
1280
- }), [h, D]);
1281
- return /* @__PURE__ */ $(G, { children: [
1282
- /* @__PURE__ */ $(
1283
- "div",
1284
- {
1285
- ref: t,
1286
- style: F,
1287
- "data-dragging": !!z,
1288
- "data-resizing": !!P,
1289
- "data-visible": e,
1290
- children: [
1291
- /* @__PURE__ */ m(de, { value: E, children: /* @__PURE__ */ m(Re, { layers: u }) }),
1292
- d.map(({ trackIndex: T, align: L, span: x }) => /* @__PURE__ */ m(
1293
- ht,
1294
- {
1295
- direction: "col",
1296
- trackIndex: T,
1297
- align: L,
1298
- gap: f.columnGap,
1299
- span: x,
1300
- onResize: w
1301
- },
1302
- `col-${T}:${L}`
1303
- )),
1304
- p.map(({ trackIndex: T, align: L, span: x }) => /* @__PURE__ */ m(
1305
- ht,
1306
- {
1307
- direction: "row",
1308
- trackIndex: T,
1309
- align: L,
1310
- gap: f.rowGap,
1311
- span: x,
1312
- onResize: w
1313
- },
1314
- `row-${T}:${L}`
1315
- ))
1316
- ]
1317
- }
1318
- ),
1319
- /* @__PURE__ */ m(le, { layers: c })
1320
- ] });
1321
- };
1322
- export {
1323
- ie as D,
1324
- Tn as G,
1325
- Ae as R,
1326
- Ln as a,
1327
- fe as b,
1328
- _ as c,
1329
- Te as d,
1330
- Ze as e,
1331
- It as f,
1332
- le as g,
1333
- Dn as h,
1334
- Rt as r,
1335
- Mn as t,
1336
- Le as u
1337
- };
1338
- //# sourceMappingURL=GridLayout-DZCV1X-3.js.map