@sequent-org/moodboard 1.0.20 → 1.0.22

package/package.json

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

package/src/ui/styles/workspace.css

@@ -201,19 +201,20 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     border: none;
     border-radius: 8px;
     /* background: #E1F5FE; */
     /* color: #212121; */
+    background: none;
     font-size: 18px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     position: relative;
-    margin: 2px;
+    margin: 0px;
 }
 
 .moodboard-toolbar__button:hover {

package/src/utils/topbarIconLoader.js

@@ -1,77 +1,53 @@
 /**
  * Загрузчик SVG иконок для верхней панели
+ * Работает точно так же как IconLoader для левой панели
  */
 export class TopbarIconLoader {
     constructor() {
-        this.icons = new Map();
-        this.init();
+        this.cache = new Map();
+        this.icons = {};
     }
 
+    /**
+     * Инициализирует иконки при создании экземпляра
+     */
     async init() {
+        // Импортируем все SVG файлы статически, как в IconLoader
         try {
-            // Сначала загружаем встроенные иконки как основной источник
-            this.loadBuiltInIcons();
-            
-            // Затем пытаемся загрузить из файлов (если доступно)
-            await this.loadTopbarIcons();
-            
-            console.log('✅ Иконки верхней панели загружены успешно');
-            
-        } catch (error) {
-            console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
-            // В случае ошибки у нас уже есть встроенные иконки
-        }
-    }
+            // Используем динамический импорт для всех иконок topbar
+            const iconModules = await Promise.all([
+                import('../assets/icons/grid-line.svg?raw'),
+                import('../assets/icons/grid-dot.svg?raw'),
+                import('../assets/icons/grid-cross.svg?raw'),
+                import('../assets/icons/grid-off.svg?raw'),
+                import('../assets/icons/paint.svg?raw')
+            ]);
 
-    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} иконок верхней панели`);
-    }
+            // Сохраняем иконки в кэш
+            const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
 
-    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;
+            iconNames.forEach((name, index) => {
+                if (iconModules[index] && iconModules[index].default) {
+                    this.icons[name] = iconModules[index].default;
+                    this.cache.set(name, iconModules[index].default);
+                } else {
+                    console.warn(`⚠️ Иконка ${name} не загружена, используем fallback`);
+                    this.icons[name] = this.getFallbackIcon(name);
                 }
-            } catch (error) {
-                console.warn(`⚠️ Не удалось загрузить ${iconName} с пути ${path}:`, error.message);
-                continue;
-            }
+            });
+
+        } catch (error) {
+            console.error('❌ Ошибка статической загрузки иконок topbar:', error);
+            console.log('🔄 Пробуем загрузить встроенные SVG иконки...');
+            // В случае ошибки загружаем встроенные SVG иконки
+            this.loadBuiltInIcons();
         }
-        
-        return null; // Возвращаем null вместо ошибки
     }
 
-    getBuiltInIcon(iconName) {
-        // Встроенные иконки как основной источник
+    /**
+     * Загружает встроенные SVG иконки (резервный метод)
+     */
+    loadBuiltInIcons() {
         const builtInIcons = {
             'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2 2H16V4H2V2Z" fill="currentColor"/>
@@ -119,44 +95,114 @@ export class TopbarIconLoader {
             </svg>`
         };
 
-        return builtInIcons[iconName];
+        Object.keys(builtInIcons).forEach(name => {
+            this.icons[name] = builtInIcons[name];
+            this.cache.set(name, builtInIcons[name]);
+        });
+
+        console.log('📦 Загружены встроенные SVG иконки topbar');
     }
 
-    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);
-            }
+    /**
+     * Загружает SVG иконку по имени
+     * @param {string} iconName - имя иконки без расширения
+     * @returns {Promise<string>} SVG содержимое
+     */
+    async loadIcon(iconName) {
+        if (this.cache.has(iconName)) {
+            console.log(`📦 Загружаем иконку ${iconName} из кэша`);
+            return this.cache.get(iconName);
         }
-        
-        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
-    }
 
-    getIcon(name) {
-        return this.icons.get(name);
+        // Если иконка уже загружена статически
+        if (this.icons[iconName]) {
+            console.log(`📦 Загружаем иконку ${iconName} из статического кэша`);
+            return this.icons[iconName];
+        }
+
+        // Возвращаем fallback
+        console.warn(`⚠️ Иконка ${iconName} не найдена, используем fallback`);
+        return this.getFallbackIcon(iconName);
     }
 
     /**
-     * Загружает все иконки и возвращает их как объект
+     * Загружает все иконки для topbar
+     * @returns {Promise<Object>} объект с иконками
      */
     async loadAllIcons() {
-        const result = {};
-        this.icons.forEach((content, name) => {
-            result[name] = content;
-        });
-        return result;
+        // Если иконки еще не инициализированы
+        if (Object.keys(this.icons).length === 0) {
+            await this.init();
+        }
+
+        return this.icons;
     }
 
