@sequent-org/moodboard 1.0.0

package/src/moodboard/DataManager.js

@@ -0,0 +1,114 @@
+/**
+ * Управляет загрузкой и сохранением данных MoodBoard
+ */
+export class DataManager {
+    constructor(coreMoodboard) {
+        this.coreMoodboard = coreMoodboard;
+    }
+    
+    /**
+     * Загружает данные в MoodBoard
+     */
+    loadData(data) {
+        if (!data) return;
+        
+
+        
+        // Очищаем доску перед загрузкой
+        this.clearBoard();
+        
+        // Загружаем объекты
+        if (data.objects && Array.isArray(data.objects)) {
+
+            
+            data.objects.forEach((objectData, index) => {
+                try {
+                    // Используем полные данные объекта, включая ID
+                    const createdObject = this.coreMoodboard.createObjectFromData(objectData);
+
+                } catch (error) {
+                    console.error(`❌ Ошибка загрузки объекта ${index + 1}:`, error, objectData);
+                }
+            });
+        }
+        
+        // Загружаем viewport
+        if (data.viewport) {
+            this.loadViewport(data.viewport);
+        }
+        
+
+    }
+    
+    /**
+     * Загружает настройки viewport (позиция и зум)
+     */
+    loadViewport(viewport) {
+        // TODO: Реализовать установку viewport
+
+        
+        // Здесь будет код для установки позиции и зума canvas
+        // this.coreMoodboard.setViewport(viewport.x, viewport.y, viewport.zoom);
+    }
+    
+    /**
+     * Экспортирует данные доски
+     */
+    exportBoardData() {
+        if (!this.coreMoodboard) {
+            return null;
+        }
+        
+        const data = this.coreMoodboard.boardData;
+        
+        // Создаем событие для внешнего использования
+        this.coreMoodboard.eventBus.emit('board:export', data);
+        
+        return data;
+    }
+    
+    /**
+     * Очищает все объекты на доске
+     */
+    clearBoard() {
+        if (!this.coreMoodboard) return;
+        
+        const objects = this.coreMoodboard.objects || [];
+        objects.forEach(obj => this.coreMoodboard.deleteObject(obj.id));
+        
+
+        return objects.length;
+    }
+    
+    /**
+     * Создает объект на доске
+     */
+    createObject(type, position, properties = {}, extraData = {}) {
+        if (!this.coreMoodboard) return null;
+        
+        return this.coreMoodboard.createObject(type, position, properties, extraData);
+    }
+    
+    /**
+     * Удаляет объект с доски
+     */
+    deleteObject(objectId) {
+        if (!this.coreMoodboard) return;
+        
+        this.coreMoodboard.deleteObject(objectId);
+    }
+    
+    /**
+     * Получает все объекты доски
+     */
+    get objects() {
+        return this.coreMoodboard ? this.coreMoodboard.objects : [];
+    }
+    
+    /**
+     * Получает данные доски
+     */
+    get boardData() {
+        return this.coreMoodboard ? this.coreMoodboard.boardData : null;
+    }
+}

package/src/moodboard/MoodBoard.js

