@sequent-org/moodboard 1.0.0

package/src/grid/CrossGrid.js

@@ -0,0 +1,75 @@
+import * as PIXI from 'pixi.js';
+import { BaseGrid } from './BaseGrid.js';
+
+/**
+ * Сетка с крестиками (плюсами) в узлах
+ */
+export class CrossGrid extends BaseGrid {
+    constructor(options = {}) {
+        super(options);
+        this.type = 'cross';
+
+        // Размер половины креста от центра до конца линии
+        this.crossHalfSize = options.crossHalfSize || 4;
+        this.crossLineWidth = options.crossLineWidth || this.lineWidth || 1;
+
+        // По умолчанию делаем цвет крестиков серым
+        if (options.color == null) {
+            this.color = 0xB0B0B0;
+        }
+    }
+
+    /**
+     * Рендер сетки — рисуем крестики по узлам
+     */
+    createVisual() {
+        const g = this.graphics;
+        // Прозрачность задаем через graphics.alpha из BaseGrid; штрих рисуем с полным альфа
+        g.lineStyle(this.crossLineWidth, this.color, 1);
+
+        const hs = this.crossHalfSize;
+
+        for (let x = 0; x <= this.width; x += this.size) {
+            for (let y = 0; y <= this.height; y += this.size) {
+                // Горизонтальная часть креста
+                g.moveTo(x - hs, y);
+                g.lineTo(x + hs, y);
+                // Вертикальная часть креста
+                g.moveTo(x, y - hs);
+                g.lineTo(x, y + hs);
+            }
+        }
+    }
+
+    /**
+     * Привязка — как у линейной/точечной сетки: к ближайшему узлу
+     */
+    calculateSnapPoint(x, y) {
+        const snapX = Math.round(x / this.size) * this.size;
+        const snapY = Math.round(y / this.size) * this.size;
+        return { x: snapX, y: snapY };
+    }
+
+    /**
+     * Изменение размеров креста
+     */
+    setCrossHalfSize(halfSize) {
+        this.crossHalfSize = Math.max(1, halfSize);
+        this.updateVisual();
+    }
+
+    setCrossLineWidth(w) {
+        this.crossLineWidth = Math.max(1, w);
+        this.updateVisual();
+    }
+
+    serialize() {
+        return {
+            ...super.serialize(),
+            crossHalfSize: this.crossHalfSize,
+            crossLineWidth: this.crossLineWidth
+        };
+    }
+}
+
+

package/src/grid/DotGrid.js