-    reloadIcon(name) {
-        // Перезагружаем конкретную иконку
-        this.init();
+    /**
+     * Возвращает fallback иконку если загрузка не удалась
+     * @param {string} iconName - имя иконки
+     * @returns {string} fallback SVG
+     */
+    getFallbackIcon(iconName) {
+        // Простые fallback иконки в виде геометрических фигур
+        const fallbacks = {
+            'grid-line': '<svg width="18" height="18" viewBox="0 0 18 18"><path d="M2 2H16V4H2V2Z" fill="currentColor"/><path d="M2 7H16V9H2V7Z" fill="currentColor"/><path d="M2 12H16V14H2V12Z" fill="currentColor"/><path d="M2 2V16H4V2H2Z" fill="currentColor"/><path d="M7 2V16H9V2H7Z" fill="currentColor"/><path d="M12 2V16H14V2H12Z" fill="currentColor"/></svg>',
+            'grid-dot': '<svg width="18" height="18" viewBox="0 0 18 18"><circle cx="4" cy="4" r="1.5" fill="currentColor"/><circle cx="9" cy="4" r="1.5" fill="currentColor"/><circle cx="14" cy="4" r="1.5" fill="currentColor"/><circle cx="4" cy="9" r="1.5" fill="currentColor"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/><circle cx="14" cy="9" r="1.5" fill="currentColor"/><circle cx="4" cy="14" r="1.5" fill="currentColor"/><circle cx="9" cy="14" r="1.5" fill="currentColor"/><circle cx="14" cy="14" r="1.5" fill="currentColor"/></svg>',
+            'grid-cross': '<svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 3L6 6M6 3L3 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9 3L12 6M12 3L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M3 9L6 12M6 9L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9 9L12 12M12 9L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+            'grid-off': '<svg width="18" height="18" viewBox="0 0 18 18"><path d="M2 2H16V4H2V2Z" fill="currentColor" opacity="0.3"/><path d="M2 7H16V9H2V7Z" fill="currentColor" opacity="0.3"/><path d="M2 12H16V14H2V12Z" fill="currentColor" opacity="0.3"/><path d="M2 2V16H4V2H2Z" fill="currentColor" opacity="0.3"/><path d="M7 2V16H9V2H7Z" fill="currentColor" opacity="0.3"/><path d="M12 2V16H14V2H12Z" fill="currentColor" opacity="0.3"/><path d="M1 17L17 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+            'paint': '<svg width="18" height="18" viewBox="0 0 18 18"><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"/><path d="M10 3V6H13" stroke="currentColor" stroke-width="1.5"/><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"/></svg>'
+        };
+
+        return fallbacks[iconName] || fallbacks['grid-line'];
     }
 
+    /**
+     * Очищает кэш иконок
+     */
     clearCache() {
-        this.icons.clear();
+        this.cache.clear();
     }
+
+    /**
+     * Принудительно перезагружает иконку (игнорируя кэш)
+     * @param {string} iconName - имя иконки без расширения
+     * @returns {Promise<string>} SVG содержимое
+     */
+    async reloadIcon(iconName) {
+        // Удаляем из кэша
+        console.log(`🗑️ Очищаем кэш для иконки ${iconName}`);
+        this.cache.delete(iconName);
+        
+        try {
+            // Пробуем переимпортировать иконку
+            const iconModule = await import(`../assets/icons/${iconName}.svg?raw`);
+            if (iconModule && iconModule.default) {
+                const svgContent = iconModule.default;
+                console.log(`✅ Иконка ${iconName} перезагружена успешно`);
+                this.icons[iconName] = svgContent;
+                this.cache.set(iconName, svgContent);
+                return svgContent;
+            } else {
+                throw new Error(`Failed to reload icon: ${iconName}`);
+            }
+        } catch (error) {
+            console.error(`❌ Ошибка перезагрузки иконки ${iconName}:`, error);
+            return this.getFallbackIcon(iconName);
+        }
+    }
+
+    /**
+     * Получает иконку по имени (синхронный метод для совместимости)
+     */
+    getIcon(name) {
+        return this.icons[name] || this.getFallbackIcon(name);
+    }
+}
+
+// Создаем глобальный экземпляр
+export const topbarIconLoader = new TopbarIconLoader();
+
+// Добавляем в глобальную область для отладки
+if (typeof window !== 'undefined') {
+    window.topbarIconLoader = topbarIconLoader;
 }

package/src/assets/icons/topbar/README.md

@@ -1,39 +0,0 @@
-# SVG Иконки для Верхней Панели
-
-Эта папка содержит SVG иконки для кнопок верхней панели MoodBoard.
-
-## Иконки
-
-### Сетка
-- **`grid-line.svg`** - Сетка с линиями
-- **`grid-dot.svg`** - Сетка с точками  
-- **`grid-cross.svg`** - Сетка с крестиками
-- **`grid-off.svg`** - Сетка выключена (с перечеркиванием)
-
-### Инструменты
-- **`paint.svg`** - Палитра фона
-
-## Технические детали
-
-- **Размер**: 18x18 пикселей
-- **ViewBox**: 0 0 18 18
-- **Цвет**: Использует `currentColor` для наследования цвета от родительского элемента
-- **Формат**: SVG с оптимизированными путями
-
-## Использование
-
-Иконки загружаются через `TopbarIconLoader` и добавляются в DOM как SVG символы с ID вида `icon-{имя}`.
-
-```html
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <use href="#icon-grid-line"/>
-</svg>
-```
-
-## Добавление новых иконок
-
-1. Создайте SVG файл в этой папке
-2. Убедитесь, что используется `currentColor` для цвета
-3. Добавьте иконку в `TopbarIconLoader.loadBuiltInIcons()` как fallback
-4. Обновите соответствующий код в `Topbar.js`
-