@mintplayer/ng-bootstrap 21.21.0 → 21.22.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/fesm2022/mintplayer-ng-bootstrap-dock.mjs +489 -490
- package/fesm2022/mintplayer-ng-bootstrap-dock.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs.map +1 -1
- package/package.json +4 -3
- package/types/mintplayer-ng-bootstrap-dock.d.ts +15 -10
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, viewChild, TemplateRef, ChangeDetectionStrategy, Component, output, signal, contentChildren, inject, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
4
|
+
import { html, unsafeCSS, LitElement } from 'lit';
|
|
4
5
|
|
|
5
6
|
class BsDockPaneComponent {
|
|
6
7
|
constructor() {
|
|
@@ -25,502 +26,489 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
|
|
|
25
26
|
}]
|
|
26
27
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
29
|
+
// AUTO-GENERATED — do not edit by hand.
|
|
30
|
+
// Source: mint-dock-manager.element.html + mint-dock-manager.element.scss
|
|
31
|
+
// Regenerate with the codegen-wc Nx target.
|
|
32
|
+
const template = html `<div class="dock-root">
|
|
33
|
+
<div class="dock-docked"></div>
|
|
34
|
+
<div class="dock-floating-layer"></div>
|
|
35
|
+
<div class="dock-intersections-layer dock-intersection-layer"></div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="dock-drop-indicator"></div>
|
|
38
|
+
<div class="dock-drop-joystick" data-visible="false">
|
|
39
|
+
<div class="dock-drop-joystick__spacer"></div>
|
|
40
|
+
<button
|
|
41
|
+
class="dock-drop-joystick__button"
|
|
42
|
+
type="button"
|
|
43
|
+
data-zone="top"
|
|
44
|
+
aria-label="Dock to top"
|
|
45
|
+
>
|
|
46
|
+
↑
|
|
47
|
+
</button>
|
|
48
|
+
<div class="dock-drop-joystick__spacer"></div>
|
|
49
|
+
<button
|
|
50
|
+
class="dock-drop-joystick__button"
|
|
51
|
+
type="button"
|
|
52
|
+
data-zone="left"
|
|
53
|
+
aria-label="Dock to left"
|
|
54
|
+
>
|
|
55
|
+
←
|
|
56
|
+
</button>
|
|
57
|
+
<button
|
|
58
|
+
class="dock-drop-joystick__button"
|
|
59
|
+
type="button"
|
|
60
|
+
data-zone="center"
|
|
61
|
+
aria-label="Dock to center"
|
|
62
|
+
>
|
|
63
|
+
•
|
|
64
|
+
</button>
|
|
65
|
+
<button
|
|
66
|
+
class="dock-drop-joystick__button"
|
|
67
|
+
type="button"
|
|
68
|
+
data-zone="right"
|
|
69
|
+
aria-label="Dock to right"
|
|
70
|
+
>
|
|
71
|
+
→
|
|
72
|
+
</button>
|
|
73
|
+
<div class="dock-drop-joystick__spacer"></div>
|
|
74
|
+
<button
|
|
75
|
+
class="dock-drop-joystick__button"
|
|
76
|
+
type="button"
|
|
77
|
+
data-zone="bottom"
|
|
78
|
+
aria-label="Dock to bottom"
|
|
79
|
+
>
|
|
80
|
+
↓
|
|
81
|
+
</button>
|
|
82
|
+
<div class="dock-drop-joystick__spacer"></div>
|
|
83
|
+
</div>`;
|
|
84
|
+
const styles = unsafeCSS(`:host {
|
|
85
|
+
display: block;
|
|
86
|
+
position: relative;
|
|
87
|
+
width: 100%;
|
|
88
|
+
height: 100%;
|
|
89
|
+
contain: layout paint size style;
|
|
90
|
+
box-sizing: border-box;
|
|
91
|
+
font-family: inherit;
|
|
92
|
+
color: inherit;
|
|
93
|
+
--dock-split-gap: 0.25rem;
|
|
94
|
+
}
|
|
53
95
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
96
|
+
.dock-root,
|
|
97
|
+
.dock-docked,
|
|
98
|
+
.dock-split,
|
|
99
|
+
.dock-split__child,
|
|
100
|
+
.dock-stack,
|
|
101
|
+
.dock-stack__content,
|
|
102
|
+
.dock-stack__pane {
|
|
103
|
+
box-sizing: border-box;
|
|
104
|
+
min-width: 0;
|
|
105
|
+
min-height: 0;
|
|
106
|
+
}
|
|
59
107
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
108
|
+
.dock-root {
|
|
109
|
+
position: relative;
|
|
110
|
+
width: 100%;
|
|
111
|
+
height: 100%;
|
|
112
|
+
}
|
|
66
113
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
114
|
+
.dock-docked {
|
|
115
|
+
position: absolute;
|
|
116
|
+
inset: 0;
|
|
117
|
+
display: flex;
|
|
118
|
+
z-index: 0;
|
|
119
|
+
}
|
|
73
120
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
121
|
+
.dock-floating-layer {
|
|
122
|
+
position: absolute;
|
|
123
|
+
inset: 0;
|
|
124
|
+
pointer-events: none;
|
|
125
|
+
z-index: 5;
|
|
126
|
+
}
|
|
80
127
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
border-radius: 0.5rem;
|
|
88
|
-
background: rgba(255, 255, 255, 0.92);
|
|
89
|
-
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
|
|
90
|
-
overflow: hidden;
|
|
91
|
-
min-width: 12rem;
|
|
92
|
-
min-height: 8rem;
|
|
93
|
-
}
|
|
128
|
+
.dock-intersections-layer {
|
|
129
|
+
position: absolute;
|
|
130
|
+
inset: 0;
|
|
131
|
+
pointer-events: none;
|
|
132
|
+
z-index: 120;
|
|
133
|
+
}
|
|
94
134
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
-webkit-user-select: none;
|
|
109
|
-
}
|
|
135
|
+
.dock-floating {
|
|
136
|
+
position: absolute;
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
pointer-events: auto;
|
|
140
|
+
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
141
|
+
border-radius: 0.5rem;
|
|
142
|
+
background: rgba(255, 255, 255, 0.92);
|
|
143
|
+
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
min-width: 12rem;
|
|
146
|
+
min-height: 8rem;
|
|
147
|
+
}
|
|
110
148
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
149
|
+
.dock-floating__chrome {
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
gap: 0.5rem;
|
|
153
|
+
padding: 0.35rem 0.75rem;
|
|
154
|
+
cursor: move;
|
|
155
|
+
background: linear-gradient(to bottom, rgba(148, 163, 184, 0.6), rgba(148, 163, 184, 0.25));
|
|
156
|
+
border-bottom: 1px solid rgba(148, 163, 184, 0.5);
|
|
157
|
+
user-select: none;
|
|
158
|
+
-webkit-user-select: none;
|
|
159
|
+
}
|
|
120
160
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
161
|
+
.dock-floating__title {
|
|
162
|
+
flex: 1 1 auto;
|
|
163
|
+
font-size: 0.875rem;
|
|
164
|
+
font-weight: 500;
|
|
165
|
+
color: rgba(30, 41, 59, 0.95);
|
|
166
|
+
overflow: hidden;
|
|
167
|
+
text-overflow: ellipsis;
|
|
168
|
+
white-space: nowrap;
|
|
169
|
+
}
|
|
126
170
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
transition: background 120ms ease;
|
|
133
|
-
}
|
|
171
|
+
.dock-floating > .dock-stack {
|
|
172
|
+
flex: 1 1 auto;
|
|
173
|
+
min-width: 12rem;
|
|
174
|
+
min-height: 8rem;
|
|
175
|
+
}
|
|
134
176
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
177
|
+
.dock-floating__resizer {
|
|
178
|
+
position: absolute;
|
|
179
|
+
pointer-events: auto;
|
|
180
|
+
z-index: 2;
|
|
181
|
+
background: rgba(148, 163, 184, 0.25);
|
|
182
|
+
transition: background 120ms ease;
|
|
183
|
+
}
|
|
139
184
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
height: 0.5rem;
|
|
145
|
-
}
|
|
185
|
+
.dock-floating__resizer:hover,
|
|
186
|
+
.dock-floating__resizer[data-resizing=true] {
|
|
187
|
+
background: rgba(148, 163, 184, 0.4);
|
|
188
|
+
}
|
|
146
189
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
190
|
+
.dock-floating__resizer--top,
|
|
191
|
+
.dock-floating__resizer--bottom {
|
|
192
|
+
left: 0.75rem;
|
|
193
|
+
right: 0.75rem;
|
|
194
|
+
height: 0.5rem;
|
|
195
|
+
}
|
|
151
196
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
197
|
+
.dock-floating__resizer--top {
|
|
198
|
+
top: 0;
|
|
199
|
+
cursor: n-resize;
|
|
200
|
+
}
|
|
156
201
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
width: 0.5rem;
|
|
162
|
-
}
|
|
202
|
+
.dock-floating__resizer--bottom {
|
|
203
|
+
bottom: 0;
|
|
204
|
+
cursor: s-resize;
|
|
205
|
+
}
|
|
163
206
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
207
|
+
.dock-floating__resizer--left,
|
|
208
|
+
.dock-floating__resizer--right {
|
|
209
|
+
top: 1.75rem;
|
|
210
|
+
bottom: 0.75rem;
|
|
211
|
+
width: 0.5rem;
|
|
212
|
+
}
|
|
168
213
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
214
|
+
.dock-floating__resizer--left {
|
|
215
|
+
left: 0;
|
|
216
|
+
cursor: w-resize;
|
|
217
|
+
}
|
|
173
218
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
width: 0.75rem;
|
|
179
|
-
height: 0.75rem;
|
|
180
|
-
}
|
|
219
|
+
.dock-floating__resizer--right {
|
|
220
|
+
right: 0;
|
|
221
|
+
cursor: e-resize;
|
|
222
|
+
}
|
|
181
223
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
224
|
+
.dock-floating__resizer--top-left,
|
|
225
|
+
.dock-floating__resizer--top-right,
|
|
226
|
+
.dock-floating__resizer--bottom-left,
|
|
227
|
+
.dock-floating__resizer--bottom-right {
|
|
228
|
+
width: 0.75rem;
|
|
229
|
+
height: 0.75rem;
|
|
230
|
+
}
|
|
187
231
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
232
|
+
.dock-floating__resizer--top-left {
|
|
233
|
+
top: 0;
|
|
234
|
+
left: 0;
|
|
235
|
+
cursor: nw-resize;
|
|
236
|
+
}
|
|
193
237
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
238
|
+
.dock-floating__resizer--top-right {
|
|
239
|
+
top: 0;
|
|
240
|
+
right: 0;
|
|
241
|
+
cursor: ne-resize;
|
|
242
|
+
}
|
|
199
243
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
244
|
+
.dock-floating__resizer--bottom-left {
|
|
245
|
+
bottom: 0;
|
|
246
|
+
left: 0;
|
|
247
|
+
cursor: sw-resize;
|
|
248
|
+
}
|
|
205
249
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
250
|
+
.dock-floating__resizer--bottom-right {
|
|
251
|
+
right: 0;
|
|
252
|
+
bottom: 0;
|
|
253
|
+
cursor: se-resize;
|
|
254
|
+
}
|
|
212
255
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
256
|
+
.dock-split {
|
|
257
|
+
display: flex;
|
|
258
|
+
flex: 1 1 0;
|
|
259
|
+
gap: var(--dock-split-gap);
|
|
260
|
+
position: relative;
|
|
261
|
+
}
|
|
216
262
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
263
|
+
.dock-split[data-direction=vertical] {
|
|
264
|
+
flex-direction: column;
|
|
265
|
+
}
|
|
220
266
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
position: relative;
|
|
225
|
-
}
|
|
267
|
+
.dock-split[data-direction=horizontal] {
|
|
268
|
+
flex-direction: row;
|
|
269
|
+
}
|
|
226
270
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
}
|
|
271
|
+
.dock-split__child {
|
|
272
|
+
display: flex;
|
|
273
|
+
flex: 1 1 0;
|
|
274
|
+
position: relative;
|
|
275
|
+
}
|
|
233
276
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
}
|
|
277
|
+
.dock-split__divider {
|
|
278
|
+
position: relative;
|
|
279
|
+
flex: 0 0 auto;
|
|
280
|
+
background: rgba(0, 0, 0, 0.08);
|
|
281
|
+
transition: background 120ms ease;
|
|
282
|
+
}
|
|
241
283
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
284
|
+
.dock-split[data-direction=horizontal] > .dock-split__divider {
|
|
285
|
+
width: 0.5rem;
|
|
286
|
+
cursor: col-resize;
|
|
287
|
+
/* Extend through perpendicular gaps for visual continuity */
|
|
288
|
+
margin-top: calc(var(--dock-split-gap) * -1);
|
|
289
|
+
margin-bottom: calc(var(--dock-split-gap) * -1);
|
|
290
|
+
}
|
|
249
291
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
background: rgba(0, 0, 0, 0.25);
|
|
258
|
-
}
|
|
292
|
+
.dock-split[data-direction=vertical] > .dock-split__divider {
|
|
293
|
+
height: 0.5rem;
|
|
294
|
+
cursor: row-resize;
|
|
295
|
+
/* Extend through perpendicular gaps for visual continuity */
|
|
296
|
+
margin-left: calc(var(--dock-split-gap) * -1);
|
|
297
|
+
margin-right: calc(var(--dock-split-gap) * -1);
|
|
298
|
+
}
|
|
259
299
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
300
|
+
.dock-split__divider::after {
|
|
301
|
+
content: "";
|
|
302
|
+
position: absolute;
|
|
303
|
+
top: 50%;
|
|
304
|
+
left: 50%;
|
|
305
|
+
transform: translate(-50%, -50%);
|
|
306
|
+
border-radius: 999px;
|
|
307
|
+
background: rgba(0, 0, 0, 0.25);
|
|
308
|
+
}
|
|
264
309
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
310
|
+
.dock-split[data-direction=horizontal] > .dock-split__divider::after {
|
|
311
|
+
width: 0.125rem;
|
|
312
|
+
height: 60%;
|
|
313
|
+
}
|
|
269
314
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
315
|
+
.dock-split[data-direction=vertical] > .dock-split__divider::after {
|
|
316
|
+
width: 60%;
|
|
317
|
+
height: 0.125rem;
|
|
318
|
+
}
|
|
275
319
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
margin-top: -0.5rem;
|
|
282
|
-
border-radius: 0.375rem;
|
|
283
|
-
background: rgba(59, 130, 246, 0.2);
|
|
284
|
-
border: 1px solid rgba(59, 130, 246, 0.6);
|
|
285
|
-
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
|
|
286
|
-
cursor: all-scroll;
|
|
287
|
-
pointer-events: auto;
|
|
288
|
-
opacity: 0;
|
|
289
|
-
transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
|
|
290
|
-
}
|
|
320
|
+
.dock-split__divider:hover,
|
|
321
|
+
.dock-split__divider:focus-visible,
|
|
322
|
+
.dock-split__divider[data-resizing=true] {
|
|
323
|
+
background: rgba(59, 130, 246, 0.35);
|
|
324
|
+
}
|
|
291
325
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
326
|
+
.dock-intersection-handle {
|
|
327
|
+
position: absolute;
|
|
328
|
+
width: 1rem;
|
|
329
|
+
height: 1rem;
|
|
330
|
+
margin-left: -0.5rem;
|
|
331
|
+
margin-top: -0.5rem;
|
|
332
|
+
border-radius: 0.375rem;
|
|
333
|
+
background: rgba(59, 130, 246, 0.2);
|
|
334
|
+
border: 1px solid rgba(59, 130, 246, 0.6);
|
|
335
|
+
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
|
|
336
|
+
cursor: all-scroll;
|
|
337
|
+
pointer-events: auto;
|
|
338
|
+
opacity: 0;
|
|
339
|
+
transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
|
|
340
|
+
}
|
|
301
341
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
pointer-events: none;
|
|
312
|
-
z-index: 130;
|
|
313
|
-
}
|
|
342
|
+
.dock-intersection-handle:hover,
|
|
343
|
+
.dock-intersection-handle:focus-visible,
|
|
344
|
+
.dock-intersection-handle[data-visible=true],
|
|
345
|
+
.dock-intersection-handle[data-resizing=true] {
|
|
346
|
+
background: rgba(59, 130, 246, 0.35);
|
|
347
|
+
border-color: rgba(59, 130, 246, 0.9);
|
|
348
|
+
opacity: 1;
|
|
349
|
+
outline: none;
|
|
350
|
+
}
|
|
314
351
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
352
|
+
.dock-snap-marker {
|
|
353
|
+
position: absolute;
|
|
354
|
+
width: 6px;
|
|
355
|
+
height: 6px;
|
|
356
|
+
margin-left: -3px;
|
|
357
|
+
margin-top: -3px;
|
|
358
|
+
border-radius: 50%;
|
|
359
|
+
background: rgba(59, 130, 246, 0.7);
|
|
360
|
+
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
|
|
361
|
+
pointer-events: none;
|
|
362
|
+
z-index: 130;
|
|
363
|
+
}
|
|
324
364
|
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
365
|
+
.dock-stack {
|
|
366
|
+
display: flex;
|
|
367
|
+
flex-direction: column;
|
|
368
|
+
flex: 1 1 0;
|
|
369
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
370
|
+
border-radius: 0.25rem;
|
|
371
|
+
background: rgba(255, 255, 255, 0.75);
|
|
372
|
+
backdrop-filter: blur(4px);
|
|
373
|
+
}
|
|
333
374
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
cursor: grab;
|
|
343
|
-
transition: background 160ms ease;
|
|
344
|
-
}
|
|
375
|
+
.dock-stack__header {
|
|
376
|
+
display: flex;
|
|
377
|
+
flex-wrap: wrap;
|
|
378
|
+
gap: 0.25rem;
|
|
379
|
+
padding: 0.25rem;
|
|
380
|
+
background: rgba(0, 0, 0, 0.05);
|
|
381
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
382
|
+
}
|
|
345
383
|
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
384
|
+
.dock-tab {
|
|
385
|
+
appearance: none;
|
|
386
|
+
border: none;
|
|
387
|
+
padding: 0.25rem 0.5rem;
|
|
388
|
+
border-radius: 0.25rem;
|
|
389
|
+
background: transparent;
|
|
390
|
+
color: inherit;
|
|
391
|
+
font: inherit;
|
|
392
|
+
cursor: grab;
|
|
393
|
+
transition: background 160ms ease;
|
|
394
|
+
}
|
|
349
395
|
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
396
|
+
.dock-tab:active {
|
|
397
|
+
cursor: grabbing;
|
|
398
|
+
}
|
|
353
399
|
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
}
|
|
400
|
+
.dock-tab:hover {
|
|
401
|
+
background: rgba(0, 0, 0, 0.05);
|
|
402
|
+
}
|
|
358
403
|
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
404
|
+
.dock-tab:focus-visible {
|
|
405
|
+
outline: 2px solid rgba(59, 130, 246, 0.8);
|
|
406
|
+
outline-offset: 1px;
|
|
407
|
+
}
|
|
362
408
|
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
display: flex;
|
|
367
|
-
overflow: hidden;
|
|
368
|
-
}
|
|
409
|
+
.dock-tab--active {
|
|
410
|
+
background: rgba(59, 130, 246, 0.15);
|
|
411
|
+
}
|
|
369
412
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
}
|
|
413
|
+
.dock-stack__content {
|
|
414
|
+
position: relative;
|
|
415
|
+
flex: 1 1 auto;
|
|
416
|
+
display: flex;
|
|
417
|
+
overflow: hidden;
|
|
418
|
+
}
|
|
377
419
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
420
|
+
.dock-stack__pane {
|
|
421
|
+
position: relative;
|
|
422
|
+
flex: 1 1 100%;
|
|
423
|
+
display: flex;
|
|
424
|
+
flex-direction: column;
|
|
425
|
+
overflow: hidden;
|
|
426
|
+
}
|
|
381
427
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
border: 2px solid rgba(59, 130, 246, 0.9);
|
|
386
|
-
background: rgba(59, 130, 246, 0.2);
|
|
387
|
-
border-radius: 0.25rem;
|
|
388
|
-
opacity: 0;
|
|
389
|
-
transition: opacity 120ms ease;
|
|
390
|
-
z-index: 100;
|
|
391
|
-
}
|
|
428
|
+
.dock-stack__pane[hidden] {
|
|
429
|
+
display: none !important;
|
|
430
|
+
}
|
|
392
431
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
432
|
+
.dock-drop-indicator {
|
|
433
|
+
position: absolute;
|
|
434
|
+
pointer-events: none;
|
|
435
|
+
border: 2px solid rgba(59, 130, 246, 0.9);
|
|
436
|
+
background: rgba(59, 130, 246, 0.2);
|
|
437
|
+
border-radius: 0.25rem;
|
|
438
|
+
opacity: 0;
|
|
439
|
+
transition: opacity 120ms ease;
|
|
440
|
+
z-index: 100;
|
|
441
|
+
}
|
|
396
442
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
grid-template-columns: repeat(3, min-content);
|
|
401
|
-
grid-template-rows: repeat(3, min-content);
|
|
402
|
-
gap: 0.125rem;
|
|
403
|
-
padding: 0.125rem;
|
|
404
|
-
border-radius: 999px;
|
|
405
|
-
background: rgba(15, 23, 42, 0.15);
|
|
406
|
-
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
|
|
407
|
-
pointer-events: none;
|
|
408
|
-
transform: translate(-50%, -50%);
|
|
409
|
-
z-index: 110;
|
|
410
|
-
}
|
|
443
|
+
.dock-drop-indicator[data-visible=true] {
|
|
444
|
+
opacity: 1;
|
|
445
|
+
}
|
|
411
446
|
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
447
|
+
.dock-drop-joystick {
|
|
448
|
+
position: absolute;
|
|
449
|
+
display: grid;
|
|
450
|
+
grid-template-columns: repeat(3, min-content);
|
|
451
|
+
grid-template-rows: repeat(3, min-content);
|
|
452
|
+
gap: 0.125rem;
|
|
453
|
+
padding: 0.125rem;
|
|
454
|
+
border-radius: 999px;
|
|
455
|
+
background: rgba(15, 23, 42, 0.15);
|
|
456
|
+
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
|
|
457
|
+
pointer-events: none;
|
|
458
|
+
transform: translate(-50%, -50%);
|
|
459
|
+
z-index: 110;
|
|
460
|
+
}
|
|
417
461
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
justify-content: center;
|
|
424
|
-
border-radius: 0.375rem;
|
|
425
|
-
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
426
|
-
background: rgba(255, 255, 255, 0.9);
|
|
427
|
-
color: rgba(30, 64, 175, 0.9);
|
|
428
|
-
font-size: 0.75rem;
|
|
429
|
-
line-height: 1;
|
|
430
|
-
font-weight: 600;
|
|
431
|
-
pointer-events: auto;
|
|
432
|
-
cursor: pointer;
|
|
433
|
-
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
|
434
|
-
}
|
|
462
|
+
.dock-drop-joystick__spacer {
|
|
463
|
+
width: 1.75rem;
|
|
464
|
+
height: 1.75rem;
|
|
465
|
+
pointer-events: none;
|
|
466
|
+
}
|
|
435
467
|
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
468
|
+
.dock-drop-joystick__button {
|
|
469
|
+
width: 1.75rem;
|
|
470
|
+
height: 1.75rem;
|
|
471
|
+
display: inline-flex;
|
|
472
|
+
align-items: center;
|
|
473
|
+
justify-content: center;
|
|
474
|
+
border-radius: 0.375rem;
|
|
475
|
+
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
476
|
+
background: rgba(255, 255, 255, 0.9);
|
|
477
|
+
color: rgba(30, 64, 175, 0.9);
|
|
478
|
+
font-size: 0.75rem;
|
|
479
|
+
line-height: 1;
|
|
480
|
+
font-weight: 600;
|
|
481
|
+
pointer-events: auto;
|
|
482
|
+
cursor: pointer;
|
|
483
|
+
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
|
484
|
+
}
|
|
443
485
|
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
486
|
+
.dock-drop-joystick__button[data-active=true],
|
|
487
|
+
.dock-drop-joystick__button:hover,
|
|
488
|
+
.dock-drop-joystick__button:focus-visible {
|
|
489
|
+
background: rgba(59, 130, 246, 0.25);
|
|
490
|
+
border-color: rgba(59, 130, 246, 0.8);
|
|
491
|
+
color: rgb(30, 64, 175);
|
|
492
|
+
}
|
|
448
493
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
494
|
+
.dock-drop-joystick__button:focus-visible {
|
|
495
|
+
outline: 2px solid rgba(59, 130, 246, 0.9);
|
|
496
|
+
outline-offset: 1px;
|
|
497
|
+
}
|
|
452
498
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
display: block;
|
|
456
|
-
min-width: 0;
|
|
457
|
-
min-height: 0;
|
|
458
|
-
}
|
|
459
|
-
</style>
|
|
460
|
-
<div class="dock-root">
|
|
461
|
-
<div class="dock-docked"></div>
|
|
462
|
-
<div class="dock-floating-layer"></div>
|
|
463
|
-
<div class="dock-intersections-layer dock-intersection-layer"></div>
|
|
464
|
-
</div>
|
|
465
|
-
<div class="dock-drop-indicator"></div>
|
|
466
|
-
<div class="dock-drop-joystick" data-visible="false">
|
|
467
|
-
<div class="dock-drop-joystick__spacer"></div>
|
|
468
|
-
<button
|
|
469
|
-
class="dock-drop-joystick__button"
|
|
470
|
-
type="button"
|
|
471
|
-
data-zone="top"
|
|
472
|
-
aria-label="Dock to top"
|
|
473
|
-
>
|
|
474
|
-
↑
|
|
475
|
-
</button>
|
|
476
|
-
<div class="dock-drop-joystick__spacer"></div>
|
|
477
|
-
<button
|
|
478
|
-
class="dock-drop-joystick__button"
|
|
479
|
-
type="button"
|
|
480
|
-
data-zone="left"
|
|
481
|
-
aria-label="Dock to left"
|
|
482
|
-
>
|
|
483
|
-
←
|
|
484
|
-
</button>
|
|
485
|
-
<button
|
|
486
|
-
class="dock-drop-joystick__button"
|
|
487
|
-
type="button"
|
|
488
|
-
data-zone="center"
|
|
489
|
-
aria-label="Dock to center"
|
|
490
|
-
>
|
|
491
|
-
•
|
|
492
|
-
</button>
|
|
493
|
-
<button
|
|
494
|
-
class="dock-drop-joystick__button"
|
|
495
|
-
type="button"
|
|
496
|
-
data-zone="right"
|
|
497
|
-
aria-label="Dock to right"
|
|
498
|
-
>
|
|
499
|
-
→
|
|
500
|
-
</button>
|
|
501
|
-
<div class="dock-drop-joystick__spacer"></div>
|
|
502
|
-
<button
|
|
503
|
-
class="dock-drop-joystick__button"
|
|
504
|
-
type="button"
|
|
505
|
-
data-zone="bottom"
|
|
506
|
-
aria-label="Dock to bottom"
|
|
507
|
-
>
|
|
508
|
-
↓
|
|
509
|
-
</button>
|
|
510
|
-
<div class="dock-drop-joystick__spacer"></div>
|
|
511
|
-
</div>
|
|
512
|
-
`;
|
|
513
|
-
let cachedTemplate = null;
|
|
514
|
-
let cachedTemplateDocument = null;
|
|
515
|
-
function ensureTemplate(documentRef) {
|
|
516
|
-
if (!cachedTemplate || cachedTemplateDocument !== documentRef) {
|
|
517
|
-
cachedTemplate = documentRef.createElement('template');
|
|
518
|
-
cachedTemplate.innerHTML = templateHtml;
|
|
519
|
-
cachedTemplateDocument = documentRef;
|
|
520
|
-
}
|
|
521
|
-
return cachedTemplate;
|
|
499
|
+
.dock-drop-joystick__button[data-zone=center] {
|
|
500
|
+
border-radius: 0.5rem;
|
|
522
501
|
}
|
|
523
|
-
|
|
502
|
+
|
|
503
|
+
::slotted(*) {
|
|
504
|
+
flex: 1 1 auto;
|
|
505
|
+
display: block;
|
|
506
|
+
min-width: 0;
|
|
507
|
+
min-height: 0;
|
|
508
|
+
}`);
|
|
509
|
+
|
|
510
|
+
class MintDockManagerElement extends LitElement {
|
|
511
|
+
static { this.styles = [styles]; }
|
|
524
512
|
static { this.documentRef = typeof document !== 'undefined' ? document : null; }
|
|
525
513
|
static configureDocument(documentRef) {
|
|
526
514
|
if (documentRef) {
|
|
@@ -528,8 +516,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
528
516
|
}
|
|
529
517
|
}
|
|
530
518
|
static get observedAttributes() {
|
|
531
|
-
return ['layout'];
|
|
532
|
-
// return ['layout', 'debug-snap-markers'];
|
|
519
|
+
return [...(super.observedAttributes ?? []), 'layout'];
|
|
533
520
|
}
|
|
534
521
|
static { this.instanceCounter = 0; }
|
|
535
522
|
renderSnapMarkersForDivider() {
|
|
@@ -643,12 +630,31 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
643
630
|
this.showSnapMarkers = false;
|
|
644
631
|
this.pendingDragEndTimeout = null;
|
|
645
632
|
this.previousSplitSizes = new Map();
|
|
633
|
+
this.instanceId = `mint-dock-${++MintDockManagerElement.instanceCounter}`;
|
|
634
|
+
this.onPointerMove = this.onPointerMove.bind(this);
|
|
635
|
+
this.onPointerUp = this.onPointerUp.bind(this);
|
|
636
|
+
this.onDragOver = this.onDragOver.bind(this);
|
|
637
|
+
this.onGlobalDragOver = this.onGlobalDragOver.bind(this);
|
|
638
|
+
this.onGlobalDragEnd = this.onGlobalDragEnd.bind(this);
|
|
639
|
+
this.onDrop = this.onDrop.bind(this);
|
|
640
|
+
this.onDragLeave = this.onDragLeave.bind(this);
|
|
641
|
+
this.onDrag = this.onDrag.bind(this);
|
|
642
|
+
this.onDragMouseMove = this.onDragMouseMove.bind(this);
|
|
643
|
+
this.onDragTouchMove = this.onDragTouchMove.bind(this);
|
|
644
|
+
this.onDragMouseUp = this.onDragMouseUp.bind(this);
|
|
645
|
+
this.onDragTouchEnd = this.onDragTouchEnd.bind(this);
|
|
646
|
+
this.onWindowResize = this.onWindowResize.bind(this);
|
|
647
|
+
}
|
|
648
|
+
render() {
|
|
649
|
+
return template;
|
|
650
|
+
}
|
|
651
|
+
firstUpdated() {
|
|
652
|
+
// Resolve document and window now that we are connected.
|
|
646
653
|
const documentRef = this.resolveDocument();
|
|
647
654
|
this.documentRef = documentRef;
|
|
648
655
|
this.windowRef = this.resolveWindow(documentRef);
|
|
649
|
-
|
|
650
|
-
const
|
|
651
|
-
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
656
|
+
// Query the rendered shadow DOM for the dock skeleton.
|
|
657
|
+
const shadowRoot = this.shadowRoot;
|
|
652
658
|
const root = shadowRoot.querySelector('.dock-root');
|
|
653
659
|
if (!root) {
|
|
654
660
|
throw new Error('mint-dock-manager template is missing the root element.');
|
|
@@ -679,37 +685,16 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
679
685
|
this.dropIndicator = indicator;
|
|
680
686
|
this.dropJoystick = joystick;
|
|
681
687
|
this.dropJoystickButtons = joystickButtons;
|
|
682
|
-
this.instanceId = `mint-dock-${++MintDockManagerElement.instanceCounter}`;
|
|
683
|
-
this.onPointerMove = this.onPointerMove.bind(this);
|
|
684
|
-
this.onPointerUp = this.onPointerUp.bind(this);
|
|
685
|
-
this.onDragOver = this.onDragOver.bind(this);
|
|
686
|
-
this.onGlobalDragOver = this.onGlobalDragOver.bind(this);
|
|
687
|
-
this.onGlobalDragEnd = this.onGlobalDragEnd.bind(this);
|
|
688
|
-
this.onDrop = this.onDrop.bind(this);
|
|
689
|
-
this.onDragLeave = this.onDragLeave.bind(this);
|
|
690
|
-
this.onDrag = this.onDrag.bind(this);
|
|
691
|
-
this.onDragMouseMove = this.onDragMouseMove.bind(this);
|
|
692
|
-
this.onDragTouchMove = this.onDragTouchMove.bind(this);
|
|
693
|
-
this.onDragMouseUp = this.onDragMouseUp.bind(this);
|
|
694
|
-
this.onDragTouchEnd = this.onDragTouchEnd.bind(this);
|
|
695
|
-
this.onWindowResize = this.onWindowResize.bind(this);
|
|
696
|
-
}
|
|
697
|
-
connectedCallback() {
|
|
698
|
-
if (!this.hasAttribute('role')) {
|
|
699
|
-
this.setAttribute('role', 'application');
|
|
700
|
-
}
|
|
701
688
|
// Tag the docked surface with a root path so it can act as
|
|
702
689
|
// a drop target when the main layout is empty.
|
|
703
690
|
this.dockedEl.dataset['path'] = this.formatPath({ type: 'docked', segments: [] });
|
|
704
|
-
|
|
691
|
+
// Now safe to attach shadow-DOM-targeted event listeners.
|
|
705
692
|
this.rootEl.addEventListener('dragover', this.onDragOver);
|
|
706
693
|
this.rootEl.addEventListener('drop', this.onDrop);
|
|
707
694
|
this.rootEl.addEventListener('dragleave', this.onDragLeave);
|
|
708
695
|
this.dropJoystick.addEventListener('dragover', this.onDragOver);
|
|
709
696
|
this.dropJoystick.addEventListener('drop', this.onDrop);
|
|
710
697
|
this.dropJoystick.addEventListener('dragleave', this.onDragLeave);
|
|
711
|
-
// Strengthen zone tracking by reacting to dragenter/dragover directly on the buttons.
|
|
712
|
-
// This avoids relying solely on hit-testing each frame which can be jittery during HTML5 drag.
|
|
713
698
|
this.dropJoystickButtons.forEach((btn) => {
|
|
714
699
|
const handler = (e) => {
|
|
715
700
|
if (!this.dragState)
|
|
@@ -723,6 +708,14 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
723
708
|
btn.addEventListener('dragenter', handler);
|
|
724
709
|
btn.addEventListener('dragover', handler);
|
|
725
710
|
});
|
|
711
|
+
// Render any layout that was set before the shadow DOM existed.
|
|
712
|
+
this.renderLayout();
|
|
713
|
+
}
|
|
714
|
+
connectedCallback() {
|
|
715
|
+
super.connectedCallback();
|
|
716
|
+
if (!this.hasAttribute('role')) {
|
|
717
|
+
this.setAttribute('role', 'application');
|
|
718
|
+
}
|
|
726
719
|
const win = this.windowRef;
|
|
727
720
|
win?.addEventListener('dragover', this.onGlobalDragOver);
|
|
728
721
|
win?.addEventListener('drag', this.onDrag);
|
|
@@ -730,12 +723,12 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
730
723
|
win?.addEventListener('resize', this.onWindowResize);
|
|
731
724
|
}
|
|
732
725
|
disconnectedCallback() {
|
|
733
|
-
this.rootEl
|
|
734
|
-
this.rootEl
|
|
735
|
-
this.rootEl
|
|
736
|
-
this.dropJoystick
|
|
737
|
-
this.dropJoystick
|
|
738
|
-
this.dropJoystick
|
|
726
|
+
this.rootEl?.removeEventListener('dragover', this.onDragOver);
|
|
727
|
+
this.rootEl?.removeEventListener('drop', this.onDrop);
|
|
728
|
+
this.rootEl?.removeEventListener('dragleave', this.onDragLeave);
|
|
729
|
+
this.dropJoystick?.removeEventListener('dragover', this.onDragOver);
|
|
730
|
+
this.dropJoystick?.removeEventListener('drop', this.onDrop);
|
|
731
|
+
this.dropJoystick?.removeEventListener('dragleave', this.onDragLeave);
|
|
739
732
|
const win = this.windowRef;
|
|
740
733
|
win?.removeEventListener('dragover', this.onGlobalDragOver);
|
|
741
734
|
win?.removeEventListener('drag', this.onDrag);
|
|
@@ -744,10 +737,11 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
744
737
|
win?.removeEventListener('pointermove', this.onPointerMove);
|
|
745
738
|
win?.removeEventListener('pointerup', this.onPointerUp);
|
|
746
739
|
this.pointerTrackingActive = false;
|
|
747
|
-
|
|
748
|
-
|
|
740
|
+
win?.removeEventListener('resize', this.onWindowResize);
|
|
741
|
+
super.disconnectedCallback();
|
|
749
742
|
}
|
|
750
743
|
attributeChangedCallback(name, _oldValue, newValue) {
|
|
744
|
+
super.attributeChangedCallback(name, _oldValue, newValue);
|
|
751
745
|
if (name === 'layout') {
|
|
752
746
|
this.layout = newValue ? this.parseLayout(newValue) : null;
|
|
753
747
|
}
|
|
@@ -770,7 +764,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
770
764
|
this.rootLayout = this.cloneLayoutNode(snapshot.root);
|
|
771
765
|
this.floatingLayouts = this.cloneFloatingArray(snapshot.floating);
|
|
772
766
|
this.titles = snapshot.titles ? { ...snapshot.titles } : {};
|
|
773
|
-
this.
|
|
767
|
+
this.renderLayout();
|
|
774
768
|
}
|
|
775
769
|
get snapshot() {
|
|
776
770
|
return this.layout;
|
|
@@ -823,7 +817,12 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
823
817
|
titles: layout.titles ? { ...layout.titles } : {},
|
|
824
818
|
};
|
|
825
819
|
}
|
|
826
|
-
|
|
820
|
+
renderLayout() {
|
|
821
|
+
// The layout setter may run before firstUpdated() has populated the
|
|
822
|
+
// shadow-DOM fields (e.g. when an attribute is set on the markup).
|
|
823
|
+
// Bail out; firstUpdated() will call renderLayout() once ready.
|
|
824
|
+
if (!this.dockedEl)
|
|
825
|
+
return;
|
|
827
826
|
this.dockedEl.innerHTML = '';
|
|
828
827
|
this.floatingLayerEl.innerHTML = '';
|
|
829
828
|
this.hideDropIndicator();
|
|
@@ -2637,7 +2636,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2637
2636
|
};
|
|
2638
2637
|
this.floatingLayouts.push(floatingLayout);
|
|
2639
2638
|
const newIndex = this.floatingLayouts.length - 1;
|
|
2640
|
-
this.
|
|
2639
|
+
this.renderLayout();
|
|
2641
2640
|
const wrapper = this.getFloatingWrapper(newIndex);
|
|
2642
2641
|
if (wrapper) {
|
|
2643
2642
|
this.promoteFloatingPane(newIndex, wrapper);
|
|
@@ -2740,7 +2739,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2740
2739
|
if (location) {
|
|
2741
2740
|
const idx = this.computeHeaderInsertIndex(header, clientX);
|
|
2742
2741
|
this.reorderPaneInLocationAtIndex(location, this.dragState.pane, idx);
|
|
2743
|
-
this.
|
|
2742
|
+
this.renderLayout();
|
|
2744
2743
|
this.dispatchLayoutChanged();
|
|
2745
2744
|
this.dragState.dropHandled = true;
|
|
2746
2745
|
return;
|
|
@@ -2839,7 +2838,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2839
2838
|
if (location) {
|
|
2840
2839
|
const idx = this.computeHeaderInsertIndex(header, x);
|
|
2841
2840
|
this.reorderPaneInLocationAtIndex(location, this.dragState.pane, idx);
|
|
2842
|
-
this.
|
|
2841
|
+
this.renderLayout();
|
|
2843
2842
|
this.dispatchLayoutChanged();
|
|
2844
2843
|
this.dragState.dropHandled = true;
|
|
2845
2844
|
this.endPaneDrag();
|
|
@@ -2911,7 +2910,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2911
2910
|
if (stackEmptied) {
|
|
2912
2911
|
this.cleanupLocation(source);
|
|
2913
2912
|
}
|
|
2914
|
-
this.
|
|
2913
|
+
this.renderLayout();
|
|
2915
2914
|
this.dispatchLayoutChanged();
|
|
2916
2915
|
if (this.dragState) {
|
|
2917
2916
|
this.dragState.dropHandled = true;
|
|
@@ -2926,7 +2925,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2926
2925
|
return;
|
|
2927
2926
|
}
|
|
2928
2927
|
this.reorderPaneInLocation(source, pane);
|
|
2929
|
-
this.
|
|
2928
|
+
this.renderLayout();
|
|
2930
2929
|
this.dispatchLayoutChanged();
|
|
2931
2930
|
if (this.dragState) {
|
|
2932
2931
|
this.dragState.dropHandled = true;
|
|
@@ -2940,7 +2939,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2940
2939
|
if (stackEmptied) {
|
|
2941
2940
|
this.cleanupLocation(source);
|
|
2942
2941
|
}
|
|
2943
|
-
this.
|
|
2942
|
+
this.renderLayout();
|
|
2944
2943
|
this.dispatchLayoutChanged();
|
|
2945
2944
|
if (this.dragState) {
|
|
2946
2945
|
this.dragState.dropHandled = true;
|
|
@@ -2961,7 +2960,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2961
2960
|
if (stackEmptied) {
|
|
2962
2961
|
this.cleanupLocation(source);
|
|
2963
2962
|
}
|
|
2964
|
-
this.
|
|
2963
|
+
this.renderLayout();
|
|
2965
2964
|
this.dispatchLayoutChanged();
|
|
2966
2965
|
return;
|
|
2967
2966
|
}
|
|
@@ -2971,7 +2970,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2971
2970
|
if (stackEmptied) {
|
|
2972
2971
|
this.cleanupLocation(source);
|
|
2973
2972
|
}
|
|
2974
|
-
this.
|
|
2973
|
+
this.renderLayout();
|
|
2975
2974
|
this.dispatchLayoutChanged();
|
|
2976
2975
|
if (this.dragState) {
|
|
2977
2976
|
this.dragState.dropHandled = true;
|
|
@@ -2988,7 +2987,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
2988
2987
|
if (!target && targetPath.type === 'docked' && !this.rootLayout) {
|
|
2989
2988
|
this.rootLayout = this.cloneLayoutNode(source.root);
|
|
2990
2989
|
this.removeFloatingAt(sourceIndex);
|
|
2991
|
-
this.
|
|
2990
|
+
this.renderLayout();
|
|
2992
2991
|
this.dispatchLayoutChanged();
|
|
2993
2992
|
return true;
|
|
2994
2993
|
}
|
|
@@ -3013,7 +3012,7 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
3013
3012
|
this.setActivePaneForLocation(target, activePane);
|
|
3014
3013
|
}
|
|
3015
3014
|
this.removeFloatingAt(sourceIndex);
|
|
3016
|
-
this.
|
|
3015
|
+
this.renderLayout();
|
|
3017
3016
|
this.dispatchLayoutChanged();
|
|
3018
3017
|
return true;
|
|
3019
3018
|
}
|
|
@@ -3025,13 +3024,13 @@ class MintDockManagerElement extends HTMLElement {
|
|
|
3025
3024
|
floating.root = this.dockNodeBeside(floating.root, target.node, source.root, zone);
|
|
3026
3025
|
floating.activePane = source.activePane ?? this.findFirstPaneName(source.root) ?? undefined;
|
|
3027
3026
|
this.removeFloatingAt(sourceIndex);
|
|
3028
|
-
this.
|
|
3027
|
+
this.renderLayout();
|
|
3029
3028
|
this.dispatchLayoutChanged();
|
|
3030
3029
|
return true;
|
|
3031
3030
|
}
|
|
3032
3031
|
this.rootLayout = this.dockNodeBeside(this.rootLayout, target.node, source.root, zone);
|
|
3033
3032
|
this.removeFloatingAt(sourceIndex);
|
|
3034
|
-
this.
|
|
3033
|
+
this.renderLayout();
|
|
3035
3034
|
this.dispatchLayoutChanged();
|
|
3036
3035
|
return true;
|
|
3037
3036
|
}
|