@sequent-org/moodboard 1.2.5 → 1.2.7
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 +1 -1
- package/src/initNoBundler.js +307 -23
- package/src/utils/styleLoader.js +34 -2
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
export { MoodBoard } from './moodboard/MoodBoard.js';
|
|
3
3
|
|
|
4
4
|
// Дополнительные экспорты для работы без bundler
|
|
5
|
-
export { initMoodBoardNoBundler, quickInitMoodBoard, injectCriticalStyles } from './initNoBundler.js';
|
|
5
|
+
export { initMoodBoardNoBundler, quickInitMoodBoard, injectCriticalStyles, forceInjectPanelStyles } from './initNoBundler.js';
|
|
6
6
|
export { StyleLoader } from './utils/styleLoader.js';
|
|
7
7
|
export { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';
|
package/src/initNoBundler.js
CHANGED
|
@@ -14,7 +14,7 @@ import { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';
|
|
|
14
14
|
*/
|
|
15
15
|
export async function initMoodBoardNoBundler(container, options = {}, basePath = '') {
|
|
16
16
|
|
|
17
|
-
// 1. Загружаем стили
|
|
17
|
+
// 1. Загружаем стили (с автоматическим fallback для панелей)
|
|
18
18
|
const styleLoader = new StyleLoader();
|
|
19
19
|
await styleLoader.loadAllStyles(basePath);
|
|
20
20
|
|
|
@@ -45,6 +45,13 @@ export async function initMoodBoardNoBundler(container, options = {}, basePath =
|
|
|
45
45
|
* Инжектирует критичные стили inline для мгновенного отображения
|
|
46
46
|
*/
|
|
47
47
|
export function injectCriticalStyles() {
|
|
48
|
+
// Проверяем, не добавлены ли уже критичные стили
|
|
49
|
+
if (document.getElementById('moodboard-critical-styles')) {
|
|
50
|
+
console.log('⚠️ Критичные стили уже добавлены');
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
console.log('🎨 Добавляем критичные стили MoodBoard...');
|
|
48
55
|
const criticalCSS = `
|
|
49
56
|
/* Критичные стили для мгновенного отображения */
|
|
50
57
|
.moodboard-workspace {
|
|
@@ -55,35 +62,46 @@ export function injectCriticalStyles() {
|
|
|
55
62
|
background: #f7fbff;
|
|
56
63
|
}
|
|
57
64
|
|
|
58
|
-
.moodboard-
|
|
65
|
+
.moodboard-workspace__toolbar {
|
|
59
66
|
position: absolute;
|
|
60
|
-
left:
|
|
67
|
+
left: 16px;
|
|
61
68
|
top: 50%;
|
|
62
69
|
transform: translateY(-50%);
|
|
63
|
-
z-index:
|
|
70
|
+
z-index: 3000;
|
|
71
|
+
pointer-events: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.moodboard-toolbar {
|
|
64
75
|
background: white;
|
|
65
|
-
border-radius:
|
|
66
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
76
|
+
border-radius: 999px;
|
|
67
77
|
padding: 8px;
|
|
68
|
-
|
|
78
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
79
|
+
border: 1px solid #e0e0e0;
|
|
80
|
+
display: inline-flex;
|
|
69
81
|
flex-direction: column;
|
|
70
|
-
|
|
82
|
+
align-items: center;
|
|
83
|
+
gap: 8px;
|
|
84
|
+
pointer-events: auto;
|
|
85
|
+
width: 30px;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
cursor: default;
|
|
71
88
|
}
|
|
72
89
|
|
|
73
90
|
.moodboard-topbar {
|
|
74
91
|
position: absolute;
|
|
75
|
-
top:
|
|
76
|
-
left:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
background: white;
|
|
80
|
-
border-radius: 12px;
|
|
81
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
82
|
-
padding: 8px 16px;
|
|
83
|
-
display: flex;
|
|
92
|
+
top: 12px;
|
|
93
|
+
left: 16px;
|
|
94
|
+
height: 30px;
|
|
95
|
+
display: inline-flex;
|
|
84
96
|
align-items: center;
|
|
85
|
-
gap:
|
|
86
|
-
|
|
97
|
+
gap: 6px;
|
|
98
|
+
padding: 8px 10px;
|
|
99
|
+
background: #fff;
|
|
100
|
+
border: 1px solid #e0e0e0;
|
|
101
|
+
border-radius: 9999px;
|
|
102
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
103
|
+
z-index: 3000;
|
|
104
|
+
pointer-events: auto;
|
|
87
105
|
}
|
|
88
106
|
|
|
89
107
|
.moodboard-html-handles {
|
|
@@ -94,15 +112,118 @@ export function injectCriticalStyles() {
|
|
|
94
112
|
z-index: 999;
|
|
95
113
|
}
|
|
96
114
|
|
|
115
|
+
/* КРИТИЧНЫЕ СТИЛИ ПАНЕЛЕЙ - для корректного отображения */
|
|
116
|
+
.text-properties-panel {
|
|
117
|
+
position: absolute;
|
|
118
|
+
pointer-events: auto;
|
|
119
|
+
display: flex !important;
|
|
120
|
+
flex-direction: row;
|
|
121
|
+
align-items: center;
|
|
122
|
+
gap: 8px;
|
|
123
|
+
padding: 12px 22px;
|
|
124
|
+
background-color: #ffffff;
|
|
125
|
+
border: 1px solid #e0e0e0;
|
|
126
|
+
border-radius: 9999px;
|
|
127
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
128
|
+
font-size: 13px;
|
|
129
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
130
|
+
min-width: 320px !important;
|
|
131
|
+
height: 36px !important;
|
|
132
|
+
z-index: 1001;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.frame-properties-panel {
|
|
136
|
+
position: absolute;
|
|
137
|
+
pointer-events: auto;
|
|
138
|
+
display: inline-flex !important;
|
|
139
|
+
align-items: center;
|
|
140
|
+
gap: 8px;
|
|
141
|
+
padding: 12px 32px;
|
|
142
|
+
background-color: #ffffff;
|
|
143
|
+
border: 1px solid #e0e0e0;
|
|
144
|
+
border-radius: 9999px;
|
|
145
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
146
|
+
font-size: 13px;
|
|
147
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
148
|
+
min-width: 320px !important;
|
|
149
|
+
height: 36px !important;
|
|
150
|
+
z-index: 1001;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.note-properties-panel {
|
|
154
|
+
position: absolute;
|
|
155
|
+
pointer-events: auto;
|
|
156
|
+
display: inline-flex !important;
|
|
157
|
+
align-items: center;
|
|
158
|
+
gap: 8px;
|
|
159
|
+
padding: 12px 22px;
|
|
160
|
+
background-color: #ffffff;
|
|
161
|
+
border: 1px solid #e0e0e0;
|
|
162
|
+
border-radius: 9999px;
|
|
163
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
164
|
+
font-size: 13px;
|
|
165
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
166
|
+
min-width: 280px !important;
|
|
167
|
+
height: 36px !important;
|
|
168
|
+
z-index: 1001;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.file-properties-panel {
|
|
172
|
+
position: absolute;
|
|
173
|
+
pointer-events: auto;
|
|
174
|
+
display: inline-flex !important;
|
|
175
|
+
align-items: center;
|
|
176
|
+
gap: 8px;
|
|
177
|
+
padding: 12px 22px;
|
|
178
|
+
background-color: #ffffff;
|
|
179
|
+
border: 1px solid #e0e0e0;
|
|
180
|
+
border-radius: 9999px;
|
|
181
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
182
|
+
font-size: 13px;
|
|
183
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
184
|
+
min-width: 250px !important;
|
|
185
|
+
height: 36px !important;
|
|
186
|
+
z-index: 1001;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* Базовые стили для элементов панелей */
|
|
190
|
+
.tpp-label, .fpp-label, .npp-label, .file-panel-label {
|
|
191
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
192
|
+
font-size: 12px;
|
|
193
|
+
color: #666;
|
|
194
|
+
font-weight: 500;
|
|
195
|
+
white-space: nowrap;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.font-select, .font-size-select, .fpp-select, .fpp-input {
|
|
199
|
+
border: 1px solid #ddd;
|
|
200
|
+
border-radius: 4px;
|
|
201
|
+
padding: 4px 8px;
|
|
202
|
+
font-size: 13px;
|
|
203
|
+
background-color: #fff;
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
min-height: 20px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.current-color-button, .current-bgcolor-button, .fpp-color-button {
|
|
209
|
+
width: 28px !important;
|
|
210
|
+
height: 28px !important;
|
|
211
|
+
border: 1px solid #ddd;
|
|
212
|
+
border-radius: 50%;
|
|
213
|
+
cursor: pointer;
|
|
214
|
+
margin: 0;
|
|
215
|
+
padding: 0;
|
|
216
|
+
display: block;
|
|
217
|
+
box-sizing: border-box;
|
|
218
|
+
}
|
|
219
|
+
|
|
97
220
|
/* Скрыть до полной загрузки стилей */
|
|
98
|
-
.moodboard-toolbar__popup
|
|
99
|
-
.moodboard-properties-panel {
|
|
221
|
+
.moodboard-toolbar__popup {
|
|
100
222
|
opacity: 0;
|
|
101
223
|
transition: opacity 0.3s ease;
|
|
102
224
|
}
|
|
103
225
|
|
|
104
|
-
.moodboard-styles-loaded .moodboard-toolbar__popup
|
|
105
|
-
.moodboard-styles-loaded .moodboard-properties-panel {
|
|
226
|
+
.moodboard-styles-loaded .moodboard-toolbar__popup {
|
|
106
227
|
opacity: 1;
|
|
107
228
|
}
|
|
108
229
|
`;
|
|
@@ -111,6 +232,153 @@ export function injectCriticalStyles() {
|
|
|
111
232
|
style.id = 'moodboard-critical-styles';
|
|
112
233
|
style.textContent = criticalCSS;
|
|
113
234
|
document.head.appendChild(style);
|
|
235
|
+
|
|
236
|
+
console.log('✅ Критичные стили добавлены в DOM');
|
|
237
|
+
|
|
238
|
+
// Проверяем, применились ли стили панелей
|
|
239
|
+
setTimeout(() => {
|
|
240
|
+
const testPanel = document.querySelector('.text-properties-panel');
|
|
241
|
+
if (testPanel) {
|
|
242
|
+
const computedStyle = getComputedStyle(testPanel);
|
|
243
|
+
console.log('📋 Стили панели применены:', {
|
|
244
|
+
minWidth: computedStyle.minWidth,
|
|
245
|
+
height: computedStyle.height,
|
|
246
|
+
display: computedStyle.display,
|
|
247
|
+
padding: computedStyle.padding
|
|
248
|
+
});
|
|
249
|
+
} else {
|
|
250
|
+
console.log('📋 Панели пока не созданы, стили ожидают применения');
|
|
251
|
+
}
|
|
252
|
+
}, 100);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* Принудительно инжектирует стили панелей с !important
|
|
257
|
+
* Используйте если панели отображаются узкими
|
|
258
|
+
*/
|
|
259
|
+
export function forceInjectPanelStyles() {
|
|
260
|
+
console.log('🔧 Принудительно добавляем стили панелей...');
|
|
261
|
+
|
|
262
|
+
const forcedPanelCSS = `
|
|
263
|
+
/* ПРИНУДИТЕЛЬНЫЕ стили панелей - с !important */
|
|
264
|
+
.text-properties-panel {
|
|
265
|
+
position: absolute !important;
|
|
266
|
+
pointer-events: auto !important;
|
|
267
|
+
display: flex !important;
|
|
268
|
+
flex-direction: row !important;
|
|
269
|
+
align-items: center !important;
|
|
270
|
+
gap: 8px !important;
|
|
271
|
+
padding: 12px 22px !important;
|
|
272
|
+
background-color: #ffffff !important;
|
|
273
|
+
border: 1px solid #e0e0e0 !important;
|
|
274
|
+
border-radius: 9999px !important;
|
|
275
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
276
|
+
font-size: 13px !important;
|
|
277
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
278
|
+
min-width: 320px !important;
|
|
279
|
+
width: auto !important;
|
|
280
|
+
height: 36px !important;
|
|
281
|
+
z-index: 1001 !important;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.frame-properties-panel {
|
|
285
|
+
position: absolute !important;
|
|
286
|
+
pointer-events: auto !important;
|
|
287
|
+
display: inline-flex !important;
|
|
288
|
+
align-items: center !important;
|
|
289
|
+
gap: 8px !important;
|
|
290
|
+
padding: 12px 32px !important;
|
|
291
|
+
background-color: #ffffff !important;
|
|
292
|
+
border: 1px solid #e0e0e0 !important;
|
|
293
|
+
border-radius: 9999px !important;
|
|
294
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
295
|
+
font-size: 13px !important;
|
|
296
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
297
|
+
min-width: 320px !important;
|
|
298
|
+
width: auto !important;
|
|
299
|
+
height: 36px !important;
|
|
300
|
+
z-index: 1001 !important;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.note-properties-panel {
|
|
304
|
+
position: absolute !important;
|
|
305
|
+
pointer-events: auto !important;
|
|
306
|
+
display: inline-flex !important;
|
|
307
|
+
align-items: center !important;
|
|
308
|
+
gap: 8px !important;
|
|
309
|
+
padding: 12px 22px !important;
|
|
310
|
+
background-color: #ffffff !important;
|
|
311
|
+
border: 1px solid #e0e0e0 !important;
|
|
312
|
+
border-radius: 9999px !important;
|
|
313
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
314
|
+
font-size: 13px !important;
|
|
315
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
316
|
+
min-width: 280px !important;
|
|
317
|
+
width: auto !important;
|
|
318
|
+
height: 36px !important;
|
|
319
|
+
z-index: 1001 !important;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.file-properties-panel {
|
|
323
|
+
position: absolute !important;
|
|
324
|
+
pointer-events: auto !important;
|
|
325
|
+
display: inline-flex !important;
|
|
326
|
+
align-items: center !important;
|
|
327
|
+
gap: 8px !important;
|
|
328
|
+
padding: 12px 22px !important;
|
|
329
|
+
background-color: #ffffff !important;
|
|
330
|
+
border: 1px solid #e0e0e0 !important;
|
|
331
|
+
border-radius: 9999px !important;
|
|
332
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
|
|
333
|
+
font-size: 13px !important;
|
|
334
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
335
|
+
min-width: 250px !important;
|
|
336
|
+
width: auto !important;
|
|
337
|
+
height: 36px !important;
|
|
338
|
+
z-index: 1001 !important;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* Элементы панелей */
|
|
342
|
+
.tpp-label, .fpp-label, .npp-label, .file-panel-label {
|
|
343
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
344
|
+
font-size: 12px !important;
|
|
345
|
+
color: #666 !important;
|
|
346
|
+
font-weight: 500 !important;
|
|
347
|
+
white-space: nowrap !important;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.font-select, .font-size-select, .fpp-select, .fpp-input {
|
|
351
|
+
border: 1px solid #ddd !important;
|
|
352
|
+
border-radius: 4px !important;
|
|
353
|
+
padding: 4px 8px !important;
|
|
354
|
+
font-size: 13px !important;
|
|
355
|
+
background-color: #fff !important;
|
|
356
|
+
cursor: pointer !important;
|
|
357
|
+
min-height: 20px !important;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.font-select { min-width: 110px !important; }
|
|
361
|
+
.font-size-select { min-width: 56px !important; }
|
|
362
|
+
|
|
363
|
+
.current-color-button, .current-bgcolor-button, .fpp-color-button {
|
|
364
|
+
width: 28px !important;
|
|
365
|
+
height: 28px !important;
|
|
366
|
+
border: 1px solid #ddd !important;
|
|
367
|
+
border-radius: 50% !important;
|
|
368
|
+
cursor: pointer !important;
|
|
369
|
+
margin: 0 !important;
|
|
370
|
+
padding: 0 !important;
|
|
371
|
+
display: block !important;
|
|
372
|
+
box-sizing: border-box !important;
|
|
373
|
+
}
|
|
374
|
+
`;
|
|
375
|
+
|
|
376
|
+
const style = document.createElement('style');
|
|
377
|
+
style.id = 'moodboard-forced-panel-styles';
|
|
378
|
+
style.textContent = forcedPanelCSS;
|
|
379
|
+
document.head.appendChild(style);
|
|
380
|
+
|
|
381
|
+
console.log('🔧 Принудительные стили панелей добавлены');
|
|
114
382
|
}
|
|
115
383
|
|
|
116
384
|
/**
|
|
@@ -131,6 +399,8 @@ export function quickInitMoodBoard(container, options = {}, basePath = '') {
|
|
|
131
399
|
if (container) {
|
|
132
400
|
container.classList.add('moodboard-styles-loaded');
|
|
133
401
|
}
|
|
402
|
+
}).catch(error => {
|
|
403
|
+
console.warn('⚠️ Не удалось загрузить полные стили, используем критичные:', error);
|
|
134
404
|
});
|
|
135
405
|
|
|
136
406
|
// Создаем MoodBoard с fallback эмоджи
|
|
@@ -141,5 +411,19 @@ export function quickInitMoodBoard(container, options = {}, basePath = '') {
|
|
|
141
411
|
emojiBasePath: basePath ? `${basePath}src/assets/emodji/` : null
|
|
142
412
|
});
|
|
143
413
|
|
|
414
|
+
// Автоматическая проверка и исправление стилей панелей через 3 секунды
|
|
415
|
+
setTimeout(() => {
|
|
416
|
+
const panel = document.querySelector('.text-properties-panel, .frame-properties-panel, .note-properties-panel, .file-properties-panel');
|
|
417
|
+
if (panel) {
|
|
418
|
+
const computedStyle = getComputedStyle(panel);
|
|
419
|
+
const width = parseInt(computedStyle.minWidth);
|
|
420
|
+
|
|
421
|
+
if (width < 200) { // Если панель очень узкая
|
|
422
|
+
console.log('🔧 Обнаружена узкая панель, автоматически исправляем стили...');
|
|
423
|
+
forceInjectPanelStyles();
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}, 3000);
|
|
427
|
+
|
|
144
428
|
return moodboard;
|
|
145
429
|
}
|
package/src/utils/styleLoader.js
CHANGED
|
@@ -19,15 +19,47 @@ export class StyleLoader {
|
|
|
19
19
|
'src/ui/styles/panels.css'
|
|
20
20
|
];
|
|
21
21
|
|
|
22
|
-
|
|
23
22
|
for (const stylePath of styles) {
|
|
24
23
|
try {
|
|
25
|
-
|
|
24
|
+
const fullPath = basePath + stylePath;
|
|
25
|
+
await this.loadStyle(fullPath);
|
|
26
26
|
} catch (error) {
|
|
27
27
|
console.warn(`⚠️ Ошибка загрузки стиля ${stylePath}:`, error);
|
|
28
|
+
|
|
29
|
+
// Автоматический fallback для панелей
|
|
30
|
+
if (stylePath.includes('panels.css')) {
|
|
31
|
+
this.injectPanelStyles();
|
|
32
|
+
}
|
|
28
33
|
}
|
|
29
34
|
}
|
|
35
|
+
}
|
|
30
36
|
|
|
37
|
+
/**
|
|
38
|
+
* Инжектирует критичные стили панелей inline
|
|
39
|
+
*/
|
|
40
|
+
injectPanelStyles() {
|
|
41
|
+
const panelCSS = `
|
|
42
|
+
/* Полные стили панелей */
|
|
43
|
+
.text-properties-panel, .frame-properties-panel, .note-properties-panel, .file-properties-panel {
|
|
44
|
+
font-family: 'Roboto', Arial, sans-serif !important;
|
|
45
|
+
font-size: 13px !important;
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.font-select { min-width: 110px; }
|
|
51
|
+
.font-size-select { min-width: 56px; }
|
|
52
|
+
|
|
53
|
+
.text-properties-panel .tpp-label--spaced { margin-left: 6px; }
|
|
54
|
+
|
|
55
|
+
.frame-properties-panel .fpp-section {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: 6px;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
|
|
62
|
+
this.injectInlineStyles(panelCSS, 'moodboard-panel-styles');
|
|
31
63
|
}
|
|
32
64
|
|
|
33
65
|
/**
|