@sequent-org/moodboard 1.0.0

package/src/services/BoardService.js

@@ -0,0 +1,85 @@
+import { GridFactory } from '../grid/GridFactory.js';
+import { Events } from '../core/events/Events.js';
+
+export class BoardService {
+	constructor(eventBus, pixi) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+		this.grid = null;
+		this._getCanvasSize = null;
+	}
+
+	async init(getCanvasSize) {
+		this._getCanvasSize = getCanvasSize;
+		// Инициализируем сетку (по умолчанию линейная)
+		const canvasSize = (this._getCanvasSize?.() || {});
+		this.grid = GridFactory.createGrid('line', {
+			enabled: true,
+			size: 20,
+			width: canvasSize.width || 800,
+			height: canvasSize.height || 600,
+			color: 0xE6E6E6,
+			opacity: 0.5
+		});
+		this.grid.updateVisual();
+		this.pixi.setGrid(this.grid);
+		this.eventBus.emit(Events.UI.GridCurrent, { type: 'line' });
+
+		this._attachEvents();
+	}
+
+	_attachEvents() {
+		// Смена вида сетки из UI
+		this.eventBus.on(Events.UI.GridChange, ({ type }) => {
+			const size = this._getCanvasSize?.() || { width: 800, height: 600 };
+			if (type === 'off') {
+				this.grid?.setEnabled(false);
+				this.grid?.updateVisual();
+				this.pixi.setGrid(this.grid);
+				return;
+			}
+			const options = {
+				...GridFactory.getDefaultOptions(type),
+				enabled: true,
+				width: size.width,
+				height: size.height
+			};
+			try {
+				this.grid = GridFactory.createGrid(type, options);
+				this.grid.updateVisual();
+				this.pixi.setGrid(this.grid);
+				this.eventBus.emit(Events.UI.GridCurrent, { type });
+			} catch (e) {
+				console.warn('Unknown grid type:', type);
+			}
+		});
+
+		// Миникарта: данные и управление
+		this.eventBus.on(Events.UI.MinimapGetData, (req) => {
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const viewEl = this.pixi.app.view;
+			const objects = (this.pixi?.objects ? Array.from(this.pixi.objects.keys()) : []).map((id) => id);
+			req.world = { x: world.x, y: world.y, scale: world.scale?.x || 1 };
+			req.view = { width: viewEl.clientWidth, height: viewEl.clientHeight };
+			// Прокидываем только метаданные объектов через ядро (сам список формирует Core)
+		});
+		this.eventBus.on(Events.UI.MinimapCenterOn, ({ worldX, worldY }) => {
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const viewW = this.pixi.app.view.clientWidth;
+			const viewH = this.pixi.app.view.clientHeight;
+			const s = world.scale?.x || 1;
+			world.x = viewW / 2 - worldX * s;
+			world.y = viewH / 2 - worldY * s;
+		});
+	}
+
+	resize() {
+		if (!this.grid) return;
+		const size = this._getCanvasSize?.() || { width: 800, height: 600 };
+		this.grid.resize(size.width, size.height);
+		this.grid.updateVisual();
+		this.pixi.setGrid(this.grid);
+	}
+}
+
+

package/src/services/FileUploadService.js

