react-bwin 0.1.2 → 0.2.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.
- package/dist/react-bwin.d.ts +8 -1
- package/dist/react-bwin.js +116 -107
- package/dist/react-bwin.umd.cjs +2 -2
- package/package.json +3 -2
package/dist/react-bwin.d.ts
CHANGED
|
@@ -73,9 +73,16 @@ declare global {
|
|
|
73
73
|
sillElement: HTMLElement
|
|
74
74
|
mount(container: HTMLElement): void
|
|
75
75
|
enableFeatures(): void
|
|
76
|
+
fit(): void
|
|
76
77
|
}
|
|
77
78
|
|
|
78
|
-
type
|
|
79
|
+
type WindowRef = {
|
|
80
|
+
binaryWindow: BinaryWindow
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
type WindowProps = Omit<ConfigRoot, 'children'> & {
|
|
84
|
+
panes?: ConfigNode[]
|
|
85
|
+
}
|
|
79
86
|
}
|
|
80
87
|
|
|
81
88
|
export {
|
package/dist/react-bwin.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import g, { useRef as M, useEffect as L } from "react";
|
|
2
|
-
var
|
|
3
|
-
function
|
|
1
|
+
import g, { useRef as M, useEffect as L, forwardRef as q, useImperativeHandle as U } from "react";
|
|
2
|
+
var X = Object.defineProperty, Y = (e, t, i) => t in e ? X(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, b = (e, t, i) => Y(e, typeof t != "symbol" ? t + "" : t, i);
|
|
3
|
+
function j(e = 0.7, t = 128) {
|
|
4
4
|
const i = 256 - t, n = Math.floor(Math.random() * i + t), s = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), h = Math.max(0.5, Math.random() * e);
|
|
5
5
|
return `rgba(${n}, ${s}, ${o}, ${h})`;
|
|
6
6
|
}
|
|
@@ -24,7 +24,7 @@ function N(e, t) {
|
|
|
24
24
|
for (; t.firstChild; )
|
|
25
25
|
e.append(t.firstChild);
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
function K(e, t) {
|
|
28
28
|
const i = document.createElement("div");
|
|
29
29
|
N(i, e), N(e, t), N(t, i);
|
|
30
30
|
}
|
|
@@ -49,10 +49,10 @@ function z(e) {
|
|
|
49
49
|
}
|
|
50
50
|
return NaN;
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function V(e) {
|
|
53
53
|
return e !== null && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function Z(e, t) {
|
|
56
56
|
for (const i in t) {
|
|
57
57
|
if (Object.hasOwn(e, i))
|
|
58
58
|
throw new Error(`Key "${i}" already exists in target object`);
|
|
@@ -60,7 +60,7 @@ function K(e, t) {
|
|
|
60
60
|
}
|
|
61
61
|
return e;
|
|
62
62
|
}
|
|
63
|
-
function
|
|
63
|
+
function J(e) {
|
|
64
64
|
const t = document.createElement("template");
|
|
65
65
|
return t.innerHTML = e.trim(), t.content;
|
|
66
66
|
}
|
|
@@ -69,7 +69,7 @@ function v(e) {
|
|
|
69
69
|
return null;
|
|
70
70
|
if (typeof e == "string")
|
|
71
71
|
try {
|
|
72
|
-
const t =
|
|
72
|
+
const t = J(e);
|
|
73
73
|
return t.childNodes.length === 1 ? t.firstChild : t;
|
|
74
74
|
} catch {
|
|
75
75
|
return document.createTextNode(e);
|
|
@@ -90,7 +90,7 @@ const r = {
|
|
|
90
90
|
Unknown: "unknown",
|
|
91
91
|
Outside: "outside"
|
|
92
92
|
};
|
|
93
|
-
function
|
|
93
|
+
function Q(e) {
|
|
94
94
|
switch (e) {
|
|
95
95
|
case r.Top:
|
|
96
96
|
return r.Bottom;
|
|
@@ -104,33 +104,33 @@ function Z(e) {
|
|
|
104
104
|
throw new Error(`[bwin] Invalid position: ${e}`);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function tt({ width: e, height: t, x: i }) {
|
|
108
108
|
return t / e * i;
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function et({ width: e, height: t, y: i }) {
|
|
111
111
|
return e / t * i;
|
|
112
112
|
}
|
|
113
|
-
function
|
|
113
|
+
function it({ width: e, height: t, x: i }) {
|
|
114
114
|
return t - t / e * i;
|
|
115
115
|
}
|
|
116
|
-
function
|
|
116
|
+
function nt({ width: e, height: t, y: i }) {
|
|
117
117
|
return e - e / t * i;
|
|
118
118
|
}
|
|
119
|
-
function
|
|
119
|
+
function st(e, { clientX: t, clientY: i }) {
|
|
120
120
|
const n = e.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, a = i - n.top;
|
|
121
121
|
if (h < 0 || h > s || a < 0 || a > o)
|
|
122
122
|
return r.Outside;
|
|
123
|
-
const d = 0.3,
|
|
124
|
-
return h < s * (0.5 - d / 2) && a >
|
|
123
|
+
const d = 0.3, c = tt({ width: s, height: o, x: h }), l = it({ width: s, height: o, x: h }), p = et({ width: s, height: o, y: a }), u = nt({ width: s, height: o, y: a });
|
|
124
|
+
return h < s * (0.5 - d / 2) && a > c && a < l ? r.Left : h > s * (0.5 + d / 2) && a < c && a > l ? r.Right : a < o * (0.5 - d / 2) && h > p && h < u ? r.Top : a > o * (0.5 + d / 2) && h < p && h > u ? r.Bottom : h > s * (0.5 - d / 2) && h < s * (0.5 + d / 2) && a > o * (0.5 - d / 2) && a < o * (0.5 + d / 2) ? r.Center : r.Unknown;
|
|
125
125
|
}
|
|
126
|
-
const
|
|
126
|
+
const ot = 100, ht = 100, E = {
|
|
127
127
|
left: 0,
|
|
128
128
|
top: 0,
|
|
129
129
|
width: 150,
|
|
130
130
|
height: 150,
|
|
131
131
|
// Initial min values, real min width/height is calculated based on children
|
|
132
|
-
minWidth:
|
|
133
|
-
minHeight:
|
|
132
|
+
minWidth: ot,
|
|
133
|
+
minHeight: ht
|
|
134
134
|
};
|
|
135
135
|
class m {
|
|
136
136
|
constructor({
|
|
@@ -142,12 +142,12 @@ class m {
|
|
|
142
142
|
minHeight: h = E.minHeight,
|
|
143
143
|
domNode: a = null,
|
|
144
144
|
store: d = {},
|
|
145
|
-
position:
|
|
146
|
-
id:
|
|
145
|
+
position: c,
|
|
146
|
+
id: l
|
|
147
147
|
} = E) {
|
|
148
|
-
if (this.id =
|
|
148
|
+
if (this.id = l ?? D(), !c)
|
|
149
149
|
throw new Error("[bwin] Sash position is required");
|
|
150
|
-
this.position =
|
|
150
|
+
this.position = c, this.domNode = a, this._top = i, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.store = d;
|
|
151
151
|
}
|
|
152
152
|
walk(t) {
|
|
153
153
|
this.children.forEach((i) => i.walk(t)), t(this);
|
|
@@ -281,10 +281,10 @@ class m {
|
|
|
281
281
|
this._width = t;
|
|
282
282
|
const [n, s, o, h] = this.getChildren();
|
|
283
283
|
if (h && s) {
|
|
284
|
-
const a = h.width + s.width, d = i * (h.width / a),
|
|
285
|
-
let
|
|
284
|
+
const a = h.width + s.width, d = i * (h.width / a), c = a + i;
|
|
285
|
+
let l = h.width + d, p = c - l, u = s.left + d;
|
|
286
286
|
const f = h.calcMinWidth(), w = s.calcMinWidth();
|
|
287
|
-
|
|
287
|
+
l < f && p > w ? (l = f, p = c - l, u = h.left + l) : p < w && l > f && (p = w, l = c - p, u = h.left + l), h.width = l, s.width = p, s.left = u;
|
|
288
288
|
}
|
|
289
289
|
n && o && (n.width += i, o.width += i);
|
|
290
290
|
}
|
|
@@ -296,10 +296,10 @@ class m {
|
|
|
296
296
|
this._height = t;
|
|
297
297
|
const [n, s, o, h] = this.getChildren();
|
|
298
298
|
if (n && o) {
|
|
299
|
-
const a = n.height + o.height, d = i * (n.height / a),
|
|
300
|
-
let
|
|
299
|
+
const a = n.height + o.height, d = i * (n.height / a), c = a + i;
|
|
300
|
+
let l = n.height + d, p = c - l, u = o.top + d;
|
|
301
301
|
const f = n.calcMinHeight(), w = o.calcMinHeight();
|
|
302
|
-
|
|
302
|
+
l < f && p > w ? (l = f, p = c - l, u = n.top + l) : p < w && l > f && (p = w, l = c - p, u = n.top + l), n.height = l, o.height = p, o.top = u;
|
|
303
303
|
}
|
|
304
304
|
h && s && (h.height += i, s.height += i);
|
|
305
305
|
}
|
|
@@ -318,14 +318,14 @@ class P {
|
|
|
318
318
|
minHeight: h,
|
|
319
319
|
position: a,
|
|
320
320
|
size: d,
|
|
321
|
-
...
|
|
321
|
+
...c
|
|
322
322
|
}) {
|
|
323
|
-
b(this, "left"), b(this, "top"), b(this, "width"), b(this, "height"), this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(a), this.size = this.getSize(d), this.nonCoreData =
|
|
323
|
+
b(this, "left"), b(this, "top"), b(this, "width"), b(this, "height"), this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(a), this.size = this.getSize(d), this.nonCoreData = c, this.setBounds();
|
|
324
324
|
}
|
|
325
325
|
getPosition(t) {
|
|
326
326
|
if (!this.siblingConfigNode)
|
|
327
327
|
return t;
|
|
328
|
-
const i =
|
|
328
|
+
const i = Q(this.siblingConfigNode.position);
|
|
329
329
|
if (!t)
|
|
330
330
|
return i;
|
|
331
331
|
if (t !== i)
|
|
@@ -386,7 +386,7 @@ class P {
|
|
|
386
386
|
});
|
|
387
387
|
}
|
|
388
388
|
normConfig(t) {
|
|
389
|
-
if (
|
|
389
|
+
if (V(t))
|
|
390
390
|
return t;
|
|
391
391
|
if (Array.isArray(t))
|
|
392
392
|
return {
|
|
@@ -451,7 +451,7 @@ const x = {
|
|
|
451
451
|
}, $ = {
|
|
452
452
|
fitContainer: !1
|
|
453
453
|
};
|
|
454
|
-
class
|
|
454
|
+
class rt extends P {
|
|
455
455
|
constructor({
|
|
456
456
|
id: t,
|
|
457
457
|
children: i,
|
|
@@ -473,7 +473,7 @@ class ot extends P {
|
|
|
473
473
|
}), this.fitContainer = o;
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
|
-
class
|
|
476
|
+
class at extends m {
|
|
477
477
|
constructor(t = E) {
|
|
478
478
|
super({ ...t, position: r.Root }), Object.assign(this, $);
|
|
479
479
|
}
|
|
@@ -482,11 +482,11 @@ function S(e) {
|
|
|
482
482
|
const t = document.createElement("bw-pane");
|
|
483
483
|
return t.style.top = `${e.top}px`, t.style.left = `${e.left}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, t.setAttribute("sash-id", e.id), t.setAttribute("position", e.position), t;
|
|
484
484
|
}
|
|
485
|
-
function
|
|
485
|
+
function lt(e) {
|
|
486
486
|
const t = e.domNode;
|
|
487
487
|
return t.style.top = `${e.top}px`, t.style.left = `${e.left}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, t.setAttribute("position", e.position), t;
|
|
488
488
|
}
|
|
489
|
-
function
|
|
489
|
+
function dt(e, { size: t }) {
|
|
490
490
|
const i = z(t);
|
|
491
491
|
let n = e.width / 2;
|
|
492
492
|
i && (i < 1 ? n = e.width * i : n = i);
|
|
@@ -505,7 +505,7 @@ function at(e, { size: t }) {
|
|
|
505
505
|
}), h = S(o);
|
|
506
506
|
return o.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), s;
|
|
507
507
|
}
|
|
508
|
-
function
|
|
508
|
+
function ct(e, { size: t }) {
|
|
509
509
|
const i = z(t);
|
|
510
510
|
let n = e.width / 2;
|
|
511
511
|
i && (i < 1 ? n = e.width * i : n = i);
|
|
@@ -524,7 +524,7 @@ function lt(e, { size: t }) {
|
|
|
524
524
|
}), h = S(s);
|
|
525
525
|
return s.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), o;
|
|
526
526
|
}
|
|
527
|
-
function
|
|
527
|
+
function pt(e, { size: t }) {
|
|
528
528
|
const i = z(t);
|
|
529
529
|
let n = e.height / 2;
|
|
530
530
|
i && (i < 1 ? n = e.height * i : n = i);
|
|
@@ -543,7 +543,7 @@ function dt(e, { size: t }) {
|
|
|
543
543
|
}), h = S(o);
|
|
544
544
|
return o.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), s;
|
|
545
545
|
}
|
|
546
|
-
function
|
|
546
|
+
function ut(e, { size: t }) {
|
|
547
547
|
const i = z(t);
|
|
548
548
|
let n = e.height / 2;
|
|
549
549
|
i && (i < 1 ? n = e.height * i : n = i);
|
|
@@ -562,27 +562,27 @@ function ct(e, { size: t }) {
|
|
|
562
562
|
}), h = S(s);
|
|
563
563
|
return s.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), o;
|
|
564
564
|
}
|
|
565
|
-
function
|
|
565
|
+
function gt(e, { position: t, size: i, minWidth: n, minHeight: s }) {
|
|
566
566
|
if (t === r.Left)
|
|
567
|
-
return
|
|
567
|
+
return dt(e, { size: i });
|
|
568
568
|
if (t === r.Right)
|
|
569
|
-
return
|
|
569
|
+
return ct(e, { size: i });
|
|
570
570
|
if (t === r.Top)
|
|
571
|
-
return
|
|
571
|
+
return pt(e, { size: i });
|
|
572
572
|
if (t === r.Bottom)
|
|
573
|
-
return
|
|
573
|
+
return ut(e, { size: i });
|
|
574
574
|
}
|
|
575
|
-
const
|
|
575
|
+
const ft = {
|
|
576
576
|
createPane(e) {
|
|
577
577
|
const t = S(e);
|
|
578
578
|
return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
|
|
579
579
|
},
|
|
580
580
|
// Intended to be overridden
|
|
581
581
|
onPaneCreate(e, t) {
|
|
582
|
-
t.store.content && e.append(v(t.store.content)), this != null && this.debug && (e.style.backgroundColor =
|
|
582
|
+
t.store.content && e.append(v(t.store.content)), this != null && this.debug && (e.style.backgroundColor = j(), e.innerHTML = "", e.append(T(e)));
|
|
583
583
|
},
|
|
584
584
|
updatePane(e) {
|
|
585
|
-
return
|
|
585
|
+
return lt(e);
|
|
586
586
|
},
|
|
587
587
|
// Intended to be overridden
|
|
588
588
|
onPaneUpdate(e, t) {
|
|
@@ -599,7 +599,7 @@ const ut = {
|
|
|
599
599
|
if (!t) throw new Error("[bwin] Position is required when adding pane");
|
|
600
600
|
const n = this.rootSash.getById(e);
|
|
601
601
|
if (!n) throw new Error("[bwin] Parent sash not found when adding pane");
|
|
602
|
-
const s =
|
|
602
|
+
const s = gt(n, { position: t, size: i });
|
|
603
603
|
return n.id = D(), this.update(), s;
|
|
604
604
|
},
|
|
605
605
|
/**
|
|
@@ -627,7 +627,7 @@ height: ${e.style.height}
|
|
|
627
627
|
`;
|
|
628
628
|
return t.innerHTML = i.trim(), t;
|
|
629
629
|
}
|
|
630
|
-
const
|
|
630
|
+
const wt = {
|
|
631
631
|
createWindow() {
|
|
632
632
|
const e = document.createElement("bw-window");
|
|
633
633
|
return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), e;
|
|
@@ -648,7 +648,7 @@ const gt = {
|
|
|
648
648
|
i.children.length > 0 ? t.includes(i.id) ? (this.updateMuntin(i), this.onMuntinUpdate(i.domNode, i)) : (i.domNode = this.createMuntin(i), this.windowElement.append(i.domNode)) : t.includes(i.id) ? (this.updatePane(i), this.onPaneUpdate(i.domNode, i)) : (i.domNode || (i.domNode = this.createPane(i)), this.windowElement.prepend(i.domNode));
|
|
649
649
|
});
|
|
650
650
|
}
|
|
651
|
-
},
|
|
651
|
+
}, mt = {
|
|
652
652
|
muntinSize: 4,
|
|
653
653
|
createMuntin(e) {
|
|
654
654
|
const t = document.createElement("bw-muntin"), i = e.leftChild, n = e.topChild;
|
|
@@ -662,15 +662,18 @@ const gt = {
|
|
|
662
662
|
},
|
|
663
663
|
onMuntinUpdate(e, t) {
|
|
664
664
|
}
|
|
665
|
-
},
|
|
665
|
+
}, bt = {
|
|
666
666
|
fitContainer: !1,
|
|
667
|
+
fit() {
|
|
668
|
+
this.rootSash.width = this.containerElement.clientWidth, this.rootSash.height = this.containerElement.clientHeight, this.update();
|
|
669
|
+
},
|
|
667
670
|
enableFitContainer() {
|
|
668
671
|
new ResizeObserver((e) => {
|
|
669
672
|
for (const t of e)
|
|
670
|
-
t.target === this.containerElement && this.fitContainer &&
|
|
673
|
+
t.target === this.containerElement && this.fitContainer && this.fit();
|
|
671
674
|
}).observe(this.containerElement);
|
|
672
675
|
}
|
|
673
|
-
},
|
|
676
|
+
}, yt = {
|
|
674
677
|
activeMuntinSash: null,
|
|
675
678
|
isResizeStarted: !1,
|
|
676
679
|
isDropStarted: !1,
|
|
@@ -691,21 +694,21 @@ const gt = {
|
|
|
691
694
|
if (!this.isResizeStarted || !this.activeMuntinSash) return;
|
|
692
695
|
const [t, i, n, s] = this.activeMuntinSash.getChildren(), o = this.activeMuntinSash.isLeftRightSplit(), h = this.activeMuntinSash.isTopBottomSplit();
|
|
693
696
|
if (o && s && i) {
|
|
694
|
-
const a = e.pageX - this.lastX, d = s.width + a,
|
|
695
|
-
if (d <= s.calcMinWidth() ||
|
|
697
|
+
const a = e.pageX - this.lastX, d = s.width + a, c = i.width - a;
|
|
698
|
+
if (d <= s.calcMinWidth() || c <= i.calcMinWidth())
|
|
696
699
|
return;
|
|
697
|
-
s.width = d, i.width =
|
|
700
|
+
s.width = d, i.width = c, i.left = i.left + a, this.update(), this.lastX = e.pageX;
|
|
698
701
|
} else if (h && t && n) {
|
|
699
|
-
const a = e.pageY - this.lastY, d = t.height + a,
|
|
700
|
-
if (d <= t.calcMinHeight() ||
|
|
702
|
+
const a = e.pageY - this.lastY, d = t.height + a, c = n.height - a;
|
|
703
|
+
if (d <= t.calcMinHeight() || c <= n.calcMinHeight())
|
|
701
704
|
return;
|
|
702
|
-
t.height = d, n.height =
|
|
705
|
+
t.height = d, n.height = c, n.top = n.top + a, this.update(), this.lastY = e.pageY;
|
|
703
706
|
}
|
|
704
707
|
}), document.addEventListener("mouseup", () => {
|
|
705
708
|
this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
|
|
706
709
|
});
|
|
707
710
|
}
|
|
708
|
-
},
|
|
711
|
+
}, Et = {
|
|
709
712
|
activeDropPaneEl: null,
|
|
710
713
|
// Intended to be overridden in `BinaryWindow` class
|
|
711
714
|
onPaneDrop(e, t) {
|
|
@@ -715,7 +718,7 @@ const gt = {
|
|
|
715
718
|
e.preventDefault();
|
|
716
719
|
const t = e.target.matches("bw-pane") ? e.target : e.target.closest("bw-pane");
|
|
717
720
|
if (!t || (t !== this.activeDropPaneEl && (this.activeDropPaneEl && this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = t), t.getAttribute("can-drop") === "false")) return;
|
|
718
|
-
const i =
|
|
721
|
+
const i = st(t, e);
|
|
719
722
|
t.setAttribute("drop-area", i);
|
|
720
723
|
}), this.windowElement.addEventListener("dragleave", (e) => {
|
|
721
724
|
e.currentTarget.contains(e.relatedTarget) && e.currentTarget !== e.relatedTarget || this.activeDropPaneEl && (this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null);
|
|
@@ -725,12 +728,12 @@ const gt = {
|
|
|
725
728
|
this.onPaneDrop(e, i), typeof i.store.onDrop == "function" && i.store.onDrop(e, i), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
|
|
726
729
|
});
|
|
727
730
|
}
|
|
728
|
-
},
|
|
731
|
+
}, vt = !0;
|
|
729
732
|
class H {
|
|
730
733
|
constructor(t) {
|
|
731
|
-
b(this, "windowElement", null), b(this, "containerElement", null), b(this, "debug",
|
|
734
|
+
b(this, "windowElement", null), b(this, "containerElement", null), b(this, "debug", vt);
|
|
732
735
|
let i = null;
|
|
733
|
-
t instanceof
|
|
736
|
+
t instanceof at ? (i = t, this.rootSash = t) : (i = new rt(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
|
|
734
737
|
}
|
|
735
738
|
frame(t) {
|
|
736
739
|
this.containerElement = t, this.windowElement = this.createWindow(), this.glaze(), this.containerElement.append(this.windowElement);
|
|
@@ -744,17 +747,17 @@ class H {
|
|
|
744
747
|
}
|
|
745
748
|
static assemble(...t) {
|
|
746
749
|
t.forEach((i) => {
|
|
747
|
-
|
|
750
|
+
Z(this.prototype, i);
|
|
748
751
|
});
|
|
749
752
|
}
|
|
750
753
|
}
|
|
751
754
|
H.assemble(
|
|
752
|
-
gt,
|
|
753
|
-
ft,
|
|
754
|
-
ut,
|
|
755
755
|
wt,
|
|
756
|
+
mt,
|
|
757
|
+
ft,
|
|
756
758
|
bt,
|
|
757
|
-
|
|
759
|
+
Et,
|
|
760
|
+
yt
|
|
758
761
|
);
|
|
759
762
|
function G(e) {
|
|
760
763
|
if (e.tagName === "BW-PANE")
|
|
@@ -764,14 +767,14 @@ function G(e) {
|
|
|
764
767
|
throw new Error("[bwin] Pane element not found");
|
|
765
768
|
return t.getAttribute("sash-id");
|
|
766
769
|
}
|
|
767
|
-
const
|
|
770
|
+
const Nt = {
|
|
768
771
|
label: "",
|
|
769
772
|
className: "bw-glass-action--close",
|
|
770
773
|
onClick: (e, t) => {
|
|
771
774
|
const i = G(e.target);
|
|
772
775
|
t.removePane(i);
|
|
773
776
|
}
|
|
774
|
-
},
|
|
777
|
+
}, zt = {
|
|
775
778
|
label: "",
|
|
776
779
|
className: "bw-glass-action--minimize",
|
|
777
780
|
onClick: (e, t) => {
|
|
@@ -782,7 +785,7 @@ const Et = {
|
|
|
782
785
|
const s = e.target.closest("bw-pane"), o = e.target.closest("bw-glass"), h = s.getAttribute("sash-id"), a = s.getAttribute("position");
|
|
783
786
|
n.bwGlassElement = o, n.bwOriginalPosition = a, n.bwOriginalBoundingRect = R(s), t.removePane(h);
|
|
784
787
|
}
|
|
785
|
-
},
|
|
788
|
+
}, Ct = {
|
|
786
789
|
label: "",
|
|
787
790
|
className: "bw-glass-action--maximize",
|
|
788
791
|
onClick: (e) => {
|
|
@@ -790,19 +793,19 @@ const Et = {
|
|
|
790
793
|
t.hasAttribute("maximized") ? (t.removeAttribute("maximized"), t.style.left = `${t.bwOriginalBoundingRect.left}px`, t.style.top = `${t.bwOriginalBoundingRect.top}px`, t.style.width = `${t.bwOriginalBoundingRect.width}px`, t.style.height = `${t.bwOriginalBoundingRect.height}px`) : (t.setAttribute("maximized", ""), t.bwOriginalBoundingRect = R(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
|
|
791
794
|
}
|
|
792
795
|
};
|
|
793
|
-
function
|
|
796
|
+
function St(e, t) {
|
|
794
797
|
const i = e.left + e.width, n = e.top + e.height, s = t.left + t.width, o = t.top + t.height;
|
|
795
798
|
if (e.left >= s || t.left >= i || e.top >= o || t.top >= n)
|
|
796
799
|
return null;
|
|
797
|
-
const h = Math.max(e.left, t.left), a = Math.max(e.top, t.top), d = Math.min(i, s),
|
|
800
|
+
const h = Math.max(e.left, t.left), a = Math.max(e.top, t.top), d = Math.min(i, s), c = Math.min(n, o);
|
|
798
801
|
return {
|
|
799
802
|
left: h,
|
|
800
803
|
top: a,
|
|
801
804
|
width: d - h,
|
|
802
|
-
height:
|
|
805
|
+
height: c - a
|
|
803
806
|
};
|
|
804
807
|
}
|
|
805
|
-
const I = [
|
|
808
|
+
const I = [zt, Ct, Nt], At = {
|
|
806
809
|
enableActions() {
|
|
807
810
|
this.handleMinimizedGlassClick(), this.observeActionButtons();
|
|
808
811
|
},
|
|
@@ -810,7 +813,7 @@ const I = [vt, Nt, Et], Ct = {
|
|
|
810
813
|
const t = e.bwOriginalBoundingRect;
|
|
811
814
|
let i = 0, n = null;
|
|
812
815
|
if (this.windowElement.querySelectorAll("bw-pane").forEach((s) => {
|
|
813
|
-
const o = R(s), h =
|
|
816
|
+
const o = R(s), h = St(t, o);
|
|
814
817
|
if (h) {
|
|
815
818
|
const a = h.width * h.height;
|
|
816
819
|
a > i && (i = a, n = s);
|
|
@@ -914,7 +917,7 @@ class W {
|
|
|
914
917
|
return this.domNode.querySelector("bw-glass-header");
|
|
915
918
|
}
|
|
916
919
|
}
|
|
917
|
-
const
|
|
920
|
+
const Mt = {
|
|
918
921
|
activeDragGlassEl: null,
|
|
919
922
|
activeDragGlassPaneCanDrop: !1,
|
|
920
923
|
onPaneDrop(e, t) {
|
|
@@ -922,7 +925,7 @@ const St = {
|
|
|
922
925
|
const i = this.activeDropPaneEl.getAttribute("drop-area");
|
|
923
926
|
if (i === "center") {
|
|
924
927
|
const n = this.activeDragGlassEl.closest("bw-pane"), s = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
|
|
925
|
-
|
|
928
|
+
K(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
|
|
926
929
|
return;
|
|
927
930
|
} else {
|
|
928
931
|
const n = G(this.activeDragGlassEl);
|
|
@@ -950,7 +953,7 @@ const St = {
|
|
|
950
953
|
this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), this.activeDragGlassEl = null);
|
|
951
954
|
});
|
|
952
955
|
}
|
|
953
|
-
},
|
|
956
|
+
}, Rt = {
|
|
954
957
|
trimMuntin(e) {
|
|
955
958
|
e.hasAttribute("vertical") ? (e.style.top = `${parseFloat(e.style.top) + this.muntinSize / 2}px`, e.style.height = `${parseFloat(e.style.height) - this.muntinSize}px`) : e.hasAttribute("horizontal") && (e.style.left = `${parseFloat(e.style.left) + this.muntinSize / 2}px`, e.style.width = `${parseFloat(e.style.width) - this.muntinSize}px`);
|
|
956
959
|
},
|
|
@@ -1008,13 +1011,13 @@ class O extends H {
|
|
|
1008
1011
|
}
|
|
1009
1012
|
}
|
|
1010
1013
|
}
|
|
1011
|
-
O.assemble(
|
|
1014
|
+
O.assemble(Mt, Rt, At);
|
|
1012
1015
|
const y = 4;
|
|
1013
|
-
function
|
|
1014
|
-
var
|
|
1016
|
+
function Pt({ sash: e }) {
|
|
1017
|
+
var l;
|
|
1015
1018
|
const t = M(), i = e.leftChild, n = e.topChild;
|
|
1016
|
-
let s, o, h, a, d,
|
|
1017
|
-
return i ? (s = y, o = e.height - y, h = e.top + y / 2, a = e.left + i.width - y / 2, d = !0) : n && (s = e.width - y, o = y, h = e.top + n.height - y / 2, a = e.left + y / 2,
|
|
1019
|
+
let s, o, h, a, d, c;
|
|
1020
|
+
return i ? (s = y, o = e.height - y, h = e.top + y / 2, a = e.left + i.width - y / 2, d = !0) : n && (s = e.width - y, o = y, h = e.top + n.height - y / 2, a = e.left + y / 2, c = !0), L(() => {
|
|
1018
1021
|
e.domNode = t.current;
|
|
1019
1022
|
}, []), /* @__PURE__ */ g.createElement(
|
|
1020
1023
|
"bw-muntin",
|
|
@@ -1027,22 +1030,22 @@ function Mt({ sash: e }) {
|
|
|
1027
1030
|
left: a
|
|
1028
1031
|
},
|
|
1029
1032
|
vertical: d,
|
|
1030
|
-
horizontal:
|
|
1031
|
-
resizable: ((
|
|
1033
|
+
horizontal: c,
|
|
1034
|
+
resizable: ((l = e.store) == null ? void 0 : l.resizable) === !1 ? "false" : "true",
|
|
1032
1035
|
ref: t
|
|
1033
1036
|
}
|
|
1034
1037
|
);
|
|
1035
1038
|
}
|
|
1036
|
-
function
|
|
1039
|
+
function xt({
|
|
1037
1040
|
sash: e,
|
|
1038
1041
|
bwin: t
|
|
1039
1042
|
}) {
|
|
1040
|
-
var
|
|
1043
|
+
var l, p, u, f, w;
|
|
1041
1044
|
const i = M(), { left: n, top: s, width: o, height: h, id: a, position: d } = e;
|
|
1042
1045
|
L(() => {
|
|
1043
1046
|
e.domNode = i.current;
|
|
1044
1047
|
}, []);
|
|
1045
|
-
const
|
|
1048
|
+
const c = ((l = e.store) == null ? void 0 : l.actions) === void 0 ? I : Array.isArray(e.store.actions) ? e.store.actions : [];
|
|
1046
1049
|
return /* @__PURE__ */ g.createElement(
|
|
1047
1050
|
"bw-pane",
|
|
1048
1051
|
{
|
|
@@ -1058,7 +1061,7 @@ function Rt({
|
|
|
1058
1061
|
"can-drag": ((u = e.store) == null ? void 0 : u.draggable) === !1 ? "false" : "true"
|
|
1059
1062
|
},
|
|
1060
1063
|
((f = e.store) == null ? void 0 : f.title) && /* @__PURE__ */ g.createElement("bw-glass-title", null, e.store.title),
|
|
1061
|
-
|
|
1064
|
+
c.length > 0 && /* @__PURE__ */ g.createElement("bw-glass-action-container", null, c.map((A, k) => {
|
|
1062
1065
|
const F = A.className ? `bw-glass-action ${A.className}` : "bw-glass-action";
|
|
1063
1066
|
return /* @__PURE__ */ g.createElement(
|
|
1064
1067
|
"button",
|
|
@@ -1073,26 +1076,32 @@ function Rt({
|
|
|
1073
1076
|
), /* @__PURE__ */ g.createElement("bw-glass-content", null, (w = e.store) == null ? void 0 : w.content))
|
|
1074
1077
|
);
|
|
1075
1078
|
}
|
|
1076
|
-
|
|
1077
|
-
const
|
|
1078
|
-
return
|
|
1079
|
-
l.children.length > 0 ?
|
|
1079
|
+
const $t = q((e, t) => {
|
|
1080
|
+
const i = M(), n = M(), { panes: s, ...o } = e, h = { ...o, children: s }, a = new O(h), d = [], c = [];
|
|
1081
|
+
return a.rootSash.walk((l) => {
|
|
1082
|
+
l.children.length > 0 ? d.push(l) : c.push(l);
|
|
1080
1083
|
}), L(() => {
|
|
1081
|
-
const l =
|
|
1082
|
-
l != null && l.parentElement && (
|
|
1083
|
-
}, []),
|
|
1084
|
+
const l = i.current;
|
|
1085
|
+
l != null && l.parentElement && (a.windowElement = l, a.containerElement = l.parentElement, a.sillElement = n.current, a.enableFeatures());
|
|
1086
|
+
}, []), U(
|
|
1087
|
+
t,
|
|
1088
|
+
() => ({
|
|
1089
|
+
binaryWindow: a
|
|
1090
|
+
}),
|
|
1091
|
+
[]
|
|
1092
|
+
), /* @__PURE__ */ g.createElement(
|
|
1084
1093
|
"bw-window",
|
|
1085
1094
|
{
|
|
1086
|
-
"sash-id":
|
|
1087
|
-
style: { width:
|
|
1088
|
-
ref:
|
|
1095
|
+
"sash-id": a.rootSash.id,
|
|
1096
|
+
style: { width: a.rootSash.width, height: a.rootSash.height },
|
|
1097
|
+
ref: i
|
|
1089
1098
|
},
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
/* @__PURE__ */ g.createElement("bw-sill", { ref:
|
|
1099
|
+
c.map((l) => /* @__PURE__ */ g.createElement(xt, { key: l.id, sash: l, bwin: a })),
|
|
1100
|
+
d.map((l) => /* @__PURE__ */ g.createElement(Pt, { key: l.id, sash: l })),
|
|
1101
|
+
/* @__PURE__ */ g.createElement("bw-sill", { ref: n })
|
|
1093
1102
|
);
|
|
1094
|
-
}
|
|
1103
|
+
});
|
|
1095
1104
|
export {
|
|
1096
1105
|
I as BUILTIN_ACTIONS,
|
|
1097
|
-
|
|
1106
|
+
$t as Window
|
|
1098
1107
|
};
|
package/dist/react-bwin.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(y,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(y=typeof globalThis<"u"?globalThis:y||self,p(y.ReactBinaryWindow={},y.React))})(this,function(y,p){"use strict";var I=Object.defineProperty,k=(e,t,i)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,b=(e,t,i)=>k(e,typeof t!="symbol"?t+"":t,i);function F(e=.7,t=128){const i=256-t,n=Math.floor(Math.random()*i+t),s=Math.floor(Math.random()*i+t),o=Math.floor(Math.random()*i+t),h=Math.max(.5,Math.random()*e);return`rgba(${n}, ${s}, ${o}, ${h})`}function D(e=2,t=3){if(e<0||t<0)throw new Error("Parameters must be non-negative numbers");const i="ABCDEFGHIJKLMNOPQRSTUVWXYZ",n="0123456789";let s="";for(let o=0;o<e;o++){const h=Math.floor(Math.random()*i.length);s+=i[h]}s+="-";for(let o=0;o<t;o++){const h=Math.floor(Math.random()*n.length);s+=n[h]}return s}function N(e,t){for(;t.firstChild;)e.append(t.firstChild)}function _(e,t){const i=document.createElement("div");N(i,e),N(e,t),N(t,i)}function z(e){if(typeof e=="number"&&!isNaN(e))return e;if(typeof e=="string"){const t=e.trim();if(t.endsWith("%")){const i=t.slice(0,-1);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n/100}if(t.endsWith("px")){const i=t.slice(0,-2);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n}return Number(t)}return NaN}function q(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)&&Object.getPrototypeOf(e)===Object.prototype}function U(e,t){for(const i in t){if(Object.hasOwn(e,i))throw new Error(`Key "${i}" already exists in target object`);e[i]=t[i]}return e}function j(e){const t=document.createElement("template");return t.innerHTML=e.trim(),t.content}function C(e){if(e==null||e==="")return null;if(typeof e=="string")try{const t=j(e);return t.childNodes.length===1?t.firstChild:t}catch{return document.createTextNode(e)}return e instanceof Node?e:document.createTextNode(String(e))}function M(e){const t=parseFloat(e.style.left)||0,i=parseFloat(e.style.top)||0,n=parseFloat(e.style.width)||0,s=parseFloat(e.style.height)||0;return{left:t,top:i,width:n,height:s}}const r={Top:"top",Right:"right",Bottom:"bottom",Left:"left",Center:"center",Root:"root",Unknown:"unknown",Outside:"outside"};function X(e){switch(e){case r.Top:return r.Bottom;case r.Right:return r.Left;case r.Bottom:return r.Top;case r.Left:return r.Right;default:throw new Error(`[bwin] Invalid position: ${e}`)}}function Y({width:e,height:t,x:i}){return t/e*i}function K({width:e,height:t,y:i}){return e/t*i}function V({width:e,height:t,x:i}){return t-t/e*i}function Z({width:e,height:t,y:i}){return e-e/t*i}function J(e,{clientX:t,clientY:i}){const n=e.getBoundingClientRect(),{width:s,height:o}=n,h=t-n.left,a=i-n.top;if(h<0||h>s||a<0||a>o)return r.Outside;const d=.3,l=Y({width:s,height:o,x:h}),c=V({width:s,height:o,x:h}),u=K({width:s,height:o,y:a}),g=Z({width:s,height:o,y:a});return h<s*(.5-d/2)&&a>l&&a<c?r.Left:h>s*(.5+d/2)&&a<l&&a>c?r.Right:a<o*(.5-d/2)&&h>u&&h<g?r.Top:a>o*(.5+d/2)&&h<u&&h>g?r.Bottom:h>s*(.5-d/2)&&h<s*(.5+d/2)&&a>o*(.5-d/2)&&a<o*(.5+d/2)?r.Center:r.Unknown}const Q=100,tt=100,E={left:0,top:0,width:150,height:150,minWidth:Q,minHeight:tt};class f{constructor({left:t=E.left,top:i=E.top,width:n=E.width,height:s=E.height,minWidth:o=E.minWidth,minHeight:h=E.minHeight,domNode:a=null,store:d={},position:l,id:c}=E){if(this.id=c??D(),!l)throw new Error("[bwin] Sash position is required");this.position=l,this.domNode=a,this._top=i,this._left=t,this._width=n,this._height=s,this.children=[],this.minWidth=o,this.minHeight=h,this.store=d}walk(t){this.children.forEach(i=>i.walk(t)),t(this)}isLeaf(){return this.children.length===0}isSplit(){return this.children.length>0}isLeftRightSplit(){return this.children.some(t=>t.position===r.Left||t.position===r.Right)}isTopBottomSplit(){return this.children.some(t=>t.position===r.Top||t.position===r.Bottom)}get leftChild(){return this.children.find(t=>t.position===r.Left)}get rightChild(){return this.children.find(t=>t.position===r.Right)}get topChild(){return this.children.find(t=>t.position===r.Top)}get bottomChild(){return this.children.find(t=>t.position===r.Bottom)}getChildren(){let t=null,i=null,n=null,s=null;for(const o of this.children)o.position===r.Left?t=o:o.position===r.Right?i=o:o.position===r.Top?n=o:o.position===r.Bottom&&(s=o);return[n,i,s,t]}getAllLeafDescendants(){const t=[];return this.walk(i=>{i.children.length===0&&t.push(i)}),t}calcMinWidth(){if(this.isLeaf())return this.minWidth;const[t,i,n,s]=this.getChildren();if(s&&i){const o=s.calcMinWidth()+i.calcMinWidth();return Math.max(this.minWidth,o)}if(t&&n){const o=Math.max(t.calcMinWidth(),n.calcMinWidth());return Math.max(this.minWidth,o)}}calcMinHeight(){if(this.isLeaf())return this.minHeight;const[t,i,n,s]=this.getChildren();if(s&&i){const o=Math.max(s.calcMinHeight(),i.calcMinHeight());return Math.max(this.minHeight,o)}if(t&&n){const o=t.calcMinHeight()+n.calcMinHeight();return Math.max(this.minHeight,o)}}getById(t){if(this.id===t)return this;for(const i of this.children){const n=i.getById(t);if(n)return n}return null}getAllIds(){const t=[this.id];for(const i of this.children)t.push(...i.getAllIds());return t}addChild(t){if(this.children.length>=2)throw new Error("[bwin] Maximum 2 children allowed");this.children.push(t)}getDescendantParentById(t){for(const i of this.children){if(i.id===t)return this;const n=i.getDescendantParentById(t);if(n)return n}return null}getChildSiblingById(t){return this.children.find(i=>i.id!==t)}get top(){return this._top}set top(t){const i=t-this._top;this._top=t;const[n,s,o,h]=this.getChildren();n&&o&&(n.top+=i,o.top+=i),h&&s&&(h.top+=i,s.top+=i)}get left(){return this._left}set left(t){const i=t-this._left;this._left=t;const[n,s,o,h]=this.getChildren();h&&s&&(h.left+=i,s.left+=i),n&&o&&(n.left+=i,o.left+=i)}get width(){return this._width}set width(t){const i=t-this._width;this._width=t;const[n,s,o,h]=this.getChildren();if(h&&s){const a=h.width+s.width,d=i*(h.width/a),l=a+i;let c=h.width+d,u=l-c,g=s.left+d;const w=h.calcMinWidth(),m=s.calcMinWidth();c<w&&u>m?(c=w,u=l-c,g=h.left+c):u<m&&c>w&&(u=m,c=l-u,g=h.left+c),h.width=c,s.width=u,s.left=g}n&&o&&(n.width+=i,o.width+=i)}get height(){return this._height}set height(t){const i=t-this._height;this._height=t;const[n,s,o,h]=this.getChildren();if(n&&o){const a=n.height+o.height,d=i*(n.height/a),l=a+i;let c=n.height+d,u=l-c,g=o.top+d;const w=n.calcMinHeight(),m=o.calcMinHeight();c<w&&u>m?(c=w,u=l-c,g=n.top+c):u<m&&c>w&&(u=m,c=l-u,g=n.top+c),n.height=c,o.height=u,o.top=g}h&&s&&(h.height+=i,s.height+=i)}}const L={size:"50%",position:r.Left};class P{constructor({parentRect:t,children:i,siblingConfigNode:n,id:s,minWidth:o,minHeight:h,position:a,size:d,...l}){b(this,"left"),b(this,"top"),b(this,"width"),b(this,"height"),this.parentRect=t,this.children=i,this.siblingConfigNode=n,this.id=s,this.minWidth=o,this.minHeight=h,this.position=this.getPosition(a),this.size=this.getSize(d),this.nonCoreData=l,this.setBounds()}getPosition(t){if(!this.siblingConfigNode)return t;const i=X(this.siblingConfigNode.position);if(!t)return i;if(t!==i)throw new Error("[bwin] Sibling position and current position are not opposite");return t}getSize(t){if(!this.siblingConfigNode)return z(t);if(!t){if(this.siblingConfigNode.size<1)return 1-this.siblingConfigNode.size;if(this.siblingConfigNode.position===r.Left||this.siblingConfigNode.position===r.Right)return this.parentRect.width-this.siblingConfigNode.width;if(this.siblingConfigNode.position===r.Top||this.siblingConfigNode.position===r.Bottom)return this.parentRect.height-this.siblingConfigNode.height}const i=z(t);if(i<1){if(i+this.siblingConfigNode.size!==1)throw new Error("[bwin] Sum of sibling sizes is not equal to 1")}else{if((this.position===r.Left||this.position===r.Right)&&i+this.siblingConfigNode.size!==this.parentRect.width)throw new Error("[bwin] Sum of sibling sizes is not equal to parent width");if((this.position===r.Top||this.position===r.Bottom)&&i+this.siblingConfigNode.size!==this.parentRect.height)throw new Error("[bwin] Sum of sibling sizes is not equal to parent height")}return i}setBounds(){if(this.position===r.Root)this.left=0,this.top=0,this.width=this.parentRect.width,this.height=this.parentRect.height;else if(this.position===r.Left){const t=this.size<1?this.parentRect.width*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top,this.width=t,this.height=this.parentRect.height}else if(this.position===r.Right){const t=this.size<1?this.parentRect.width*this.size:this.size;this.left=this.parentRect.left+this.parentRect.width-t,this.top=this.parentRect.top,this.width=t,this.height=this.parentRect.height}else if(this.position===r.Top){const t=this.size<1?this.parentRect.height*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top,this.width=this.parentRect.width,this.height=t}else if(this.position===r.Bottom){const t=this.size<1?this.parentRect.height*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top+this.parentRect.height-t,this.width=this.parentRect.width,this.height=t}}createSash(){return new f({left:this.left,top:this.top,width:this.width,height:this.height,position:this.position,id:this.id,minWidth:this.minWidth,minHeight:this.minHeight,store:this.nonCoreData})}normConfig(t){if(q(t))return t;if(Array.isArray(t))return{children:t};if(typeof t=="string"||typeof t=="number"){const i=z(t);if(isNaN(i))throw new Error(`[bwin] Invalid size value: ${i}`);return{size:t}}else{if(t==null)return{};throw new Error(`[bwin] Invalid config value: ${t}`)}}createPrimaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...a}){return new P({parentRect:this,size:t??L.size,position:i??L.position,children:n,id:s,minWidth:o,minHeight:h,...a})}createSecondaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...a},d){return new P({parentRect:this,size:t,position:i,children:n,siblingConfigNode:d,id:s,minWidth:o,minHeight:h,...a})}buildSashTree(){const t=this.createSash();if(!Array.isArray(this.children)||this.children.length===0)return t;const i=this.normConfig(this.children[0]),n=this.normConfig(this.children.at(1));let s,o;return!i.size&&!i.position&&n?(n.position||(n.position=r.Right),s=this.createPrimaryConfigNode(n),o=this.createSecondaryConfigNode(i,s)):(s=this.createPrimaryConfigNode(i),o=this.createSecondaryConfigNode(n,s)),s&&o&&(t.children.push(s.buildSashTree()),t.children.push(o.buildSashTree())),t}}const R={width:333,height:333},$={fitContainer:!1};class et extends P{constructor({id:t,children:i,width:n=R.width,height:s=R.height,fitContainer:o=$.fitContainer,...h}={...R,...$}){super({id:t,children:i,size:NaN,position:r.Root,parentRect:{width:n,height:s},...h}),this.fitContainer=o}}class it extends f{constructor(t=E){super({...t,position:r.Root}),Object.assign(this,$)}}function S(e){const t=document.createElement("bw-pane");return t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.width=`${e.width}px`,t.style.height=`${e.height}px`,t.setAttribute("sash-id",e.id),t.setAttribute("position",e.position),t}function nt(e){const t=e.domNode;return t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.width=`${e.width}px`,t.style.height=`${e.height}px`,t.setAttribute("position",e.position),t}function st(e,{size:t}){const i=z(t);let n=e.width/2;i&&(i<1?n=e.width*i:n=i);const s=new f({top:e.top,left:e.left,width:n,height:e.height,position:r.Left}),o=new f({top:e.top,left:e.left+s.width,width:e.width-n,height:e.height,position:r.Right}),h=S(o);return o.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),s}function ot(e,{size:t}){const i=z(t);let n=e.width/2;i&&(i<1?n=e.width*i:n=i);const s=new f({left:e.left,top:e.top,width:e.width-n,height:e.height,position:r.Left}),o=new f({left:e.left+s.width,top:e.top,width:n,height:e.height,position:r.Right}),h=S(s);return s.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),o}function ht(e,{size:t}){const i=z(t);let n=e.height/2;i&&(i<1?n=e.height*i:n=i);const s=new f({left:e.left,top:e.top,width:e.width,height:n,position:r.Top}),o=new f({left:e.left,top:e.top+s.height,width:e.width,height:e.height-n,position:r.Bottom}),h=S(o);return o.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),s}function rt(e,{size:t}){const i=z(t);let n=e.height/2;i&&(i<1?n=e.height*i:n=i);const s=new f({top:e.top,left:e.left,width:e.width,height:e.height-n,position:r.Top}),o=new f({top:e.top+s.height,left:e.left,width:e.width,height:n,position:r.Bottom}),h=S(s);return s.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),o}function at(e,{position:t,size:i,minWidth:n,minHeight:s}){if(t===r.Left)return st(e,{size:i});if(t===r.Right)return ot(e,{size:i});if(t===r.Top)return ht(e,{size:i});if(t===r.Bottom)return rt(e,{size:i})}const lt={createPane(e){const t=S(e);return e.store.droppable===!1&&t.setAttribute("can-drop","false"),t},onPaneCreate(e,t){t.store.content&&e.append(C(t.store.content)),this!=null&&this.debug&&(e.style.backgroundColor=F(),e.innerHTML="",e.append(T(e)))},updatePane(e){return nt(e)},onPaneUpdate(e,t){this!=null&&this.debug&&(e.innerHTML="",e.append(T(e)))},addPane(e,{position:t,size:i}){if(!t)throw new Error("[bwin] Position is required when adding pane");const n=this.rootSash.getById(e);if(!n)throw new Error("[bwin] Parent sash not found when adding pane");const s=at(n,{position:t,size:i});return n.id=D(),this.update(),s},removePane(e){const t=this.rootSash.getDescendantParentById(e);if(!t)throw new Error("[bwin] Parent sash not found when removing pane");const i=t.getChildSiblingById(e);t.id=D(),i.children.length===0?(t.domNode=i.domNode,t.domNode.setAttribute("sash-id",t.id),t.children=[]):(t.children=i.children,i.position===r.Left?i.width=t.width:i.position===r.Right?(i.width=t.width,i.left=t.left):i.position===r.Top?i.height=t.height:i.position===r.Bottom&&(i.height=t.height,i.top=t.top)),this.update()}};function T(e){const t=document.createElement("pre");t.style.fontSize="10px";const i=`
|
|
1
|
+
(function(y,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(y=typeof globalThis<"u"?globalThis:y||self,p(y.ReactBinaryWindow={},y.React))})(this,function(y,p){"use strict";var O=Object.defineProperty,k=(e,t,i)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,b=(e,t,i)=>k(e,typeof t!="symbol"?t+"":t,i);function F(e=.7,t=128){const i=256-t,n=Math.floor(Math.random()*i+t),s=Math.floor(Math.random()*i+t),o=Math.floor(Math.random()*i+t),h=Math.max(.5,Math.random()*e);return`rgba(${n}, ${s}, ${o}, ${h})`}function D(e=2,t=3){if(e<0||t<0)throw new Error("Parameters must be non-negative numbers");const i="ABCDEFGHIJKLMNOPQRSTUVWXYZ",n="0123456789";let s="";for(let o=0;o<e;o++){const h=Math.floor(Math.random()*i.length);s+=i[h]}s+="-";for(let o=0;o<t;o++){const h=Math.floor(Math.random()*n.length);s+=n[h]}return s}function N(e,t){for(;t.firstChild;)e.append(t.firstChild)}function _(e,t){const i=document.createElement("div");N(i,e),N(e,t),N(t,i)}function z(e){if(typeof e=="number"&&!isNaN(e))return e;if(typeof e=="string"){const t=e.trim();if(t.endsWith("%")){const i=t.slice(0,-1);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n/100}if(t.endsWith("px")){const i=t.slice(0,-2);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n}return Number(t)}return NaN}function q(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)&&Object.getPrototypeOf(e)===Object.prototype}function U(e,t){for(const i in t){if(Object.hasOwn(e,i))throw new Error(`Key "${i}" already exists in target object`);e[i]=t[i]}return e}function j(e){const t=document.createElement("template");return t.innerHTML=e.trim(),t.content}function C(e){if(e==null||e==="")return null;if(typeof e=="string")try{const t=j(e);return t.childNodes.length===1?t.firstChild:t}catch{return document.createTextNode(e)}return e instanceof Node?e:document.createTextNode(String(e))}function A(e){const t=parseFloat(e.style.left)||0,i=parseFloat(e.style.top)||0,n=parseFloat(e.style.width)||0,s=parseFloat(e.style.height)||0;return{left:t,top:i,width:n,height:s}}const r={Top:"top",Right:"right",Bottom:"bottom",Left:"left",Center:"center",Root:"root",Unknown:"unknown",Outside:"outside"};function X(e){switch(e){case r.Top:return r.Bottom;case r.Right:return r.Left;case r.Bottom:return r.Top;case r.Left:return r.Right;default:throw new Error(`[bwin] Invalid position: ${e}`)}}function Y({width:e,height:t,x:i}){return t/e*i}function K({width:e,height:t,y:i}){return e/t*i}function V({width:e,height:t,x:i}){return t-t/e*i}function Z({width:e,height:t,y:i}){return e-e/t*i}function J(e,{clientX:t,clientY:i}){const n=e.getBoundingClientRect(),{width:s,height:o}=n,h=t-n.left,a=i-n.top;if(h<0||h>s||a<0||a>o)return r.Outside;const d=.3,c=Y({width:s,height:o,x:h}),l=V({width:s,height:o,x:h}),u=K({width:s,height:o,y:a}),g=Z({width:s,height:o,y:a});return h<s*(.5-d/2)&&a>c&&a<l?r.Left:h>s*(.5+d/2)&&a<c&&a>l?r.Right:a<o*(.5-d/2)&&h>u&&h<g?r.Top:a>o*(.5+d/2)&&h<u&&h>g?r.Bottom:h>s*(.5-d/2)&&h<s*(.5+d/2)&&a>o*(.5-d/2)&&a<o*(.5+d/2)?r.Center:r.Unknown}const Q=100,tt=100,E={left:0,top:0,width:150,height:150,minWidth:Q,minHeight:tt};class f{constructor({left:t=E.left,top:i=E.top,width:n=E.width,height:s=E.height,minWidth:o=E.minWidth,minHeight:h=E.minHeight,domNode:a=null,store:d={},position:c,id:l}=E){if(this.id=l??D(),!c)throw new Error("[bwin] Sash position is required");this.position=c,this.domNode=a,this._top=i,this._left=t,this._width=n,this._height=s,this.children=[],this.minWidth=o,this.minHeight=h,this.store=d}walk(t){this.children.forEach(i=>i.walk(t)),t(this)}isLeaf(){return this.children.length===0}isSplit(){return this.children.length>0}isLeftRightSplit(){return this.children.some(t=>t.position===r.Left||t.position===r.Right)}isTopBottomSplit(){return this.children.some(t=>t.position===r.Top||t.position===r.Bottom)}get leftChild(){return this.children.find(t=>t.position===r.Left)}get rightChild(){return this.children.find(t=>t.position===r.Right)}get topChild(){return this.children.find(t=>t.position===r.Top)}get bottomChild(){return this.children.find(t=>t.position===r.Bottom)}getChildren(){let t=null,i=null,n=null,s=null;for(const o of this.children)o.position===r.Left?t=o:o.position===r.Right?i=o:o.position===r.Top?n=o:o.position===r.Bottom&&(s=o);return[n,i,s,t]}getAllLeafDescendants(){const t=[];return this.walk(i=>{i.children.length===0&&t.push(i)}),t}calcMinWidth(){if(this.isLeaf())return this.minWidth;const[t,i,n,s]=this.getChildren();if(s&&i){const o=s.calcMinWidth()+i.calcMinWidth();return Math.max(this.minWidth,o)}if(t&&n){const o=Math.max(t.calcMinWidth(),n.calcMinWidth());return Math.max(this.minWidth,o)}}calcMinHeight(){if(this.isLeaf())return this.minHeight;const[t,i,n,s]=this.getChildren();if(s&&i){const o=Math.max(s.calcMinHeight(),i.calcMinHeight());return Math.max(this.minHeight,o)}if(t&&n){const o=t.calcMinHeight()+n.calcMinHeight();return Math.max(this.minHeight,o)}}getById(t){if(this.id===t)return this;for(const i of this.children){const n=i.getById(t);if(n)return n}return null}getAllIds(){const t=[this.id];for(const i of this.children)t.push(...i.getAllIds());return t}addChild(t){if(this.children.length>=2)throw new Error("[bwin] Maximum 2 children allowed");this.children.push(t)}getDescendantParentById(t){for(const i of this.children){if(i.id===t)return this;const n=i.getDescendantParentById(t);if(n)return n}return null}getChildSiblingById(t){return this.children.find(i=>i.id!==t)}get top(){return this._top}set top(t){const i=t-this._top;this._top=t;const[n,s,o,h]=this.getChildren();n&&o&&(n.top+=i,o.top+=i),h&&s&&(h.top+=i,s.top+=i)}get left(){return this._left}set left(t){const i=t-this._left;this._left=t;const[n,s,o,h]=this.getChildren();h&&s&&(h.left+=i,s.left+=i),n&&o&&(n.left+=i,o.left+=i)}get width(){return this._width}set width(t){const i=t-this._width;this._width=t;const[n,s,o,h]=this.getChildren();if(h&&s){const a=h.width+s.width,d=i*(h.width/a),c=a+i;let l=h.width+d,u=c-l,g=s.left+d;const w=h.calcMinWidth(),m=s.calcMinWidth();l<w&&u>m?(l=w,u=c-l,g=h.left+l):u<m&&l>w&&(u=m,l=c-u,g=h.left+l),h.width=l,s.width=u,s.left=g}n&&o&&(n.width+=i,o.width+=i)}get height(){return this._height}set height(t){const i=t-this._height;this._height=t;const[n,s,o,h]=this.getChildren();if(n&&o){const a=n.height+o.height,d=i*(n.height/a),c=a+i;let l=n.height+d,u=c-l,g=o.top+d;const w=n.calcMinHeight(),m=o.calcMinHeight();l<w&&u>m?(l=w,u=c-l,g=n.top+l):u<m&&l>w&&(u=m,l=c-u,g=n.top+l),n.height=l,o.height=u,o.top=g}h&&s&&(h.height+=i,s.height+=i)}}const L={size:"50%",position:r.Left};class P{constructor({parentRect:t,children:i,siblingConfigNode:n,id:s,minWidth:o,minHeight:h,position:a,size:d,...c}){b(this,"left"),b(this,"top"),b(this,"width"),b(this,"height"),this.parentRect=t,this.children=i,this.siblingConfigNode=n,this.id=s,this.minWidth=o,this.minHeight=h,this.position=this.getPosition(a),this.size=this.getSize(d),this.nonCoreData=c,this.setBounds()}getPosition(t){if(!this.siblingConfigNode)return t;const i=X(this.siblingConfigNode.position);if(!t)return i;if(t!==i)throw new Error("[bwin] Sibling position and current position are not opposite");return t}getSize(t){if(!this.siblingConfigNode)return z(t);if(!t){if(this.siblingConfigNode.size<1)return 1-this.siblingConfigNode.size;if(this.siblingConfigNode.position===r.Left||this.siblingConfigNode.position===r.Right)return this.parentRect.width-this.siblingConfigNode.width;if(this.siblingConfigNode.position===r.Top||this.siblingConfigNode.position===r.Bottom)return this.parentRect.height-this.siblingConfigNode.height}const i=z(t);if(i<1){if(i+this.siblingConfigNode.size!==1)throw new Error("[bwin] Sum of sibling sizes is not equal to 1")}else{if((this.position===r.Left||this.position===r.Right)&&i+this.siblingConfigNode.size!==this.parentRect.width)throw new Error("[bwin] Sum of sibling sizes is not equal to parent width");if((this.position===r.Top||this.position===r.Bottom)&&i+this.siblingConfigNode.size!==this.parentRect.height)throw new Error("[bwin] Sum of sibling sizes is not equal to parent height")}return i}setBounds(){if(this.position===r.Root)this.left=0,this.top=0,this.width=this.parentRect.width,this.height=this.parentRect.height;else if(this.position===r.Left){const t=this.size<1?this.parentRect.width*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top,this.width=t,this.height=this.parentRect.height}else if(this.position===r.Right){const t=this.size<1?this.parentRect.width*this.size:this.size;this.left=this.parentRect.left+this.parentRect.width-t,this.top=this.parentRect.top,this.width=t,this.height=this.parentRect.height}else if(this.position===r.Top){const t=this.size<1?this.parentRect.height*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top,this.width=this.parentRect.width,this.height=t}else if(this.position===r.Bottom){const t=this.size<1?this.parentRect.height*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top+this.parentRect.height-t,this.width=this.parentRect.width,this.height=t}}createSash(){return new f({left:this.left,top:this.top,width:this.width,height:this.height,position:this.position,id:this.id,minWidth:this.minWidth,minHeight:this.minHeight,store:this.nonCoreData})}normConfig(t){if(q(t))return t;if(Array.isArray(t))return{children:t};if(typeof t=="string"||typeof t=="number"){const i=z(t);if(isNaN(i))throw new Error(`[bwin] Invalid size value: ${i}`);return{size:t}}else{if(t==null)return{};throw new Error(`[bwin] Invalid config value: ${t}`)}}createPrimaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...a}){return new P({parentRect:this,size:t??L.size,position:i??L.position,children:n,id:s,minWidth:o,minHeight:h,...a})}createSecondaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...a},d){return new P({parentRect:this,size:t,position:i,children:n,siblingConfigNode:d,id:s,minWidth:o,minHeight:h,...a})}buildSashTree(){const t=this.createSash();if(!Array.isArray(this.children)||this.children.length===0)return t;const i=this.normConfig(this.children[0]),n=this.normConfig(this.children.at(1));let s,o;return!i.size&&!i.position&&n?(n.position||(n.position=r.Right),s=this.createPrimaryConfigNode(n),o=this.createSecondaryConfigNode(i,s)):(s=this.createPrimaryConfigNode(i),o=this.createSecondaryConfigNode(n,s)),s&&o&&(t.children.push(s.buildSashTree()),t.children.push(o.buildSashTree())),t}}const R={width:333,height:333},$={fitContainer:!1};class et extends P{constructor({id:t,children:i,width:n=R.width,height:s=R.height,fitContainer:o=$.fitContainer,...h}={...R,...$}){super({id:t,children:i,size:NaN,position:r.Root,parentRect:{width:n,height:s},...h}),this.fitContainer=o}}class it extends f{constructor(t=E){super({...t,position:r.Root}),Object.assign(this,$)}}function S(e){const t=document.createElement("bw-pane");return t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.width=`${e.width}px`,t.style.height=`${e.height}px`,t.setAttribute("sash-id",e.id),t.setAttribute("position",e.position),t}function nt(e){const t=e.domNode;return t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.width=`${e.width}px`,t.style.height=`${e.height}px`,t.setAttribute("position",e.position),t}function st(e,{size:t}){const i=z(t);let n=e.width/2;i&&(i<1?n=e.width*i:n=i);const s=new f({top:e.top,left:e.left,width:n,height:e.height,position:r.Left}),o=new f({top:e.top,left:e.left+s.width,width:e.width-n,height:e.height,position:r.Right}),h=S(o);return o.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),s}function ot(e,{size:t}){const i=z(t);let n=e.width/2;i&&(i<1?n=e.width*i:n=i);const s=new f({left:e.left,top:e.top,width:e.width-n,height:e.height,position:r.Left}),o=new f({left:e.left+s.width,top:e.top,width:n,height:e.height,position:r.Right}),h=S(s);return s.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),o}function ht(e,{size:t}){const i=z(t);let n=e.height/2;i&&(i<1?n=e.height*i:n=i);const s=new f({left:e.left,top:e.top,width:e.width,height:n,position:r.Top}),o=new f({left:e.left,top:e.top+s.height,width:e.width,height:e.height-n,position:r.Bottom}),h=S(o);return o.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),s}function rt(e,{size:t}){const i=z(t);let n=e.height/2;i&&(i<1?n=e.height*i:n=i);const s=new f({top:e.top,left:e.left,width:e.width,height:e.height-n,position:r.Top}),o=new f({top:e.top+s.height,left:e.left,width:e.width,height:n,position:r.Bottom}),h=S(s);return s.domNode=h,N(h,e.domNode),e.addChild(s),e.addChild(o),o}function at(e,{position:t,size:i,minWidth:n,minHeight:s}){if(t===r.Left)return st(e,{size:i});if(t===r.Right)return ot(e,{size:i});if(t===r.Top)return ht(e,{size:i});if(t===r.Bottom)return rt(e,{size:i})}const lt={createPane(e){const t=S(e);return e.store.droppable===!1&&t.setAttribute("can-drop","false"),t},onPaneCreate(e,t){t.store.content&&e.append(C(t.store.content)),this!=null&&this.debug&&(e.style.backgroundColor=F(),e.innerHTML="",e.append(T(e)))},updatePane(e){return nt(e)},onPaneUpdate(e,t){this!=null&&this.debug&&(e.innerHTML="",e.append(T(e)))},addPane(e,{position:t,size:i}){if(!t)throw new Error("[bwin] Position is required when adding pane");const n=this.rootSash.getById(e);if(!n)throw new Error("[bwin] Parent sash not found when adding pane");const s=at(n,{position:t,size:i});return n.id=D(),this.update(),s},removePane(e){const t=this.rootSash.getDescendantParentById(e);if(!t)throw new Error("[bwin] Parent sash not found when removing pane");const i=t.getChildSiblingById(e);t.id=D(),i.children.length===0?(t.domNode=i.domNode,t.domNode.setAttribute("sash-id",t.id),t.children=[]):(t.children=i.children,i.position===r.Left?i.width=t.width:i.position===r.Right?(i.width=t.width,i.left=t.left):i.position===r.Top?i.height=t.height:i.position===r.Bottom&&(i.height=t.height,i.top=t.top)),this.update()}};function T(e){const t=document.createElement("pre");t.style.fontSize="10px";const i=`
|
|
2
2
|
${e.getAttribute("sash-id")}
|
|
3
3
|
${e.getAttribute("position")}
|
|
4
4
|
top: ${e.style.top}
|
|
5
5
|
left: ${e.style.left}
|
|
6
6
|
width: ${e.style.width}
|
|
7
7
|
height: ${e.style.height}
|
|
8
|
-
`;return t.innerHTML=i.trim(),t}const dt={createWindow(){const e=document.createElement("bw-window");return e.style.width=`${this.rootSash.width}px`,e.style.height=`${this.rootSash.height}px`,e.setAttribute("sash-id",this.rootSash.id),e},glaze(){this.rootSash.walk(e=>{let t=null;e.children.length>0?(t=this.createMuntin(e),this.onMuntinCreate(t,e),this.windowElement.append(t)):(t=this.createPane(e),this.onPaneCreate(t,e),this.windowElement.prepend(t)),e.domNode=t})},update(){this.windowElement.style.width=`${this.rootSash.width}px`,this.windowElement.style.height=`${this.rootSash.height}px`;const e=this.rootSash.getAllIds(),t=[];this.windowElement.querySelectorAll("[sash-id]").forEach(i=>{const n=i.getAttribute("sash-id");t.push(n),e.includes(n)||i.remove()}),this.rootSash.walk(i=>{i.children.length>0?t.includes(i.id)?(this.updateMuntin(i),this.onMuntinUpdate(i.domNode,i)):(i.domNode=this.createMuntin(i),this.windowElement.append(i.domNode)):t.includes(i.id)?(this.updatePane(i),this.onPaneUpdate(i.domNode,i)):(i.domNode||(i.domNode=this.createPane(i)),this.windowElement.prepend(i.domNode))})}},ct={muntinSize:4,createMuntin(e){const t=document.createElement("bw-muntin"),i=e.leftChild,n=e.topChild;return i?(t.style.width=`${this.muntinSize}px`,t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`,t.setAttribute("vertical","")):n&&(t.style.width=`${e.width}px`,t.style.height=`${this.muntinSize}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`,t.setAttribute("horizontal","")),t.setAttribute("sash-id",e.id),e.store.resizable===!1&&t.setAttribute("resizable","false"),t},onMuntinCreate(e,t){},updateMuntin(e){const t=e.domNode,i=e.leftChild,n=e.topChild;i?(t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`):n&&(t.style.width=`${e.width}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`)},onMuntinUpdate(e,t){}},pt={fitContainer:!1,enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&(this.rootSash.width=t.contentRect.width,this.rootSash.height=t.contentRect.height,this.update())}).observe(this.containerElement)}},ut={activeMuntinSash:null,isResizeStarted:!1,isDropStarted:!1,lastX:0,lastY:0,applyResizeStyles(){this.activeMuntinSash.domNode.hasAttribute("vertical")?document.body.classList.add("body--bw-resize-x"):this.activeMuntinSash.domNode.hasAttribute("horizontal")&&document.body.classList.add("body--bw-resize-y")},revertResizeStyles(){document.body.classList.remove("body--bw-resize-x"),document.body.classList.remove("body--bw-resize-y")},enableResize(){document.addEventListener("mousedown",e=>{if(e.target.tagName!=="BW-MUNTIN"||e.target.getAttribute("resizable")==="false")return;const t=e.target.getAttribute("sash-id");this.activeMuntinSash=this.rootSash.getById(t),this.activeMuntinSash&&(this.isResizeStarted=!0,this.lastX=e.pageX,this.lastY=e.pageY,this.applyResizeStyles())}),document.addEventListener("mousemove",e=>{if(!this.isResizeStarted||!this.activeMuntinSash)return;const[t,i,n,s]=this.activeMuntinSash.getChildren(),o=this.activeMuntinSash.isLeftRightSplit(),h=this.activeMuntinSash.isTopBottomSplit();if(o&&s&&i){const a=e.pageX-this.lastX,d=s.width+a,l=i.width-a;if(d<=s.calcMinWidth()||l<=i.calcMinWidth())return;s.width=d,i.width=l,i.left=i.left+a,this.update(),this.lastX=e.pageX}else if(h&&t&&n){const a=e.pageY-this.lastY,d=t.height+a,l=n.height-a;if(d<=t.calcMinHeight()||l<=n.calcMinHeight())return;t.height=d,n.height=l,n.top=n.top+a,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},gt={activeDropPaneEl:null,onPaneDrop(e,t){},enableDrop(){this.windowElement.addEventListener("dragover",e=>{e.preventDefault();const t=e.target.matches("bw-pane")?e.target:e.target.closest("bw-pane");if(!t||(t!==this.activeDropPaneEl&&(this.activeDropPaneEl&&this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=t),t.getAttribute("can-drop")==="false"))return;const i=J(t,e);t.setAttribute("drop-area",i)}),this.windowElement.addEventListener("dragleave",e=>{e.currentTarget.contains(e.relatedTarget)&&e.currentTarget!==e.relatedTarget||this.activeDropPaneEl&&(this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null)}),this.windowElement.addEventListener("drop",e=>{if(!this.activeDropPaneEl||this.activeDropPaneEl.getAttribute("can-drop")==="false")return;const t=this.activeDropPaneEl.getAttribute("sash-id"),i=this.rootSash.getById(t);this.onPaneDrop(e,i),typeof i.store.onDrop=="function"&&i.store.onDrop(e,i),this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null})}},ft=!1;class W{constructor(t){b(this,"windowElement",null),b(this,"containerElement",null),b(this,"debug",ft);let i=null;t instanceof it?(i=t,this.rootSash=t):(i=new et(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}frame(t){this.containerElement=t,this.windowElement=this.createWindow(),this.glaze(),this.containerElement.append(this.windowElement)}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){this.frame(t),this.enableFeatures()}static assemble(...t){t.forEach(i=>{U(this.prototype,i)})}}W.assemble(dt,ct,lt,pt,gt,ut);function H(e){if(e.tagName==="BW-PANE")return e.getAttribute("sash-id");const t=e.closest("bw-pane");if(!t)throw new Error("[bwin] Pane element not found");return t.getAttribute("sash-id")}const wt={label:"",className:"bw-glass-action--close",onClick:(e,t)=>{const i=H(e.target);t.removePane(i)}},mt={label:"",className:"bw-glass-action--minimize",onClick:(e,t)=>{const i=t.sillElement;if(!i)throw new Error("[bwin] Sill element not found when minimizing");const n=C('<button class="bw-minimized-glass" />');i.append(n);const s=e.target.closest("bw-pane"),o=e.target.closest("bw-glass"),h=s.getAttribute("sash-id"),a=s.getAttribute("position");n.bwGlassElement=o,n.bwOriginalPosition=a,n.bwOriginalBoundingRect=M(s),t.removePane(h)}},bt={label:"",className:"bw-glass-action--maximize",onClick:e=>{const t=e.target.closest("bw-pane");t.hasAttribute("maximized")?(t.removeAttribute("maximized"),t.style.left=`${t.bwOriginalBoundingRect.left}px`,t.style.top=`${t.bwOriginalBoundingRect.top}px`,t.style.width=`${t.bwOriginalBoundingRect.width}px`,t.style.height=`${t.bwOriginalBoundingRect.height}px`):(t.setAttribute("maximized",""),t.bwOriginalBoundingRect=M(t),t.style.left="0",t.style.top="0",t.style.width="100%",t.style.height="100%")}};function yt(e,t){const i=e.left+e.width,n=e.top+e.height,s=t.left+t.width,o=t.top+t.height;if(e.left>=s||t.left>=i||e.top>=o||t.top>=n)return null;const h=Math.max(e.left,t.left),a=Math.max(e.top,t.top),d=Math.min(i,s),l=Math.min(n,o);return{left:h,top:a,width:d-h,height:l-a}}const B=[mt,bt,wt],Et={enableActions(){this.handleMinimizedGlassClick(),this.observeActionButtons()},restoreGlass(e){const t=e.bwOriginalBoundingRect;let i=0,n=null;if(this.windowElement.querySelectorAll("bw-pane").forEach(s=>{const o=M(s),h=yt(t,o);if(h){const a=h.width*h.height;a>i&&(i=a,n=s)}}),n){const s=e.bwOriginalPosition,o=M(n);let h=0;if(s===r.Left||s===r.Right)h=t.width>=o.width?o.width/2:t.width;else if(s===r.Top||s===r.Bottom)h=t.height>=o.height?o.height/2:t.height;else throw new Error("[bwin] Invalid position when restoring glass");this.addPane(n.getAttribute("sash-id"),{position:s,size:h}).domNode.append(e.bwGlassElement)}},handleMinimizedGlassClick(){this.sillElement.addEventListener("click",e=>{if(!e.target.matches(".bw-minimized-glass"))return;const t=e.target;this.restoreGlass(t),t.remove()})},updateDisabledStateOfActionButtons(){this.updateDisabledState(".bw-glass-action--close"),this.updateDisabledState(".bw-glass-action--minimize"),this.updateDisabledState(".bw-glass-action--maximize")},updateDisabledState(e){if(this.windowElement.querySelectorAll("bw-pane").length===1){const t=this.windowElement.querySelector(e);t&&t.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(t=>{t.removeAttribute("disabled")})},observeActionButtons(){this.updateDisabledStateOfActionButtons(),new MutationObserver(e=>{e.forEach(t=>{t.type==="childList"&&this.updateDisabledStateOfActionButtons()})}).observe(this.windowElement,{childList:!0})}},A={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class G{constructor({title:t=A.title,content:i=A.content,tabs:n=A.tabs,actions:s=A.actions,draggable:o=A.draggable,sash:h,binaryWindow:a}){b(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=s,this.sash=h,this.draggable=o,this.binaryWindow=a,this.build()}build(){const t=document.createElement("bw-glass-header");if(Array.isArray(this.tabs)&&this.tabs.length>0)t.append(this.createTabs());else if(this.title){const s=document.createElement("bw-glass-title");s.append(C(this.title)),t.append(s)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=C(this.content);n&&i.append(n),this.domNode=document.createElement("bw-glass"),this.domNode.append(t,i)}createTabs(){const t=document.createElement("bw-glass-tab-container");for(const i of this.tabs){const n=(i==null?void 0:i.label)??i,s=C(`<button class="bw-glass-tab">${n}</button>`);t.append(s)}return t}createActions(){const t=document.createElement("bw-glass-action-container"),i=this.actions===void 0?B:Array.isArray(this.actions)?this.actions:[];for(const n of i){const s=(n==null?void 0:n.label)??n,o=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",h=C(`<button class="${o}">${s}</button>`);typeof n.onClick=="function"&&h.addEventListener("click",a=>{n.onClick(a,this.binaryWindow)}),t.append(h)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const vt={activeDragGlassEl:null,activeDragGlassPaneCanDrop:!1,onPaneDrop(e,t){if(!this.activeDragGlassEl)return;const i=this.activeDropPaneEl.getAttribute("drop-area");if(i==="center"){const n=this.activeDragGlassEl.closest("bw-pane"),s=this.activeDropPaneEl.getAttribute("can-drop")!=="false";_(n,this.activeDropPaneEl),n.setAttribute("can-drop",s);return}else{const n=H(this.activeDragGlassEl);this.addPane(t.id,{position:i}).domNode.append(this.activeDragGlassEl),this.removePane(n)}},enableDrag(){document.addEventListener("mousedown",e=>{if(e.button!==0||!e.target.matches("bw-glass-header"))return;if(e.target.getAttribute("can-drag")==="false"){e.preventDefault();return}const t=e.target.closest("bw-glass");t.setAttribute("draggable",!0),this.activeDragGlassEl=t}),document.addEventListener("mouseup",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl=null)}),this.windowElement.addEventListener("dragstart",e=>{if(!(e.target instanceof HTMLElement)||!e.target.matches("bw-glass")||!this.activeDragGlassEl)return;e.dataTransfer.effectAllowed="move";const t=this.activeDragGlassEl.closest("bw-pane");this.activeDragGlassPaneCanDrop=t.getAttribute("can-drop")!=="false",t.setAttribute("can-drop",!1)}),this.windowElement.addEventListener("dragend",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop",this.activeDragGlassPaneCanDrop),this.activeDragGlassEl=null)})}},Nt={trimMuntin(e){e.hasAttribute("vertical")?(e.style.top=`${parseFloat(e.style.top)+this.muntinSize/2}px`,e.style.height=`${parseFloat(e.style.height)-this.muntinSize}px`):e.hasAttribute("horizontal")&&(e.style.left=`${parseFloat(e.style.left)+this.muntinSize/2}px`,e.style.width=`${parseFloat(e.style.width)-this.muntinSize}px`)},onMuntinCreate(e){this.trimMuntin(e)},onMuntinUpdate(e){this.trimMuntin(e)}};class O extends W{constructor(){super(...arguments),b(this,"sillElement",null)}frame(){super.frame(...arguments);const t=C("<bw-sill />");this.windowElement.append(t),this.sillElement=t}enableFeatures(){super.enableFeatures(),this.enableDrag(),this.enableActions()}onPaneCreate(t,i){const n=new G({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addGlass(t,i,n){const s=this.addPane(t,{position:i}),o=new G({...n,sash:s,binaryWindow:this});s.domNode.append(o.domNode)}removeGlass(t,i){if(i)this.removePane(t);else{const n=this.rootSash.getById(t);if(!n)throw new Error("[bwin] Pane not found when removing glass");const s=n.domNode.querySelector("bw-glass");s&&s.remove()}}}O.assemble(vt,Nt,Et);const v=4;function zt({sash:e}){var c;const t=p.useRef(),i=e.leftChild,n=e.topChild;let s,o,h,a,d,l;return i?(s=v,o=e.height-v,h=e.top+v/2,a=e.left+i.width-v/2,d=!0):n&&(s=e.width-v,o=v,h=e.top+n.height-v/2,a=e.left+v/2,l=!0),p.useEffect(()=>{e.domNode=t.current},[]),p.createElement("bw-muntin",{"sash-id":e.id,style:{width:s,height:o,top:h,left:a},vertical:d,horizontal:l,resizable:((c=e.store)==null?void 0:c.resizable)===!1?"false":"true",ref:t})}function Ct({sash:e,bwin:t}){var c,u,g,w,m;const i=p.useRef(),{left:n,top:s,width:o,height:h,id:a,position:d}=e;p.useEffect(()=>{e.domNode=i.current},[]);const l=((c=e.store)==null?void 0:c.actions)===void 0?B:Array.isArray(e.store.actions)?e.store.actions:[];return p.createElement("bw-pane",{"sash-id":a,position:d,style:{left:n,top:s,width:o,height:h},"can-drop":((u=e.store)==null?void 0:u.droppable)===!1?"false":"true",ref:i},p.createElement("bw-glass",null,p.createElement("bw-glass-header",{"can-drag":((g=e.store)==null?void 0:g.draggable)===!1?"false":"true"},((w=e.store)==null?void 0:w.title)&&p.createElement("bw-glass-title",null,e.store.title),l.length>0&&p.createElement("bw-glass-action-container",null,l.map((x,At)=>{const Mt=x.className?`bw-glass-action ${x.className}`:"bw-glass-action";return p.createElement("button",{className:Mt,key:At,onClick:Pt=>x.onClick(Pt,t)},x.label)}))),p.createElement("bw-glass-content",null,(m=e.store)==null?void 0:m.content)))}function St(e){const t=p.useRef(),i=p.useRef(),{panes:n,...s}=e,o={children:n,...s},h=new O(o),a=[],d=[];return h.rootSash.walk(l=>{l.children.length>0?a.push(l):d.push(l)}),p.useEffect(()=>{const l=t.current;l!=null&&l.parentElement&&(h.windowElement=l,h.containerElement=l.parentElement,h.sillElement=i.current,h.enableFeatures())},[]),p.createElement("bw-window",{"sash-id":h.rootSash.id,style:{width:h.rootSash.width,height:h.rootSash.height},ref:t},d.map(l=>p.createElement(Ct,{key:l.id,sash:l,bwin:h})),a.map(l=>p.createElement(zt,{key:l.id,sash:l})),p.createElement("bw-sill",{ref:i}))}y.BUILTIN_ACTIONS=B,y.Window=St,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
|
|
8
|
+
`;return t.innerHTML=i.trim(),t}const dt={createWindow(){const e=document.createElement("bw-window");return e.style.width=`${this.rootSash.width}px`,e.style.height=`${this.rootSash.height}px`,e.setAttribute("sash-id",this.rootSash.id),e},glaze(){this.rootSash.walk(e=>{let t=null;e.children.length>0?(t=this.createMuntin(e),this.onMuntinCreate(t,e),this.windowElement.append(t)):(t=this.createPane(e),this.onPaneCreate(t,e),this.windowElement.prepend(t)),e.domNode=t})},update(){this.windowElement.style.width=`${this.rootSash.width}px`,this.windowElement.style.height=`${this.rootSash.height}px`;const e=this.rootSash.getAllIds(),t=[];this.windowElement.querySelectorAll("[sash-id]").forEach(i=>{const n=i.getAttribute("sash-id");t.push(n),e.includes(n)||i.remove()}),this.rootSash.walk(i=>{i.children.length>0?t.includes(i.id)?(this.updateMuntin(i),this.onMuntinUpdate(i.domNode,i)):(i.domNode=this.createMuntin(i),this.windowElement.append(i.domNode)):t.includes(i.id)?(this.updatePane(i),this.onPaneUpdate(i.domNode,i)):(i.domNode||(i.domNode=this.createPane(i)),this.windowElement.prepend(i.domNode))})}},ct={muntinSize:4,createMuntin(e){const t=document.createElement("bw-muntin"),i=e.leftChild,n=e.topChild;return i?(t.style.width=`${this.muntinSize}px`,t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`,t.setAttribute("vertical","")):n&&(t.style.width=`${e.width}px`,t.style.height=`${this.muntinSize}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`,t.setAttribute("horizontal","")),t.setAttribute("sash-id",e.id),e.store.resizable===!1&&t.setAttribute("resizable","false"),t},onMuntinCreate(e,t){},updateMuntin(e){const t=e.domNode,i=e.leftChild,n=e.topChild;i?(t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`):n&&(t.style.width=`${e.width}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`)},onMuntinUpdate(e,t){}},pt={fitContainer:!1,fit(){this.rootSash.width=this.containerElement.clientWidth,this.rootSash.height=this.containerElement.clientHeight,this.update()},enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&this.fit()}).observe(this.containerElement)}},ut={activeMuntinSash:null,isResizeStarted:!1,isDropStarted:!1,lastX:0,lastY:0,applyResizeStyles(){this.activeMuntinSash.domNode.hasAttribute("vertical")?document.body.classList.add("body--bw-resize-x"):this.activeMuntinSash.domNode.hasAttribute("horizontal")&&document.body.classList.add("body--bw-resize-y")},revertResizeStyles(){document.body.classList.remove("body--bw-resize-x"),document.body.classList.remove("body--bw-resize-y")},enableResize(){document.addEventListener("mousedown",e=>{if(e.target.tagName!=="BW-MUNTIN"||e.target.getAttribute("resizable")==="false")return;const t=e.target.getAttribute("sash-id");this.activeMuntinSash=this.rootSash.getById(t),this.activeMuntinSash&&(this.isResizeStarted=!0,this.lastX=e.pageX,this.lastY=e.pageY,this.applyResizeStyles())}),document.addEventListener("mousemove",e=>{if(!this.isResizeStarted||!this.activeMuntinSash)return;const[t,i,n,s]=this.activeMuntinSash.getChildren(),o=this.activeMuntinSash.isLeftRightSplit(),h=this.activeMuntinSash.isTopBottomSplit();if(o&&s&&i){const a=e.pageX-this.lastX,d=s.width+a,c=i.width-a;if(d<=s.calcMinWidth()||c<=i.calcMinWidth())return;s.width=d,i.width=c,i.left=i.left+a,this.update(),this.lastX=e.pageX}else if(h&&t&&n){const a=e.pageY-this.lastY,d=t.height+a,c=n.height-a;if(d<=t.calcMinHeight()||c<=n.calcMinHeight())return;t.height=d,n.height=c,n.top=n.top+a,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},gt={activeDropPaneEl:null,onPaneDrop(e,t){},enableDrop(){this.windowElement.addEventListener("dragover",e=>{e.preventDefault();const t=e.target.matches("bw-pane")?e.target:e.target.closest("bw-pane");if(!t||(t!==this.activeDropPaneEl&&(this.activeDropPaneEl&&this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=t),t.getAttribute("can-drop")==="false"))return;const i=J(t,e);t.setAttribute("drop-area",i)}),this.windowElement.addEventListener("dragleave",e=>{e.currentTarget.contains(e.relatedTarget)&&e.currentTarget!==e.relatedTarget||this.activeDropPaneEl&&(this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null)}),this.windowElement.addEventListener("drop",e=>{if(!this.activeDropPaneEl||this.activeDropPaneEl.getAttribute("can-drop")==="false")return;const t=this.activeDropPaneEl.getAttribute("sash-id"),i=this.rootSash.getById(t);this.onPaneDrop(e,i),typeof i.store.onDrop=="function"&&i.store.onDrop(e,i),this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null})}},ft=!0;class W{constructor(t){b(this,"windowElement",null),b(this,"containerElement",null),b(this,"debug",ft);let i=null;t instanceof it?(i=t,this.rootSash=t):(i=new et(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}frame(t){this.containerElement=t,this.windowElement=this.createWindow(),this.glaze(),this.containerElement.append(this.windowElement)}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){this.frame(t),this.enableFeatures()}static assemble(...t){t.forEach(i=>{U(this.prototype,i)})}}W.assemble(dt,ct,lt,pt,gt,ut);function H(e){if(e.tagName==="BW-PANE")return e.getAttribute("sash-id");const t=e.closest("bw-pane");if(!t)throw new Error("[bwin] Pane element not found");return t.getAttribute("sash-id")}const wt={label:"",className:"bw-glass-action--close",onClick:(e,t)=>{const i=H(e.target);t.removePane(i)}},mt={label:"",className:"bw-glass-action--minimize",onClick:(e,t)=>{const i=t.sillElement;if(!i)throw new Error("[bwin] Sill element not found when minimizing");const n=C('<button class="bw-minimized-glass" />');i.append(n);const s=e.target.closest("bw-pane"),o=e.target.closest("bw-glass"),h=s.getAttribute("sash-id"),a=s.getAttribute("position");n.bwGlassElement=o,n.bwOriginalPosition=a,n.bwOriginalBoundingRect=A(s),t.removePane(h)}},bt={label:"",className:"bw-glass-action--maximize",onClick:e=>{const t=e.target.closest("bw-pane");t.hasAttribute("maximized")?(t.removeAttribute("maximized"),t.style.left=`${t.bwOriginalBoundingRect.left}px`,t.style.top=`${t.bwOriginalBoundingRect.top}px`,t.style.width=`${t.bwOriginalBoundingRect.width}px`,t.style.height=`${t.bwOriginalBoundingRect.height}px`):(t.setAttribute("maximized",""),t.bwOriginalBoundingRect=A(t),t.style.left="0",t.style.top="0",t.style.width="100%",t.style.height="100%")}};function yt(e,t){const i=e.left+e.width,n=e.top+e.height,s=t.left+t.width,o=t.top+t.height;if(e.left>=s||t.left>=i||e.top>=o||t.top>=n)return null;const h=Math.max(e.left,t.left),a=Math.max(e.top,t.top),d=Math.min(i,s),c=Math.min(n,o);return{left:h,top:a,width:d-h,height:c-a}}const B=[mt,bt,wt],Et={enableActions(){this.handleMinimizedGlassClick(),this.observeActionButtons()},restoreGlass(e){const t=e.bwOriginalBoundingRect;let i=0,n=null;if(this.windowElement.querySelectorAll("bw-pane").forEach(s=>{const o=A(s),h=yt(t,o);if(h){const a=h.width*h.height;a>i&&(i=a,n=s)}}),n){const s=e.bwOriginalPosition,o=A(n);let h=0;if(s===r.Left||s===r.Right)h=t.width>=o.width?o.width/2:t.width;else if(s===r.Top||s===r.Bottom)h=t.height>=o.height?o.height/2:t.height;else throw new Error("[bwin] Invalid position when restoring glass");this.addPane(n.getAttribute("sash-id"),{position:s,size:h}).domNode.append(e.bwGlassElement)}},handleMinimizedGlassClick(){this.sillElement.addEventListener("click",e=>{if(!e.target.matches(".bw-minimized-glass"))return;const t=e.target;this.restoreGlass(t),t.remove()})},updateDisabledStateOfActionButtons(){this.updateDisabledState(".bw-glass-action--close"),this.updateDisabledState(".bw-glass-action--minimize"),this.updateDisabledState(".bw-glass-action--maximize")},updateDisabledState(e){if(this.windowElement.querySelectorAll("bw-pane").length===1){const t=this.windowElement.querySelector(e);t&&t.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(t=>{t.removeAttribute("disabled")})},observeActionButtons(){this.updateDisabledStateOfActionButtons(),new MutationObserver(e=>{e.forEach(t=>{t.type==="childList"&&this.updateDisabledStateOfActionButtons()})}).observe(this.windowElement,{childList:!0})}},M={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class G{constructor({title:t=M.title,content:i=M.content,tabs:n=M.tabs,actions:s=M.actions,draggable:o=M.draggable,sash:h,binaryWindow:a}){b(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=s,this.sash=h,this.draggable=o,this.binaryWindow=a,this.build()}build(){const t=document.createElement("bw-glass-header");if(Array.isArray(this.tabs)&&this.tabs.length>0)t.append(this.createTabs());else if(this.title){const s=document.createElement("bw-glass-title");s.append(C(this.title)),t.append(s)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=C(this.content);n&&i.append(n),this.domNode=document.createElement("bw-glass"),this.domNode.append(t,i)}createTabs(){const t=document.createElement("bw-glass-tab-container");for(const i of this.tabs){const n=(i==null?void 0:i.label)??i,s=C(`<button class="bw-glass-tab">${n}</button>`);t.append(s)}return t}createActions(){const t=document.createElement("bw-glass-action-container"),i=this.actions===void 0?B:Array.isArray(this.actions)?this.actions:[];for(const n of i){const s=(n==null?void 0:n.label)??n,o=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",h=C(`<button class="${o}">${s}</button>`);typeof n.onClick=="function"&&h.addEventListener("click",a=>{n.onClick(a,this.binaryWindow)}),t.append(h)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const vt={activeDragGlassEl:null,activeDragGlassPaneCanDrop:!1,onPaneDrop(e,t){if(!this.activeDragGlassEl)return;const i=this.activeDropPaneEl.getAttribute("drop-area");if(i==="center"){const n=this.activeDragGlassEl.closest("bw-pane"),s=this.activeDropPaneEl.getAttribute("can-drop")!=="false";_(n,this.activeDropPaneEl),n.setAttribute("can-drop",s);return}else{const n=H(this.activeDragGlassEl);this.addPane(t.id,{position:i}).domNode.append(this.activeDragGlassEl),this.removePane(n)}},enableDrag(){document.addEventListener("mousedown",e=>{if(e.button!==0||!e.target.matches("bw-glass-header"))return;if(e.target.getAttribute("can-drag")==="false"){e.preventDefault();return}const t=e.target.closest("bw-glass");t.setAttribute("draggable",!0),this.activeDragGlassEl=t}),document.addEventListener("mouseup",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl=null)}),this.windowElement.addEventListener("dragstart",e=>{if(!(e.target instanceof HTMLElement)||!e.target.matches("bw-glass")||!this.activeDragGlassEl)return;e.dataTransfer.effectAllowed="move";const t=this.activeDragGlassEl.closest("bw-pane");this.activeDragGlassPaneCanDrop=t.getAttribute("can-drop")!=="false",t.setAttribute("can-drop",!1)}),this.windowElement.addEventListener("dragend",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop",this.activeDragGlassPaneCanDrop),this.activeDragGlassEl=null)})}},Nt={trimMuntin(e){e.hasAttribute("vertical")?(e.style.top=`${parseFloat(e.style.top)+this.muntinSize/2}px`,e.style.height=`${parseFloat(e.style.height)-this.muntinSize}px`):e.hasAttribute("horizontal")&&(e.style.left=`${parseFloat(e.style.left)+this.muntinSize/2}px`,e.style.width=`${parseFloat(e.style.width)-this.muntinSize}px`)},onMuntinCreate(e){this.trimMuntin(e)},onMuntinUpdate(e){this.trimMuntin(e)}};class I extends W{constructor(){super(...arguments),b(this,"sillElement",null)}frame(){super.frame(...arguments);const t=C("<bw-sill />");this.windowElement.append(t),this.sillElement=t}enableFeatures(){super.enableFeatures(),this.enableDrag(),this.enableActions()}onPaneCreate(t,i){const n=new G({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addGlass(t,i,n){const s=this.addPane(t,{position:i}),o=new G({...n,sash:s,binaryWindow:this});s.domNode.append(o.domNode)}removeGlass(t,i){if(i)this.removePane(t);else{const n=this.rootSash.getById(t);if(!n)throw new Error("[bwin] Pane not found when removing glass");const s=n.domNode.querySelector("bw-glass");s&&s.remove()}}}I.assemble(vt,Nt,Et);const v=4;function zt({sash:e}){var l;const t=p.useRef(),i=e.leftChild,n=e.topChild;let s,o,h,a,d,c;return i?(s=v,o=e.height-v,h=e.top+v/2,a=e.left+i.width-v/2,d=!0):n&&(s=e.width-v,o=v,h=e.top+n.height-v/2,a=e.left+v/2,c=!0),p.useEffect(()=>{e.domNode=t.current},[]),p.createElement("bw-muntin",{"sash-id":e.id,style:{width:s,height:o,top:h,left:a},vertical:d,horizontal:c,resizable:((l=e.store)==null?void 0:l.resizable)===!1?"false":"true",ref:t})}function Ct({sash:e,bwin:t}){var l,u,g,w,m;const i=p.useRef(),{left:n,top:s,width:o,height:h,id:a,position:d}=e;p.useEffect(()=>{e.domNode=i.current},[]);const c=((l=e.store)==null?void 0:l.actions)===void 0?B:Array.isArray(e.store.actions)?e.store.actions:[];return p.createElement("bw-pane",{"sash-id":a,position:d,style:{left:n,top:s,width:o,height:h},"can-drop":((u=e.store)==null?void 0:u.droppable)===!1?"false":"true",ref:i},p.createElement("bw-glass",null,p.createElement("bw-glass-header",{"can-drag":((g=e.store)==null?void 0:g.draggable)===!1?"false":"true"},((w=e.store)==null?void 0:w.title)&&p.createElement("bw-glass-title",null,e.store.title),c.length>0&&p.createElement("bw-glass-action-container",null,c.map((x,Mt)=>{const At=x.className?`bw-glass-action ${x.className}`:"bw-glass-action";return p.createElement("button",{className:At,key:Mt,onClick:Pt=>x.onClick(Pt,t)},x.label)}))),p.createElement("bw-glass-content",null,(m=e.store)==null?void 0:m.content)))}const St=p.forwardRef((e,t)=>{const i=p.useRef(),n=p.useRef(),{panes:s,...o}=e,h={...o,children:s},a=new I(h),d=[],c=[];return a.rootSash.walk(l=>{l.children.length>0?d.push(l):c.push(l)}),p.useEffect(()=>{const l=i.current;l!=null&&l.parentElement&&(a.windowElement=l,a.containerElement=l.parentElement,a.sillElement=n.current,a.enableFeatures())},[]),p.useImperativeHandle(t,()=>({binaryWindow:a}),[]),p.createElement("bw-window",{"sash-id":a.rootSash.id,style:{width:a.rootSash.width,height:a.rootSash.height},ref:i},c.map(l=>p.createElement(Ct,{key:l.id,sash:l,bwin:a})),d.map(l=>p.createElement(zt,{key:l.id,sash:l})),p.createElement("bw-sill",{ref:n}))});y.BUILTIN_ACTIONS=B,y.Window=St,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-bwin",
|
|
3
3
|
"description": "A tiling window manager in React based on Binary Window library",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -45,10 +45,11 @@
|
|
|
45
45
|
"@types/react": "^16.14.62",
|
|
46
46
|
"@types/react-dom": "^16.9.24",
|
|
47
47
|
"@vitejs/plugin-react": "^4.3.4",
|
|
48
|
-
"bwin": "0.1.
|
|
48
|
+
"bwin": "0.1.5",
|
|
49
49
|
"prettier": "^3.4.1",
|
|
50
50
|
"react": "^16.14.0",
|
|
51
51
|
"react-dom": "^16.14.0",
|
|
52
|
+
"react-router-dom": "^6.18.0",
|
|
52
53
|
"typescript": "^5.6.2",
|
|
53
54
|
"vite": "^6.0.1"
|
|
54
55
|
}
|