@@ -0,0 +1,359 @@
+import { CoreMoodBoard } from '../core/index.js';
+import { Events } from '../core/events/Events.js';
+import { Toolbar } from '../ui/Toolbar.js';
+import { SaveStatus } from '../ui/SaveStatus.js';
+import { Topbar } from '../ui/Topbar.js';
+import { ZoomPanel } from '../ui/ZoomPanel.js';
+import { MapPanel } from '../ui/MapPanel.js';
+import { ContextMenu } from '../ui/ContextMenu.js';
+import { WorkspaceManager } from './WorkspaceManager.js';
+import { DataManager } from './DataManager.js';
+import { ActionHandler } from './ActionHandler.js';
+import { HtmlTextLayer } from '../ui/HtmlTextLayer.js';
+import { HtmlHandlesLayer } from '../ui/HtmlHandlesLayer.js';
+import { CommentPopover } from '../ui/CommentPopover.js';
+import { TextPropertiesPanel } from '../ui/TextPropertiesPanel.js';
+import { FramePropertiesPanel } from '../ui/FramePropertiesPanel.js';
+import { NotePropertiesPanel } from '../ui/NotePropertiesPanel.js';
+import { FilePropertiesPanel } from '../ui/FilePropertiesPanel.js';
+import { AlignmentGuides } from '../tools/AlignmentGuides.js';
+import { ImageUploadService } from '../services/ImageUploadService.js';
+
+/**
+ * Готовый MoodBoard с UI - главный класс пакета
+ */
+export class MoodBoard {
+    constructor(container, options = {}, data = null) {
+        this.containerSelector = container;
+        this.container = typeof container === 'string' 
+            ? document.querySelector(container)
+            : container;
+            
+        if (!this.container) {
+            throw new Error('Container not found');
+        }
+        
+        // Настройки по умолчанию
+        this.options = {
+            theme: 'light',
+            ...options
+        };
+        
+        this.data = data;
+        
+        // Основные компоненты
+        this.coreMoodboard = null;
+        this.toolbar = null;
+        this.saveStatus = null;
+        this.contextMenu = null;
+        
+        // Менеджеры
+        this.workspaceManager = new WorkspaceManager(this.container, this.options);
+        this.dataManager = null;
+        this.actionHandler = null;
+        
+        this.init();
+    }
+    
+    /**
+     * Инициализация рабочего пространства
+     */
+    async init() {
+        try {
+            // Создаем HTML структуру
+            const { workspace, toolbar, canvas, topbar } = this.workspaceManager.createWorkspaceStructure();
+            this.workspaceElement = workspace;
+            this.toolbarContainer = toolbar;
+            this.canvasContainer = canvas;
+            this.topbarContainer = topbar;
+            
+            // Инициализируем CoreMoodBoard
+            await this.initCoreMoodBoard();
+            
+            // Создаем менеджеры
+            this.dataManager = new DataManager(this.coreMoodboard);
+            this.actionHandler = new ActionHandler(this.dataManager, this.workspaceManager);
+            
+            // Инициализируем UI
+            this.initToolbar();
+            this.initTopbar();
+            this.initZoombar();
+            this.initMapbar();
+            this.initContextMenu();
+            // HTML-слои: сверхчёткий текст и единые ручки
+            this.htmlTextLayer = new HtmlTextLayer(this.canvasContainer, this.coreMoodboard.eventBus, this.coreMoodboard);
+            this.htmlTextLayer.attach();
+            this.htmlHandlesLayer = new HtmlHandlesLayer(this.canvasContainer, this.coreMoodboard.eventBus, this.coreMoodboard);
+            this.htmlHandlesLayer.attach();
+            // Поповер для комментариев
+            this.commentPopover = new CommentPopover(this.canvasContainer, this.coreMoodboard.eventBus, this.coreMoodboard);
+            this.commentPopover.attach();
+            // Панель свойств текста
+            this.textPropertiesPanel = new TextPropertiesPanel(this.canvasContainer, this.coreMoodboard.eventBus, this.coreMoodboard);
+            this.textPropertiesPanel.attach();
+
+            // Панель свойств фрейма
+            this.framePropertiesPanel = new FramePropertiesPanel(this.coreMoodboard.eventBus, this.canvasContainer, this.coreMoodboard);
+            
+            // Панель свойств записки
+            this.notePropertiesPanel = new NotePropertiesPanel(this.coreMoodboard.eventBus, this.canvasContainer, this.coreMoodboard);
+            this.filePropertiesPanel = new FilePropertiesPanel(this.coreMoodboard.eventBus, this.canvasContainer, this.coreMoodboard);
+            
+            // Направляющие линии выравнивания
+            this.alignmentGuides = new AlignmentGuides(
+                this.coreMoodboard.eventBus, 
+                this.coreMoodboard.pixi.app,
+                () => this.coreMoodboard.state.getObjects()
+            );
+            
+            // Сервис загрузки изображений
+            this.imageUploadService = new ImageUploadService(this.coreMoodboard.apiClient);
+            
+            // Предоставляем доступ к сервису через core
+            this.coreMoodboard.imageUploadService = this.imageUploadService;
+            
+            // Загружаем данные (сначала пробуем загрузить с сервера, потом дефолтные)
+            await this.loadExistingBoard();
+            
+            console.log('MoodBoard initialized');
+        } catch (error) {
+            console.error('MoodBoard init failed:', error);
+            throw error;
+        }
+    }
+    
+    /**
+     * Инициализирует CoreMoodBoard
+     */
+    async initCoreMoodBoard() {
+        const canvasSize = this.workspaceManager.getCanvasSize();
+        
+        const moodboardOptions = {
+            boardId: this.options.boardId || 'workspace-board',
+            width: canvasSize.width,
+            height: canvasSize.height,
+            // Цвет фона по умолчанию: #f7fbff (светлый голубовато-белый)
+            backgroundColor: this.options.theme === 'dark' ? 0x2a2a2a : 0xF7FBFF,
+            // Передаем только настройки эндпоинтов для автосохранения
+            saveEndpoint: this.options.saveEndpoint,
+            loadEndpoint: this.options.loadEndpoint
+        };
+        
+        this.coreMoodboard = new CoreMoodBoard(this.canvasContainer, moodboardOptions);
+        await this.coreMoodboard.init();
+    }
+    
+    /**
+     * Инициализирует панель инструментов
+     */
+    initToolbar() {
+        this.toolbar = new Toolbar(
+            this.toolbarContainer, 
+            this.coreMoodboard.eventBus,
+            this.options.theme
+        );
+        
+        // Добавляем функцию для отладки иконок в window
+        if (typeof window !== 'undefined') {
+            window.reloadIcon = (iconName) => this.toolbar.reloadToolbarIcon(iconName);
+        }
+        
+        // Инициализируем индикатор сохранения (с фиксированными настройками)
+        this.saveStatus = new SaveStatus(
+            this.workspaceElement,
+            this.coreMoodboard.eventBus
+        );
+        
+        // Подписываемся на события тулбара
+        this.coreMoodboard.eventBus.on(Events.UI.ToolbarAction, (action) => {
+            this.actionHandler.handleToolbarAction(action);
+        });
+    }
+
+    initTopbar() {
+        this.topbar = new Topbar(
+            this.topbarContainer,
+            this.coreMoodboard.eventBus,
+            this.options.theme
+        );
+
+        // Смена фона доски по выбору цвета в топбаре
+        this.coreMoodboard.eventBus.on(Events.UI.PaintPick, ({ color }) => {
+            if (!color) return;
+            const hex = typeof color === 'string' && color.startsWith('#')
+                ? parseInt(color.slice(1), 16)
+                : color;
+            if (this.coreMoodboard?.pixi?.app?.renderer) {
+                this.coreMoodboard.pixi.app.renderer.backgroundColor = hex;
+            }
+        });
+    }
+
+    initZoombar() {
+        // Рисуем панель зума поверх холста (в том же контейнере, что и topbar)
+        this.zoombar = new ZoomPanel(
+            this.topbarContainer,
+            this.coreMoodboard.eventBus
+        );
+    }
+
+    initMapbar() {
+        // Рисуем панель карты в правом нижнем углу (внутри workspace контейнера)
+        this.mapbar = new MapPanel(
+            this.workspaceElement,
+            this.coreMoodboard.eventBus
+        );
+    }
+
+    initContextMenu() {
+        this.contextMenu = new ContextMenu(
+            this.canvasContainer,
+            this.coreMoodboard.eventBus
+        );
+    }
+    
+    /**
+     * Изменение темы
+     */
+    setTheme(theme) {
+        this.options.theme = theme;
+        
+        // Обновляем тему в менеджерах
+        this.workspaceManager.updateTheme(theme);
+        
+        if (this.toolbar) {
+            this.toolbar.setTheme(theme);
+        }
+        
+        // Обновляем цвет фона MoodBoard
+        if (this.coreMoodboard && this.coreMoodboard.pixi) {
+            this.coreMoodboard.pixi.app.renderer.backgroundColor = 
+                theme === 'dark' ? 0x2a2a2a : 0xF5F5F5;
+        }
+    }
+    
+    /**
+     * Получение данных доски
+     */
+    get boardData() {
+        return this.dataManager ? this.dataManager.boardData : null;
+    }
+    
+    /**
+     * Получение объектов доски
+     */
+    get objects() {
+        return this.dataManager ? this.dataManager.objects : [];
+    }
+    
+    /**
+     * Создание объекта программно
+     */
+    createObject(type, position, properties = {}) {
+        return this.actionHandler ? this.actionHandler.createObject(type, position, properties) : null;
+    }
+    
+    /**
+     * Удаление объекта программно
+     */
+    deleteObject(objectId) {
+        if (this.actionHandler) {
+            this.actionHandler.deleteObject(objectId);
+        }
+    }
+    
+    /**
+     * Очистка доски программно
+     */
+    clearBoard() {
+        return this.actionHandler ? this.actionHandler.clearBoard() : 0;
+    }
+    
+    /**
+     * Экспорт данных программно
+     */
+    exportBoard() {
+        return this.actionHandler ? this.actionHandler.exportBoard() : null;
+    }
+    
+    /**
+     * Загрузка существующей доски с сервера
+     */
+    async loadExistingBoard() {
+        try {
+            const boardId = this.options.boardId;
+            
+            if (!boardId || !this.options.loadEndpoint) {
+                this.dataManager.loadData(this.data);
+                return;
+            }
+            
+            // Пытаемся загрузить с сервера
+            const boardData = await this.coreMoodboard.saveManager.loadBoardData(boardId);
+            
+            if (boardData && boardData.objects) {
+                // Восстанавливаем URL изображений и файлов перед загрузкой (если метод доступен)
+                let restoredData = boardData;
+                if (this.coreMoodboard.apiClient && typeof this.coreMoodboard.apiClient.restoreObjectUrls === 'function') {
+                    try {
+                        restoredData = await this.coreMoodboard.apiClient.restoreObjectUrls(boardData);
+                    } catch (error) {
+                        console.warn('Не удалось восстановить URL объектов:', error);
+                        restoredData = boardData; // Используем исходные данные
+                    }
+                }
+                this.dataManager.loadData(restoredData);
+            } else {
+                this.dataManager.loadData(this.data);
+            }
+            
+        } catch (error) {
+            console.warn('⚠️ Ошибка загрузки доски, создаем новую:', error.message);
+            console.debug('ApiClient доступен:', !!this.coreMoodboard.apiClient);
+            console.debug('Метод restoreObjectUrls доступен:', !!(this.coreMoodboard.apiClient && typeof this.coreMoodboard.apiClient.restoreObjectUrls === 'function'));
+            // Если загрузка не удалась, используем дефолтные данные
+            this.dataManager.loadData(this.data);
+        }
+    }
+    
+    /**
+     * Очистка ресурсов
+     */
+    destroy() {
+        if (this.toolbar) {
+            this.toolbar.destroy();
+        }
+        
+        if (this.saveStatus) {
+            this.saveStatus.destroy();
+        }
+        
+        if (this.textPropertiesPanel) {
+            this.textPropertiesPanel.destroy();
+        }
+
+        if (this.framePropertiesPanel) {
+            this.framePropertiesPanel.destroy();
+        }
+        
+        if (this.notePropertiesPanel) {
+            this.notePropertiesPanel.destroy();
+        }
+        
+        if (this.alignmentGuides) {
+            this.alignmentGuides.destroy();
+        }
+        
+        if (this.commentPopover) {
+            this.commentPopover.destroy();
+        }
+        
+        if (this.coreMoodboard) {
+            this.coreMoodboard.destroy();
+        }
+        
+        if (this.workspaceManager) {
+            this.workspaceManager.destroy();
+        }
+    }
+}