@@ -0,0 +1,398 @@
+/**
+ * Сервис для загрузки и управления файлами на сервере
+ */
+export class FileUploadService {
+    constructor(apiClient) {
+        this.apiClient = apiClient;
+        this.uploadEndpoint = '/api/files/upload';
+        this.deleteEndpoint = '/api/files';
+    }
+
+    /**
+     * Загружает файл на сервер
+     * @param {File|Blob} file - файл
+     * @param {string} name - имя файла
+     * @returns {Promise<{id: string, url: string, size: number, mimeType: string, formattedSize: string}>}
+     */
+    async uploadFile(file, name = null) {
+        try {
+            // Создаем FormData для отправки файла
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('name', name || file.name || 'file');
+
+            // Получаем CSRF токен
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            if (!csrfToken) {
+                throw new Error('CSRF токен не найден');
+            }
+
+            const response = await fetch(this.uploadEndpoint, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'same-origin',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            
+            if (!result.success) {
+                throw new Error(result.message || 'Ошибка загрузки файла');
+            }
+
+            return {
+                id: result.data.id,
+                url: result.data.url,
+                size: result.data.size,
+                mimeType: result.data.mime_type,
+                formattedSize: result.data.formatted_size,
+                name: result.data.name
+            };
+
+        } catch (error) {
+            console.error('Ошибка загрузки файла:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Обновляет метаданные файла на сервере
+     * @param {string} fileId - ID файла
+     * @param {Object} metadata - метаданные для обновления
+     * @returns {Promise<Object>}
+     */
+    async updateFileMetadata(fileId, metadata) {
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            if (!csrfToken) {
+                throw new Error('CSRF токен не найден');
+            }
+
+            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'
+                },
+                credentials: 'same-origin',
+                body: JSON.stringify(metadata)
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            
+            if (!result.success) {
+                throw new Error(result.message || 'Ошибка обновления метаданных файла');
+            }
+
+            return result.data;
+
+        } catch (error) {
+            console.error('Ошибка обновления метаданных файла:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Удаляет файл с сервера
+     * @param {string} fileId - ID файла
+     */
+    async deleteFile(fileId) {
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            const response = await fetch(`${this.deleteEndpoint}/${fileId}`, {
+                method: 'DELETE',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                },
+                credentials: 'same-origin'
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            return result.success;
+
+        } catch (error) {
+            console.error('Ошибка удаления файла:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Получает информацию о файле
+     * @param {string} fileId - ID файла  
+     */
+    async getFileInfo(fileId) {
+        try {
+            const response = await fetch(`${this.deleteEndpoint}/${fileId}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'same-origin'
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            return result.data;
+
+        } catch (error) {
+            console.error('Ошибка получения информации о файле:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Получает URL для скачивания файла
+     * @param {string} fileId - ID файла
+     */
+    getDownloadUrl(fileId) {
+        return `${this.deleteEndpoint}/${fileId}/download`;
+    }
+
+    /**
+     * Скачивает файл с сервера
+     * @param {string} fileId - ID файла 
+     * @param {string} fileName - имя файла для скачивания
+     */
+    async downloadFile(fileId, fileName = null) {
+        try {
+            const downloadUrl = this.getDownloadUrl(fileId);
+            
+            console.log('📥 FileUploadService: Начинаем скачивание файла:', {
+                fileId,
+                fileName,
+                downloadUrl,
+                userAgent: navigator.userAgent,
+                isSecureContext: window.isSecureContext
+            });
+            
+            // Метод 1: Попробуем через fetch + blob (более надежно для современных браузеров)
+            try {
+                console.log('🔄 Метод 1: Пробуем скачивание через fetch...');
+                
+                const response = await fetch(downloadUrl, {
+                    method: 'GET',
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    credentials: 'same-origin'
+                });
+                
+                console.log('📥 Ответ сервера:', {
+                    status: response.status,
+                    statusText: response.statusText,
+                    contentType: response.headers.get('content-type'),
+                    contentLength: response.headers.get('content-length'),
+                    contentDisposition: response.headers.get('content-disposition')
+                });
+                
+                if (!response.ok) {
+                    // Пытаемся получить JSON ошибку от Laravel
+                    let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+                    
+                    try {
+                        const errorData = await response.json();
+                        console.error('🚨 Ошибка от сервера:', errorData);
+                        
+                        if (errorData.message) {
+                            errorMessage = `${errorMessage} - ${errorData.message}`;
+                        }
+                        
+                        // Показываем пользователю детальную ошибку
+                        if (errorData.success === false) {
+                            alert(`Ошибка сервера: ${errorData.message || 'Файл не найден'}`);
+                        }
+                    } catch (jsonError) {
+                        console.warn('Не удалось прочитать JSON ошибку:', jsonError);
+                    }
+                    
+                    throw new Error(errorMessage);
+                }
+                
+                // Получаем blob файла
+                const blob = await response.blob();
+                console.log('📦 Получен blob:', {
+                    size: blob.size,
+                    type: blob.type
+                });
+                
+                // Создаем URL для blob
+                const blobUrl = window.URL.createObjectURL(blob);
+                
+                // Создаем ссылку для скачивания
+                const link = document.createElement('a');
+                link.href = blobUrl;
+                link.download = fileName || `file_${fileId}`;
+                
+                // Добавляем в DOM, кликаем и удаляем
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                
+                // Освобождаем память
+                window.URL.revokeObjectURL(blobUrl);
+                
+                console.log('✅ Файл успешно скачан через fetch/blob:', fileName || fileId);
+                return true;
+                
+            } catch (fetchError) {
+                console.warn('❌ Ошибка скачивания через fetch:', fetchError);
+                
+                // Метод 2: Fallback - открываем в новом окне
+                console.log('🔄 Метод 2: Пробуем открытие в новом окне...');
+                
+                try {
+                    const newWindow = window.open(downloadUrl, '_blank');
+                    if (newWindow) {
+                        console.log('✅ Файл открыт в новом окне');
+                        return true;
+                    } else {
+                        throw new Error('Popup заблокирован браузером');
+                    }
+                } catch (windowError) {
+                    console.warn('❌ Ошибка открытия в новом окне:', windowError);
+                    
+                    // Метод 3: Последний fallback - прямая ссылка
+                    console.log('🔄 Метод 3: Создаем прямую ссылку...');
+                    
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    if (fileName) {
+                        link.download = fileName;
+                    }
+                    link.target = '_blank';
+                    
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    
+                    console.log('✅ Создана прямая ссылка для скачивания');
+                    return true;
+                }
+            }
+
+        } catch (error) {
+            console.error('❌ FileUploadService: Критическая ошибка скачивания файла:', error);
+            
+            // Показываем пользователю альтернативную ссылку
+            if (confirm(`Автоматическое скачивание не удалось: ${error.message}\n\nОткрыть файл в новой вкладке?`)) {
+                window.open(this.getDownloadUrl(fileId), '_blank');
+            }
+            
+            throw error;
+        }
+    }
+
+    /**
+     * Очищает неиспользуемые файлы с сервера
+     * @returns {Promise<{deletedCount: number, errors: Array}>}
+     */
+    async cleanupUnusedFiles() {
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            const response = await fetch(`${this.deleteEndpoint}/cleanup`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                },
+                credentials: 'same-origin'
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            
+            if (result.success) {
+                const data = result.data || {};
+                return {
+                    deletedCount: data.deleted_count || 0,
+                    errors: data.errors || []
+                };
+            } else {
+                throw new Error(result.message || 'Ошибка очистки файлов');
+            }
+
+        } catch (error) {
+            console.error('Ошибка очистки неиспользуемых файлов:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Проверяет, поддерживается ли тип файла для предварительного просмотра
+     */
+    static canPreview(mimeType) {
+        const previewableTypes = [
+            'image/',
+            'text/',
+            'application/pdf',
+            'application/json'
+        ];
+        
+        return previewableTypes.some(type => mimeType.startsWith(type));
+    }
+
+    /**
+     * Получает иконку файла по MIME типу
+     */
+    static getFileIcon(mimeType) {
+        const iconMap = {
+            'application/pdf': 'pdf',
+            'application/msword': 'doc',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'doc',
+            'application/vnd.ms-excel': 'xls',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xls',
+            'application/vnd.ms-powerpoint': 'ppt',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'ppt',
+            'application/zip': 'archive',
+            'application/x-rar-compressed': 'archive',
+            'application/x-7z-compressed': 'archive',
+            'text/': 'text',
+            'image/': 'image',
+            'video/': 'video',
+            'audio/': 'audio'
+        };
+
+        for (const [type, icon] of Object.entries(iconMap)) {
+            if (mimeType.startsWith(type)) {
+                return icon;
+            }
+        }
+
+        return 'file';
+    }
+}

package/src/services/FrameService.js

@@ -0,0 +1,138 @@
+import { Events } from '../core/events/Events.js';
+
+export class FrameService {
+	constructor(eventBus, pixi, state) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+		this.state = state;
+	}
+
+	attach() {
+		// Визуал подсветки при drag над фреймом и перенос детей на drag
+		this.eventBus.on(Events.Tool.DragStart, (data) => {
+			const moved = this.state.state.objects.find(o => o.id === data.object);
+			if (moved && moved.type === 'frame') {
+				// Серый фон
+				this.pixi.setFrameFill(moved.id, moved.width, moved.height, 0xEEEEEE);
+				// Cнимок стартовых позиций
+				this._frameDragFrameStart = { x: this.pixi.objects.get(moved.id)?.x || 0, y: this.pixi.objects.get(moved.id)?.y || 0 };
+				const attachments = this._getFrameChildren(moved.id);
+				this._frameDragChildStart = new Map();
+				for (const childId of attachments) {
+					const childPixi = this.pixi.objects.get(childId);
+					if (childPixi) this._frameDragChildStart.set(childId, { x: childPixi.x, y: childPixi.y });
+				}
+			}
+		});
+
+		this.eventBus.on(Events.Tool.DragUpdate, (data) => {
+			const moved = this.state.state.objects.find(o => o.id === data.object);
+			if (!moved) return;
+			if (moved.type === 'frame') {
+				const attachments = this._getFrameChildren(moved.id);
+				const frameStart = this._frameDragFrameStart || { x: data.position.x, y: data.position.y };
+				const dx = data.position.x - frameStart.x;
+				const dy = data.position.y - frameStart.y;
+				for (const childId of attachments) {
+					const start = this._frameDragChildStart?.get(childId);
+					if (!start) continue;
+					const p = this.pixi.objects.get(childId);
+					if (p) { p.x = start.x + dx; p.y = start.y + dy; }
+					const stObj = this.state.state.objects.find(o => o.id === childId);
+					if (stObj) { stObj.position.x = start.x + dx; stObj.position.y = start.y + dy; }
+				}
+			} else {
+				// Hover-эффект: подсветка фрейма, если центр объекта внутри
+				const centerX = moved.position.x + (moved.width || 0) / 2;
+				const centerY = moved.position.y + (moved.height || 0) / 2;
+				const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
+				const ordered = frames.slice().sort((a, b) => {
+					const pa = this.pixi.objects.get(a.id);
+					const pb = this.pixi.objects.get(b.id);
+					return (pb?.zIndex || 0) - (pa?.zIndex || 0);
+				});
+				let hoverId = null;
+				for (const f of ordered) {
+					const rect = { x: f.position.x, y: f.position.y, w: f.width || 0, h: f.height || 0 };
+					if (centerX >= rect.x && centerX <= rect.x + rect.w && centerY >= rect.y && centerY <= rect.y + rect.h) {
+						hoverId = f.id; break;
+					}
+				}
+				if (hoverId !== this._frameHoverId) {
+					// Снять подсветку с предыдущего
+					if (this._frameHoverId) {
+						const prev = frames.find(fr => fr.id === this._frameHoverId);
+						if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
+					}
+					// Включить подсветку нового
+					if (hoverId) {
+						const cur = frames.find(fr => fr.id === hoverId);
+						if (cur) this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xEEEEEE);
+					}
+					this._frameHoverId = hoverId || null;
+				}
+			}
+		});
+
+		this.eventBus.on(Events.Tool.DragEnd, (data) => {
+			const movedObj = this.state.state.objects.find(o => o.id === data.object);
+			if (!movedObj) return;
+			// Сброс заливки
+			if (movedObj.type === 'frame') {
+				this.pixi.setFrameFill(movedObj.id, movedObj.width, movedObj.height, 0xFFFFFF);
+			}
+
+			// Автопривязка/отвязка объекта к фрейму после перемещения
+			this._recomputeFrameAttachment(movedObj.id);
+			// Сброс временных структур и hover-подсветки
+			this._frameDragFrameStart = null;
+			this._frameDragChildStart = null;
+			if (this._frameHoverId) {
+				const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
+				const prev = frames.find(fr => fr.id === this._frameHoverId);
+				if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
+				this._frameHoverId = null;
+			}
+		});
+	}
+
+	_getFrameChildren(frameId) {
+		const res = [];
+		for (const o of this.state.state.objects || []) {
+			if (o.id === frameId) continue;
+			if (o.properties && o.properties.frameId === frameId) res.push(o.id);
+		}
+		return res;
+	}
+
+	_recomputeFrameAttachment(objectId) {
+		const obj = (this.state.state.objects || []).find(o => o.id === objectId);
+		if (!obj) return;
+		if (obj.type === 'frame') return; // фрейм к фрейму не крепим
+		const center = {
+			x: obj.position.x + (obj.width || 0) / 2,
+			y: obj.position.y + (obj.height || 0) / 2
+		};
+		const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
+		const ordered = frames.slice().sort((a, b) => {
+			const pa = this.pixi.objects.get(a.id);
+			const pb = this.pixi.objects.get(b.id);
+			return (pb?.zIndex || 0) - (pa?.zIndex || 0);
+		});
+		let newFrameId = null;
+		for (const f of ordered) {
+			const rect = { x: f.position.x, y: f.position.y, w: f.width || 0, h: f.height || 0 };
+			if (center.x >= rect.x && center.x <= rect.x + rect.w && center.y >= rect.y && center.y <= rect.y + rect.h) {
+				newFrameId = f.id; break;
+			}
+		}
+		const prevFrameId = obj.properties?.frameId || null;
+		if (newFrameId !== prevFrameId) {
+			obj.properties = obj.properties || {};
+			obj.properties.frameId = newFrameId || undefined;
+			this.state.markDirty();
+		}
+	}
+}
+
+