slicejs-web-framework 2.3.3 → 2.3.4
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.
|
@@ -17,6 +17,7 @@ export default class ContextManagerDebugger extends HTMLElement {
|
|
|
17
17
|
slice.stylesManager.registerComponentStyles('ContextManagerDebugger', this.renderStyles());
|
|
18
18
|
this.cacheElements();
|
|
19
19
|
this.bindEvents();
|
|
20
|
+
this.makeDraggable();
|
|
20
21
|
this.renderList();
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -53,6 +54,7 @@ export default class ContextManagerDebugger extends HTMLElement {
|
|
|
53
54
|
|
|
54
55
|
cacheElements() {
|
|
55
56
|
this.container = this.querySelector('#context-debugger');
|
|
57
|
+
this.header = this.querySelector('.context-header');
|
|
56
58
|
this.list = this.querySelector('#context-list');
|
|
57
59
|
this.filterInput = this.querySelector('#context-filter');
|
|
58
60
|
this.countLabel = this.querySelector('#context-count');
|
|
@@ -69,6 +71,42 @@ export default class ContextManagerDebugger extends HTMLElement {
|
|
|
69
71
|
});
|
|
70
72
|
}
|
|
71
73
|
|
|
74
|
+
makeDraggable() {
|
|
75
|
+
if (!this.header || !this.container) return;
|
|
76
|
+
|
|
77
|
+
let offset = { x: 0, y: 0 };
|
|
78
|
+
let isDragging = false;
|
|
79
|
+
|
|
80
|
+
this.header.style.cursor = 'grab';
|
|
81
|
+
|
|
82
|
+
this.header.addEventListener('mousedown', (event) => {
|
|
83
|
+
if (event.target.closest('.btn')) return;
|
|
84
|
+
isDragging = true;
|
|
85
|
+
offset.x = event.clientX - this.container.getBoundingClientRect().left;
|
|
86
|
+
offset.y = event.clientY - this.container.getBoundingClientRect().top;
|
|
87
|
+
this.header.style.cursor = 'grabbing';
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
document.addEventListener('mousemove', (event) => {
|
|
91
|
+
if (!isDragging) return;
|
|
92
|
+
const rect = this.container.getBoundingClientRect();
|
|
93
|
+
const maxX = window.innerWidth - rect.width;
|
|
94
|
+
const maxY = window.innerHeight - rect.height;
|
|
95
|
+
const x = Math.min(Math.max(event.clientX - offset.x, 0), maxX);
|
|
96
|
+
const y = Math.min(Math.max(event.clientY - offset.y, 0), maxY);
|
|
97
|
+
this.container.style.left = `${x}px`;
|
|
98
|
+
this.container.style.top = `${y}px`;
|
|
99
|
+
this.container.style.right = 'auto';
|
|
100
|
+
this.container.style.bottom = 'auto';
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
document.addEventListener('mouseup', () => {
|
|
104
|
+
if (!isDragging) return;
|
|
105
|
+
isDragging = false;
|
|
106
|
+
this.header.style.cursor = 'grab';
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
|
|
72
110
|
renderList() {
|
|
73
111
|
if (!slice?.context?.contexts) {
|
|
74
112
|
this.list.textContent = 'ContextManager not available.';
|
|
@@ -165,6 +203,7 @@ export default class ContextManagerDebugger extends HTMLElement {
|
|
|
165
203
|
padding: 12px 14px;
|
|
166
204
|
background: var(--tertiary-background-color);
|
|
167
205
|
border-bottom: 1px solid var(--medium-color);
|
|
206
|
+
user-select: none;
|
|
168
207
|
}
|
|
169
208
|
|
|
170
209
|
.context-header .title {
|
|
@@ -18,6 +18,7 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
18
18
|
slice.stylesManager.registerComponentStyles('EventManagerDebugger', this.renderStyles());
|
|
19
19
|
this.cacheElements();
|
|
20
20
|
this.bindEvents();
|
|
21
|
+
this.makeDraggable();
|
|
21
22
|
this.renderList();
|
|
22
23
|
}
|
|
23
24
|
|
|
@@ -54,6 +55,7 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
54
55
|
|
|
55
56
|
cacheElements() {
|
|
56
57
|
this.container = this.querySelector('#events-debugger');
|
|
58
|
+
this.header = this.querySelector('.events-header');
|
|
57
59
|
this.list = this.querySelector('#events-list');
|
|
58
60
|
this.filterInput = this.querySelector('#events-filter');
|
|
59
61
|
this.countLabel = this.querySelector('#events-count');
|
|
@@ -70,6 +72,42 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
70
72
|
});
|
|
71
73
|
}
|
|
72
74
|
|
|
75
|
+
makeDraggable() {
|
|
76
|
+
if (!this.header || !this.container) return;
|
|
77
|
+
|
|
78
|
+
let offset = { x: 0, y: 0 };
|
|
79
|
+
let isDragging = false;
|
|
80
|
+
|
|
81
|
+
this.header.style.cursor = 'grab';
|
|
82
|
+
|
|
83
|
+
this.header.addEventListener('mousedown', (event) => {
|
|
84
|
+
if (event.target.closest('.btn')) return;
|
|
85
|
+
isDragging = true;
|
|
86
|
+
offset.x = event.clientX - this.container.getBoundingClientRect().left;
|
|
87
|
+
offset.y = event.clientY - this.container.getBoundingClientRect().top;
|
|
88
|
+
this.header.style.cursor = 'grabbing';
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
document.addEventListener('mousemove', (event) => {
|
|
92
|
+
if (!isDragging) return;
|
|
93
|
+
const rect = this.container.getBoundingClientRect();
|
|
94
|
+
const maxX = window.innerWidth - rect.width;
|
|
95
|
+
const maxY = window.innerHeight - rect.height;
|
|
96
|
+
const x = Math.min(Math.max(event.clientX - offset.x, 0), maxX);
|
|
97
|
+
const y = Math.min(Math.max(event.clientY - offset.y, 0), maxY);
|
|
98
|
+
this.container.style.left = `${x}px`;
|
|
99
|
+
this.container.style.top = `${y}px`;
|
|
100
|
+
this.container.style.right = 'auto';
|
|
101
|
+
this.container.style.bottom = 'auto';
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
document.addEventListener('mouseup', () => {
|
|
105
|
+
if (!isDragging) return;
|
|
106
|
+
isDragging = false;
|
|
107
|
+
this.header.style.cursor = 'grab';
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
73
111
|
renderList() {
|
|
74
112
|
if (!slice?.events?.subscriptions) {
|
|
75
113
|
this.list.textContent = 'EventManager not available.';
|
|
@@ -79,11 +117,23 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
79
117
|
|
|
80
118
|
const items = [];
|
|
81
119
|
slice.events.subscriptions.forEach((subs, eventName) => {
|
|
82
|
-
const
|
|
120
|
+
const entries = Array.from(subs.entries()).map(([id, sub]) => {
|
|
121
|
+
const componentSliceId = sub.componentSliceId || null;
|
|
122
|
+
const component = componentSliceId ? slice.controller.getComponent(componentSliceId) : null;
|
|
123
|
+
const componentName = component?.constructor?.name || null;
|
|
124
|
+
return {
|
|
125
|
+
id,
|
|
126
|
+
once: sub.once,
|
|
127
|
+
componentSliceId,
|
|
128
|
+
componentName
|
|
129
|
+
};
|
|
130
|
+
});
|
|
131
|
+
|
|
83
132
|
if (this.filterText && !eventName.toLowerCase().includes(this.filterText)) {
|
|
84
133
|
return;
|
|
85
134
|
}
|
|
86
|
-
|
|
135
|
+
|
|
136
|
+
items.push({ eventName, count: subs.size, entries });
|
|
87
137
|
});
|
|
88
138
|
|
|
89
139
|
items.sort((a, b) => a.eventName.localeCompare(b.eventName));
|
|
@@ -91,11 +141,29 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
91
141
|
this.countLabel.textContent = String(items.length);
|
|
92
142
|
this.list.innerHTML = items.length
|
|
93
143
|
? items.map((item) => {
|
|
144
|
+
const details = item.entries.map((entry) => {
|
|
145
|
+
const label = entry.componentName
|
|
146
|
+
? `${entry.componentName} (${entry.componentSliceId})`
|
|
147
|
+
: entry.componentSliceId || 'Global';
|
|
148
|
+
const onceBadge = entry.once ? '<span class="badge">once</span>' : '';
|
|
149
|
+
return `
|
|
150
|
+
<div class="subscriber-row">
|
|
151
|
+
<div class="subscriber-name">${label}</div>
|
|
152
|
+
<div class="subscriber-meta">${entry.id}${onceBadge}</div>
|
|
153
|
+
</div>
|
|
154
|
+
`;
|
|
155
|
+
}).join('');
|
|
156
|
+
|
|
94
157
|
return `
|
|
95
|
-
<
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
158
|
+
<details class="event-row">
|
|
159
|
+
<summary>
|
|
160
|
+
<div class="event-name">${item.eventName}</div>
|
|
161
|
+
<div class="event-count">${item.count}</div>
|
|
162
|
+
</summary>
|
|
163
|
+
<div class="subscriber-list">
|
|
164
|
+
${details || '<div class="empty">No subscribers</div>'}
|
|
165
|
+
</div>
|
|
166
|
+
</details>
|
|
99
167
|
`;
|
|
100
168
|
}).join('')
|
|
101
169
|
: '<div class="empty">No events</div>';
|
|
@@ -153,6 +221,7 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
153
221
|
padding: 12px 14px;
|
|
154
222
|
background: var(--tertiary-background-color);
|
|
155
223
|
border-bottom: 1px solid var(--medium-color);
|
|
224
|
+
user-select: none;
|
|
156
225
|
}
|
|
157
226
|
|
|
158
227
|
.events-header .title {
|
|
@@ -202,13 +271,24 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
202
271
|
}
|
|
203
272
|
|
|
204
273
|
.event-row {
|
|
205
|
-
display:
|
|
206
|
-
justify-content: space-between;
|
|
274
|
+
display: block;
|
|
207
275
|
padding: 8px 10px;
|
|
208
276
|
background: var(--tertiary-background-color);
|
|
209
277
|
border-radius: 6px;
|
|
210
278
|
border: 1px solid var(--medium-color);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.event-row summary {
|
|
282
|
+
display: flex;
|
|
283
|
+
align-items: center;
|
|
284
|
+
justify-content: space-between;
|
|
211
285
|
gap: 8px;
|
|
286
|
+
cursor: pointer;
|
|
287
|
+
list-style: none;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.event-row summary::-webkit-details-marker {
|
|
291
|
+
display: none;
|
|
212
292
|
}
|
|
213
293
|
|
|
214
294
|
.event-name {
|
|
@@ -225,6 +305,49 @@ export default class EventManagerDebugger extends HTMLElement {
|
|
|
225
305
|
color: var(--primary-color);
|
|
226
306
|
}
|
|
227
307
|
|
|
308
|
+
.subscriber-list {
|
|
309
|
+
margin-top: 10px;
|
|
310
|
+
display: flex;
|
|
311
|
+
flex-direction: column;
|
|
312
|
+
gap: 8px;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.subscriber-row {
|
|
316
|
+
display: flex;
|
|
317
|
+
justify-content: space-between;
|
|
318
|
+
gap: 8px;
|
|
319
|
+
padding: 6px 8px;
|
|
320
|
+
border-radius: 6px;
|
|
321
|
+
background: var(--primary-background-color);
|
|
322
|
+
border: 1px solid var(--medium-color);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.subscriber-name {
|
|
326
|
+
font-size: 12px;
|
|
327
|
+
color: var(--font-primary-color);
|
|
328
|
+
overflow: hidden;
|
|
329
|
+
text-overflow: ellipsis;
|
|
330
|
+
white-space: nowrap;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.subscriber-meta {
|
|
334
|
+
font-size: 11px;
|
|
335
|
+
color: var(--font-secondary-color);
|
|
336
|
+
display: flex;
|
|
337
|
+
align-items: center;
|
|
338
|
+
gap: 6px;
|
|
339
|
+
white-space: nowrap;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.badge {
|
|
343
|
+
padding: 2px 6px;
|
|
344
|
+
border-radius: 999px;
|
|
345
|
+
background: var(--secondary-color);
|
|
346
|
+
color: var(--secondary-color-contrast);
|
|
347
|
+
font-size: 10px;
|
|
348
|
+
text-transform: uppercase;
|
|
349
|
+
}
|
|
350
|
+
|
|
228
351
|
.empty {
|
|
229
352
|
color: var(--font-secondary-color);
|
|
230
353
|
font-size: 12px;
|