@sequent-org/moodboard 1.0.5 → 1.0.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/ui/Topbar.js +22 -0
- package/src/utils/topbarIconLoader.js +8 -80
package/package.json
CHANGED
package/src/ui/Topbar.js
CHANGED
|
@@ -39,6 +39,11 @@ export class Topbar {
|
|
|
39
39
|
createTopbar() {
|
|
40
40
|
this.element = document.createElement('div');
|
|
41
41
|
this.element.className = `moodboard-topbar moodboard-topbar--${this.theme}`;
|
|
42
|
+
|
|
43
|
+
console.log('🔍 Topbar: создаю верхнюю панель');
|
|
44
|
+
console.log('🔍 Topbar: this.icons содержит:', this.icons);
|
|
45
|
+
console.log('🔍 Topbar: количество иконок:', Object.keys(this.icons).length);
|
|
46
|
+
|
|
42
47
|
// Кнопки выбора вида сетки (без функциональности)
|
|
43
48
|
const buttons = [
|
|
44
49
|
{ id: 'grid-line', icon: 'grid-line', title: 'Сетка: линии', type: 'line' },
|
|
@@ -51,10 +56,14 @@ export class Topbar {
|
|
|
51
56
|
const btn = document.createElement('button');
|
|
52
57
|
btn.className = 'moodboard-topbar__button';
|
|
53
58
|
|
|
59
|
+
console.log(`🔍 Topbar: создаю кнопку для иконки "${cfg.icon}"`);
|
|
60
|
+
|
|
54
61
|
// Создаем SVG иконку
|
|
55
62
|
if (this.icons[cfg.icon]) {
|
|
63
|
+
console.log(`✅ Topbar: иконка "${cfg.icon}" найдена, создаю SVG`);
|
|
56
64
|
this.createSvgIcon(btn, cfg.icon);
|
|
57
65
|
} else {
|
|
66
|
+
console.warn(`⚠️ Topbar: иконка "${cfg.icon}" не найдена, создаю fallback`);
|
|
58
67
|
// Fallback: создаем простую текстовую иконку
|
|
59
68
|
const fallbackIcon = document.createElement('span');
|
|
60
69
|
fallbackIcon.textContent = cfg.icon.charAt(0).toUpperCase();
|
|
@@ -78,10 +87,14 @@ export class Topbar {
|
|
|
78
87
|
paintBtn.className = 'moodboard-topbar__button moodboard-topbar__button--paint';
|
|
79
88
|
paintBtn.title = 'Палитра фона';
|
|
80
89
|
|
|
90
|
+
console.log('🔍 Topbar: создаю кнопку краски');
|
|
91
|
+
|
|
81
92
|
// Создаем SVG иконку
|
|
82
93
|
if (this.icons['paint']) {
|
|
94
|
+
console.log('✅ Topbar: иконка paint найдена, создаю SVG');
|
|
83
95
|
this.createSvgIcon(paintBtn, 'paint');
|
|
84
96
|
} else {
|
|
97
|
+
console.warn('⚠️ Topbar: иконка paint не найдена, создаю fallback');
|
|
85
98
|
// Fallback: создаем простую текстовую иконку
|
|
86
99
|
const fallbackIcon = document.createElement('span');
|
|
87
100
|
fallbackIcon.textContent = '🎨';
|
|
@@ -101,7 +114,11 @@ export class Topbar {
|
|
|
101
114
|
* Создает SVG иконку для кнопки
|
|
102
115
|
*/
|
|
103
116
|
createSvgIcon(button, iconName) {
|
|
117
|
+
console.log(`🔍 Topbar: создаю SVG иконку "${iconName}"`);
|
|
118
|
+
console.log(`🔍 Topbar: доступные иконки:`, Object.keys(this.icons));
|
|
119
|
+
|
|
104
120
|
if (this.icons[iconName]) {
|
|
121
|
+
console.log(`✅ Topbar: иконка "${iconName}" найдена, создаю SVG элемент`);
|
|
105
122
|
// Создаем SVG элемент из загруженного содержимого
|
|
106
123
|
const tempDiv = document.createElement('div');
|
|
107
124
|
tempDiv.innerHTML = this.icons[iconName];
|
|
@@ -115,7 +132,12 @@ export class Topbar {
|
|
|
115
132
|
|
|
116
133
|
// Добавляем SVG в кнопку
|
|
117
134
|
button.appendChild(svg);
|
|
135
|
+
console.log(`✅ Topbar: SVG иконка "${iconName}" успешно добавлена в кнопку`);
|
|
136
|
+
} else {
|
|
137
|
+
console.warn(`⚠️ Topbar: не удалось найти SVG элемент в содержимом иконки "${iconName}"`);
|
|
118
138
|
}
|
|
139
|
+
} else {
|
|
140
|
+
console.warn(`⚠️ Topbar: иконка "${iconName}" не найдена в this.icons`);
|
|
119
141
|
}
|
|
120
142
|
}
|
|
121
143
|
|
|
@@ -9,90 +9,21 @@ export class TopbarIconLoader {
|
|
|
9
9
|
|
|
10
10
|
async init() {
|
|
11
11
|
try {
|
|
12
|
-
//
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
import('../assets/icons/topbar/grid-dot.svg?raw'),
|
|
16
|
-
import('../assets/icons/topbar/grid-cross.svg?raw'),
|
|
17
|
-
import('../assets/icons/topbar/grid-off.svg?raw'),
|
|
18
|
-
import('../assets/icons/topbar/paint.svg?raw')
|
|
19
|
-
]);
|
|
20
|
-
|
|
21
|
-
// Сохраняем иконки в Map
|
|
22
|
-
const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
|
|
12
|
+
// Всегда используем встроенные иконки для надежности
|
|
13
|
+
// Это гарантирует работу в любом окружении (npm пакет, CDN, локальная разработка)
|
|
14
|
+
this.loadBuiltInIcons();
|
|
23
15
|
|
|
24
|
-
|
|
25
|
-
if (iconModules[index] && iconModules[index].default) {
|
|
26
|
-
this.icons.set(name, iconModules[index].default);
|
|
27
|
-
} else {
|
|
28
|
-
console.warn(`⚠️ Иконка ${name} не загружена, используем встроенную`);
|
|
29
|
-
// Используем встроенную иконку как fallback
|
|
30
|
-
const builtInIcon = this.getBuiltInIcon(name);
|
|
31
|
-
if (builtInIcon) {
|
|
32
|
-
this.icons.set(name, builtInIcon);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
});
|
|
16
|
+
console.log('✅ Иконки верхней панели загружены успешно');
|
|
36
17
|
|
|
37
18
|
} catch (error) {
|
|
38
|
-
console.
|
|
19
|
+
console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
|
|
20
|
+
// Даже в случае ошибки пытаемся загрузить встроенные иконки
|
|
39
21
|
this.loadBuiltInIcons();
|
|
40
22
|
}
|
|
41
23
|
}
|
|
42
24
|
|
|
43
|
-
getBuiltInIcon(name) {
|
|
44
|
-
const builtInIcons = {
|
|
45
|
-
'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
46
|
-
<path d="M2 2H16V4H2V2Z" fill="currentColor"/>
|
|
47
|
-
<path d="M2 7H16V9H2V7Z" fill="currentColor"/>
|
|
48
|
-
<path d="M2 12H16V14H2V12Z" fill="currentColor"/>
|
|
49
|
-
<path d="M2 2V16H4V2H2Z" fill="currentColor"/>
|
|
50
|
-
<path d="M7 2V16H9V2H7Z" fill="currentColor"/>
|
|
51
|
-
<path d="M12 2V16H14V2H12Z" fill="currentColor"/>
|
|
52
|
-
</svg>`,
|
|
53
|
-
'grid-dot': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
54
|
-
<circle cx="4" cy="4" r="1.5" fill="currentColor"/>
|
|
55
|
-
<circle cx="9" cy="4" r="1.5" fill="currentColor"/>
|
|
56
|
-
<circle cx="14" cy="4" r="1.5" fill="currentColor"/>
|
|
57
|
-
<circle cx="4" cy="9" r="1.5" fill="currentColor"/>
|
|
58
|
-
<circle cx="9" cy="9" r="1.5" fill="currentColor"/>
|
|
59
|
-
<circle cx="14" cy="9" r="1.5" fill="currentColor"/>
|
|
60
|
-
<circle cx="4" cy="14" r="1.5" fill="currentColor"/>
|
|
61
|
-
<circle cx="9" cy="14" r="1.5" fill="currentColor"/>
|
|
62
|
-
<circle cx="14" cy="14" r="1.5" fill="currentColor"/>
|
|
63
|
-
</svg>`,
|
|
64
|
-
'grid-cross': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
65
|
-
<path d="M3 3L6 6M6 3L3 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
66
|
-
<path d="M9 3L12 6M12 3L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
67
|
-
<path d="M3 9L6 12M6 9L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
68
|
-
<path d="M9 9L12 12M12 9L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
69
|
-
<path d="M15 3L18 6M18 3L15 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
70
|
-
<path d="M15 9L18 12M18 9L15 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
71
|
-
<path d="M3 15L6 18M6 15L3 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
72
|
-
<path d="M9 15L12 18M12 15L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
73
|
-
<path d="M15 15L18 18M18 15L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
74
|
-
</svg>`,
|
|
75
|
-
'grid-off': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
76
|
-
<path d="M2 2H16V4H2V2Z" fill="currentColor" opacity="0.3"/>
|
|
77
|
-
<path d="M2 7H16V9H2V7Z" fill="currentColor" opacity="0.3"/>
|
|
78
|
-
<path d="M2 12H16V14H2V12Z" fill="currentColor" opacity="0.3"/>
|
|
79
|
-
<path d="M2 2V16H4V2H2Z" fill="currentColor" opacity="0.3"/>
|
|
80
|
-
<path d="M7 2V16H9V2H7Z" fill="currentColor" opacity="0.3"/>
|
|
81
|
-
<path d="M12 2V16H14V2H12Z" fill="currentColor" opacity="0.3"/>
|
|
82
|
-
<path d="M1 17L17 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
83
|
-
</svg>`,
|
|
84
|
-
'paint': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
85
|
-
<path d="M4 3H10L13 6V13A2 2 0 0 1 11 15H6A2 2 0 0 1 4 13V3Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
|
86
|
-
<path d="M10 3V6H13" stroke="currentColor" stroke-width="1.5"/>
|
|
87
|
-
<path d="M14 10S15.5 11.5 15.5 13A1.5 1.5 0 0 1 13 13C13 11.5 14 10 14 10Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
|
|
88
|
-
</svg>`
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
return builtInIcons[name];
|
|
92
|
-
}
|
|
93
|
-
|
|
94
25
|
loadBuiltInIcons() {
|
|
95
|
-
// Встроенные иконки как
|
|
26
|
+
// Встроенные иконки как основной источник
|
|
96
27
|
const builtInIcons = {
|
|
97
28
|
'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
98
29
|
<path d="M2 2H16V4H2V2Z" fill="currentColor"/>
|
|
@@ -145,10 +76,7 @@ export class TopbarIconLoader {
|
|
|
145
76
|
this.icons.set(iconName, svgContent);
|
|
146
77
|
}
|
|
147
78
|
|
|
148
|
-
|
|
149
|
-
Object.entries(builtInIcons).forEach(([name, content]) => {
|
|
150
|
-
this.icons.set(name, content);
|
|
151
|
-
});
|
|
79
|
+
console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
|
|
152
80
|
}
|
|
153
81
|
|
|
154
82
|
getIcon(name) {
|