@@ -0,0 +1,148 @@
+import { BaseGrid } from './BaseGrid.js';
+
+/**
+ * Точечная сетка
+ */
+export class DotGrid extends BaseGrid {
+    constructor(options = {}) {
+        super(options);
+        this.type = 'dot';
+        
+        // Настройки точек
+        this.dotSize = options.dotSize || 2;
+        this.dotStyle = options.dotStyle || 'circle'; // 'circle' | 'square'
+        this.highlightIntersections = options.highlightIntersections ?? true;
+        // Пересечения делаем такими же, как обычные точки по умолчанию
+        this.intersectionSize = options.intersectionSize || this.dotSize;
+        this.intersectionColor = options.intersectionColor || this.color;
+    }
+    
+    /**
+     * Создает визуальное представление точечной сетки
+     */
+    createVisual() {
+        // Рисуем обычные точки
+        this.drawDots();
+        
+        // Выделяем пересечения (каждые N точек)
+        if (this.highlightIntersections) {
+            this.drawIntersections();
+        }
+    }
+    
+    /**
+     * Рисует основные точки сетки
+     */
+    drawDots() {
+        this.graphics.beginFill(this.color);
+        
+        for (let x = 0; x <= this.width; x += this.size) {
+            for (let y = 0; y <= this.height; y += this.size) {
+                this.drawDot(x, y, this.dotSize);
+            }
+        }
+        
+        this.graphics.endFill();
+    }
+    
+    /**
+     * Рисует выделенные пересечения (каждые 5 точек)
+     */
+    drawIntersections() {
+        const intersectionStep = this.size * 5;
+        
+        // Используем те же параметры, что и у обычных точек
+        this.graphics.beginFill(this.color);
+        
+        for (let x = 0; x <= this.width; x += intersectionStep) {
+            for (let y = 0; y <= this.height; y += intersectionStep) {
+                this.drawDot(x, y, this.dotSize);
+            }
+        }
+        
+        this.graphics.endFill();
+    }
+    
+    /**
+     * Рисует одну точку
+     */
+    drawDot(x, y, size) {
+        if (this.dotStyle === 'circle') {
+            this.graphics.drawCircle(x, y, size);
+        } else if (this.dotStyle === 'square') {
+            const half = size;
+            this.graphics.drawRect(x - half, y - half, half * 2, half * 2);
+        }
+    }
+    
+    /**
+     * Вычисляет точку привязки для точечной сетки
+     */
+    calculateSnapPoint(x, y) {
+        const snapX = Math.round(x / this.size) * this.size;
+        const snapY = Math.round(y / this.size) * this.size;
+        
+        return { x: snapX, y: snapY };
+    }
+    
+    /**
+     * Проверяет, находится ли точка рядом с точкой сетки
+     */
+    isNearGridPoint(x, y) {
+        const nearest = this.calculateSnapPoint(x, y);
+        const distance = Math.sqrt(
+            Math.pow(x - nearest.x, 2) + Math.pow(y - nearest.y, 2)
+        );
+        
+        return distance <= this.snapTolerance;
+    }
+    
+    /**
+     * Устанавливает размер точек
+     */
+    setDotSize(size) {
+        this.dotSize = Math.max(1, size);
+        // Синхронизируем размер точек пересечений
+        this.intersectionSize = this.dotSize;
+        this.updateVisual();
+    }
+    
+    /**
+     * Устанавливает стиль точек
+     */
+    setDotStyle(style) {
+        if (['circle', 'square'].includes(style)) {
+            this.dotStyle = style;
+            this.updateVisual();
+        }
+    }
+    
+    /**
+     * Включает/выключает выделение пересечений
+     */
+    setHighlightIntersections(enabled) {
+        this.highlightIntersections = enabled;
+        this.updateVisual();
+    }
+
+    // Делаем цвет пересечений таким же, как основной цвет
+    setColor(color) {
+        super.setColor(color);
+        this.intersectionColor = this.color;
+        this.updateVisual();
+    }
+    
+    /**
+     * Сериализует настройки точечной сетки
+     */
+    serialize() {
+        return {
+            ...super.serialize(),
+            dotSize: this.dotSize,
+            dotStyle: this.dotStyle,
+            highlightIntersections: this.highlightIntersections,
+            intersectionSize: this.intersectionSize,
+            intersectionColor: this.intersectionColor
+        };
+    }
+}

package/src/grid/GridFactory.js

