@sequent-org/moodboard 1.0.17 → 1.0.19

package/package.json

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

package/src/core/index.js

@@ -52,8 +52,14 @@ export class CoreMoodBoard {
         this.saveManager = new SaveManager(this.eventBus, this.options);
         this.history = new HistoryManager(this.eventBus);
         this.apiClient = new ApiClient();
-        this.imageUploadService = new ImageUploadService(this.apiClient);
-        this.fileUploadService = new FileUploadService(this.apiClient);
+        this.imageUploadService = new ImageUploadService(this.apiClient, {
+            requireCsrf: this.options.requireCsrf !== false, // По умолчанию требуем CSRF
+            csrfToken: this.options.csrfToken
+        });
+        this.fileUploadService = new FileUploadService(this.apiClient, {
+            requireCsrf: this.options.requireCsrf !== false, // По умолчанию требуем CSRF
+            csrfToken: this.options.csrfToken
+        });
         
         // Связываем SaveManager с ApiClient для правильной обработки изображений
         this.saveManager.setApiClient(this.apiClient);

package/src/services/FileUploadService.js

@@ -2,17 +2,54 @@
  * Сервис для загрузки и управления файлами на сервере
  */
 export class FileUploadService {
-    constructor(apiClient) {
+    constructor(apiClient, options = {}) {
         this.apiClient = apiClient;
         this.uploadEndpoint = '/api/files/upload';
         this.deleteEndpoint = '/api/files';
+        this.options = {
+            csrfToken: null, // Можно передать токен напрямую
+            csrfTokenSelector: 'meta[name="csrf-token"]', // Селектор для поиска токена в DOM
+            requireCsrf: true, // Требовать ли CSRF токен
+            ...options
+        };
+    }
+
+    /**
+     * Получает CSRF токен из различных источников
+     * @private
+     */
+    _getCsrfToken() {
+        // 1. Сначала проверяем токен, переданный в опциях
+        if (this.options.csrfToken) {
+            return this.options.csrfToken;
+        }
+
+        // 2. Ищем токен в DOM
+        if (typeof document !== 'undefined') {
+            const tokenElement = document.querySelector(this.options.csrfTokenSelector);
+            if (tokenElement) {
+                return tokenElement.getAttribute('content');
+            }
+        }
+
+        // 3. Проверяем глобальную переменную (для тестирования)
+        if (typeof window !== 'undefined' && window.csrfToken) {
+            return window.csrfToken;
+        }
+
+        // 4. Если CSRF не требуется, возвращаем null
+        if (!this.options.requireCsrf) {
+            return null;
+        }
+
+        return null;
     }
 
     /**
      * Загружает файл на сервер
-     * @param {File|Blob} file - файл
+     * @param {File|Blob} file - файл для загрузки
      * @param {string} name - имя файла
-     * @returns {Promise<{id: string, url: string, size: number, mimeType: string, formattedSize: string}>}
+     * @returns {Promise<{id: string, url: string, size: number, name: string}>}
      */
     async uploadFile(file, name = null) {
         try {
@@ -22,18 +59,24 @@ export class FileUploadService {
             formData.append('name', name || file.name || 'file');
 
             // Получаем CSRF токен
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
-            if (!csrfToken) {
-                throw new Error('CSRF токен не найден');
+            if (this.options.requireCsrf && !csrfToken) {
+                throw new Error('CSRF токен не найден. Добавьте <meta name="csrf-token" content="{{ csrf_token() }}"> в HTML или передайте токен в опциях.');
+            }
+
+            const headers = {
+                'X-Requested-With': 'XMLHttpRequest'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
             }
 
             const response = await fetch(this.uploadEndpoint, {
                 method: 'POST',
-                headers: {
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest'
-                },
+                headers,
                 credentials: 'same-origin',
                 body: formData
             });
@@ -54,9 +97,8 @@ export class FileUploadService {
                 fileId: result.data.fileId || result.data.id, // Добавляем fileId для явного доступа
                 url: result.data.url,
                 size: result.data.size,
-                mimeType: result.data.mime_type,
-                formattedSize: result.data.formatted_size,
-                name: result.data.name
+                name: result.data.name,
+                type: result.data.type
             };
 
         } catch (error) {
@@ -73,20 +115,26 @@ export class FileUploadService {
      */
     async updateFileMetadata(fileId, metadata) {
         try {
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
-            if (!csrfToken) {
-                throw new Error('CSRF токен не найден');
+            if (this.options.requireCsrf && !csrfToken) {
+                throw new Error('CSRF токен не найден. Добавьте <meta name="csrf-token" content="{{ csrf_token() }}"> в HTML или передайте токен в опциях.');
+            }
+
+            const headers = {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
             }
 
             const response = await fetch(`${this.deleteEndpoint}/${fileId}`, {
                 method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'Accept': 'application/json'
-                },
+                headers,
                 credentials: 'same-origin',
                 body: JSON.stringify(metadata)
             });
@@ -116,15 +164,21 @@ export class FileUploadService {
      */
     async deleteFile(fileId) {
         try {
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
+            const headers = {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
+            }
+
             const response = await fetch(`${this.deleteEndpoint}/${fileId}`, {
                 method: 'DELETE',
-                headers: {
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'Accept': 'application/json'
-                },
+                headers,
                 credentials: 'same-origin'
             });
 
@@ -318,15 +372,21 @@ export class FileUploadService {
      */
     async cleanupUnusedFiles() {
         try {
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
+            const headers = {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
+            }
+
             const response = await fetch(`${this.deleteEndpoint}/cleanup`, {
                 method: 'POST',
-                headers: {
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'Accept': 'application/json'
-                },
+                headers,
                 credentials: 'same-origin'
             });
 

package/src/services/ImageUploadService.js

@@ -2,10 +2,47 @@
  * Сервис для загрузки и управления изображениями на сервере
  */
 export class ImageUploadService {
-    constructor(apiClient) {
+    constructor(apiClient, options = {}) {
         this.apiClient = apiClient;
         this.uploadEndpoint = '/api/images/upload';
         this.deleteEndpoint = '/api/images';
+        this.options = {
+            csrfToken: null, // Можно передать токен напрямую
+            csrfTokenSelector: 'meta[name="csrf-token"]', // Селектор для поиска токена в DOM
+            requireCsrf: true, // Требовать ли CSRF токен
+            ...options
+        };
+    }
+
+    /**
+     * Получает CSRF токен из различных источников
+     * @private
+     */
+    _getCsrfToken() {
+        // 1. Сначала проверяем токен, переданный в опциях
+        if (this.options.csrfToken) {
+            return this.options.csrfToken;
+        }
+
+        // 2. Ищем токен в DOM
+        if (typeof document !== 'undefined') {
+            const tokenElement = document.querySelector(this.options.csrfTokenSelector);
+            if (tokenElement) {
+                return tokenElement.getAttribute('content');
+            }
+        }
+
+        // 3. Проверяем глобальную переменную (для тестирования)
+        if (typeof window !== 'undefined' && window.csrfToken) {
+            return window.csrfToken;
+        }
+
+        // 4. Если CSRF не требуется, возвращаем null
+        if (!this.options.requireCsrf) {
+            return null;
+        }
+
+        return null;
     }
 
     /**
@@ -27,18 +64,24 @@ export class ImageUploadService {
             formData.append('height', dimensions.height.toString());
 
             // Получаем CSRF токен
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
-            if (!csrfToken) {
-                throw new Error('CSRF токен не найден');
+            if (this.options.requireCsrf && !csrfToken) {
+                throw new Error('CSRF токен не найден. Добавьте <meta name="csrf-token" content="{{ csrf_token() }}"> в HTML или передайте токен в опциях.');
+            }
+
+            const headers = {
+                'X-Requested-With': 'XMLHttpRequest'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
             }
 
             const response = await fetch(this.uploadEndpoint, {
                 method: 'POST',
-                headers: {
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest'
-                },
+                headers,
                 credentials: 'same-origin',
                 body: formData
             });
@@ -87,15 +130,21 @@ export class ImageUploadService {
      */
     async deleteImage(imageId) {
         try {
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
+            const headers = {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
+            }
+
             const response = await fetch(`${this.deleteEndpoint}/${imageId}`, {
                 method: 'DELETE',
-                headers: {
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'Accept': 'application/json'
-                },
+                headers,
                 credentials: 'same-origin'
             });
 
@@ -119,15 +168,21 @@ export class ImageUploadService {
      */
     async cleanupUnusedImages() {
         try {
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            const csrfToken = this._getCsrfToken();
             
+            const headers = {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            };
+
+            // Добавляем CSRF токен только если он есть
+            if (csrfToken) {
+                headers['X-CSRF-TOKEN'] = csrfToken;
+            }
+
             const response = await fetch(`${this.deleteEndpoint}/cleanup`, {
                 method: 'POST',
-                headers: {
-                    'X-CSRF-TOKEN': csrfToken,
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'Accept': 'application/json'
-                },
+                headers,
                 credentials: 'same-origin'
             });
 

package/src/ui/styles/workspace.css

@@ -524,16 +524,16 @@
     line-height: 1.4;
 }
 
-/* Topbar */
+/* Topbar Styles */
 .moodboard-topbar {
     position: absolute;
-    top: 12px;
-    left: 16px;
-    height: 50px;
-    display: inline-flex;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 6px;
+    padding: 8px 12px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
@@ -542,44 +542,53 @@
     pointer-events: auto;
 }
 
+.moodboard-topbar--dark {
+    background: #2a2a2a;
+    border-color: #444;
+    color: #fff;
+}
+
 .moodboard-topbar__button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
+    width: 36px;
+    height: 36px;
     border: none;
     border-radius: 8px;
-    /* background: #f0f0f0; */
-    /* color: #333; */
-    font-size: 16px;
+    background: #f0f0f0;
+    color: #333;
     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 {
+    background: #e6e6e6;
 }
 
-.moodboard-topbar__button:hover svg {
-    /* transform: scale(1.1); */
+.moodboard-topbar__button--active {
+    background: #007ACC;
+    color: #fff;
 }
 
-.moodboard-topbar__button:hover {
+.moodboard-topbar__button--paint {
+    background: #f0f0f0;
+}
+
+.moodboard-topbar__button--paint:hover {
     background: #e6e6e6;
 }
 
-/* Divider for topbar */
 .moodboard-topbar__divider {
     width: 1px;
-    height: 28px;
-    background: #e5e7eb;
-    margin: 0 6px 0 2px;
+    height: 24px;
+    background: #e0e0e0;
+    margin: 0 4px;
+}
+
+.moodboard-topbar svg {
+    width: 18px;
+    height: 18px;
 }
 
 /* Paint popover */

package/src/utils/topbarIconLoader.js

@@ -9,21 +9,69 @@ export class TopbarIconLoader {
 
     async init() {
         try {
-            // Всегда используем встроенные иконки для надежности
-            // Это гарантирует работу в любом окружении (npm пакет, CDN, локальная разработка)
-            this.loadBuiltInIcons();
+            // Загружаем иконки из файлов в папке topbar
+            await this.loadTopbarIcons();
             
             console.log('✅ Иконки верхней панели загружены успешно');
             
         } catch (error) {
             console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
-            // Даже в случае ошибки пытаемся загрузить встроенные иконки
+            // В случае ошибки загружаем встроенные иконки как fallback
             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);
+                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} иконок верхней панели`);
+    }
+
+    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;
+                }
+            } catch (error) {
+                console.warn(`⚠️ Не удалось загрузить ${iconName} с пути ${path}:`, error.message);
+                continue;
+            }
+        }
+        
+        throw new Error(`Не удалось загрузить иконку ${iconName} ни с одного из путей`);
+    }
+
+    getBuiltInIcon(iconName) {
+        // Встроенные иконки как fallback
         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"/>
@@ -71,12 +119,21 @@ export class TopbarIconLoader {
             </svg>`
         };
 
-        // Загружаем иконки статически
-        for (const [iconName, svgContent] of Object.entries(builtInIcons)) {
-            this.icons.set(iconName, svgContent);
+        return builtInIcons[iconName];
+    }
+
+    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);
+            }
         }
         
-        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
+        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели (fallback)`);
     }
 
     getIcon(name) {