@sequent-org/moodboard 1.0.19 → 1.0.21

package/package.json

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

package/src/ui/styles/workspace.css

@@ -524,16 +524,16 @@
     line-height: 1.4;
 }
 
-/* Topbar Styles */
+/* Topbar */
 .moodboard-topbar {
     position: absolute;
-    top: 16px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
+    top: 12px;
+    left: 16px;
+    height: 50px;
+    display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 12px;
+    padding: 8px 6px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
@@ -542,35 +542,53 @@
     pointer-events: auto;
 }
 
-.moodboard-topbar--dark {
-    background: #2a2a2a;
-    border-color: #444;
-    color: #fff;
-}
-
 .moodboard-topbar__button {
-    width: 36px;
-    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
     border: none;
     border-radius: 8px;
-    background: #f0f0f0;
-    color: #333;
+    /* background: #f0f0f0; */
+    /* color: #333; */
+    font-size: 16px;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     transition: all 0.2s ease;
 }
 
+/* Стили для SVG иконок в кнопках верхней панели */
+.moodboard-topbar__button svg {
+    width: 16px;
+    height: 16px;
+    /* fill: currentColor;
+    stroke: currentColor; */
+    transition: all 0.2s ease;
+}
+
+.moodboard-topbar__button:hover svg {
+    /* transform: scale(1.1); */
+}
+
 .moodboard-topbar__button:hover {
     background: #e6e6e6;
 }
 
+/* Divider for topbar */
+.moodboard-topbar__divider {
+    width: 1px;
+    height: 28px;
+    background: #e5e7eb;
+    margin: 0 6px 0 2px;
+}
+
+/* Active state for topbar buttons */
 .moodboard-topbar__button--active {
-    background: #007ACC;
-    color: #fff;
+    background: #dbeafe;
+    color: #1d4ed8;
 }
 
+/* Paint button specific styles */
 .moodboard-topbar__button--paint {
     background: #f0f0f0;
 }
@@ -579,18 +597,6 @@
     background: #e6e6e6;
 }
 
-.moodboard-topbar__divider {
-    width: 1px;
-    height: 24px;
-    background: #e0e0e0;
-    margin: 0 4px;
-}
-
-.moodboard-topbar svg {
-    width: 18px;
-    height: 18px;
-}
-
 /* Paint popover */
 .moodboard-topbar__paint-popover {
     position: absolute;

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 {
-            // Загружаем иконки из файлов в папке topbar
-            await this.loadTopbarIcons();
-            
-            console.log('✅ Иконки верхней панели загружены успешно');
-            
-        } catch (error) {
-            console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
-            // В случае ошибки загружаем встроенные иконки как fallback
-            this.loadBuiltInIcons();
-        }
-    }
+            // Используем динамический импорт для всех иконок 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);
-                this.icons.set(iconName, svgContent);
-                console.log(`✅ Загружена иконка: ${iconName}`);
-            } catch (error) {
-                console.warn(`⚠️ Не удалось загрузить иконку ${iconName}:`, error);
-                // Если не удалось загрузить из файла, используем встроенную версию
-                const builtInIcon = this.getBuiltInIcon(iconName);
-                if (builtInIcon) {
-                    this.icons.set(iconName, builtInIcon);
-                    console.log(`✅ Использована встроенная иконка для: ${iconName}`);
-                }
-            }
-        }
-        
-        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`
-        ];
-        
-        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();
         }
-        
-        throw new Error(`Не удалось загрузить иконку ${iconName} ни с одного из путей`);
     }
 
-    getBuiltInIcon(iconName) {
-        // Встроенные иконки как fallback
+    /**
+     * Загружает встроенные 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() {
-        // Загружаем только встроенные иконки как fallback
-        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} встроенных иконок верхней панели (fallback)`);
-    }
 
-    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`
-