@sequent-org/moodboard 1.2.3 → 1.2.6
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/initNoBundler.js +137 -23
- package/src/utils/styleLoader.js +34 -2
package/package.json
CHANGED
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
|
|
|
@@ -55,35 +55,46 @@ export function injectCriticalStyles() {
|
|
|
55
55
|
background: #f7fbff;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.moodboard-
|
|
58
|
+
.moodboard-workspace__toolbar {
|
|
59
59
|
position: absolute;
|
|
60
|
-
left:
|
|
60
|
+
left: 16px;
|
|
61
61
|
top: 50%;
|
|
62
62
|
transform: translateY(-50%);
|
|
63
|
-
z-index:
|
|
63
|
+
z-index: 3000;
|
|
64
|
+
pointer-events: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.moodboard-toolbar {
|
|
64
68
|
background: white;
|
|
65
|
-
border-radius:
|
|
66
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
69
|
+
border-radius: 999px;
|
|
67
70
|
padding: 8px;
|
|
68
|
-
|
|
71
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
72
|
+
border: 1px solid #e0e0e0;
|
|
73
|
+
display: inline-flex;
|
|
69
74
|
flex-direction: column;
|
|
70
|
-
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 8px;
|
|
77
|
+
pointer-events: auto;
|
|
78
|
+
width: 30px;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
cursor: default;
|
|
71
81
|
}
|
|
72
82
|
|
|
73
83
|
.moodboard-topbar {
|
|
74
84
|
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;
|
|
85
|
+
top: 12px;
|
|
86
|
+
left: 16px;
|
|
87
|
+
height: 30px;
|
|
88
|
+
display: inline-flex;
|
|
84
89
|
align-items: center;
|
|
85
|
-
gap:
|
|
86
|
-
|
|
90
|
+
gap: 6px;
|
|
91
|
+
padding: 8px 10px;
|
|
92
|
+
background: #fff;
|
|
93
|
+
border: 1px solid #e0e0e0;
|
|
94
|
+
border-radius: 9999px;
|
|
95
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
96
|
+
z-index: 3000;
|
|
97
|
+
pointer-events: auto;
|
|
87
98
|
}
|
|
88
99
|
|
|
89
100
|
.moodboard-html-handles {
|
|
@@ -94,15 +105,118 @@ export function injectCriticalStyles() {
|
|
|
94
105
|
z-index: 999;
|
|
95
106
|
}
|
|
96
107
|
|
|
108
|
+
/* КРИТИЧНЫЕ СТИЛИ ПАНЕЛЕЙ - для корректного отображения */
|
|
109
|
+
.text-properties-panel {
|
|
110
|
+
position: absolute;
|
|
111
|
+
pointer-events: auto;
|
|
112
|
+
display: flex !important;
|
|
113
|
+
flex-direction: row;
|
|
114
|
+
align-items: center;
|
|
115
|
+
gap: 8px;
|
|
116
|
+
padding: 12px 22px;
|
|
117
|
+
background-color: #ffffff;
|
|
118
|
+
border: 1px solid #e0e0e0;
|
|
119
|
+
border-radius: 9999px;
|
|
120
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
121
|
+
font-size: 13px;
|
|
122
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
123
|
+
min-width: 320px !important;
|
|
124
|
+
height: 36px !important;
|
|
125
|
+
z-index: 1001;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.frame-properties-panel {
|
|
129
|
+
position: absolute;
|
|
130
|
+
pointer-events: auto;
|
|
131
|
+
display: inline-flex !important;
|
|
132
|
+
align-items: center;
|
|
133
|
+
gap: 8px;
|
|
134
|
+
padding: 12px 32px;
|
|
135
|
+
background-color: #ffffff;
|
|
136
|
+
border: 1px solid #e0e0e0;
|
|
137
|
+
border-radius: 9999px;
|
|
138
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
139
|
+
font-size: 13px;
|
|
140
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
141
|
+
min-width: 320px !important;
|
|
142
|
+
height: 36px !important;
|
|
143
|
+
z-index: 1001;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.note-properties-panel {
|
|
147
|
+
position: absolute;
|
|
148
|
+
pointer-events: auto;
|
|
149
|
+
display: inline-flex !important;
|
|
150
|
+
align-items: center;
|
|
151
|
+
gap: 8px;
|
|
152
|
+
padding: 12px 22px;
|
|
153
|
+
background-color: #ffffff;
|
|
154
|
+
border: 1px solid #e0e0e0;
|
|
155
|
+
border-radius: 9999px;
|
|
156
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
157
|
+
font-size: 13px;
|
|
158
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
159
|
+
min-width: 280px !important;
|
|
160
|
+
height: 36px !important;
|
|
161
|
+
z-index: 1001;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.file-properties-panel {
|
|
165
|
+
position: absolute;
|
|
166
|
+
pointer-events: auto;
|
|
167
|
+
display: inline-flex !important;
|
|
168
|
+
align-items: center;
|
|
169
|
+
gap: 8px;
|
|
170
|
+
padding: 12px 22px;
|
|
171
|
+
background-color: #ffffff;
|
|
172
|
+
border: 1px solid #e0e0e0;
|
|
173
|
+
border-radius: 9999px;
|
|
174
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
175
|
+
font-size: 13px;
|
|
176
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
177
|
+
min-width: 250px !important;
|
|
178
|
+
height: 36px !important;
|
|
179
|
+
z-index: 1001;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* Базовые стили для элементов панелей */
|
|
183
|
+
.tpp-label, .fpp-label, .npp-label, .file-panel-label {
|
|
184
|
+
font-family: 'Roboto', Arial, sans-serif;
|
|
185
|
+
font-size: 12px;
|
|
186
|
+
color: #666;
|
|
187
|
+
font-weight: 500;
|
|
188
|
+
white-space: nowrap;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.font-select, .font-size-select, .fpp-select, .fpp-input {
|
|
192
|
+
border: 1px solid #ddd;
|
|
193
|
+
border-radius: 4px;
|
|
194
|
+
padding: 4px 8px;
|
|
195
|
+
font-size: 13px;
|
|
196
|
+
background-color: #fff;
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
min-height: 20px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.current-color-button, .current-bgcolor-button, .fpp-color-button {
|
|
202
|
+
width: 28px !important;
|
|
203
|
+
height: 28px !important;
|
|
204
|
+
border: 1px solid #ddd;
|
|
205
|
+
border-radius: 50%;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
margin: 0;
|
|
208
|
+
padding: 0;
|
|
209
|
+
display: block;
|
|
210
|
+
box-sizing: border-box;
|
|
211
|
+
}
|
|
212
|
+
|
|
97
213
|
/* Скрыть до полной загрузки стилей */
|
|
98
|
-
.moodboard-toolbar__popup
|
|
99
|
-
.moodboard-properties-panel {
|
|
214
|
+
.moodboard-toolbar__popup {
|
|
100
215
|
opacity: 0;
|
|
101
216
|
transition: opacity 0.3s ease;
|
|
102
217
|
}
|
|
103
218
|
|
|
104
|
-
.moodboard-styles-loaded .moodboard-toolbar__popup
|
|
105
|
-
.moodboard-styles-loaded .moodboard-properties-panel {
|
|
219
|
+
.moodboard-styles-loaded .moodboard-toolbar__popup {
|
|
106
220
|
opacity: 1;
|
|
107
221
|
}
|
|
108
222
|
`;
|
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
|
/**
|