react-panel-layout 0.3.0 → 0.4.2

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