bwin 0.1.0 → 0.1.1
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/bwin.css +1 -1
- package/dist/bwin.js +82 -69
- package/package.json +1 -1
package/dist/bwin.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-
|
|
1
|
+
:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 100%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%)}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{position:absolute;display:block;box-sizing:border-box}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:transparent}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.3}bw-glass-header{white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;gap:var(--bw-glass-header-gap);padding-inline:var(--bw-glass-header-gap);flex-basis:var(--bw-glass-header-height);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color)}bw-glass-tab-container{align-self:flex-end;display:flex;gap:var(--bw-glass-header-gap)}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;gap:2px}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--close:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action--close:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action--close:disabled:active{transform:scale(1)}bw-glass-content{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}
|
package/dist/bwin.js
CHANGED
|
@@ -5,7 +5,7 @@ function W(e = 0.7, t = 128) {
|
|
|
5
5
|
const i = 256 - t, n = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), s = Math.floor(Math.random() * i + t), r = Math.max(0.5, Math.random() * e);
|
|
6
6
|
return `rgba(${n}, ${o}, ${s}, ${r})`;
|
|
7
7
|
}
|
|
8
|
-
function
|
|
8
|
+
function D(e = 2, t = 3) {
|
|
9
9
|
if (e < 0 || t < 0)
|
|
10
10
|
throw new Error("Parameters must be non-negative numbers");
|
|
11
11
|
const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
|
|
@@ -61,7 +61,7 @@ function O(e, t) {
|
|
|
61
61
|
}
|
|
62
62
|
return e;
|
|
63
63
|
}
|
|
64
|
-
function
|
|
64
|
+
function F(e) {
|
|
65
65
|
const t = document.createElement("template");
|
|
66
66
|
return t.innerHTML = e.trim(), t.content;
|
|
67
67
|
}
|
|
@@ -70,7 +70,7 @@ function E(e) {
|
|
|
70
70
|
return null;
|
|
71
71
|
if (typeof e == "string")
|
|
72
72
|
try {
|
|
73
|
-
const t =
|
|
73
|
+
const t = F(e);
|
|
74
74
|
return t.childNodes.length === 1 ? t.firstChild : t;
|
|
75
75
|
} catch {
|
|
76
76
|
return document.createTextNode(e);
|
|
@@ -87,7 +87,7 @@ const h = {
|
|
|
87
87
|
Unknown: "unknown",
|
|
88
88
|
Outside: "outside"
|
|
89
89
|
};
|
|
90
|
-
function
|
|
90
|
+
function G(e) {
|
|
91
91
|
switch (e) {
|
|
92
92
|
case h.Top:
|
|
93
93
|
return h.Bottom;
|
|
@@ -101,7 +101,7 @@ function _(e) {
|
|
|
101
101
|
throw new Error(`[bwin] Invalid position: ${e}`);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
|
-
function
|
|
104
|
+
function _({ width: e, height: t, x: i }) {
|
|
105
105
|
return t / e * i;
|
|
106
106
|
}
|
|
107
107
|
function U({ width: e, height: t, y: i }) {
|
|
@@ -117,8 +117,8 @@ function k(e, { clientX: t, clientY: i }) {
|
|
|
117
117
|
const n = e.getBoundingClientRect(), { width: o, height: s } = n, r = t - n.left, l = i - n.top;
|
|
118
118
|
if (r < 0 || r > o || l < 0 || l > s)
|
|
119
119
|
return h.Outside;
|
|
120
|
-
const
|
|
121
|
-
return r < o * (0.5 -
|
|
120
|
+
const a = 0.3, c = _({ width: o, height: s, x: r }), d = Y({ width: o, height: s, x: r }), f = U({ width: o, height: s, y: l }), u = X({ width: o, height: s, y: l });
|
|
121
|
+
return r < o * (0.5 - a / 2) && l > c && l < d ? h.Left : r > o * (0.5 + a / 2) && l < c && l > d ? h.Right : l < s * (0.5 - a / 2) && r > f && r < u ? h.Top : l > s * (0.5 + a / 2) && r < f && r > u ? h.Bottom : r > o * (0.5 - a / 2) && r < o * (0.5 + a / 2) && l > s * (0.5 - a / 2) && l < s * (0.5 + a / 2) ? h.Center : h.Unknown;
|
|
122
122
|
}
|
|
123
123
|
const w = {
|
|
124
124
|
top: 0,
|
|
@@ -126,8 +126,8 @@ const w = {
|
|
|
126
126
|
width: 100,
|
|
127
127
|
height: 100,
|
|
128
128
|
// Initial min values, real min width/height is calculated based on children
|
|
129
|
-
minWidth:
|
|
130
|
-
minHeight:
|
|
129
|
+
minWidth: 50,
|
|
130
|
+
minHeight: 50
|
|
131
131
|
};
|
|
132
132
|
class g {
|
|
133
133
|
constructor({
|
|
@@ -138,13 +138,13 @@ class g {
|
|
|
138
138
|
minWidth: s = w.minWidth,
|
|
139
139
|
minHeight: r = w.minHeight,
|
|
140
140
|
domNode: l = null,
|
|
141
|
-
store:
|
|
141
|
+
store: a = {},
|
|
142
142
|
position: c,
|
|
143
|
-
id:
|
|
143
|
+
id: d
|
|
144
144
|
} = w) {
|
|
145
|
-
if (this.id =
|
|
145
|
+
if (this.id = d ?? D(), !c)
|
|
146
146
|
throw new Error("[bwin] Sash position is required");
|
|
147
|
-
this.position = c, this.domNode = l, this._top = t, this._left = i, this._width = n, this._height = o, this.children = [], this.minWidth = s, this.minHeight = r, this.store =
|
|
147
|
+
this.position = c, this.domNode = l, this._top = t, this._left = i, this._width = n, this._height = o, this.children = [], this.minWidth = s, this.minHeight = r, this.store = a;
|
|
148
148
|
}
|
|
149
149
|
walk(t) {
|
|
150
150
|
this.children.forEach((i) => i.walk(t)), t(this);
|
|
@@ -278,10 +278,10 @@ class g {
|
|
|
278
278
|
this._width = t;
|
|
279
279
|
const [n, o, s, r] = this.getChildren();
|
|
280
280
|
if (r && o) {
|
|
281
|
-
const l = r.width + o.width,
|
|
282
|
-
let
|
|
281
|
+
const l = r.width + o.width, a = i * (r.width / l), c = l + i;
|
|
282
|
+
let d = r.width + a, f = c - d, u = o.left + a;
|
|
283
283
|
const m = r.calcMinWidth(), b = o.calcMinWidth();
|
|
284
|
-
|
|
284
|
+
d < m && f > b ? (d = m, f = c - d, u = r.left + d) : f < b && d > m && (f = b, d = c - f, u = r.left + d), r.width = d, o.width = f, o.left = u;
|
|
285
285
|
}
|
|
286
286
|
n && s && (n.width += i, s.width += i);
|
|
287
287
|
}
|
|
@@ -293,10 +293,10 @@ class g {
|
|
|
293
293
|
this._height = t;
|
|
294
294
|
const [n, o, s, r] = this.getChildren();
|
|
295
295
|
if (n && s) {
|
|
296
|
-
const l = n.height + s.height,
|
|
297
|
-
let
|
|
296
|
+
const l = n.height + s.height, a = i * (n.height / l), c = l + i;
|
|
297
|
+
let d = n.height + a, f = c - d, u = s.top + a;
|
|
298
298
|
const m = n.calcMinHeight(), b = s.calcMinHeight();
|
|
299
|
-
|
|
299
|
+
d < m && f > b ? (d = m, f = c - d, u = n.top + d) : f < b && d > m && (f = b, d = c - f, u = n.top + d), n.height = d, s.height = f, s.top = u;
|
|
300
300
|
}
|
|
301
301
|
r && o && (r.height += i, o.height += i);
|
|
302
302
|
}
|
|
@@ -314,19 +314,19 @@ class M {
|
|
|
314
314
|
minWidth: s,
|
|
315
315
|
minHeight: r,
|
|
316
316
|
position: l,
|
|
317
|
-
size:
|
|
317
|
+
size: a,
|
|
318
318
|
...c
|
|
319
319
|
}) {
|
|
320
320
|
p(this, "left");
|
|
321
321
|
p(this, "top");
|
|
322
322
|
p(this, "width");
|
|
323
323
|
p(this, "height");
|
|
324
|
-
this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = o, this.minWidth = s, this.minHeight = r, this.position = this.getPosition(l), this.size = this.getSize(
|
|
324
|
+
this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = o, this.minWidth = s, this.minHeight = r, this.position = this.getPosition(l), this.size = this.getSize(a), this.nonCoreData = c, this.setBounds();
|
|
325
325
|
}
|
|
326
326
|
getPosition(t) {
|
|
327
327
|
if (!this.siblingConfigNode)
|
|
328
328
|
return t;
|
|
329
|
-
const i =
|
|
329
|
+
const i = G(this.siblingConfigNode.position);
|
|
330
330
|
if (!t)
|
|
331
331
|
return i;
|
|
332
332
|
if (t !== i)
|
|
@@ -418,13 +418,13 @@ class M {
|
|
|
418
418
|
...l
|
|
419
419
|
});
|
|
420
420
|
}
|
|
421
|
-
createSecondaryConfigNode({ size: t, position: i, children: n, id: o, minWidth: s, minHeight: r, ...l },
|
|
421
|
+
createSecondaryConfigNode({ size: t, position: i, children: n, id: o, minWidth: s, minHeight: r, ...l }, a) {
|
|
422
422
|
return new M({
|
|
423
423
|
parentRect: this,
|
|
424
424
|
size: t,
|
|
425
425
|
position: i,
|
|
426
426
|
children: n,
|
|
427
|
-
siblingConfigNode:
|
|
427
|
+
siblingConfigNode: a,
|
|
428
428
|
id: o,
|
|
429
429
|
minWidth: s,
|
|
430
430
|
minHeight: r,
|
|
@@ -449,7 +449,7 @@ class M {
|
|
|
449
449
|
const v = {
|
|
450
450
|
width: 333,
|
|
451
451
|
height: 333
|
|
452
|
-
},
|
|
452
|
+
}, R = {
|
|
453
453
|
fitContainer: !1
|
|
454
454
|
};
|
|
455
455
|
class q extends M {
|
|
@@ -458,11 +458,11 @@ class q extends M {
|
|
|
458
458
|
children: i,
|
|
459
459
|
width: n = v.width,
|
|
460
460
|
height: o = v.height,
|
|
461
|
-
fitContainer: s =
|
|
461
|
+
fitContainer: s = R.fitContainer,
|
|
462
462
|
...r
|
|
463
463
|
} = {
|
|
464
464
|
...v,
|
|
465
|
-
...
|
|
465
|
+
...R
|
|
466
466
|
}) {
|
|
467
467
|
super({
|
|
468
468
|
id: t,
|
|
@@ -476,7 +476,7 @@ class q extends M {
|
|
|
476
476
|
}
|
|
477
477
|
class j extends g {
|
|
478
478
|
constructor(t = w) {
|
|
479
|
-
super({ ...t, position: h.Root }), Object.assign(this,
|
|
479
|
+
super({ ...t, position: h.Root }), Object.assign(this, R);
|
|
480
480
|
}
|
|
481
481
|
}
|
|
482
482
|
const K = {
|
|
@@ -507,7 +507,7 @@ const K = {
|
|
|
507
507
|
const i = this.rootSash.getById(e);
|
|
508
508
|
if (!i) throw new Error("[bwin] Parent sash not found when adding pane");
|
|
509
509
|
const n = et(i, t);
|
|
510
|
-
return i.id =
|
|
510
|
+
return i.id = D(), this.update(), n;
|
|
511
511
|
},
|
|
512
512
|
/**
|
|
513
513
|
* Remove a pane
|
|
@@ -516,9 +516,9 @@ const K = {
|
|
|
516
516
|
*/
|
|
517
517
|
removePane(e) {
|
|
518
518
|
const t = this.rootSash.getDescendantParentById(e);
|
|
519
|
-
if (!t) throw new Error("[bwin]
|
|
519
|
+
if (!t) throw new Error("[bwin] Parent sash not found when removing pane");
|
|
520
520
|
const i = t.getChildSiblingById(e);
|
|
521
|
-
t.id =
|
|
521
|
+
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 === h.Left ? i.width = t.width : i.position === h.Right ? (i.width = t.width, i.left = t.left) : i.position === h.Top ? i.height = t.height : i.position === h.Bottom && (i.height = t.height, i.top = t.top)), this.update();
|
|
522
522
|
}
|
|
523
523
|
};
|
|
524
524
|
function N(e) {
|
|
@@ -621,12 +621,15 @@ position: ${e.getAttribute("position")}
|
|
|
621
621
|
return t.innerHTML = i.trim(), t;
|
|
622
622
|
}
|
|
623
623
|
const it = {
|
|
624
|
-
|
|
624
|
+
createWindow() {
|
|
625
625
|
const e = document.createElement("bw-window");
|
|
626
|
-
e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id),
|
|
626
|
+
return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), e;
|
|
627
|
+
},
|
|
628
|
+
glaze(e) {
|
|
629
|
+
this.rootSash.walk((t) => {
|
|
627
630
|
let i = null;
|
|
628
631
|
t.children.length > 0 ? (i = this.createMuntin(t), this.onMuntinCreate(i, t), e.append(i)) : (i = this.createPane(t), this.onPaneCreate(i, t), e.prepend(i)), t.domNode = i;
|
|
629
|
-
})
|
|
632
|
+
});
|
|
630
633
|
},
|
|
631
634
|
update() {
|
|
632
635
|
this.windowElement.style.width = `${this.rootSash.width}px`, this.windowElement.style.height = `${this.rootSash.height}px`;
|
|
@@ -681,15 +684,15 @@ const it = {
|
|
|
681
684
|
if (!this.isResizeStarted || !this.activeMuntinSash) return;
|
|
682
685
|
const [t, i, n, o] = this.activeMuntinSash.getChildren(), s = this.activeMuntinSash.isLeftRightSplit(), r = this.activeMuntinSash.isTopBottomSplit();
|
|
683
686
|
if (s && o && i) {
|
|
684
|
-
const l = e.pageX - this.lastX,
|
|
685
|
-
if (
|
|
687
|
+
const l = e.pageX - this.lastX, a = o.width + l, c = i.width - l;
|
|
688
|
+
if (a <= o.calcMinWidth() || c <= i.calcMinWidth())
|
|
686
689
|
return;
|
|
687
|
-
o.width =
|
|
690
|
+
o.width = a, i.width = c, i.left = i.left + l, this.update(), this.lastX = e.pageX;
|
|
688
691
|
} else if (r && t && n) {
|
|
689
|
-
const l = e.pageY - this.lastY,
|
|
690
|
-
if (
|
|
692
|
+
const l = e.pageY - this.lastY, a = t.height + l, c = n.height - l;
|
|
693
|
+
if (a <= t.calcMinHeight() || c <= n.calcMinHeight())
|
|
691
694
|
return;
|
|
692
|
-
t.height =
|
|
695
|
+
t.height = a, n.height = c, n.top = n.top + l, this.update(), this.lastY = e.pageY;
|
|
693
696
|
}
|
|
694
697
|
}), document.addEventListener("mouseup", () => {
|
|
695
698
|
this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
|
|
@@ -724,8 +727,13 @@ class L {
|
|
|
724
727
|
let i = null;
|
|
725
728
|
t instanceof j ? (i = t, this.rootSash = t) : (i = new q(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
|
|
726
729
|
}
|
|
730
|
+
// Features can work independently to each other
|
|
731
|
+
enableFeatures() {
|
|
732
|
+
this.enableResize(), this.enableDrop(), this.fitContainer && this.enableFitContainer();
|
|
733
|
+
}
|
|
727
734
|
mount(t) {
|
|
728
|
-
|
|
735
|
+
const i = this.createWindow();
|
|
736
|
+
this.glaze(i), this.containerElement = t, this.containerElement.append(i), this.windowElement = i, this.enableFeatures();
|
|
729
737
|
}
|
|
730
738
|
static assemble(...t) {
|
|
731
739
|
t.forEach((i) => {
|
|
@@ -741,7 +749,7 @@ L.assemble(
|
|
|
741
749
|
ht,
|
|
742
750
|
st
|
|
743
751
|
);
|
|
744
|
-
function
|
|
752
|
+
function T(e) {
|
|
745
753
|
if (e.tagName === "BW-PANE")
|
|
746
754
|
return e.getAttribute("sash-id");
|
|
747
755
|
const t = e.closest("bw-pane");
|
|
@@ -749,13 +757,13 @@ function x(e) {
|
|
|
749
757
|
throw new Error("[bwin] Pane element not found");
|
|
750
758
|
return t.getAttribute("sash-id");
|
|
751
759
|
}
|
|
752
|
-
const
|
|
760
|
+
const x = "bw-glass-action--close", rt = [
|
|
753
761
|
{
|
|
754
762
|
label: "",
|
|
755
|
-
className:
|
|
763
|
+
className: x,
|
|
756
764
|
onClick: (e, t) => {
|
|
757
|
-
const i =
|
|
758
|
-
t.
|
|
765
|
+
const i = T(e.target);
|
|
766
|
+
t.removePane(i);
|
|
759
767
|
}
|
|
760
768
|
}
|
|
761
769
|
], y = {
|
|
@@ -803,7 +811,7 @@ class z {
|
|
|
803
811
|
for (const n of i) {
|
|
804
812
|
const o = (n == null ? void 0 : n.label) ?? n, s = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", r = E(`<button class="${s}">${o}</button>`);
|
|
805
813
|
typeof n.onClick == "function" && r.addEventListener("click", (l) => {
|
|
806
|
-
n.onClick(l, this);
|
|
814
|
+
n.onClick(l, this.binaryWindow);
|
|
807
815
|
}), t.append(r);
|
|
808
816
|
}
|
|
809
817
|
return t;
|
|
@@ -820,7 +828,7 @@ const lt = {
|
|
|
820
828
|
this.observeCloseButtons();
|
|
821
829
|
},
|
|
822
830
|
observeCloseButtons() {
|
|
823
|
-
const e = `.${
|
|
831
|
+
const e = `.${x}`;
|
|
824
832
|
new MutationObserver((i) => {
|
|
825
833
|
i.forEach((n) => {
|
|
826
834
|
if (n.type === "childList")
|
|
@@ -836,9 +844,8 @@ const lt = {
|
|
|
836
844
|
childList: !0
|
|
837
845
|
});
|
|
838
846
|
}
|
|
839
|
-
},
|
|
847
|
+
}, at = {
|
|
840
848
|
activeDragGlassEl: null,
|
|
841
|
-
// Stores original `can-drop` attribute value of pane element
|
|
842
849
|
activeDragGlassPaneCanDrop: !1,
|
|
843
850
|
onPaneDrop(e, t) {
|
|
844
851
|
if (!this.activeDragGlassEl) return;
|
|
@@ -848,30 +855,45 @@ const lt = {
|
|
|
848
855
|
H(n, this.activeDropPaneEl), n.setAttribute("can-drop", o);
|
|
849
856
|
return;
|
|
850
857
|
} else {
|
|
851
|
-
const n =
|
|
858
|
+
const n = T(this.activeDragGlassEl);
|
|
852
859
|
this.addPane(t.id, i).domNode.append(this.activeDragGlassEl), this.removePane(n);
|
|
853
860
|
}
|
|
854
861
|
},
|
|
855
862
|
enableDrag() {
|
|
856
863
|
document.addEventListener("mousedown", (e) => {
|
|
857
|
-
if (!e.target.matches("bw-glass-header")
|
|
864
|
+
if (e.button !== 0 || !e.target.matches("bw-glass-header")) return;
|
|
865
|
+
if (e.target.getAttribute("can-drag") === "false") {
|
|
866
|
+
e.preventDefault();
|
|
867
|
+
return;
|
|
868
|
+
}
|
|
858
869
|
const i = e.target.closest("bw-glass");
|
|
859
870
|
i.setAttribute("draggable", !0), this.activeDragGlassEl = i;
|
|
860
871
|
}), document.addEventListener("mouseup", () => {
|
|
861
872
|
this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl = null);
|
|
862
|
-
}),
|
|
863
|
-
if (!e.target.matches("bw-glass") || !this.activeDragGlassEl)
|
|
873
|
+
}), this.windowElement.addEventListener("dragstart", (e) => {
|
|
874
|
+
if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !this.activeDragGlassEl)
|
|
875
|
+
return;
|
|
864
876
|
e.dataTransfer.effectAllowed = "move";
|
|
865
877
|
const t = this.activeDragGlassEl.closest("bw-pane");
|
|
866
878
|
this.activeDragGlassPaneCanDrop = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
|
|
867
|
-
}),
|
|
879
|
+
}), this.windowElement.addEventListener("dragend", () => {
|
|
868
880
|
this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), this.activeDragGlassEl = null);
|
|
869
881
|
});
|
|
870
882
|
}
|
|
883
|
+
}, dt = {
|
|
884
|
+
trimMuntin(e) {
|
|
885
|
+
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`);
|
|
886
|
+
},
|
|
887
|
+
onMuntinCreate(e) {
|
|
888
|
+
this.trimMuntin(e);
|
|
889
|
+
},
|
|
890
|
+
onMuntinUpdate(e) {
|
|
891
|
+
this.trimMuntin(e);
|
|
892
|
+
}
|
|
871
893
|
};
|
|
872
|
-
class
|
|
873
|
-
|
|
874
|
-
super.
|
|
894
|
+
class ct extends L {
|
|
895
|
+
enableFeatures() {
|
|
896
|
+
super.enableFeatures(), this.enableObservers(), this.enableDrag();
|
|
875
897
|
}
|
|
876
898
|
onPaneCreate(t, i) {
|
|
877
899
|
const n = new z({ ...i.store, sash: i, binaryWindow: this });
|
|
@@ -907,20 +929,11 @@ class at extends L {
|
|
|
907
929
|
o && o.remove();
|
|
908
930
|
}
|
|
909
931
|
}
|
|
910
|
-
trimMuntin(t) {
|
|
911
|
-
t.hasAttribute("vertical") ? (t.style.top = `${parseFloat(t.style.top) + this.muntinSize / 2}px`, t.style.height = `${parseFloat(t.style.height) - this.muntinSize}px`) : t.hasAttribute("horizontal") && (t.style.left = `${parseFloat(t.style.left) + this.muntinSize / 2}px`, t.style.width = `${parseFloat(t.style.width) - this.muntinSize}px`);
|
|
912
|
-
}
|
|
913
|
-
onMuntinCreate(t) {
|
|
914
|
-
this.trimMuntin(t);
|
|
915
|
-
}
|
|
916
|
-
onMuntinUpdate(t) {
|
|
917
|
-
this.trimMuntin(t);
|
|
918
|
-
}
|
|
919
932
|
}
|
|
920
|
-
|
|
933
|
+
ct.assemble(lt, at, dt);
|
|
921
934
|
export {
|
|
922
935
|
rt as BUILTIN_ACTIONS,
|
|
923
|
-
|
|
936
|
+
ct as BinaryWindow,
|
|
924
937
|
q as ConfigRoot,
|
|
925
938
|
L as Frame,
|
|
926
939
|
h as Position,
|