@sequent-org/moodboard 1.0.0

package/src/core/SaveManager.js

@@ -0,0 +1,381 @@
+/**
+ * Менеджер автоматического сохранения данных
+ */
+import { Events } from './events/Events.js';
+export class SaveManager {
+    constructor(eventBus, options = {}) {
+        this.eventBus = eventBus;
+        this.apiClient = null; // Будет установлен позже через setApiClient
+        this.options = {
+            // Фиксированные настройки автосохранения (не настраиваются клиентом)
+            autoSave: true,
+            saveDelay: 1500, // Оптимальная задержка 1.5 секунды
+            maxRetries: 3,
+            retryDelay: 1000,
+            periodicSaveInterval: 30000, // Периодическое сохранение каждые 30 сек
+            
+            // Настраиваемые эндпоинты (берем из options)
+            saveEndpoint: options.saveEndpoint || '/api/moodboard/save',
+            loadEndpoint: options.loadEndpoint || '/api/moodboard/load'
+        };
+        
+        this.saveTimer = null;
+        this.isRequestInProgress = false;
+        this.retryCount = 0;
+        this.lastSavedData = null;
+        this.hasUnsavedChanges = false;
+        
+        // Состояния сохранения
+        this.saveStatus = 'idle'; // idle, saving, saved, error
+        
+        this.setupEventListeners();
+    }
+
+    /**
+     * Устанавливает ApiClient для использования в сохранении
+     */
+    setApiClient(apiClient) {
+        this.apiClient = apiClient;
+    }
+    
+    /**
+     * Настройка обработчиков событий
+     */
+    setupEventListeners() {
+        if (!this.options.autoSave) return;
+        
+        // Отслеживаем изменения в данных
+        this.eventBus.on(Events.Grid.BoardDataChanged, (data) => {
+            this.scheduleAutoSave(data);
+        });
+        
+        // Отслеживаем создание объектов
+        this.eventBus.on(Events.Object.Created, () => {
+            this.markAsChanged();
+        });
+        
+        // Отслеживаем изменения объектов
+        this.eventBus.on(Events.Object.Updated, (data) => {
+
+            this.markAsChanged();
+        });
+        
+        // Отслеживаем удаление объектов
+        this.eventBus.on(Events.Object.Deleted, () => {
+            this.markAsChanged();
+        });
+        
+        // Отслеживаем прямые изменения состояния (для Undo/Redo)
+        this.eventBus.on(Events.Object.StateChanged, (data) => {
+
+            this.markAsChanged();
+        });
+        
+        // Отслеживание перемещений теперь происходит через команды и state:changed
+        
+        // Сохранение при закрытии страницы
+        window.addEventListener('beforeunload', (e) => {
+            if (this.hasUnsavedChanges) {
+                this.saveImmediately();
+                // Предупреждаем о несохраненных изменениях
+                e.preventDefault();
+                e.returnValue = 'У вас есть несохраненные изменения. Вы уверены, что хотите покинуть страницу?';
+                return e.returnValue;
+            }
+        });
+        
+        // Периодическое автосохранение
+        if (this.options.autoSave) {
+            setInterval(() => {
+                if (this.hasUnsavedChanges && !this.isRequestInProgress) {
+                    this.saveImmediately();
+                }
+            }, this.options.periodicSaveInterval);
+        }
+    }
+    
+    /**
+     * Отметить данные как измененные
+     */
+    markAsChanged() {
+        this.hasUnsavedChanges = true;
+        this.scheduleAutoSave();
+    }
+    
+    /**
+     * Запланировать автоматическое сохранение с задержкой
+     */
+    scheduleAutoSave(data = null) {
+        if (!this.options.autoSave) return;
+        
+        // Отменяем предыдущий таймер
+        if (this.saveTimer) {
+            clearTimeout(this.saveTimer);
+        }
+        
+        // Устанавливаем новый таймер
+        this.saveTimer = setTimeout(() => {
+            this.saveImmediately(data);
+        }, this.options.saveDelay);
+        
+        // Обновляем статус
+        this.updateSaveStatus('pending');
+    }
+    
+    /**
+     * Немедленное сохранение
+     */
+    async saveImmediately(data = null) {
+        if (this.isRequestInProgress) return;
+        
+        try {
+            // Получаем данные для сохранения
+            const saveData = data || await this.getBoardData();
+            
+            // Проверяем, изменились ли данные с последнего сохранения
+            if (this.lastSavedData && JSON.stringify(saveData) === JSON.stringify(this.lastSavedData)) {
+                return; // Данные не изменились
+            }
+            
+            this.isRequestInProgress = true;
+            this.updateSaveStatus('saving');
+            
+            // Отправляем данные на сервер
+            const response = await this.sendSaveRequest(saveData);
+            
+            // Проверяем успешность сохранения (разные форматы от ApiClient и прямого запроса)
+            const isSuccess = response.success === true || (response.data !== undefined);
+            
+            if (isSuccess) {
+                this.lastSavedData = JSON.parse(JSON.stringify(saveData));
+                this.hasUnsavedChanges = false;
+                this.retryCount = 0;
+                this.updateSaveStatus('saved');
+                
+                // Эмитируем событие успешного сохранения
+                this.eventBus.emit(Events.Save.Success, {
+                    data: saveData,
+                    timestamp: new Date().toISOString()
+                });
+            } else {
+                throw new Error(response.message || 'Ошибка сохранения');
+            }
+            
+        } catch (error) {
+            console.error('Ошибка автосохранения:', error);
+            this.handleSaveError(error, data);
+        } finally {
+            this.isRequestInProgress = false;
+        }
+    }
+    
+    /**
+     * Получение данных доски для сохранения
+     */
+    async getBoardData() {
+        return new Promise((resolve) => {
+            const requestData = { data: null };
+            this.eventBus.emit(Events.Save.GetBoardData, requestData);
+            resolve(requestData.data);
+        });
+    }
+    
+    /**
+     * Отправка запроса на сохранение
+     */
+    async sendSaveRequest(data) {
+        const boardId = data.id || 'default';
+        
+        // Если есть ApiClient, используем его (он автоматически очистит данные изображений)
+        if (this.apiClient) {
+            return await this.apiClient.saveBoard(boardId, data);
+        }
+        
+        // Fallback к прямому запросу (без очистки изображений)
+        
+        // Получаем CSRF токен
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+        
+        if (!csrfToken) {
+            throw new Error('CSRF токен не найден. Добавьте <meta name="csrf-token" content="{{ csrf_token() }}"> в HTML.');
+        }
+
+        const requestBody = {
+            boardId: boardId,
+            boardData: data
+        };
+
+        const response = await fetch(this.options.saveEndpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'X-CSRF-TOKEN': csrfToken,
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            credentials: 'same-origin', // Важно для работы с куки Laravel
+            body: JSON.stringify(requestBody)
+        });
+        
+        if (!response.ok) {
+            let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+            
+            try {
+                const errorData = await response.json();
+                if (errorData.message) {
+                    errorMessage = errorData.message;
+                }
+                if (errorData.errors) {
+                    // Laravel validation errors
+                    const validationErrors = Object.values(errorData.errors).flat();
+                    errorMessage += '. ' + validationErrors.join(', ');
+                }
+            } catch (parseError) {
+                // Если не удалось распарсить JSON ошибки, используем стандартное сообщение
+                console.warn('Не удалось распарсить ошибку сервера:', parseError);
+            }
+            
+            throw new Error(errorMessage);
+        }
+        
+        return await response.json();
+    }
+    
+    /**
+     * Обработка ошибок сохранения
+     */
+    async handleSaveError(error, data) {
+        this.retryCount++;
+        this.updateSaveStatus('error', error.message);
+        
+        // Эмитируем событие ошибки
+        this.eventBus.emit(Events.Save.Error, {
+            error: error.message,
+            retryCount: this.retryCount,
+            maxRetries: this.options.maxRetries
+        });
+        
+        // Повторная попытка сохранения
+        if (this.retryCount < this.options.maxRetries) {
+
+            
+            setTimeout(() => {
+                this.saveImmediately(data);
+            }, this.options.retryDelay * this.retryCount); // Увеличиваем задержку с каждой попыткой
+        }
+    }
+    
+    /**
+     * Загрузка данных с сервера
+     */
+    async loadBoardData(boardId) {
+        try {
+            const response = await fetch(`${this.options.loadEndpoint}/${boardId}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this.lastSavedData = result.data;
+                this.hasUnsavedChanges = false;
+                
+                // Эмитируем событие загрузки
+                this.eventBus.emit(Events.Save.Loaded, {
+                    data: result.data,
+                    timestamp: new Date().toISOString()
+                });
+                
+                return result.data;
+            } else {
+                throw new Error(result.message || 'Ошибка загрузки');
+            }
+            
+        } catch (error) {
+            console.error('Ошибка загрузки данных:', error);
+            this.eventBus.emit(Events.Save.LoadError, { error: error.message });
+            throw error;
+        }
+    }
+    
+    /**
+     * Обновление статуса сохранения
+     */
+    updateSaveStatus(status, message = '') {
+        this.saveStatus = status;
+        
+        // Эмитируем событие изменения статуса
+        this.eventBus.emit(Events.Save.StatusChanged, {
+            status,
+            message,
+            hasUnsavedChanges: this.hasUnsavedChanges,
+            timestamp: new Date().toISOString()
+        });
+    }
+    
+    /**
+     * Принудительное сохранение (вызывается пользователем)
+     */
+    async forceSave() {
+        if (this.saveTimer) {
+            clearTimeout(this.saveTimer);
+            this.saveTimer = null;
+        }
+        
+        await this.saveImmediately();
+    }
+    
+    /**
+     * Включение/выключение автосохранения
+     */
+    setAutoSave(enabled) {
+        this.options.autoSave = enabled;
+        
+        if (!enabled && this.saveTimer) {
+            clearTimeout(this.saveTimer);
+            this.saveTimer = null;
+        }
+    }
+    
+    /**
+     * Получение текущего статуса
+     */
+    getStatus() {
+        return {
+            saveStatus: this.saveStatus,
+            hasUnsavedChanges: this.hasUnsavedChanges,
+            isRequestInProgress: this.isRequestInProgress,
+            retryCount: this.retryCount,
+            autoSaveEnabled: this.options.autoSave
+        };
+    }
+    
+    /**
+     * Очистка ресурсов
+     */
+    destroy() {
+        if (this.saveTimer) {
+            clearTimeout(this.saveTimer);
+        }
+        
+        // Финальное сохранение перед уничтожением
+        if (this.hasUnsavedChanges && this.options.autoSave) {
+            this.saveImmediately();
+        }
+        
+        // Удаляем обработчики событий (константы)
+        this.eventBus.off(Events.Grid.BoardDataChanged);
+        this.eventBus.off(Events.Object.Created);
+        this.eventBus.off(Events.Object.Updated);
+        this.eventBus.off(Events.Object.Deleted);
+        this.eventBus.off(Events.Tool.DragEnd);
+    }
+}

package/src/core/StateManager.js

@@ -0,0 +1,64 @@
+export class StateManager {
+    constructor(eventBus) {
+        this.eventBus = eventBus;
+        this.state = {
+            board: {},
+            objects: [],
+            selectedObjects: [],
+            isDirty: false
+        };
+    }
+
+    loadBoard(boardData) {
+        this.state.board = boardData;
+        this.state.objects = boardData.objects || [];
+        this.eventBus.emit('board:loaded', boardData);
+    }
+
+    addObject(objectData) {
+        this.state.objects.push(objectData);
+        this.markDirty();
+        this.eventBus.emit('object:created', objectData);
+    }
+
+    removeObject(objectId) {
+        this.state.objects = this.state.objects.filter(obj => obj.id !== objectId);
+        this.markDirty();
+        this.eventBus.emit('object:deleted', objectId);
+    }
+
+    updateObjectPosition(objectId, position) {
+        const object = this.state.objects.find(obj => obj.id === objectId);
+        if (object) {
+            object.position = position;
+            this.markDirty();
+            this.eventBus.emit('object:updated', { objectId, position });
+        }
+    }
+
+    getObjects() {
+        return [...this.state.objects];
+    }
+
+    serialize() {
+        return {
+            ...this.state.board, 
+            objects: this.state.objects
+        };
+    }
+
+    markDirty() {
+        this.state.isDirty = true;
+        
+        // Уведомляем SaveManager о том, что состояние изменилось
+        // Это нужно для Undo/Redo операций
+        this.eventBus.emit('state:changed', {
+            reason: 'state_marked_dirty',
+            timestamp: Date.now()
+        });
+    }
+
+    isDirty() {
+        return this.state.isDirty;
+    }
+}

package/src/core/commands/BaseCommand.js

@@ -0,0 +1,68 @@
+/**
+ * Базовый класс для всех команд в системе Undo/Redo
+ * Реализует паттерн Command
+ */
+export class BaseCommand {
+    constructor(type, description = '') {
+        this.type = type;
+        this.description = description;
+        this.timestamp = Date.now();
+        this.id = `cmd_${this.timestamp}_${Math.random().toString(36).substr(2, 9)}`;
+        this.eventBus = null;
+    }
+
+    /**
+     * Устанавливает EventBus для отправки событий
+     */
+    setEventBus(eventBus) {
+        this.eventBus = eventBus;
+    }
+
+    /**
+     * Отправляет событие через EventBus
+     */
+    emit(eventName, data) {
+        if (this.eventBus) {
+            this.eventBus.emit(eventName, data);
+        } else {
+            console.warn(`EventBus не установлен для команды ${this.id}`);
+        }
+    }
+
+    /**
+     * Выполнить команду
+     * Должен быть переопределен в наследниках
+     */
+    execute() {
+        throw new Error('execute() method must be implemented in subclass');
+    }
+
+    /**
+     * Отменить команду
+     * Должен быть переопределен в наследниках
+     */
+    undo() {
+        throw new Error('undo() method must be implemented in subclass');
+    }
+
+    /**
+     * Можно ли объединить с другой командой (для группировки мелких изменений)
+     */
+    canMergeWith(otherCommand) {
+        return false;
+    }
+
+    /**
+     * Объединить с другой командой
+     */
+    mergeWith(otherCommand) {
+        throw new Error('mergeWith() method must be implemented when canMergeWith returns true');
+    }
+
+    /**
+     * Получить описание команды для отладки
+     */
+    toString() {
+        return `${this.type}: ${this.description} (${new Date(this.timestamp).toLocaleTimeString()})`;
+    }
+}

package/src/core/commands/CopyObjectCommand.js

@@ -0,0 +1,44 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+/**
+ * Команда копирования объекта
+ */
+export class CopyObjectCommand extends BaseCommand {
+    constructor(coreMoodboard, objectId) {
+        super();
+        this.coreMoodboard = coreMoodboard;
+        this.objectId = objectId;
+        this.objectData = null;
+    }
+
+    execute() {
+        // Находим объект в состоянии
+        const objects = this.coreMoodboard.state.state.objects;
+        const object = objects.find(obj => obj.id === this.objectId);
+        
+        if (object) {
+            // Создаем глубокую копию данных объекта
+            this.objectData = JSON.parse(JSON.stringify(object));
+            
+            // Сохраняем в буфер обмена приложения
+            this.coreMoodboard.clipboard = {
+                type: 'object',
+                data: this.objectData
+            };
+            
+            this.emit(Events.Object.Updated, {
+                objectId: this.objectId,
+                objectData: this.objectData
+            });
+        }
+    }
+
+    undo() {
+        // Копирование не нужно отменять - это не меняет состояние доски
+    }
+
+    getDescription() {
+        return `Копировать объект ${this.objectId}`;
+    }
+}

package/src/core/commands/CreateObjectCommand.js

@@ -0,0 +1,46 @@
+import { BaseCommand } from './BaseCommand.js';
+import { Events } from '../events/Events.js';
+
+/**
+ * Команда создания объекта
+ */
+export class CreateObjectCommand extends BaseCommand {
+    constructor(coreMoodboard, objectData) {
+        super('create_object', `Создать ${objectData.type}`);
+        this.coreMoodboard = coreMoodboard;
+        this.objectData = { ...objectData }; // Копируем данные объекта
+        this.wasExecuted = false;
+    }
+
+    execute() {
+        if (this.wasExecuted) {
+            // При redo - восстанавливаем объект
+            this.coreMoodboard.state.addObject(this.objectData);
+            this.coreMoodboard.pixi.createObject(this.objectData);
+
+        } else {
+            // При первом выполнении - создаем новый объект
+            this.coreMoodboard.state.addObject(this.objectData);
+            this.coreMoodboard.pixi.createObject(this.objectData);
+            this.wasExecuted = true;
+
+        }
+        
+        this.coreMoodboard.eventBus.emit(Events.Object.Created, { 
+            objectId: this.objectData.id, 
+            objectData: this.objectData 
+        });
+    }
+
+    undo() {
+        // Удаляем объект из состояния и PIXI
+        this.coreMoodboard.state.removeObject(this.objectData.id);
+        this.coreMoodboard.pixi.removeObject(this.objectData.id);
+        
+
+        
+        this.coreMoodboard.eventBus.emit(Events.Object.Deleted, { 
+            objectId: this.objectData.id 
+        });
+    }
+}