@sequent-org/moodboard 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/ui/styles/workspace.css

@@ -582,6 +582,21 @@
     margin: 0 6px 0 2px;
 }
 
+/* Active state for topbar buttons */
+.moodboard-topbar__button--active {
+    background: #dbeafe;
+    color: #1d4ed8;
+}
+
+/* Paint button specific styles */
+.moodboard-topbar__button--paint {
+    background: #f0f0f0;
+}
+
+.moodboard-topbar__button--paint:hover {
+    background: #e6e6e6;
+}
+
 /* Paint popover */
 .moodboard-topbar__paint-popover {
     position: absolute;

package/src/utils/topbarIconLoader.js

@@ -9,20 +9,68 @@ export class TopbarIconLoader {
 
     async init() {
         try {
-            // Всегда используем встроенные иконки для надежности
-            // Это гарантирует работу в любом окружении (npm пакет, CDN, локальная разработка)
+            // Сначала загружаем встроенные иконки как основной источник
             this.loadBuiltInIcons();
             
+            // Затем пытаемся загрузить из файлов (если доступно)
+            await this.loadTopbarIcons();
+            
             console.log('✅ Иконки верхней панели загружены успешно');
             
         } catch (error) {
             console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
-            // Даже в случае ошибки пытаемся загрузить встроенные иконки
-            this.loadBuiltInIcons();
+            // В случае ошибки у нас уже есть встроенные иконки
         }
     }
 
-    loadBuiltInIcons() {
+    async loadTopbarIcons() {
+        // Список иконок, которые нужно загрузить
+        const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
+        
+        for (const iconName of iconNames) {
+            try {
+                const svgContent = await this.loadIconFromFile(iconName);
+                if (svgContent) {
+                    this.icons.set(iconName, svgContent);
+                    console.log(`✅ Загружена иконка из файла: ${iconName}`);
+                }
+            } catch (error) {
+                console.warn(`⚠️ Не удалось загрузить иконку ${iconName} из файла:`, error.message);
+                // Оставляем встроенную версию
+            }
+        }
+        
+        console.log(`📦 Всего загружено ${this.icons.size} иконок верхней панели`);
+    }
+
+    async loadIconFromFile(iconName) {
+        // Пробуем несколько способов загрузки для разных окружений
+        const paths = [
+            `/src/assets/icons/topbar/${iconName}.svg`,
+            `./src/assets/icons/topbar/${iconName}.svg`,
+            `../assets/icons/topbar/${iconName}.svg`,
+            `assets/icons/topbar/${iconName}.svg`,
+            `/assets/icons/topbar/${iconName}.svg`
+        ];
+        
+        for (const path of paths) {
+            try {
+                const response = await fetch(path);
+                if (response.ok) {
+                    const svgContent = await response.text();
+                    console.log(`✅ Иконка ${iconName} загружена с пути: ${path}`);
+                    return svgContent;
+                }
+            } catch (error) {
+                console.warn(`⚠️ Не удалось загрузить ${iconName} с пути ${path}:`, error.message);
+                continue;
+            }
+        }
+        
+        return null; // Возвращаем null вместо ошибки
+    }
+
+    getBuiltInIcon(iconName) {
         // Встроенные иконки как основной источник
         const builtInIcons = {
             'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -71,9 +119,18 @@ export class TopbarIconLoader {
             </svg>`
         };
 
-        // Загружаем иконки статически
-        for (const [iconName, svgContent] of Object.entries(builtInIcons)) {
-            this.icons.set(iconName, svgContent);
+        return builtInIcons[iconName];
+    }
+
+    loadBuiltInIcons() {
+        // Загружаем встроенные иконки как основной источник
+        const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
+        
+        for (const iconName of iconNames) {
+            const builtInIcon = this.getBuiltInIcon(iconName);
+            if (builtInIcon) {
+                this.icons.set(iconName, builtInIcon);
+            }
         }
         
         console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);