@@ -0,0 +1,173 @@
+import { LineGrid } from './LineGrid.js';
+import { DotGrid } from './DotGrid.js';
+import { CrossGrid } from './CrossGrid.js';
+
+/**
+ * Фабрика для создания различных типов сеток
+ */
+export class GridFactory {
+    /**
+     * Регистрируемые типы сеток
+     */
+    static gridTypes = {
+        'line': LineGrid,
+        'dot': DotGrid,
+        'cross': CrossGrid
+    };
+    
+    /**
+     * Создает сетку указанного типа
+     * @param {string} type - тип сетки
+     * @param {Object} options - настройки сетки
+     * @returns {BaseGrid} экземпляр сетки
+     */
+    static createGrid(type, options = {}) {
+        const GridClass = this.gridTypes[type];
+        
+        if (!GridClass) {
+            throw new Error(`Unknown grid type: ${type}`);
+        }
+        
+        return new GridClass(options);
+    }
+    
+    /**
+     * Создает сетку из сериализованных данных
+     * @param {Object} data - сериализованные данные сетки
+     * @returns {BaseGrid} экземпляр сетки
+     */
+    static fromData(data) {
+        const { type, ...options } = data;
+        return this.createGrid(type, options);
+    }
+    
+    /**
+     * Регистрирует новый тип сетки
+     * @param {string} type - название типа
+     * @param {Class} GridClass - класс сетки
+     */
+    static registerGridType(type, GridClass) {
+        this.gridTypes[type] = GridClass;
+    }
+    
+    /**
+     * Получает список доступных типов сеток
+     * @returns {Array<string>} массив названий типов
+     */
+    static getAvailableTypes() {
+        return Object.keys(this.gridTypes);
+    }
+    
+    /**
+     * Получает настройки по умолчанию для типа сетки
+     * @param {string} type - тип сетки
+     * @returns {Object} настройки по умолчанию
+     */
+    static getDefaultOptions(type) {
+        const defaults = {
+            line: {
+                enabled: true,
+                size: 20,
+                color: 0xE0E0E0,
+                opacity: 0.5,
+                lineWidth: 1,
+                showSubGrid: false,
+                subGridDivisions: 4
+            },
+            dot: {
+                enabled: true,
+                size: 20,
+                color: 0xE0E0E0,
+                opacity: 0.5,
+                dotSize: 2,
+                dotStyle: 'circle',
+                highlightIntersections: true
+            },
+            cross: {
+                enabled: true,
+                size: 40,
+                color: 0xB0B0B0,
+                opacity: 0.5,
+                crossHalfSize: 4,
+                crossLineWidth: 1
+            }
+        };
+        
+        return defaults[type] || {};
+    }
+    
+    /**
+     * Создает пресет популярных настроек сетки
+     * @param {string} presetName - название пресета
+     * @returns {Object} настройки сетки
+     */
+    static createPreset(presetName) {
+        const presets = {
+            // Линейные сетки
+            'fine-line': {
+                type: 'line',
+                size: 10,
+                color: 0xF0F0F0,
+                opacity: 0.3,
+                showSubGrid: true,
+                subGridDivisions: 2
+            },
+            'standard-line': {
+                type: 'line',
+                size: 20,
+                color: 0xE0E0E0,
+                opacity: 0.5
+            },
+            'coarse-line': {
+                type: 'line',
+                size: 50,
+                color: 0xD0D0D0,
+                opacity: 0.7
+            },
+            
+            // Точечные сетки
+            'fine-dots': {
+                type: 'dot',
+                size: 10,
+                color: 0xC0C0C0,
+                opacity: 0.6,
+                dotSize: 1
+            },
+            'standard-dots': {
+                type: 'dot',
+                size: 20,
+                color: 0xB0B0B0,
+                opacity: 0.7,
+                dotSize: 2
+            },
+            'bold-dots': {
+                type: 'dot',
+                size: 30,
+                color: 0xA0A0A0,
+                opacity: 0.8,
+                dotSize: 3,
+                dotStyle: 'square'
+            },
+            
+            // (изометрическая сетка удалена)
+        };
+        
+        const preset = presets[presetName];
+        if (!preset) {
+            throw new Error(`Unknown preset: ${presetName}`);
+        }
+        
+        return this.createGrid(preset.type, preset);
+    }
+    
+    /**
+     * Получает список доступных пресетов
+     * @returns {Array<string>} названия пресетов
+     */
+    static getAvailablePresets() {
+        return [
+            'fine-line', 'standard-line', 'coarse-line',
+            'fine-dots', 'standard-dots', 'bold-dots'
+        ];
+    }
+}

package/src/grid/LineGrid.js

@@ -0,0 +1,115 @@
+import { BaseGrid } from './BaseGrid.js';
+
+/**
+ * Линейная прямоугольная сетка
+ */
+export class LineGrid extends BaseGrid {
+    constructor(options = {}) {
+        super(options);
+        this.type = 'line';
+        
+        // Дополнительные настройки для линейной сетки
+        this.showSubGrid = options.showSubGrid ?? false;
+        this.subGridDivisions = options.subGridDivisions || 4;
+        this.subGridColor = options.subGridColor || 0xF0F0F0;
+        this.subGridOpacity = options.subGridOpacity || 0.3;
+    }
+    
+    /**
+     * Создает визуальное представление линейной сетки
+     */
+    createVisual() {
+        this.graphics.lineStyle(this.lineWidth, this.color, 1);
+        
+        // Основные линии сетки
+        this.drawMainGrid();
+        
+        // Дополнительная подсетка
+        if (this.showSubGrid) {
+            this.drawSubGrid();
+        }
+    }
+    
+    /**
+     * Рисует основную сетку
+     */
+    drawMainGrid() {
+        // Вертикальные линии
+        for (let x = 0; x <= this.width; x += this.size) {
+            this.graphics.moveTo(x, 0);
+            this.graphics.lineTo(x, this.height);
+        }
+        
+        // Горизонтальные линии
+        for (let y = 0; y <= this.height; y += this.size) {
+            this.graphics.moveTo(0, y);
+            this.graphics.lineTo(this.width, y);
+        }
+    }
+    
+    /**
+     * Рисует подсетку (более мелкие линии)
+     */
+    drawSubGrid() {
+        const subSize = this.size / this.subGridDivisions;
+        
+        this.graphics.lineStyle(1, this.subGridColor, this.subGridOpacity);
+        
+        // Вертикальные подлинии
+        for (let x = subSize; x < this.width; x += subSize) {
+            // Пропускаем основные линии
+            if (x % this.size !== 0) {
+                this.graphics.moveTo(x, 0);
+                this.graphics.lineTo(x, this.height);
+            }
+        }
+        
+        // Горизонтальные подлинии
+        for (let y = subSize; y < this.height; y += subSize) {
+            // Пропускаем основные линии
+            if (y % this.size !== 0) {
+                this.graphics.moveTo(0, y);
+                this.graphics.lineTo(this.width, y);
+            }
+        }
+    }
+    
+    /**
+     * Вычисляет точку привязки для линейной сетки
+     */
+    calculateSnapPoint(x, y) {
+        const snapX = Math.round(x / this.size) * this.size;
+        const snapY = Math.round(y / this.size) * this.size;
+        
+        return { x: snapX, y: snapY };
+    }
+    
+    /**
+     * Включает/выключает подсетку
+     */
+    setSubGridEnabled(enabled) {
+        this.showSubGrid = enabled;
+        this.updateVisual();
+    }
+    
+    /**
+     * Устанавливает количество делений подсетки
+     */
+    setSubGridDivisions(divisions) {
+        this.subGridDivisions = Math.max(2, divisions);
+        this.updateVisual();
+    }
+    
+    /**
+     * Сериализует настройки линейной сетки
+     */
+    serialize() {
+        return {
+            ...super.serialize(),
+            showSubGrid: this.showSubGrid,
+            subGridDivisions: this.subGridDivisions,
+            subGridColor: this.subGridColor,
+            subGridOpacity: this.subGridOpacity
+        };
+    }
+}