package/src/moodboard/WorkspaceManager.js

@@ -0,0 +1,103 @@
+/**
+ * Управляет HTML структурой рабочего пространства MoodBoard
+ */
+export class WorkspaceManager {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = options;
+        this.workspaceElement = null;
+        this.toolbarContainer = null;
+        this.canvasContainer = null;
+        this.topbarContainer = null;
+    }
+    
+    /**
+     * Создает HTML структуру рабочего пространства
+     */
+    createWorkspaceStructure() {
+        // Очищаем контейнер
+        this.container.innerHTML = '';
+        
+        // Создаем основной элемент workspace
+        this.workspaceElement = document.createElement('div');
+        this.workspaceElement.className = `moodboard-workspace moodboard-workspace--${this.options.theme}`;
+        
+        // Создаем контейнер для тулбара
+        this.toolbarContainer = document.createElement('div');
+        this.toolbarContainer.className = 'moodboard-workspace__toolbar';
+        
+        // Создаем контейнер для canvas
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'moodboard-workspace__canvas';
+        this.canvasContainer.id = 'moodboard-canvas-' + Date.now();
+
+        // Создаем контейнер для верхней панели
+        this.topbarContainer = document.createElement('div');
+        this.topbarContainer.className = 'moodboard-workspace__topbar';
+        
+        // Собираем структуру (toolbar поверх canvas)
+        this.workspaceElement.appendChild(this.canvasContainer);
+        this.workspaceElement.appendChild(this.toolbarContainer);
+        this.workspaceElement.appendChild(this.topbarContainer);
+        this.container.appendChild(this.workspaceElement);
+        
+        return {
+            workspace: this.workspaceElement,
+            toolbar: this.toolbarContainer,
+            canvas: this.canvasContainer,
+            topbar: this.topbarContainer
+        };
+    }
+    
+    /**
+     * Обновляет тему рабочего пространства
+     */
+    updateTheme(theme) {
+        if (this.workspaceElement) {
+            this.workspaceElement.className = `moodboard-workspace moodboard-workspace--${theme}`;
+        }
+    }
+    
+    /**
+     * Показывает уведомление
+     */
+    showNotification(message) {
+        if (!this.workspaceElement) return;
+        
+        const notification = document.createElement('div');
+        notification.className = 'moodboard-notification';
+        notification.textContent = message;
+        
+        this.workspaceElement.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.remove();
+        }, 3000);
+    }
+    
+    /**
+     * Получение размеров canvas контейнера
+     */
+    getCanvasSize() {
+        if (!this.canvasContainer) {
+            return { width: 800, height: 600 };
+        }
+        
+        return {
+            width: this.canvasContainer.clientWidth,
+            height: this.canvasContainer.clientHeight
+        };
+    }
+    
+    /**
+     * Очистка ресурсов
+     */
+    destroy() {
+        if (this.workspaceElement) {
+            this.workspaceElement.remove();
+            this.workspaceElement = null;
+        }
+        this.toolbarContainer = null;
+        this.canvasContainer = null;
+    }
+}

