@sequent-org/moodboard 1.2.7 → 1.2.9
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/package.json +1 -1
- package/src/index.js +387 -0
- package/src/initNoBundler.js +2 -4
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -1,7 +1,394 @@
|
|
|
1
1
|
// Основной экспорт пакета - готовый MoodBoard с UI
|
|
2
2
|
export { MoodBoard } from './moodboard/MoodBoard.js';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Диагностика конфликтов CSS для панелей
|
|
6
|
+
* Находит что именно переопределяет ширину панелей
|
|
7
|
+
*/
|
|
8
|
+
export function diagnosePanelConflicts() {
|
|
9
|
+
console.log('🔍 ДИАГНОСТИКА: поиск конфликтов стилей панелей...');
|
|
10
|
+
|
|
11
|
+
const panel = document.querySelector('.text-properties-panel, .frame-properties-panel');
|
|
12
|
+
if (!panel) {
|
|
13
|
+
console.log('❌ Панели не найдены. Создайте объект и выберите его.');
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
console.log('📋 Найдена панель:', panel.className);
|
|
18
|
+
|
|
19
|
+
// Получаем все применяемые стили
|
|
20
|
+
const computedStyle = getComputedStyle(panel);
|
|
21
|
+
console.log('📏 Текущие размеры панели:');
|
|
22
|
+
console.log(' - width:', computedStyle.width);
|
|
23
|
+
console.log(' - min-width:', computedStyle.minWidth);
|
|
24
|
+
console.log(' - max-width:', computedStyle.maxWidth);
|
|
25
|
+
console.log(' - height:', computedStyle.height);
|
|
26
|
+
console.log(' - padding:', computedStyle.padding);
|
|
27
|
+
console.log(' - display:', computedStyle.display);
|
|
28
|
+
console.log(' - position:', computedStyle.position);
|
|
29
|
+
|
|
30
|
+
// Проверяем inline стили
|
|
31
|
+
if (panel.style.cssText) {
|
|
32
|
+
console.log('⚠️ НАЙДЕНЫ inline стили на панели:', panel.style.cssText);
|
|
33
|
+
} else {
|
|
34
|
+
console.log('✅ Inline стилей нет');
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Ищем все CSS правила, которые могут влиять на панель
|
|
38
|
+
console.log('🔍 Поиск CSS правил, влияющих на панель...');
|
|
39
|
+
|
|
40
|
+
// Проверяем основные подозрительные свойства
|
|
41
|
+
const suspiciousProperties = ['width', 'min-width', 'max-width', 'height', 'padding', 'display'];
|
|
42
|
+
|
|
43
|
+
suspiciousProperties.forEach(prop => {
|
|
44
|
+
const value = computedStyle.getPropertyValue(prop);
|
|
45
|
+
console.log(`📌 ${prop}: ${value}`);
|
|
46
|
+
|
|
47
|
+
// Проверяем приоритет
|
|
48
|
+
const priority = computedStyle.getPropertyPriority(prop);
|
|
49
|
+
if (priority) {
|
|
50
|
+
console.log(` ⚡ Приоритет: ${priority}`);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
// Проверяем классы родительских элементов
|
|
55
|
+
let parent = panel.parentElement;
|
|
56
|
+
let level = 1;
|
|
57
|
+
console.log('🔗 Родительские элементы:');
|
|
58
|
+
while (parent && level <= 5) {
|
|
59
|
+
const parentStyles = getComputedStyle(parent);
|
|
60
|
+
console.log(` ${level}. ${parent.tagName}${parent.className ? '.' + parent.className : ''}`);
|
|
61
|
+
console.log(` width: ${parentStyles.width}, display: ${parentStyles.display}`);
|
|
62
|
+
parent = parent.parentElement;
|
|
63
|
+
level++;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Ищем потенциальные конфликтующие CSS классы
|
|
67
|
+
console.log('⚠️ Поиск потенциальных конфликтов:');
|
|
68
|
+
|
|
69
|
+
const possibleConflicts = [
|
|
70
|
+
'bootstrap', 'tailwind', 'flex', 'grid', 'container', 'row', 'col',
|
|
71
|
+
'w-', 'width', 'min-w', 'max-w', 'panel', 'modal', 'popup'
|
|
72
|
+
];
|
|
73
|
+
|
|
74
|
+
const allClasses = panel.className.split(' ');
|
|
75
|
+
const parentClasses = panel.parentElement?.className?.split(' ') || [];
|
|
76
|
+
|
|
77
|
+
[...allClasses, ...parentClasses].forEach(cls => {
|
|
78
|
+
possibleConflicts.forEach(conflict => {
|
|
79
|
+
if (cls.includes(conflict)) {
|
|
80
|
+
console.log(`🚨 Подозрительный класс: "${cls}" (содержит "${conflict}")`);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
return {
|
|
86
|
+
element: panel,
|
|
87
|
+
computedStyle: computedStyle,
|
|
88
|
+
currentWidth: computedStyle.width,
|
|
89
|
+
currentMinWidth: computedStyle.minWidth,
|
|
90
|
+
hasInlineStyles: !!panel.style.cssText
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Хирургическое исправление конкретных свойств панелей
|
|
96
|
+
* Исправляет только width и min-width, не трогая остальное
|
|
97
|
+
*/
|
|
98
|
+
export function surgicalPanelFix() {
|
|
99
|
+
console.log('🔧 ХИРУРГИЧЕСКОЕ исправление размеров панелей...');
|
|
100
|
+
|
|
101
|
+
const targetPanels = document.querySelectorAll(`
|
|
102
|
+
.text-properties-panel,
|
|
103
|
+
.frame-properties-panel,
|
|
104
|
+
.note-properties-panel,
|
|
105
|
+
.file-properties-panel,
|
|
106
|
+
.moodboard-file-properties-panel
|
|
107
|
+
`);
|
|
108
|
+
|
|
109
|
+
if (targetPanels.length === 0) {
|
|
110
|
+
console.log('❌ Панели не найдены');
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
targetPanels.forEach((panel, index) => {
|
|
115
|
+
console.log(`🔧 Исправляем панель ${index + 1}: ${panel.className}`);
|
|
116
|
+
|
|
117
|
+
// Запоминаем текущие значения для диагностики
|
|
118
|
+
const beforeWidth = getComputedStyle(panel).width;
|
|
119
|
+
const beforeMinWidth = getComputedStyle(panel).minWidth;
|
|
120
|
+
|
|
121
|
+
// Применяем ТОЛЬКО минимально необходимые исправления
|
|
122
|
+
if (panel.classList.contains('text-properties-panel') ||
|
|
123
|
+
panel.classList.contains('frame-properties-panel')) {
|
|
124
|
+
panel.style.setProperty('min-width', '320px', 'important');
|
|
125
|
+
panel.style.setProperty('width', 'auto', 'important');
|
|
126
|
+
} else if (panel.classList.contains('note-properties-panel')) {
|
|
127
|
+
panel.style.setProperty('min-width', '280px', 'important');
|
|
128
|
+
panel.style.setProperty('width', 'auto', 'important');
|
|
129
|
+
} else if (panel.classList.contains('file-properties-panel') ||
|
|
130
|
+
panel.classList.contains('moodboard-file-properties-panel')) {
|
|
131
|
+
panel.style.setProperty('min-width', '250px', 'important');
|
|
132
|
+
panel.style.setProperty('width', 'auto', 'important');
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Проверяем результат
|
|
136
|
+
setTimeout(() => {
|
|
137
|
+
const afterWidth = getComputedStyle(panel).width;
|
|
138
|
+
const afterMinWidth = getComputedStyle(panel).minWidth;
|
|
139
|
+
|
|
140
|
+
console.log(`📏 Панель ${index + 1} результат:`);
|
|
141
|
+
console.log(` До: width: ${beforeWidth}, min-width: ${beforeMinWidth}`);
|
|
142
|
+
console.log(` После: width: ${afterWidth}, min-width: ${afterMinWidth}`);
|
|
143
|
+
|
|
144
|
+
if (parseInt(afterMinWidth) >= 250) {
|
|
145
|
+
console.log(`✅ Панель ${index + 1} исправлена успешно!`);
|
|
146
|
+
} else {
|
|
147
|
+
console.log(`❌ Панель ${index + 1} все еще имеет проблемы`);
|
|
148
|
+
}
|
|
149
|
+
}, 50);
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
|
|
4
153
|
// Дополнительные экспорты для работы без bundler
|
|
5
154
|
export { initMoodBoardNoBundler, quickInitMoodBoard, injectCriticalStyles, forceInjectPanelStyles } from './initNoBundler.js';
|
|
6
155
|
export { StyleLoader } from './utils/styleLoader.js';
|
|
7
156
|
export { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* СУПЕР-АГРЕССИВНАЯ функция для исправления панелей в проектах с конфликтами CSS
|
|
160
|
+
*/
|
|
161
|
+
export function forceFixPanelStyles() {
|
|
162
|
+
console.log('💪 СУПЕР-АГРЕССИВНОЕ исправление панелей (для проектов с конфликтами)...');
|
|
163
|
+
|
|
164
|
+
const superForcedCSS = `
|
|
165
|
+
/* МАКСИМАЛЬНО АГРЕССИВНЫЕ стили панелей */
|
|
166
|
+
.text-properties-panel,
|
|
167
|
+
div.text-properties-panel,
|
|
168
|
+
[class*="text-properties-panel"] {
|
|
169
|
+
min-width: 320px !important;
|
|
170
|
+
max-width: none !important;
|
|
171
|
+
width: auto !important;
|
|
172
|
+
height: 36px !important;
|
|
173
|
+
padding: 12px 22px !important;
|
|
174
|
+
margin: 0 !important;
|
|
175
|
+
background: #ffffff !important;
|
|
176
|
+
background-color: #ffffff !important;
|
|
177
|
+
border: 1px solid #e0e0e0 !important;
|
|
178
|
+
border-radius: 9999px !important;
|
|
179
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
180
|
+
display: flex !important;
|
|
181
|
+
flex-direction: row !important;
|
|
182
|
+
align-items: center !important;
|
|
183
|
+
gap: 8px !important;
|
|
184
|
+
font-size: 13px !important;
|
|
185
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
186
|
+
position: absolute !important;
|
|
187
|
+
pointer-events: auto !important;
|
|
188
|
+
z-index: 10001 !important;
|
|
189
|
+
box-sizing: border-box !important;
|
|
190
|
+
transform: none !important;
|
|
191
|
+
opacity: 1 !important;
|
|
192
|
+
visibility: visible !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.frame-properties-panel,
|
|
196
|
+
div.frame-properties-panel,
|
|
197
|
+
[class*="frame-properties-panel"] {
|
|
198
|
+
min-width: 320px !important;
|
|
199
|
+
max-width: none !important;
|
|
200
|
+
width: auto !important;
|
|
201
|
+
height: 36px !important;
|
|
202
|
+
padding: 12px 32px !important;
|
|
203
|
+
margin: 0 !important;
|
|
204
|
+
background: #ffffff !important;
|
|
205
|
+
background-color: #ffffff !important;
|
|
206
|
+
border: 1px solid #e0e0e0 !important;
|
|
207
|
+
border-radius: 9999px !important;
|
|
208
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
209
|
+
display: inline-flex !important;
|
|
210
|
+
align-items: center !important;
|
|
211
|
+
gap: 8px !important;
|
|
212
|
+
font-size: 13px !important;
|
|
213
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
214
|
+
position: absolute !important;
|
|
215
|
+
pointer-events: auto !important;
|
|
216
|
+
z-index: 10001 !important;
|
|
217
|
+
box-sizing: border-box !important;
|
|
218
|
+
transform: none !important;
|
|
219
|
+
opacity: 1 !important;
|
|
220
|
+
visibility: visible !important;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.note-properties-panel,
|
|
224
|
+
div.note-properties-panel,
|
|
225
|
+
[class*="note-properties-panel"] {
|
|
226
|
+
min-width: 280px !important;
|
|
227
|
+
max-width: none !important;
|
|
228
|
+
width: auto !important;
|
|
229
|
+
height: 40px !important;
|
|
230
|
+
padding: 8px 40px !important;
|
|
231
|
+
margin: 0 !important;
|
|
232
|
+
background: white !important;
|
|
233
|
+
background-color: white !important;
|
|
234
|
+
border: 1px solid #e0e0e0 !important;
|
|
235
|
+
border-radius: 9999px !important;
|
|
236
|
+
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16) !important;
|
|
237
|
+
display: inline-flex !important;
|
|
238
|
+
flex-direction: row !important;
|
|
239
|
+
align-items: center !important;
|
|
240
|
+
gap: 8px !important;
|
|
241
|
+
font-size: 12px !important;
|
|
242
|
+
font-family: Arial, sans-serif !important;
|
|
243
|
+
position: absolute !important;
|
|
244
|
+
pointer-events: auto !important;
|
|
245
|
+
z-index: 10000 !important;
|
|
246
|
+
box-sizing: border-box !important;
|
|
247
|
+
backdrop-filter: blur(4px) !important;
|
|
248
|
+
transform: none !important;
|
|
249
|
+
opacity: 1 !important;
|
|
250
|
+
visibility: visible !important;
|
|
251
|
+
}
|
|
252
|
+
`;
|
|
253
|
+
|
|
254
|
+
// Удаляем предыдущие версии
|
|
255
|
+
const existingStyles = document.querySelectorAll('#moodboard-universal-panel-fix, #moodboard-super-force-panel-fix');
|
|
256
|
+
existingStyles.forEach(style => style.remove());
|
|
257
|
+
|
|
258
|
+
const style = document.createElement('style');
|
|
259
|
+
style.id = 'moodboard-super-force-panel-fix';
|
|
260
|
+
style.textContent = superForcedCSS;
|
|
261
|
+
|
|
262
|
+
// Вставляем в самый конец head для максимального приоритета
|
|
263
|
+
document.head.appendChild(style);
|
|
264
|
+
|
|
265
|
+
console.log('💪 Супер-агрессивные стили применены');
|
|
266
|
+
|
|
267
|
+
// Проверяем все панели
|
|
268
|
+
setTimeout(() => {
|
|
269
|
+
const panels = document.querySelectorAll('.text-properties-panel, .frame-properties-panel, .note-properties-panel');
|
|
270
|
+
panels.forEach((panel, index) => {
|
|
271
|
+
const computedStyle = getComputedStyle(panel);
|
|
272
|
+
const width = parseInt(computedStyle.minWidth);
|
|
273
|
+
console.log(`📏 Панель ${index + 1}: minWidth = ${width}px`);
|
|
274
|
+
});
|
|
275
|
+
}, 200);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* Универсальная функция для исправления стилей панелей
|
|
280
|
+
* Работает с любой версией MoodBoard (bundled и no-bundler)
|
|
281
|
+
*/
|
|
282
|
+
export function fixPanelStyles() {
|
|
283
|
+
console.log('🔧 Исправляем стили панелей MoodBoard (универсальная версия)...');
|
|
284
|
+
|
|
285
|
+
const forcedPanelCSS = `
|
|
286
|
+
/* УНИВЕРСАЛЬНЫЕ принудительные стили панелей */
|
|
287
|
+
.text-properties-panel {
|
|
288
|
+
min-width: 320px !important;
|
|
289
|
+
width: auto !important;
|
|
290
|
+
height: 36px !important;
|
|
291
|
+
padding: 12px 22px !important;
|
|
292
|
+
background-color: #ffffff !important;
|
|
293
|
+
border: 1px solid #e0e0e0 !important;
|
|
294
|
+
border-radius: 9999px !important;
|
|
295
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
296
|
+
display: flex !important;
|
|
297
|
+
flex-direction: row !important;
|
|
298
|
+
align-items: center !important;
|
|
299
|
+
gap: 8px !important;
|
|
300
|
+
font-size: 13px !important;
|
|
301
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
302
|
+
position: absolute !important;
|
|
303
|
+
pointer-events: auto !important;
|
|
304
|
+
z-index: 1001 !important;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.frame-properties-panel {
|
|
308
|
+
min-width: 320px !important;
|
|
309
|
+
width: auto !important;
|
|
310
|
+
height: 36px !important;
|
|
311
|
+
padding: 12px 32px !important;
|
|
312
|
+
background-color: #ffffff !important;
|
|
313
|
+
border: 1px solid #e0e0e0 !important;
|
|
314
|
+
border-radius: 9999px !important;
|
|
315
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
316
|
+
display: inline-flex !important;
|
|
317
|
+
align-items: center !important;
|
|
318
|
+
gap: 8px !important;
|
|
319
|
+
font-size: 13px !important;
|
|
320
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
321
|
+
position: absolute !important;
|
|
322
|
+
pointer-events: auto !important;
|
|
323
|
+
z-index: 1001 !important;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.note-properties-panel {
|
|
327
|
+
min-width: 280px !important;
|
|
328
|
+
width: auto !important;
|
|
329
|
+
height: 36px !important;
|
|
330
|
+
padding: 12px 22px !important;
|
|
331
|
+
background-color: #ffffff !important;
|
|
332
|
+
border: 1px solid #e0e0e0 !important;
|
|
333
|
+
border-radius: 9999px !important;
|
|
334
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
335
|
+
display: inline-flex !important;
|
|
336
|
+
align-items: center !important;
|
|
337
|
+
gap: 8px !important;
|
|
338
|
+
font-size: 13px !important;
|
|
339
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
340
|
+
position: absolute !important;
|
|
341
|
+
pointer-events: auto !important;
|
|
342
|
+
z-index: 1001 !important;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.file-properties-panel, .moodboard-file-properties-panel {
|
|
346
|
+
min-width: 250px !important;
|
|
347
|
+
width: auto !important;
|
|
348
|
+
height: 36px !important;
|
|
349
|
+
padding: 8px 12px !important;
|
|
350
|
+
background-color: #ffffff !important;
|
|
351
|
+
border: 1px solid #e5e7eb !important;
|
|
352
|
+
border-radius: 8px !important;
|
|
353
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
|
354
|
+
display: flex !important;
|
|
355
|
+
flex-direction: row !important;
|
|
356
|
+
align-items: center !important;
|
|
357
|
+
gap: 8px !important;
|
|
358
|
+
font-size: 14px !important;
|
|
359
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
|
|
360
|
+
position: absolute !important;
|
|
361
|
+
pointer-events: auto !important;
|
|
362
|
+
z-index: 1000 !important;
|
|
363
|
+
}
|
|
364
|
+
`;
|
|
365
|
+
|
|
366
|
+
// Проверяем, не добавлены ли уже стили
|
|
367
|
+
if (document.getElementById('moodboard-universal-panel-fix')) {
|
|
368
|
+
console.log('⚠️ Универсальные стили панелей уже добавлены');
|
|
369
|
+
return;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
const style = document.createElement('style');
|
|
373
|
+
style.id = 'moodboard-universal-panel-fix';
|
|
374
|
+
style.textContent = forcedPanelCSS;
|
|
375
|
+
document.head.appendChild(style);
|
|
376
|
+
|
|
377
|
+
console.log('✅ Универсальные стили панелей добавлены');
|
|
378
|
+
|
|
379
|
+
// Проверяем результат через 100ms
|
|
380
|
+
setTimeout(() => {
|
|
381
|
+
const panel = document.querySelector('.text-properties-panel, .frame-properties-panel, .note-properties-panel');
|
|
382
|
+
if (panel) {
|
|
383
|
+
const computedStyle = getComputedStyle(panel);
|
|
384
|
+
const width = parseInt(computedStyle.minWidth);
|
|
385
|
+
console.log(`📏 Проверка панели: minWidth = ${width}px`);
|
|
386
|
+
|
|
387
|
+
if (width >= 250) {
|
|
388
|
+
console.log('✅ Стили панелей исправлены успешно!');
|
|
389
|
+
} else {
|
|
390
|
+
console.log('⚠️ Панель все еще узкая, возможны конфликты CSS');
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
}, 100);
|
|
394
|
+
}
|
package/src/initNoBundler.js
CHANGED
|
@@ -81,8 +81,7 @@ export function injectCriticalStyles() {
|
|
|
81
81
|
flex-direction: column;
|
|
82
82
|
align-items: center;
|
|
83
83
|
gap: 8px;
|
|
84
|
-
pointer-events: auto;
|
|
85
|
-
width: 30px;
|
|
84
|
+
pointer-events: auto;
|
|
86
85
|
overflow: hidden;
|
|
87
86
|
cursor: default;
|
|
88
87
|
}
|
|
@@ -90,8 +89,7 @@ export function injectCriticalStyles() {
|
|
|
90
89
|
.moodboard-topbar {
|
|
91
90
|
position: absolute;
|
|
92
91
|
top: 12px;
|
|
93
|
-
left: 16px;
|
|
94
|
-
height: 30px;
|
|
92
|
+
left: 16px;
|
|
95
93
|
display: inline-flex;
|
|
96
94
|
align-items: center;
|
|
97
95
|
gap: 6px;
|