package/src/index.js

@@ -0,0 +1,2 @@
+// Единственный экспорт пакета - готовый MoodBoard с UI
+export { MoodBoard } from './moodboard/MoodBoard.js';

package/src/moodboard/ActionHandler.js

@@ -0,0 +1,114 @@
+/**
+ * Обрабатывает действия пользователя в MoodBoard
+ */
+export class ActionHandler {
+    constructor(dataManager, workspaceManager) {
+        this.dataManager = dataManager;
+        this.workspaceManager = workspaceManager;
+    }
+    
+    /**
+     * Обрабатывает действия тулбара
+     */
+    handleToolbarAction(action) {
+        switch (action.type) {
+            case 'frame':
+            case 'simple-text':
+            case 'text':
+            case 'note':
+            case 'shape':
+            case 'drawing':
+            case 'emoji':
+            case 'image':
+            case 'comment':
+            case 'file':
+                // Передаем imageId как extraData для изображений, fileId для файлов
+                const extraData = action.imageId ? { imageId: action.imageId } : 
+                                 action.fileId ? { fileId: action.fileId } : {};
+                return this.handleCreateObject(action.type, action.position, action.properties || {}, extraData);
+
+            case 'delete-object':
+                if (action.id) {
+                    this.dataManager.deleteObject(action.id);
+                }
+                return null;
+                
+            case 'clear':
+                return this.handleClearBoard();
+                
+            case 'export':
+                return this.handleExportBoard();
+                
+            default:
+                console.warn('Unknown toolbar action:', action.type);
+                return null;
+        }
+    }
+    
+    /**
+     * Обрабатывает создание объекта
+     */
+    handleCreateObject(type, position, properties = {}, extraData = {}) {
+        const objectData = this.dataManager.createObject(type, position, properties, extraData);
+        return objectData;
+    }
+    
+    /**
+     * Обрабатывает очистку доски
+     */
+    handleClearBoard() {
+        const clearedCount = this.dataManager.clearBoard();
+        
+        if (clearedCount > 0) {
+            this.workspaceManager.showNotification(`Cleared ${clearedCount} objects`);
+        } else {
+            this.workspaceManager.showNotification('Board is already empty');
+        }
+        
+        return clearedCount;
+    }
+    
+    /**
+     * Обрабатывает экспорт доски
+     */
+    handleExportBoard() {
+        const data = this.dataManager.exportBoardData();
+        
+        if (data) {
+            console.log('Board data:', data);
+            this.workspaceManager.showNotification('Board data exported to console');
+        } else {
+            this.workspaceManager.showNotification('Failed to export board data');
+        }
+        
+        return data;
+    }
+    
+    /**
+     * Обрабатывает программное создание объекта
+     */
+    createObject(type, position, properties = {}, extraData = {}) {
+        return this.dataManager.createObject(type, position, properties, extraData);
+    }
+    
+    /**
+     * Обрабатывает программное удаление объекта
+     */
+    deleteObject(objectId) {
+        return this.dataManager.deleteObject(objectId);
+    }
+    
+    /**
+     * Обрабатывает программную очистку доски
+     */
+    clearBoard() {
+        return this.handleClearBoard();
+    }
+    
+    /**
+     * Обрабатывает программный экспорт
+     */
+    exportBoard() {
+        return this.handleExportBoard();
+    }
+}