package/src/objects/BaseObject.js

@@ -0,0 +1 @@
+

package/src/objects/CommentObject.js

@@ -0,0 +1,115 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * CommentObject — круглый маркер комментария с равнобедренным хвостиком в юго-западной области
+ * Свойства (properties):
+ * - fill?: number — цвет заливки формы
+ * - stroke?: number — цвет обводки (по умолчанию тот же, что и fill)
+ */
+export class CommentObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        this.width = objectData.width || objectData.properties?.width || 72;
+        this.height = objectData.height || objectData.properties?.height || 72;
+        // Цвет по умолчанию — #B388FF
+        const props = objectData.properties || {};
+        this.fill = (typeof props.fill === 'number') ? props.fill : 0xB388FF;
+        this.stroke = (typeof props.stroke === 'number') ? props.stroke : this.fill;
+
+        // Основная графика формы
+        this.graphics = new PIXI.Graphics();
+        this.graphics._mb = {
+            ...(this.graphics._mb || {}),
+            type: 'comment',
+            properties: { ...objectData.properties }
+        };
+
+        // Текстовая метка внутри (буква "A")
+        this.label = new PIXI.Text('A', {
+            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial',
+            fontSize: 24,
+            fontWeight: '700',
+            fill: 0xFAFAFA,
+            align: 'center',
+            resolution: (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
+        });
+        this.label.anchor.set(0.5);
+        this.graphics.addChild(this.label);
+
+        this._redraw();
+    }
+
+    getPixi() {
+        return this.graphics;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(12, size.width || this.width);
+        this.height = Math.max(12, size.height || this.height);
+        this._redraw();
+    }
+
+    _redraw() {
+        const g = this.graphics;
+        const w = this.width;
+        const h = this.height;
+        g.clear();
+
+        // Круг
+        const cx = w / 2;
+        const cy = h / 2;
+        const r = Math.max(6, Math.min(w, h) / 2 - 4);
+
+        // Помощник: точка на окружности с учётом экранной оси Y (вниз положительно)
+        const pOnCircle = (deg, radius) => {
+            const rad = (deg * Math.PI) / 180;
+            return {
+                x: cx + radius * Math.cos(rad),
+                y: cy - radius * Math.sin(rad)
+            };
+        };
+
+        // Хвостик: равнобедренный треугольник, направленный на 225° (юго-запад)
+        const dir = 225; // центральное направление
+        const baseHalf = 16; // половина угла основания
+        const baseR = r * 0.94; // основание внутри круга, чтобы скрывалось
+        const apexExtra = r * 0.45; // длина хвостика за пределы круга
+
+        const b1 = pOnCircle(dir - baseHalf, baseR);
+        const b2 = pOnCircle(dir + baseHalf, baseR);
+        let apex = pOnCircle(dir, r + apexExtra);
+        // Гарантируем, что вершина остаётся в пределах bbox объекта
+        apex.x = Math.max(2, Math.min(w - 2, apex.x));
+        apex.y = Math.max(2, Math.min(h - 2, apex.y));
+
+        // 1) Рисуем треугольник хвостика (без обводки)
+        g.beginFill(this.fill, 1);
+        g.moveTo(b1.x, b1.y);
+        g.lineTo(apex.x, apex.y);
+        g.lineTo(b2.x, b2.y);
+        g.closePath();
+        g.endFill();
+
+        // 2) Круг поверх
+        g.lineStyle(2, this.stroke, 1);
+        g.beginFill(this.fill, 1);
+        g.drawCircle(cx, cy, r);
+        g.endFill();
+
+        // 3) Внутренний круг (на ~20% меньше)
+        const innerR = Math.max(1, r * 0.8);
+        g.lineStyle(0);
+        g.beginFill(0x424242, 1);
+        g.drawCircle(cx, cy, innerR);
+        g.endFill();
+
+        // 4) Текстовая метка в центре
+        const targetFontSize = Math.round(innerR * 0.9);
+        this.label.style.fill = 0xFAFAFA;
+        this.label.style.fontSize = targetFontSize;
+        this.label.position.set(cx, cy);
+    }
+}
+
+